From f1c791eb123ace140066e594b0348c64e893da23 Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Sun, 21 Jan 2024 22:37:39 +0100
Subject: [PATCH] fix(core): update

---
 ts_web/00_commitinfo_data.ts  |  2 +-
 ts_web/elements/dees-icon.ts  |  2 ++
 ts_web/elements/dees-table.ts | 49 ++++++++++++++++++++++++++++++++---
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 9094d14..1586934 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.256',
+  version: '1.0.257',
   description: 'website for lossless.com'
 }
diff --git a/ts_web/elements/dees-icon.ts b/ts_web/elements/dees-icon.ts
index f26d95a..d490d3b 100644
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@@ -52,6 +52,7 @@ import {
   faFileInvoiceDollar as faFileInvoiceDollarSolid,
   faGear as faGearSolid,
   faGrip as faGripSolid,
+  faMagnifyingGlass as faMagnifyingGlassSolid,
   faMessage as faMessageSolid,
   faMoneyCheckDollar as faMoneyCheckDollarSolid,
   faMugHot as faMugHotSolid,
@@ -97,6 +98,7 @@ export const faIcons = {
   fileInvoiceDoller: faFileInvoiceDollarSolid,
   gear: faGearSolid,
   grip: faGripSolid,
+  magnifyingGlass: faMagnifyingGlassSolid,
   message: faMessageRegular,
   messageSolid: faMessageSolid,
   moneyCheckDollar: faMoneyCheckDollarSolid,
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index 14b3162..d334f95 100644
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -117,12 +117,21 @@ export class DeesTable<T> extends DeesElement {
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
   // end dees-form compatibility -----------------------------------------
 
+  /**
+   * What does a row of data represent?
+   */
   @property({
     type: String,
     reflect: true,
   })
   public dataName: string;
 
+
+  @property({
+    type: Boolean,
+  })
+  searchable: boolean = true;
+
   @property({
     type: Array,
   })
@@ -203,11 +212,16 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .headerActions {
+        user-select: none;
+        display: flex;
+        flex-direction: row;
         margin-left: auto;
       }
       .headerAction {
         display: flex;
+        flex-direction: row;
         color: ${cssManager.bdTheme('#333', '#ccc')};
+        margin-left: 16px;
       }
 
       .headerAction:hover {
@@ -223,9 +237,17 @@ export class DeesTable<T> extends DeesElement {
         display: grid;
         grid-gap: 16px;
         grid-template-columns: 1fr 200px;
-        margin: 0px -16px;
+        margin-top: 16px;
         padding: 0px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
+        border-radius: 8px;
+      }
+
+      .searchGrid.hidden {
+        height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        margin-top: 0px;
       }
 
       table,
@@ -419,7 +441,7 @@ export class DeesTable<T> extends DeesElement {
           </div>
         </div>
         <div class="headingSeparation"></div>
-        <div class="searchGrid">
+        <div class="searchGrid hidden">
           <dees-input-text
             .label=${'lucene syntax search'}
             .description=${`
@@ -641,11 +663,30 @@ export class DeesTable<T> extends DeesElement {
     `;
   }
 
-  public async firstUpdated() {}
+  public async firstUpdated() {
+    
+  }
 
   public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.updated(changedProperties);
     this.determineColumnWidths();
+    if (this.searchable) {
+      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      if (!existing) {
+        this.dataActions.unshift({
+          name: 'Search',
+          iconName: 'magnifyingGlass',
+          type: ['header'],
+          actionFunc: async () => {
+            console.log('open search');
+            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
+            searchGrid.classList.toggle('hidden');
+          }
+        });
+        console.log(this.dataActions);
+        this.requestUpdate();
+      };
+    }
   }
 
   public async determineColumnWidths() {