@design.estate/dees-catalog 1.0.183 → 1.0.185

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.183",
+  "version": "1.0.185",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -15,15 +15,15 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.38",
-    "@design.estate/dees-element": "^2.0.25",
+    "@design.estate/dees-domtools": "^2.0.39",
+    "@design.estate/dees-element": "^2.0.27",
     "@design.estate/dees-wcctools": "^1.0.78",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@push.rocks/smartpromise": "^4.0.3",
-    "@push.rocks/smartstring": "^4.0.8",
+    "@push.rocks/smartstring": "^4.0.9",
     "@tsclass/tsclass": "^4.0.42",
     "highlight.js": "11.8.0",
     "pdfjs-dist": "^2.16.105"
@@ -35,7 +35,7 @@
     "@gitzone/tswatch": "^2.0.7",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.5.1"
+    "@types/node": "^20.5.9"
   },
   "files": [
     "ts/**/*",

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/elements/dees-contextmenu.ts

@@ -81,12 +81,17 @@ export class DeesContextmenu extends DeesElement {
     eventArg.preventDefault();
     const contextMenu = new DeesContextmenu();
     contextMenu.style.position = 'absolute';
+    contextMenu.style.zIndex = '2000';
     contextMenu.style.top = `${eventArg.clientY.toString()}px`;
     contextMenu.style.left = `${eventArg.clientX.toString()}px`;
     contextMenu.style.opacity = '0';
     contextMenu.style.transform = 'scale(0.95,0.95)';
     contextMenu.style.transformOrigin = 'top left';
     contextMenu.menuItems = menuItemsArg;
+    contextMenu.windowLayer = await DeesWindowLayer.createAndShow();
+    contextMenu.windowLayer.addEventListener('click', async () => {
+      await contextMenu.destroy();
+    })
     document.body.append(contextMenu);
     await domtools.plugins.smartdelay.delayFor(0);
     contextMenu.style.opacity = '1';
@@ -97,6 +102,7 @@ export class DeesContextmenu extends DeesElement {
     type: Array,
   })
   public menuItems: plugins.tsclass.website.IMenuItem[] = [];
+  windowLayer: DeesWindowLayer;
 
   constructor() {
     super();
@@ -173,6 +179,9 @@ export class DeesContextmenu extends DeesElement {
   }
 
   public async destroy() {
+    if (this.windowLayer) {
+      this.windowLayer.destroy();
+    }
     this.style.opacity = '0';
     this.style.transform = 'scale(0.95,0,95)';
     await domtools.plugins.smartdelay.delayFor(100);

package/ts_web/elements/dees-icon.ts

@@ -122,6 +122,8 @@ export const faIcons = {
   users: faUsersSolid,
 };
 
+export type TIconKey = keyof typeof faIcons;
+
 declare global {
   interface HTMLElementTagNameMap {
     'dees-icon': DeesIcon;

package/ts_web/elements/dees-mobilenavigation.ts

@@ -15,22 +15,16 @@ import { DeesWindowLayer } from './dees-windowlayer.js';
 export class DeesMobilenavigation extends DeesElement {
   // STATIC
   public static demo = () => html`
-    <dees-mobilenavigation
-      .menuItems="${[
+    <dees-button @click=${() => {
+      DeesMobilenavigation.createAndInit([
         {
-          name: 'hello1',
-          action: async () => {},
+          name: 'Test',
+          action: () => {
+            alert('test');
+          },
         },
-        {
-          name: 'hello2',
-          action: async () => {},
-        },
-        {
-          name: 'hello3',
-          action: async () => {},
-        },
-      ]}"
-    ></dees-mobilenavigation>
+      ]);
+    }}></dees-button>
   `;
 
   private static singletonRef: DeesMobilenavigation;

package/ts_web/elements/dees-table.ts

@@ -9,9 +9,13 @@ import {
   unsafeCSS,
   type CSSResult,
   state,
+  resolveExec,
 } from '@design.estate/dees-element';
 
+import { DeesContextmenu } from './dees-contextmenu.js'
+
 import * as domtools from '@design.estate/dees-domtools';
+import { type TIconKey } from './dees-icon.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,13 +23,36 @@ declare global {
   }
 }
 
+// interfaces
 export interface IDataAction<T = any> {
   name: string;
-  iconName: string;
+  iconName: TIconKey;
+  /**
+   * the table behaviour to use for this action
+   * e.g. upload: allows to upload files to the table
+   */
   useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
+  /**
+   * the type of the action
+   */
+  type: 'inRow' | 'rightClick' | 'footer' | 'header' | 'preview' | 'keyCombination';
+  /**
+   * allows to check if the action is relevant for the given item
+   * @param itemArg
+   * @returns
+   */
+  actionRelevancyCheckFunc?: (itemArg: T) => boolean;
+  /**
+   * the actual action function implementation
+   * @param itemArg
+   * @returns
+   */
   actionFunc: (itemArg: T) => Promise<any>;
 }
 
+export type TDisplayFunction<T = any> = (itemArg: T) => object;
+
+// the table implementation
 @customElement('dees-table')
 export class DeesTable<T> extends DeesElement {
   public static demo = () => html`
@@ -70,22 +97,47 @@ export class DeesTable<T> extends DeesElement {
             description: 'Office-Supplies - STAPLES BREMEN',
           },
         ]}
-        .dataActions="${[{
-          name: 'upload',
-          iconName: 'upload',
-          useTableBehaviour: 'upload',
-          actionFunc: async (itemArg: any) => {
-
+        dataName="transactions"
+        .dataActions="${[
+          {
+            name: 'upload',
+            iconName: 'bell',
+            useTableBehaviour: 'upload',
+            type: 'inRow',
+            actionFunc: async (itemArg: any) => {
+              alert(itemArg.amount);
+            },
           },
-        },{
-          name: 'visibility',
-          iconName: 'visibility',
-          useTableBehaviour: 'preview',
-          actionFunc: async (itemArg: any) => {
-
+          {
+            name: 'visibility',
+            iconName: 'copy',
+            type: 'inRow',
+            useTableBehaviour: 'preview',
+            actionFunc: async (itemArg: any) => {},
+          },
+          {
+            name: 'create new',
+            iconName: 'instagram',
+            type: 'header',
+            useTableBehaviour: 'preview',
+            actionFunc: async (itemArg: any) => {},
           },
-        }] as IDataAction[]}"
-        >This is a slotted Text</dees-table>
+          {
+            name: 'to gallery',
+            iconName: 'message',
+            type: 'footer',
+            useTableBehaviour: 'preview',
+            actionFunc: async (itemArg: any) => {},
+          },
+        ] as IDataAction[]}"
+        .displayFunction=${(itemArg) => {
+          return {
+            ...itemArg,
+            onlyDisplayProp: 'onlyDisplay',
+          };
+        }}
+        >This is a slotted Text</dees-table
+      >
     </div>
   `;
 
@@ -106,24 +158,25 @@ export class DeesTable<T> extends DeesElement {
   public data: T[] = [];
 
   @property({
-    type: Array,
+    type: String,
+    reflect: true,
   })
-  public dataActions: IDataAction[] = [];
+  public dataName: string;
 
   @property({
-    type: Object,
+    type: Array,
   })
-  public selectedDataRow: T;
+  public dataActions: IDataAction[] = [];
 
   @property({
-    type: String,
+    attribute: false,
   })
-  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
+  public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;
 
   @property({
-    type: String,
+    type: Object,
   })
-  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+  public selectedDataRow: T;
 
   public files: File[] = [];
   public fileWeakMap = new WeakMap();
@@ -150,11 +203,49 @@ export class DeesTable<T> extends DeesElement {
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
         overflow-x: auto;
       }
+
+      .header {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+
+      .headingContainer {
+      }
+
+      .heading {
+        font-family: 'Hubot Sans', 'Inter', sans-serif;
+      }
+
+      .heading1 {
+        font-weight: 600;
+      }
+      .heading2 {
+        opacity: 0.6;
+      }
+
       .headingSeparation {
         margin-top: 7px;
         border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
       }
 
+      .headerActions {
+        margin-left: auto;
+        cursor: pointer;
+      }
+      .headerAction {
+        display: flex;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+
+      .headerAction:hover {
+        color: ${cssManager.bdTheme('#555', '#fff')};
+      }
+
+      .headerAction dees-icon {
+        margin-right: 8px;
+      }
+
       table,
       .noDataSet {
         margin-top: 16px;
@@ -186,7 +277,7 @@ export class DeesTable<T> extends DeesElement {
         background: none;
       }
       tr.selected .innerCellContainer {
-        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
+        background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
       }
       th {
         text-transform: uppercase;
@@ -228,14 +319,37 @@ export class DeesTable<T> extends DeesElement {
         background: ${cssManager.bdTheme('#CCC', '#111')};
       }
 
-      .tableStatistics {
-        padding: 4px 16px;
-        font-size: 12px;
+      .footer {
+        font-size: 14px;
         color: ${cssManager.bdTheme('#111', '#ffffff90')};
         background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
         margin: 16px -16px -16px -16px;
         border-bottom-left-radius: 3px;
         border-bottom-right-radius: 3px;
+        display: flex;
+      }
+
+      .tableStatistics {
+        padding: 8px 16px;
+      }
+
+      .footerActions {
+        margin-left: auto;
+      }
+
+      .footerActions .footerAction {
+        cursor: pointer;
+        padding: 8px 16px;
+        display: flex;
+      }
+
+      .footerActions .footerAction:hover {
+        background: ${cssManager.bdTheme('#CCC', '#111')};
+      }
+
+      .footerActions dees-icon {
+        display: flex;
+        margin-right: 8px;
       }
     `,
   ];
@@ -244,15 +358,44 @@ export class DeesTable<T> extends DeesElement {
     return html`
       <div class="mainbox">
         <!-- the heading part -->
-        <div>${this.heading1}</div>
-        <div>${this.heading2}</div>
+        <div class="header">
+          <div class="headingContainer">
+            <div class="heading heading1">${this.heading1}</div>
+            <div class="heading heading2">${this.heading2}</div>
+          </div>
+          <div class="headerActions">
+            ${resolveExec(async () => {
+              const resultArray: TemplateResult[] = [];
+              for (const action of this.dataActions) {
+                if (action.type !== 'header') continue;
+                resultArray.push(
+                  html`<div
+                    class="headerAction"
+                    @click=${() => {
+                      action.actionFunc(this.selectedDataRow);
+                    }}
+                  >
+                    ${action.iconName
+                      ? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
+                          ${action.name}`
+                      : action.name}
+                  </div>`
+                );
+              }
+              return resultArray;
+            })}
+          </div>
+        </div>
         <div class="headingSeparation"></div>
 
         <!-- the actual table -->
         <style></style>
         ${this.data.length > 0
           ? (() => {
-              const headings: string[] = Object.keys(this.data[0]);
+              // Only pick up the keys from the first transformed data object
+              // as all data objects are assumed to have the same structure
+              const firstTransformedItem = this.displayFunction(this.data[0]);
+              const headings: string[] = Object.keys(firstTransformedItem);
               return html`
                 <table>
                   <tr>
@@ -273,32 +416,42 @@ export class DeesTable<T> extends DeesElement {
                       }
                     })()}
                   </tr>
-                  ${this.data.map(
-                    (itemArg) => html`
+                  ${this.data.map((itemArg) => {
+                    const transformedItem = this.displayFunction(itemArg);
+                    const getTr = (elementArg: HTMLElement): HTMLElement => {
+                      if (elementArg.tagName === 'TR') {
+                        return elementArg;
+                      } else {
+                        return getTr(elementArg.parentElement);
+                      }
+                    };
+                    return html`
                       <tr
                         @click=${() => {
                           this.selectedDataRow = itemArg;
                         }}
                         @dragenter=${async (eventArg: DragEvent) => {
-                          console.log((eventArg.target as HTMLElement).tagName)
-                          console.log('dragenter');
                           eventArg.preventDefault();
                           eventArg.stopPropagation();
-                          (eventArg.target as HTMLElement).parentElement.style.background = '#800000';
+                          const realTarget = getTr(eventArg.target as HTMLElement);
+                          console.log('dragenter');
+                          console.log(realTarget);
+                          setTimeout(() => {
+                            realTarget.style.background = 'green';
+                          }, 0);
                         }}
                         @dragleave=${async (eventArg: DragEvent) => {
-                          console.log((eventArg.target as HTMLElement).tagName)
-                          console.log('dragleave');
                           eventArg.preventDefault();
                           eventArg.stopPropagation();
-                          (eventArg.target as HTMLElement).parentElement.style.background = 'none';
+                          const realTarget = getTr(eventArg.target as HTMLElement);
+                          realTarget.style.background = 'none';
                         }}
                         @dragover=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
                         }}
                         @drop=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
-                          const newFiles = []
+                          const newFiles = [];
                           for (const file of Array.from(eventArg.dataTransfer.files)) {
                             this.files.push(file);
                             newFiles.push(file);
@@ -306,17 +459,41 @@ export class DeesTable<T> extends DeesElement {
                           }
                           const result: File[] = this.fileWeakMap.get(itemArg as object);
                           if (!result) {
-                            this.fileWeakMap.set(itemArg as object, newFiles)
+                            this.fileWeakMap.set(itemArg as object, newFiles);
                           } else {
                             result.push(...newFiles);
                           }
                         }}
+                        @contextmenu=${async (eventArg: MouseEvent) => {
+                          DeesContextmenu.openContextMenuWithOptions(eventArg, [
+                            {
+                              name: 'copy',
+                              iconName: 'copySolid',
+                              action: async () => {
+                                return null;
+                              },
+                            },
+                            {
+                              name: 'edit',
+                              iconName: 'penToSquare',
+                              action: async () => {
+                                return null;
+                              },
+                            },{
+                              name: 'paste',
+                              iconName: 'pasteSolid',
+                              action: async () => {
+                                return null;
+                              },
+                            },
+                          ])
+                        }}
                         class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
                       >
                         ${headings.map(
                           (headingArg) => html`
                             <td>
-                              <div class="innerCellContainer">${itemArg[headingArg]}</div>
+                              <div class="innerCellContainer">${transformedItem[headingArg]}</div>
                             </td>
                           `
                         )}
@@ -328,9 +505,19 @@ export class DeesTable<T> extends DeesElement {
                                   ${(() => {
                                     const actions: TemplateResult[] = [];
                                     for (const action of this.dataActions) {
-                                      actions.push(html`<div class="action">${action.iconName ? html`
-                                        <dees-icon .iconName=${'upload_file'}></dees-icon>
-                                      ` : action.name}</div>`)
+                                      if (action.type !== 'inRow') continue;
+                                      actions.push(
+                                        html`<div
+                                          class="action"
+                                          @click=${() => action.actionFunc(itemArg)}
+                                        >
+                                          ${action.iconName
+                                            ? html`
+                                                <dees-icon .iconFA=${action.iconName}></dees-icon>
+                                              `
+                                            : action.name}
+                                        </div>`
+                                      );
                                     }
                                     return actions;
                                   })()}
@@ -340,17 +527,40 @@ export class DeesTable<T> extends DeesElement {
                           }
                         })()}
                       </tr>
-                    `
-                  )}
+                    `;
+                  })}
                 </table>
               `;
             })()
           : html` <div class="noDataSet">No data set!</div> `}
-        <div class="tableStatistics">
-          ${this.data.length} data rows (total) |
-          ${this.selectedDataRow
-            ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
-            : html`No row selected`}
+        <div class="footer">
+          <div class="tableStatistics">
+            ${this.data.length} ${this.dataName || 'data rows'} (total) |
+            ${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
+            selected
+          </div>
+          <div class="footerActions">
+            ${resolveExec(async () => {
+              const resultArray: TemplateResult[] = [];
+              for (const action of this.dataActions) {
+                if (action.type !== 'footer') continue;
+                resultArray.push(
+                  html`<div
+                    class="footerAction"
+                    @click=${() => {
+                      action.actionFunc(this.selectedDataRow);
+                    }}
+                  >
+                    ${action.iconName
+                      ? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
+                          ${action.name}`
+                      : action.name}
+                  </div>`
+                );
+              }
+              return resultArray;
+            })}
+          </div>
         </div>
       </div>
     `;

package/ts_web/elements/dees-windowlayer.ts

@@ -13,6 +13,15 @@ export class DeesWindowLayer extends DeesElement {
   // STATIC
   public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
 
+  public static async createAndShow() {
+    const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
+    const windowLayer = new DeesWindowLayer();
+    document.body.append(windowLayer);
+    await domtoolsInstance.convenience.smartdelay.delayFor(0);
+    windowLayer.show();
+    return windowLayer;
+  }
+
   // INSTANCE
   @property({
     type: Boolean
@@ -29,7 +38,7 @@ export class DeesWindowLayer extends DeesElement {
       ${domtools.elementBasic.styles}
       <style>
         .windowOverlay {
-          transition: all 0.3s;
+          transition: all 0.2s;
           will-change: transform;
           position: fixed;
           top: 0px;
@@ -82,4 +91,11 @@ export class DeesWindowLayer extends DeesElement {
     await domtools.convenience.smartdelay.delayFor(0);
     this.visible = false;
   }
+
+  public async destroy() {
+    const domtools = await this.domtoolsPromise;
+    await this.hide();
+    await domtools.convenience.smartdelay.delayFor(300);
+    this.remove();
+  }
 }