@design.estate/dees-catalog 3.99.0 → 3.99.1

package/ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -116,6 +116,15 @@ export class DeesTable<T> extends DeesElement {
     type: Array,
   })
   accessor dataActions: ITableAction<T>[] = [];
+  private readonly __searchAction: ITableAction<T> = {
+    name: 'Search',
+    iconName: 'lucide:Search',
+    type: ['header'],
+    actionFunc: async () => {
+      const searchGrid = this.shadowRoot!.querySelector('.searchGrid');
+      searchGrid!.classList.toggle('hidden');
+    },
+  };
 
   // schema-first columns API
   @property({ attribute: false })
@@ -854,7 +863,7 @@ export class DeesTable<T> extends DeesElement {
                 ${this.renderSortIndicator(col)}
               </th>`;
           })}
-        ${this.dataActions && this.dataActions.length > 0
+        ${this.__getEffectiveDataActions().length > 0
           ? html`<th class="actionsCol">Actions</th>`
           : html``}
       </tr>
@@ -873,7 +882,7 @@ export class DeesTable<T> extends DeesElement {
                     @input=${(e: Event) => this.setColumnFilter(key, (e.target as HTMLInputElement).value)} />
                 </th>`;
               })}
-            ${this.dataActions && this.dataActions.length > 0
+            ${this.__getEffectiveDataActions().length > 0
               ? html`<th></th>`
               : html``}
           </tr>`
@@ -1512,21 +1521,6 @@ export class DeesTable<T> extends DeesElement {
       this.__syncFloatingHeader();
     }
     if (this.searchable) {
-      const existing = this.dataActions.find((actionArg) => actionArg.type?.includes('header') && actionArg.name === 'Search');
-      if (!existing) {
-        this.dataActions.unshift({
-          name: 'Search',
-          iconName: 'lucide:Search',
-          type: ['header'],
-          actionFunc: async () => {
-            console.log('open search');
-            const searchGrid = this.shadowRoot!.querySelector('.searchGrid');
-            searchGrid!.classList.toggle('hidden');
-          }
-        });
-        console.log(this.dataActions);
-        this.requestUpdate();
-      };
       // wire search inputs
       this.wireSearchInputs();
     }
@@ -1595,7 +1589,9 @@ export class DeesTable<T> extends DeesElement {
       const width = window.getComputedStyle(cell).width;
       if (cell.textContent.includes('Actions')) {
         const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type?.includes('inRow')).length * 36;
+          this.__getEffectiveDataActions().filter((actionArg) =>
+            actionArg.type?.includes('inRow')
+          ).length * 36;
         cell.style.width = `${Math.max(neededWidth, 68)}px`;
       } else {
         cell.style.width = width;
@@ -2121,7 +2117,7 @@ export class DeesTable<T> extends DeesElement {
       this.startEditing(cell.item, cell.col);
       return;
     }
-    const dblAction = this.dataActions.find(
+    const dblAction = this.__getEffectiveDataActions().find(
       (action) =>
         action.type?.includes('doubleClick')
         && this.isActionRelevant(action, cell.item)
@@ -2349,9 +2345,21 @@ export class DeesTable<T> extends DeesElement {
     );
   }
 
+  private __getEffectiveDataActions(): ITableAction<T>[] {
+    if (
+      !this.searchable
+      || this.dataActions.some((actionArg) =>
+        actionArg.type?.includes('header') && actionArg.name === 'Search'
+      )
+    ) {
+      return this.dataActions;
+    }
+    return [this.__searchAction, ...this.dataActions];
+  }
+
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
-    for (const action of this.dataActions) {
+    for (const action of this.__getEffectiveDataActions()) {
       if (!action.type?.includes(typeArg)) continue;
       actions.push(action);
     }