1.0.203

package.json

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-icon.ts

@@ -42,6 +42,7 @@ import {
   faCircleInfo as faCircleInfoSolid,
   faCircleCheck as faCircleCheckSolid,
   faCircleXmark as faCircleXmarkSolid,
+  faClockRotateLeft as faClockRotateLeftSolid,
   faCopy as faCopySolid,
   faDesktop as faDesktopSolid,
   faEye as faEyeSolid,
@@ -82,6 +83,8 @@ export const faIcons = {
   circleCheckSolid: faCircleCheckSolid,
   circleXmark: faCircleXmarkRegular,
   circleXmarkSolid: faCircleXmarkSolid,
+  clockRotateLeft: faClockRotateLeftSolid,
+  clockRotateLeftSolid: faClockRotateLeftSolid,
   copy: faCopyRegular,
   copySolid: faCopySolid,
   desktop: faDesktopSolid,
@@ -95,7 +98,7 @@ export const faIcons = {
   message: faMessageRegular,
   messageSolid: faMessageSolid,
   mugHot: faMugHotSolid,
-  faMugHotSolid: faMugHotSolid,
+  mugHotSolid: faMugHotSolid,
   minus: faMinusSolid,
   minusSolid: faMinusSolid,
   paste: faPasteRegular,

ts_web/elements/dees-table.demo.ts

@@ -2,6 +2,12 @@ import { type ITableAction } from './dees-table.js';
 import * as plugins from './plugins.js';
 import { html } from '@design.estate/dees-element';
 
+interface ITableDemoData {
+  date: string;
+  amount: string;
+  description: string;
+}
+
 export const demoFunc = () => html`
   <style>
     .demoWrapper {
@@ -17,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',
@@ -51,7 +58,7 @@ export const demoFunc = () => html`
           iconName: 'bell',
           useTableBehaviour: 'upload',
           type: ['inRow'],
-          actionFunc: async (itemArg: any) => {
+          actionFunc: async (itemArg) => {
             alert(itemArg.amount);
           },
         },
@@ -100,7 +107,16 @@ export const demoFunc = () => html`
             return null;
           },
         },
-      ] as ITableAction[]}"
+        {
+          name: 'preview',
+          type: ['doubleClick', 'contextmenu'],
+          iconName: 'eye',
+          actionFunc: async (itemArg) => {
+            alert(itemArg.amount);
+            return null;
+          },
+        }
+      ] as (ITableAction<ITableDemoData>)[] as any}"
       .displayFunction=${(itemArg) => {
         return {
           ...itemArg,

ts_web/elements/dees-table.ts

@@ -37,7 +37,15 @@ export interface ITableAction<T = any> {
   /**
    * the type of the action
    */
-  type: ('inRow' | 'contextmenu' | '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
@@ -84,7 +92,7 @@ export class DeesTable<T> extends DeesElement {
   @property({
     type: Array,
   })
-  public dataActions: ITableAction[] = [];
+  public dataActions: ITableAction<T>[] = [];
 
   @property({
     attribute: false,
@@ -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,23 +419,39 @@ export class DeesTable<T> extends DeesElement {
                           }
                         }}
                         @contextmenu=${async (eventArg: MouseEvent) => {
-                          DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
+                          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>
+                            <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>
                           `
@@ -476,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();
+  }
 }