No issue - introduced alerts for the cba-table (#68)

browser-automation · Jan 2, 2024 · ed5611b · ed5611b
1 parent f41f61c
commit ed5611b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/src/cba-table/cba-table.js b/src/cba-table/cba-table.js
@@ -7,14 +7,21 @@ 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.
  */
 
 /**
  * @typedef  {object} TableItem
  * @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
@@ -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
@@ -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({