1.0.206

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.201",
+  "version": "1.0.206",
   "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.201',
+  version: '1.0.206',
   description: 'website for lossless.com'
 }

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',
@@ -106,6 +107,15 @@ export const demoFunc = () => html`
             return null;
           },
         },
+        {
+          name: 'preview',
+          type: ['doubleClick', 'contextmenu'],
+          iconName: 'eye',
+          actionFunc: async (itemArg) => {
+            alert(itemArg.amount);
+            return null;
+          },
+        }
       ] as (ITableAction<ITableDemoData>)[] as any}"
       .displayFunction=${(itemArg) => {
         return {

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
@@ -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,8 +198,8 @@ export class DeesTable<T> extends DeesElement {
       tr:hover {
         cursor: pointer;
       }
-      tr:hover .innerCellContainer {
+      tr:hover td {
-        background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
+        background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
       }
       tr:first-child:hover {
         cursor: auto;
@@ -194,19 +207,30 @@ export class DeesTable<T> extends DeesElement {
       tr:first-child:hover .innerCellContainer {
         background: none;
       }
-      tr.selected .innerCellContainer {
+      tr.selected td {
-        background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
+        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
       }
+
+      tr.hasAttachment td {
+        background: ${cssManager.bdTheme('#0098847c', '#0098847c')};
+      }
+
       th {
         text-transform: uppercase;
       }
       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,11 +244,29 @@ 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: #fa610140;
+        color: inherit;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        padding: 0px 6px
+      }
 
       .action {
-        margin: -8px 0px;
+        margin: -6px 0px;
-        padding: 8px;
+        padding: 10px;
-        line-height: 16px;
+        line-height: 36px;
+        height: 36px;
         display: inline-block;
       }
 
@@ -234,7 +276,7 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .action:hover {
-        background: ${cssManager.bdTheme('#CCC', '#111')};
+        background: ${cssManager.bdTheme('#CCC', '#00000030')};
       }
 
       .footer {
@@ -355,14 +397,14 @@ export class DeesTable<T> extends DeesElement {
                           console.log('dragenter');
                           console.log(realTarget);
                           setTimeout(() => {
-                            realTarget.style.background = 'green';
+                            realTarget.classList.add('hasAttachment');
                           }, 0);
                         }}
                         @dragleave=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
                           eventArg.stopPropagation();
                           const realTarget = getTr(eventArg.target as HTMLElement);
-                          realTarget.style.background = 'none';
+                          realTarget.classList.remove('hasAttachment');
                         }}
                         @dragover=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
@@ -383,23 +425,39 @@ export class DeesTable<T> extends DeesElement {
                           }
                         }}
                         @contextmenu=${async (eventArg: MouseEvent) => {
-                          DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
+                          DeesContextmenu.openContextMenuWithOptions(
-                            const menuItem: plugins.tsclass.website.IMenuItem = {
+                            eventArg,
-                              name: action.name,
+                            this.getActionsForType('contextmenu').map((action) => {
-                              iconName: action.iconName as any,
+                              const menuItem: plugins.tsclass.website.IMenuItem = {
-                              action: async () => {
+                                name: action.name,
-                                await action.actionFunc(itemArg);
+                                iconName: action.iconName as any,
-                                return null;
+                                action: async () => {
-                              }
+                                  await action.actionFunc(itemArg);
-                            }
+                                  return null;
-                            return menuItem;
+                                },
-                          }));
+                              };
+                              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 +534,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();
+  }
 }