dees-catalog/ts_web/elements/dees-table.ts
2023-09-07 18:34:38 +02:00

571 lines
17 KiB
TypeScript

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: 20px;
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() {}
}