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

359 lines
11 KiB
TypeScript
Raw Normal View History

2021-10-07 16:01:05 +00:00
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
2022-12-07 01:28:31 +00:00
state,
2021-10-07 16:01:05 +00:00
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-table': DeesTable<any>;
}
}
2022-12-06 12:11:06 +00:00
export interface IDataAction<T = any> {
name: string;
2022-12-06 12:32:00 +00:00
iconName: string;
2022-12-06 12:11:06 +00:00
useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
actionFunc: (itemArg: T) => Promise<any>;
}
2021-10-07 16:01:05 +00:00
@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',
},
]}
2022-12-06 12:11:06 +00:00
.dataActions="${[{
name: 'upload',
2022-12-06 12:32:00 +00:00
iconName: 'upload',
2022-12-06 12:11:06 +00:00
useTableBehaviour: 'upload',
actionFunc: async (itemArg: any) => {
2022-12-07 01:28:31 +00:00
},
},{
name: 'visibility',
iconName: 'visibility',
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {
2022-12-06 12:11:06 +00:00
},
}] as IDataAction[]}"
>This is a slotted Text</dees-table>
2021-10-07 16:01:05 +00:00
</div>
`;
2022-12-07 01:28:31 +00:00
// INSTANCE
2021-11-26 19:06:09 +00:00
@property({
type: String,
})
public heading1: string = 'heading 1';
2021-10-07 16:01:05 +00:00
2021-11-26 19:06:09 +00:00
@property({
type: String,
})
public heading2: string = 'heading 2';
2021-10-07 16:01:05 +00:00
@property({
2021-10-07 16:47:36 +00:00
type: Array,
2021-10-07 16:01:05 +00:00
})
public data: T[] = [];
2022-12-06 12:11:06 +00:00
@property({
type: Array,
})
public dataActions: IDataAction[] = [];
2021-11-26 19:06:09 +00:00
@property({
type: Object,
})
2021-10-07 16:01:05 +00:00
public selectedDataRow: T;
@property({
type: String,
})
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
@property({
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
2022-12-07 01:28:31 +00:00
public files: File[] = [];
public fileWeakMap = new WeakMap();
2021-10-07 16:01:05 +00:00
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
.mainbox {
2022-05-26 16:07:02 +00:00
color: ${cssManager.bdTheme('#333', '#fff')};
2023-01-07 15:42:12 +00:00
font-family: 'Inter';
2023-01-07 15:47:01 +00:00
font-weight: 400;
2022-06-10 13:50:56 +00:00
font-size: 16px;
padding: 16px;
2021-10-07 16:01:05 +00:00
display: block;
width: 100%;
min-height: 50px;
2022-05-26 16:07:02 +00:00
background: ${cssManager.bdTheme('#fafafa', '#333333')};
2021-10-07 16:01:05 +00:00
border-radius: 3px;
2022-06-26 13:04:04 +00:00
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
2022-12-06 12:11:06 +00:00
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
2021-10-07 16:01:05 +00:00
}
.headingSeparation {
margin-top: 7px;
2022-05-26 16:07:02 +00:00
border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
2021-10-07 16:01:05 +00:00
}
table,
.noDataSet {
2022-06-10 13:50:56 +00:00
margin-top: 16px;
2022-05-26 16:07:02 +00:00
color: ${cssManager.bdTheme('#333', '#fff')};
2021-10-07 16:01:05 +00:00
border-collapse: collapse;
width: 100%;
}
.noDataSet {
text-align: center;
}
tr {
2022-05-26 16:07:02 +00:00
border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
2021-10-07 16:01:05 +00:00
text-align: left;
}
tr:last-child {
border-bottom: none;
text-align: left;
}
tr:hover {
cursor: pointer;
}
tr:hover .innerCellContainer {
2022-05-26 16:07:02 +00:00
background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
2021-10-07 16:01:05 +00:00
}
tr:first-child:hover {
cursor: auto;
}
tr:first-child:hover .innerCellContainer {
background: none;
}
2021-10-07 16:47:36 +00:00
tr.selected .innerCellContainer {
2022-05-26 16:07:02 +00:00
background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
2021-10-07 16:47:36 +00:00
}
2021-10-07 16:01:05 +00:00
th {
text-transform: uppercase;
}
th,
td {
padding: 3px 0px;
2022-05-26 16:07:02 +00:00
border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
2021-10-07 16:01:05 +00:00
}
.innerCellContainer {
2022-06-10 13:50:56 +00:00
padding: 6px 8px;
2021-10-07 16:01:05 +00:00
}
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;
}
2022-12-06 12:11:06 +00:00
.action {
margin: -8px 0px;
padding: 8px;
2022-12-06 12:32:00 +00:00
line-height: 16px;
2022-12-07 01:28:31 +00:00
display: inline-block;
2022-12-06 12:11:06 +00:00
}
.action:first-child {
margin-left: -8px;
width: min-content;
}
.action:hover {
2022-12-06 12:32:00 +00:00
background: ${cssManager.bdTheme('#CCC', '#111')};
2022-12-06 12:11:06 +00:00
}
2021-10-07 16:01:05 +00:00
.tableStatistics {
2022-06-10 13:50:56 +00:00
padding: 4px 16px;
font-size: 12px;
2022-05-26 16:07:02 +00:00
color: ${cssManager.bdTheme('#111', '#ffffff90')};
2022-05-26 18:03:18 +00:00
background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
2022-06-10 13:50:56 +00:00
margin: 16px -16px -16px -16px;
2022-05-26 19:23:55 +00:00
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
2021-10-07 16:01:05 +00:00
}
`,
];
public render(): TemplateResult {
return html`
<div class="mainbox">
<!-- the heading part -->
<div>${this.heading1}</div>
<div>${this.heading2}</div>
<div class="headingSeparation"></div>
<!-- the actual table -->
<style></style>
${this.data.length > 0
? (() => {
const headings: string[] = Object.keys(this.data[0]);
return html`
<table>
<tr>
2021-10-07 16:47:36 +00:00
${headings.map(
(headingArg) => html`
<th>
<div class="innerCellContainer">${headingArg}</div>
</th>
`
)}
2022-12-06 12:11:06 +00:00
${(() => {
2022-12-11 16:24:12 +00:00
if (this.dataActions && this.dataActions.length > 0) {
2022-12-06 12:11:06 +00:00
return html`
<th>
<div class="innerCellContainer">Actions</div>
</th>
`;
}
})()}
2021-10-07 16:01:05 +00:00
</tr>
2021-10-07 16:47:36 +00:00
${this.data.map(
(itemArg) => html`
<tr
@click=${() => {
this.selectedDataRow = itemArg;
}}
2022-12-07 01:28:31 +00:00
@dragenter=${async (eventArg: DragEvent) => {
console.log((eventArg.target as HTMLElement).tagName)
console.log('dragenter');
2022-12-06 12:11:06 +00:00
eventArg.preventDefault();
eventArg.stopPropagation();
2022-12-07 01:28:31 +00:00
(eventArg.target as HTMLElement).parentElement.style.background = '#800000';
2022-12-06 12:11:06 +00:00
}}
2022-12-07 01:28:31 +00:00
@dragleave=${async (eventArg: DragEvent) => {
console.log((eventArg.target as HTMLElement).tagName)
console.log('dragleave');
2022-12-06 12:11:06 +00:00
eventArg.preventDefault();
eventArg.stopPropagation();
2022-12-07 01:28:31 +00:00
(eventArg.target as HTMLElement).parentElement.style.background = 'none';
2022-12-06 12:11:06 +00:00
}}
2022-12-07 01:28:31 +00:00
@dragover=${async (eventArg: DragEvent) => {
2022-12-06 12:11:06 +00:00
eventArg.preventDefault();
2022-12-07 01:28:31 +00:00
}}
@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);
}
2022-12-06 12:11:06 +00:00
}}
2021-10-07 16:47:36 +00:00
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
>
${headings.map(
(headingArg) => html`
<td>
<div class="innerCellContainer">${itemArg[headingArg]}</div>
</td>
`
)}
2022-12-06 12:11:06 +00:00
${(() => {
2022-12-11 16:24:12 +00:00
if (this.dataActions && this.dataActions.length > 0) {
2022-12-06 12:11:06 +00:00
return html`
<td>
<div class="innerCellContainer">
${(() => {
const actions: TemplateResult[] = [];
for (const action of this.dataActions) {
2022-12-06 12:32:00 +00:00
actions.push(html`<div class="action">${action.iconName ? html`
<dees-icon .iconName=${'upload_file'}></dees-icon>
` : action.name}</div>`)
2022-12-06 12:11:06 +00:00
}
return actions;
})()}
</div>
</td>
`;
}
})()}
2021-10-07 16:47:36 +00:00
</tr>
`
)}
2021-10-07 16:01:05 +00:00
</table>
`;
})()
: html` <div class="noDataSet">No data set!</div> `}
<div class="tableStatistics">
${this.data.length} data rows (total) |
2022-12-06 12:11:06 +00:00
${this.selectedDataRow
? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
: html`No row selected`}
2021-10-07 16:01:05 +00:00
</div>
</div>
`;
}
public async firstUpdated() {}
}