dees-catalog/ts_web/elements/dees-table.ts

import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
  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 {
    'dees-table': DeesTable<any>;
  }
}

// interfaces
export interface IDataAction<T = any> {
  name: 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`
    <style>
      .demoWrapper {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 60px;
        background: #000000;
      }
    </style>
    <div class="demoWrapper">
      <dees-table
        heading1="Current Account Statement"
        heading2="Bunq - Payment Account 2 - April 2021"
        .data=${[
          {
            date: '2021-04-01',
            amount: '2464.65 €',
            description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
          },
          {
            date: '2021-04-02',
            amount: '165.65 €',
            description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
          },
          {
            date: '2021-04-03',
            amount: '2999,00 €',
            description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
          },
          {
            date: '2021-04-01',
            amount: '2464.65 €',
            description: 'Office-Supplies - STAPLES BREMEN',
          },
          {
            date: '2021-04-01',
            amount: '2464.65 €',
            description: 'Office-Supplies - STAPLES BREMEN',
          },
        ]}
        dataName="transactions"
        .dataActions="${[
          {
            name: 'upload',
            iconName: 'bell',
            useTableBehaviour: 'upload',
            type: 'inRow',
            actionFunc: async (itemArg: any) => {
              alert(itemArg.amount);
            },
          },
          {
            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) => {},
          },
          {
            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>
  `;

  // INSTANCE
  @property({
    type: String,
  })
  public heading1: string = 'heading 1';

  @property({
    type: String,
  })
  public heading2: string = 'heading 2';

  @property({
    type: Array,
  })
  public data: T[] = [];

  @property({
    type: String,
    reflect: true,
  })
  public dataName: string;

  @property({
    type: Array,
  })
  public dataActions: IDataAction[] = [];

  @property({
    attribute: false,
  })
  public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;

  @property({
    type: Object,
  })
  public selectedDataRow: T;

  public files: File[] = [];
  public fileWeakMap = new WeakMap();

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      .mainbox {
        color: ${cssManager.bdTheme('#333', '#fff')};
        font-family: 'Mona Sans', 'Inter', sans-serif;
        font-weight: 400;
        font-size: 14px;
        padding: 16px;
        display: block;
        width: 100%;
        min-height: 50px;
        background: ${cssManager.bdTheme('#ffffff', '#333333')};
        border-radius: 3px;
        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
        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;
        color: ${cssManager.bdTheme('#333', '#fff')};
        border-collapse: collapse;
        width: 100%;
      }
      .noDataSet {
        text-align: center;
      }
      tr {
        border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
        text-align: left;
      }
      tr:last-child {
        border-bottom: none;
        text-align: left;
      }
      tr:hover {
        cursor: pointer;
      }
      tr:hover .innerCellContainer {
        background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
      }
      tr:first-child:hover {
        cursor: auto;
      }
      tr:first-child:hover .innerCellContainer {
        background: none;
      }
      tr.selected .innerCellContainer {
        background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
      }
      th {
        text-transform: uppercase;
      }
      th,
      td {
        padding: 3px 0px;
        border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
      }
      .innerCellContainer {
        padding: 6px 8px;
      }
      th:first-child .innerCellContainer,
      td:first-child .innerCellContainer {
        padding-left: 0px;
      }
      th:last-child .innerCellContainer,
      td:last-child .innerCellContainer {
        padding-right: 0px;
      }
      th:last-child,
      td:last-child {
        border-right: none;
      }

      .action {
        margin: -8px 0px;
        padding: 8px;
        line-height: 16px;
        display: inline-block;
      }

      .action:first-child {
        margin-left: -8px;
        width: min-content;
      }

      .action:hover {
        background: ${cssManager.bdTheme('#CCC', '#111')};
      }

      .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;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        <!-- the heading part -->
        <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
          ? (() => {
              // 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>
                    ${headings.map(
                      (headingArg) => html`
                        <th>
                          <div class="innerCellContainer">${headingArg}</div>
                        </th>
                      `
                    )}
                    ${(() => {
                      if (this.dataActions && this.dataActions.length > 0) {
                        return html`
                          <th>
                            <div class="innerCellContainer">Actions</div>
                          </th>
                        `;
                      }
                    })()}
                  </tr>
                  ${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) => {
                          eventArg.preventDefault();
                          eventArg.stopPropagation();
                          const realTarget = getTr(eventArg.target as HTMLElement);
                          console.log('dragenter');
                          console.log(realTarget);
                          setTimeout(() => {
                            realTarget.style.background = 'green';
                          }, 0);
                        }}
                        @dragleave=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
                          eventArg.stopPropagation();
                          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 = [];
                          for (const file of Array.from(eventArg.dataTransfer.files)) {
                            this.files.push(file);
                            newFiles.push(file);
                            this.requestUpdate();
                          }
                          const result: File[] = this.fileWeakMap.get(itemArg as object);
                          if (!result) {
                            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">${transformedItem[headingArg]}</div>
                            </td>
                          `
                        )}
                        ${(() => {
                          if (this.dataActions && this.dataActions.length > 0) {
                            return html`
                              <td>
                                <div class="innerCellContainer">
                                  ${(() => {
                                    const actions: TemplateResult[] = [];
                                    for (const action of this.dataActions) {
                                      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;
                                  })()}
                                </div>
                              </td>
                            `;
                          }
                        })()}
                      </tr>
                    `;
                  })}
                </table>
              `;
            })()
          : html` <div class="noDataSet">No data set!</div> `}
        <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>
    `;
  }

  public async firstUpdated() {}
}