fix(core): update
This commit is contained in:
@ -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 { 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) => {},
|
||||
},
|
||||
}] as IDataAction[]}"
|
||||
>This is a slotted Text</dees-table>
|
||||
{
|
||||
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>
|
||||
`;
|
||||
|
||||
@ -105,26 +157,27 @@ export class DeesTable<T> extends DeesElement {
|
||||
})
|
||||
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;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||
|
||||
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>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user