@design.estate/dees-catalog 1.0.202 → 1.0.204

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.202",
+  "version": "1.0.204",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.202',
+  version: '1.0.204',
   description: 'website for lossless.com'
 }

package/ts_web/elements/dees-table.demo.ts

@@ -23,6 +23,7 @@ export const demoFunc = () => html`
     <dees-table
       heading1="Current Account Statement"
       heading2="Bunq - Payment Account 2 - April 2021"
+      .editableFields="${['description']}"
       .data=${[
         {
           date: '2021-04-01',

package/ts_web/elements/dees-table.ts

@@ -37,7 +37,15 @@ export interface ITableAction<T = any> {
   /**
    * the type of the action
    */
-  type: ('inRow' | 'contextmenu' | 'doubleClick' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
+  type: (
+    | 'inRow'
+    | 'contextmenu'
+    | 'doubleClick'
+    | 'footer'
+    | 'header'
+    | 'preview'
+    | 'keyCombination'
+  )[];
   /**
    * allows to check if the action is relevant for the given item
    * @param itemArg
@@ -96,6 +104,11 @@ export class DeesTable<T> extends DeesElement {
   })
   public selectedDataRow: T;
 
+  @property({
+    type: Array,
+  })
+  public editableFields: string[] = [];
+
   public files: File[] = [];
   public fileWeakMap = new WeakMap();
 
@@ -185,7 +198,7 @@ export class DeesTable<T> extends DeesElement {
       tr:hover {
         cursor: pointer;
       }
-      tr:hover .innerCellContainer {
+      tr:hover td {
         background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
       }
       tr:first-child:hover {
@@ -194,7 +207,7 @@ export class DeesTable<T> extends DeesElement {
       tr:first-child:hover .innerCellContainer {
         background: none;
       }
-      tr.selected .innerCellContainer {
+      tr.selected td {
         background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
       }
       th {
@@ -202,11 +215,17 @@ export class DeesTable<T> extends DeesElement {
       }
       th,
       td {
-        padding: 3px 0px;
+        position: relative;
+        padding: 0px;
         border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
       }
       .innerCellContainer {
+        min-height: 36px;
+        position: relative;
+        height: 100%;
+        width: 100%;
         padding: 6px 8px;
+        line-height: 24px;
       }
       th:first-child .innerCellContainer,
       td:first-child .innerCellContainer {
@@ -220,6 +239,23 @@ export class DeesTable<T> extends DeesElement {
       td:last-child {
         border-right: none;
       }
+      td input {
+        width: 100%;
+        height: 100%;
+        outline: none;
+        border: 2px solid #fa6101;
+        top: 0px;
+        bottom: 0px;
+        right: 0px;
+        left: 0px;
+        position: absolute;
+        background: #00000060;
+        color: inherit;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        padding: 0px 6px
+      }
 
       .action {
         margin: -8px 0px;
@@ -383,27 +419,39 @@ export class DeesTable<T> extends DeesElement {
                           }
                         }}
                         @contextmenu=${async (eventArg: MouseEvent) => {
-                          DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
-                            const menuItem: plugins.tsclass.website.IMenuItem = {
-                              name: action.name,
-                              iconName: action.iconName as any,
-                              action: async () => {
-                                await action.actionFunc(itemArg);
-                                return null;
-                              }
-                            }
-                            return menuItem;
-                          }));
+                          DeesContextmenu.openContextMenuWithOptions(
+                            eventArg,
+                            this.getActionsForType('contextmenu').map((action) => {
+                              const menuItem: plugins.tsclass.website.IMenuItem = {
+                                name: action.name,
+                                iconName: action.iconName as any,
+                                action: async () => {
+                                  await action.actionFunc(itemArg);
+                                  return null;
+                                },
+                              };
+                              return menuItem;
+                            })
+                          );
                         }}
                         class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
                       >
                         ${headings.map(
                           (headingArg) => html`
-                            <td @dblclick=${() => {
-                              const wantedAction = this.dataActions.find((actionArg) => actionArg.type.includes('doubleClick'));
-                              if (!wantedAction) return;
-                              wantedAction.actionFunc(itemArg);
-                            }}>
+                            <td
+                              @dblclick=${(e: Event) => {
+                                if (this.editableFields.includes(headingArg)) {
+                                  this.handleCellEditing(e, itemArg, headingArg);
+                                } else {
+                                  const wantedAction = this.dataActions.find((actionArg) =>
+                                    actionArg.type.includes('doubleClick')
+                                  );
+                                  if (wantedAction) {
+                                    wantedAction.actionFunc(itemArg);
+                                  }
+                                }
+                              }}
+                            >
                               <div class="innerCellContainer">${transformedItem[headingArg]}</div>
                             </td>
                           `
@@ -480,4 +528,29 @@ export class DeesTable<T> extends DeesElement {
     }
     return actions;
   }
+
+  handleCellEditing(event: Event, item: T, key: string) {
+    const target = event.target as HTMLElement;
+
+    // Create an input element
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = (item[key] as unknown as string) || '';
+
+    // When the input loses focus or the Enter key is pressed, update the data
+    input.addEventListener('blur', () => {
+      item[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+      target.innerHTML = input.value; // Update the cell's display
+    });
+    input.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        input.blur(); // This will trigger the blur event handler above
+      }
+    });
+
+    // Replace the cell's content with the input
+    target.innerHTML = '';
+    target.appendChild(input);
+    input.focus();
+  }
 }