From ed5611bf2fe4e2d99ba72cbcb2268848ac2a8674 Mon Sep 17 00:00:00 2001
From: Manvel Saroyan <saroyanm@gmail.com>
Date: Tue, 2 Jan 2024 17:47:38 +0400
Subject: [PATCH] No issue - introduced alerts for the cba-table (#68)

---
 src/cba-table/cba-table.js     | 25 ++++++++++++++++++++-----
 src/cba-table/shadow.css       |  8 +++++++-
 tests/smoke/cba-table/smoke.js | 10 ++++++++++
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/cba-table/cba-table.js b/src/cba-table/cba-table.js
index e77bab3..ab1d1ea 100644
--- a/src/cba-table/cba-table.js
+++ b/src/cba-table/cba-table.js
@@ -7,7 +7,13 @@ const constructableCSS = new ConstructableCSS(shadowCSS);
 
 
 /**
- * @typedef  {{[key: string]: string}} TableItemTexts
+ * @typedef {{[key: string]: string}} TableItemTexts
+ */
+
+/**
+ * @typedef  {object} Alert - alert object.
+ * @property {string} [text] - alert text.
+ * @property {"error"} [type] - alert type.
  */
 
 /**
@@ -15,6 +21,7 @@ const constructableCSS = new ConstructableCSS(shadowCSS);
  * @property {string} [id] - unique id of the row.
  * @property {TableItemTexts} texts - texts for each cell. Key is column name.
  * @property {any} data - payload.
+ * @property {Alert} alert - highlight row.
  */
 
 export class Table extends HTMLElement
@@ -514,14 +521,22 @@ export class Table extends HTMLElement
    */
   _renderBody()
   {
+    /**
+     * @param {TableItem} rowData - row data.
+     */
     const createRow = (rowData) =>
     {
-      const {id, selected} = rowData;
-      const selectedClass = selected ? "highlight" : undefined;
-      return html`<tr data-id="${id}" class=${ifDefined(selectedClass)} draggable="${ifDefined(this.reorder)}" tabindex=${selected ? 0 : -1}>${this.columns.map((name) =>
+      const {id, selected, alert} = rowData;
+      const classes = [];
+      if (selected)
+        classes.push("highlight");
+      if (alert && alert.type === "error")
+        classes.push("alert");
+      const alertText = alert && alert.text ? alert.text : "";
+      return html`<tr data-id="${id}" class=${ifDefined(classes.join(" "))} draggable="${ifDefined(this.reorder)}" tabindex=${selected ? 0 : -1}>${this.columns.map((name) =>
       {
         const text = this._getText(rowData, name);
-        return html`<td data-id="${name}" title="${text}">${text}</td>`;
+        return html`<td data-id="${name}" title="${alertText || text}">${text}</td>`;
       })}</tr>`;
     };
     render(html`${this._data.map(createRow)}`, this.tableBodyElem);
diff --git a/src/cba-table/shadow.css b/src/cba-table/shadow.css
index 51a5847..be3f190 100644
--- a/src/cba-table/shadow.css
+++ b/src/cba-table/shadow.css
@@ -2,6 +2,7 @@
 {
   --hover-primary: #eaeaea;
   --hover-secondary: #e4e4e4;
+  --color-alert: #f57777b3;
   --color-primary: #222222;
   --color-border: #aaaaaa;
   --color-selected: #cccccc;
@@ -118,6 +119,11 @@ tbody tr.highlight
   outline: none;
 }
 
+tbody tr.alert
+{
+  background-color: var(--color-alert);
+}
+
 tbody tr
 {
   outline: none;
@@ -129,7 +135,7 @@ tbody tr:focus
   filter: drop-shadow(0 0 4px var(--color-focus));
 }
 
-tbody tr:not(.highlight):hover
+tbody tr:not(.highlight):not(.alert):hover
 {
   background: linear-gradient(var(--hover-primary) 0%,
                               var(--hover-primary) 50%,
diff --git a/tests/smoke/cba-table/smoke.js b/tests/smoke/cba-table/smoke.js
index 5f65a8b..bc4235b 100644
--- a/tests/smoke/cba-table/smoke.js
+++ b/tests/smoke/cba-table/smoke.js
@@ -1,4 +1,7 @@
 const cbaTable = document.querySelector("cba-table");
+/**
+ * @type {import("../../../src/cba-table/cba-table").TableItem[]}
+ */
 const items = [];
 
 items.push({
@@ -8,6 +11,13 @@ items.push({
   type: "Event"
 });
 
+items.push({
+  id: "alert-item",
+  values: ["Alert", "Value alert"],
+  type: "Event alert",
+  alert: {type: "error", text: "This is an alert"},
+});
+
 for (let index = 0; index < 30; index++)
 {
   items.push({