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

785 lines
24 KiB
TypeScript
Raw Normal View History

2024-01-18 01:08:19 +00:00
import * as colors from './00colors.js';
2024-01-15 18:42:15 +00:00
import * as plugins from './00plugins.js';
2023-09-12 11:42:55 +00:00
import { demoFunc } from './dees-table.demo.js';
2021-10-07 16:01:05 +00:00
import {
customElement,
html,
DeesElement,
property,
2023-08-07 18:02:18 +00:00
type TemplateResult,
2021-10-07 16:01:05 +00:00
cssManager,
css,
unsafeCSS,
2023-08-07 18:02:18 +00:00
type CSSResult,
2022-12-07 01:28:31 +00:00
state,
2023-09-04 17:28:50 +00:00
resolveExec,
2023-08-07 17:13:29 +00:00
} from '@design.estate/dees-element';
2021-10-07 16:01:05 +00:00
2023-09-12 11:42:55 +00:00
import { DeesContextmenu } from './dees-contextmenu.js';
2023-09-04 17:28:50 +00:00
2023-08-07 17:13:29 +00:00
import * as domtools from '@design.estate/dees-domtools';
2023-09-04 17:29:39 +00:00
import { type TIconKey } from './dees-icon.js';
2021-10-07 16:01:05 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-table': DeesTable<any>;
}
}
2023-09-04 17:28:50 +00:00
// interfaces
2023-09-12 11:42:55 +00:00
export interface ITableAction<T = any> {
2022-12-06 12:11:06 +00:00
name: string;
2023-09-04 17:28:50 +00:00
iconName: TIconKey;
/**
* the table behaviour to use for this action
* e.g. upload: allows to upload files to the table
*/
2022-12-06 12:11:06 +00:00
useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
2023-09-04 17:28:50 +00:00
/**
* the type of the action
*/
2023-09-15 17:03:18 +00:00
type: (
| 'inRow'
| 'contextmenu'
| 'doubleClick'
| 'footer'
| 'header'
| 'preview'
| 'keyCombination'
)[];
2023-09-04 17:28:50 +00:00
/**
* 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
*/
2023-09-22 17:42:23 +00:00
actionFunc: (actionDataArg: ITableActionDataArg<T>) => Promise<any>;
}
export interface ITableActionDataArg<T> {
2023-10-24 12:18:03 +00:00
item: T;
table: DeesTable<T>;
2022-12-06 12:11:06 +00:00
}
2023-09-04 17:28:50 +00:00
export type TDisplayFunction<T = any> = (itemArg: T) => object;
// the table implementation
2021-10-07 16:01:05 +00:00
@customElement('dees-table')
export class DeesTable<T> extends DeesElement {
2023-09-12 11:42:55 +00:00
public static demo = demoFunc;
2021-10-07 16:01:05 +00:00
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[] = [];
2023-10-17 18:07:45 +00:00
// dees-form compatibility -----------------------------------------
@property({
type: String,
})
public key: string;
@property({
type: String,
})
public label: string;
@property({
type: Boolean,
})
public disabled: boolean = false;
@property({
type: Boolean,
})
public required: boolean = false;
get value() {
return this.data;
}
set value(valueArg) {}
2023-10-23 15:26:03 +00:00
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
2023-10-17 18:07:45 +00:00
// end dees-form compatibility -----------------------------------------
2024-01-21 21:37:39 +00:00
/**
* What does a row of data represent?
*/
2022-12-06 12:11:06 +00:00
@property({
2023-09-04 17:28:50 +00:00
type: String,
reflect: true,
2022-12-06 12:11:06 +00:00
})
2023-09-04 17:28:50 +00:00
public dataName: string;
2022-12-06 12:11:06 +00:00
2024-01-21 21:37:39 +00:00
@property({
type: Boolean,
})
searchable: boolean = true;
2021-11-26 19:06:09 +00:00
@property({
2023-09-04 17:28:50 +00:00
type: Array,
2021-11-26 19:06:09 +00:00
})
2023-09-13 19:13:47 +00:00
public dataActions: ITableAction<T>[] = [];
2021-10-07 16:01:05 +00:00
@property({
2023-09-04 17:28:50 +00:00
attribute: false,
2021-10-07 16:01:05 +00:00
})
2023-09-04 17:28:50 +00:00
public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;
2021-10-07 16:01:05 +00:00
2023-09-17 19:38:02 +00:00
@property({
attribute: false,
})
public reverseDisplayFunction: (itemArg: any) => T = (itemArg: any) => itemArg as T;
2021-10-07 16:01:05 +00:00
@property({
2023-09-04 17:28:50 +00:00
type: Object,
2021-10-07 16:01:05 +00:00
})
2023-09-04 17:28:50 +00:00
public selectedDataRow: T;
2021-10-07 16:01:05 +00:00
2023-09-15 17:03:18 +00:00
@property({
type: Array,
})
public editableFields: string[] = [];
2022-12-07 01:28:31 +00:00
public files: File[] = [];
public fileWeakMap = new WeakMap();
2023-09-22 18:02:48 +00:00
public dataChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();
2023-09-17 19:38:02 +00:00
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-10-05 12:36:59 +00:00
font-family: 'Roboto', 'Inter', sans-serif;
2023-01-07 15:47:01 +00:00
font-weight: 400;
2023-09-07 00:57:30 +00:00
font-size: 14px;
2022-06-10 13:50:56 +00:00
padding: 16px;
2021-10-07 16:01:05 +00:00
display: block;
width: 100%;
min-height: 50px;
2024-01-21 13:25:02 +00:00
background: ${cssManager.bdTheme('#ffffff', '#222222')};
2021-10-07 16:01:05 +00:00
border-radius: 3px;
2024-01-21 13:25:02 +00:00
border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
2023-01-13 10:48:00 +00:00
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
2023-03-25 16:32:55 +00:00
overflow-x: auto;
2024-01-18 01:08:19 +00:00
cursor: default;
2021-10-07 16:01:05 +00:00
}
2023-09-04 17:28:50 +00:00
.header {
display: flex;
justify-content: flex-end;
align-items: center;
2023-10-05 12:36:59 +00:00
font-family: 'Roboto', 'Inter', sans-serif;
2023-09-04 17:28:50 +00:00
}
.headingContainer {
}
.heading {
}
.heading1 {
font-weight: 600;
}
.heading2 {
opacity: 0.6;
}
2021-10-07 16:01:05 +00:00
.headingSeparation {
margin-top: 7px;
2024-01-21 13:25:02 +00:00
border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#444444')};
2021-10-07 16:01:05 +00:00
}
2023-09-04 17:28:50 +00:00
.headerActions {
2024-01-21 21:37:39 +00:00
user-select: none;
display: flex;
flex-direction: row;
2023-09-04 17:28:50 +00:00
margin-left: auto;
}
.headerAction {
display: flex;
2024-01-21 21:37:39 +00:00
flex-direction: row;
2023-09-04 17:28:50 +00:00
color: ${cssManager.bdTheme('#333', '#ccc')};
2024-01-21 21:37:39 +00:00
margin-left: 16px;
2023-09-04 17:28:50 +00:00
}
.headerAction:hover {
color: ${cssManager.bdTheme('#555', '#fff')};
}
.headerAction dees-icon {
margin-right: 8px;
}
2024-01-21 00:12:57 +00:00
.searchGrid {
2024-01-21 13:25:02 +00:00
background: ${cssManager.bdTheme('#fff', '#111111')};
2024-01-21 00:12:57 +00:00
display: grid;
grid-gap: 16px;
grid-template-columns: 1fr 200px;
2024-01-21 21:37:39 +00:00
margin-top: 16px;
2024-01-21 13:25:02 +00:00
padding: 0px 16px;
2024-01-21 21:37:39 +00:00
border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
border-radius: 8px;
}
.searchGrid.hidden {
height: 0px;
opacity: 0;
overflow: hidden;
margin-top: 0px;
2024-01-21 00:12:57 +00:00
}
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 {
}
2023-09-15 17:03:18 +00:00
tr:hover td {
2023-09-15 18:11:51 +00:00
background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
2021-10-07 16:01:05 +00:00
}
tr:first-child:hover {
cursor: auto;
}
tr:first-child:hover .innerCellContainer {
background: none;
}
2023-09-15 17:03:18 +00:00
tr.selected td {
2023-09-15 18:11:51 +00:00
background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
2021-10-07 16:47:36 +00:00
}
2023-09-15 18:11:51 +00:00
tr.hasAttachment td {
background: ${cssManager.bdTheme('#0098847c', '#0098847c')};
}
2021-10-07 16:01:05 +00:00
th {
2023-10-05 12:36:59 +00:00
text-transform: none;
font-family: 'Roboto', 'Inter', sans-serif;
font-weight: 500;
2021-10-07 16:01:05 +00:00
}
th,
td {
2023-09-15 17:03:18 +00:00
position: relative;
2023-10-20 08:47:53 +00:00
vertical-align: top;
2023-09-15 17:03:18 +00:00
padding: 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 {
2023-09-15 17:03:18 +00:00
min-height: 36px;
position: relative;
height: 100%;
width: 100%;
2022-06-10 13:50:56 +00:00
padding: 6px 8px;
2023-09-15 17:03:18 +00:00
line-height: 24px;
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;
}
2023-09-15 17:03:18 +00:00
td input {
width: 100%;
height: 100%;
outline: none;
border: 2px solid #fa6101;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
position: absolute;
2023-09-15 18:11:51 +00:00
background: #fa610140;
2023-10-07 18:01:49 +00:00
color: ${cssManager.bdTheme('#333', '#fff')};
2023-09-15 17:03:18 +00:00
font-family: inherit;
font-size: inherit;
font-weight: inherit;
2023-09-17 19:38:02 +00:00
padding: 0px 6px;
2023-09-15 17:03:18 +00:00
}
2024-01-21 16:14:15 +00:00
.actionsContainer {
display: flex;
flex-direction: row;
2024-01-21 13:14:57 +00:00
height: 24px;
transform: translateY(-4px);
2024-01-21 16:14:15 +00:00
margin-left: -6px;
2024-01-21 13:14:57 +00:00
}
2022-12-06 12:11:06 +00:00
.action {
2024-01-21 12:57:26 +00:00
position: relative;
2024-01-21 12:27:29 +00:00
padding: 8px 10px;
2024-01-21 12:57:26 +00:00
line-height: 24px;
2024-01-21 12:27:29 +00:00
height: 32px;
2024-01-21 00:42:06 +00:00
size: 16px;
2024-01-18 01:08:19 +00:00
border-radius: 8px;
2022-12-06 12:11:06 +00:00
}
.action:hover {
2024-01-18 01:08:19 +00:00
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
}
.action:active {
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blueActive)};
}
.action:hover dees-icon {
filter: ${cssManager.bdTheme('invert(1) brightness(3)', '')};
2022-12-06 12:11:06 +00:00
}
2023-09-04 17:28:50 +00:00
.footer {
2023-10-05 12:36:59 +00:00
font-family: 'Roboto', 'Inter', sans-serif;
2023-09-04 17:28:50 +00:00
font-size: 14px;
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;
2023-09-04 17:28:50 +00:00
display: flex;
}
.tableStatistics {
padding: 8px 16px;
}
.footerActions {
margin-left: auto;
}
.footerActions .footerAction {
padding: 8px 16px;
display: flex;
2024-01-18 01:08:19 +00:00
user-select: none;
2023-09-04 17:28:50 +00:00
}
.footerActions .footerAction:hover {
2024-01-18 01:08:19 +00:00
background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
color: #fff;
2023-09-04 17:28:50 +00:00
}
2024-01-18 01:08:19 +00:00
.footerActions .footerAction dees-icon {
2023-09-04 17:28:50 +00:00
display: flex;
margin-right: 8px;
2021-10-07 16:01:05 +00:00
}
2024-01-18 01:08:19 +00:00
.footerActions .footerAction:hover dees-icon {
}
2021-10-07 16:01:05 +00:00
`,
];
public render(): TemplateResult {
return html`
<div class="mainbox">
<!-- the heading part -->
2023-09-04 17:28:50 +00:00
<div class="header">
<div class="headingContainer">
2023-10-17 18:07:45 +00:00
<div class="heading heading1">${this.label || this.heading1}</div>
2023-09-04 17:28:50 +00:00
<div class="heading heading2">${this.heading2}</div>
</div>
<div class="headerActions">
${resolveExec(async () => {
const resultArray: TemplateResult[] = [];
for (const action of this.dataActions) {
2023-09-12 11:42:55 +00:00
if (!action.type.includes('header')) continue;
2023-09-04 17:28:50 +00:00
resultArray.push(
html`<div
class="headerAction"
@click=${() => {
2023-09-22 17:04:02 +00:00
action.actionFunc({
item: this.selectedDataRow,
2023-09-22 18:02:48 +00:00
table: this,
2023-09-22 17:04:02 +00:00
});
2023-09-04 17:28:50 +00:00
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
);
}
return resultArray;
})}
</div>
</div>
2021-10-07 16:01:05 +00:00
<div class="headingSeparation"></div>
2024-01-21 21:37:39 +00:00
<div class="searchGrid hidden">
2024-01-21 00:42:06 +00:00
<dees-input-text
.label=${'lucene syntax search'}
.description=${`
You can use the lucene syntax to search for data, e.g.:
\`\`\`
name: "john" AND age: 18
\`\`\`
2024-01-21 13:14:57 +00:00
`}
></dees-input-text>
2024-01-21 00:12:57 +00:00
<dees-input-multitoggle
.label=${'search mode'}
.options=${['table', 'data', 'server']}
2024-01-21 12:36:47 +00:00
.selectedOption=${'table'}
2024-01-21 00:42:06 +00:00
.description=${`
There are three basic modes:
* table: only searches data already in the table
* data: searches original data, ignoring table transforms
* server: searches data on the server
`}
2024-01-21 00:12:57 +00:00
></dees-input-multitoggle>
</div>
2023-10-24 12:18:03 +00:00
2021-10-07 16:01:05 +00:00
<!-- the actual table -->
<style></style>
${this.data.length > 0
? (() => {
2023-09-04 17:28:50 +00:00
// 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);
2021-10-07 16:01:05 +00:00
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>
2023-09-04 17:28:50 +00:00
${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`
2021-10-07 16:47:36 +00:00
<tr
@click=${() => {
this.selectedDataRow = itemArg;
}}
2022-12-07 01:28:31 +00:00
@dragenter=${async (eventArg: DragEvent) => {
2022-12-06 12:11:06 +00:00
eventArg.preventDefault();
eventArg.stopPropagation();
2023-09-04 17:28:50 +00:00
const realTarget = getTr(eventArg.target as HTMLElement);
console.log('dragenter');
console.log(realTarget);
setTimeout(() => {
2023-09-15 18:11:51 +00:00
realTarget.classList.add('hasAttachment');
2023-09-04 17:28:50 +00:00
}, 0);
2022-12-06 12:11:06 +00:00
}}
2022-12-07 01:28:31 +00:00
@dragleave=${async (eventArg: DragEvent) => {
2022-12-06 12:11:06 +00:00
eventArg.preventDefault();
eventArg.stopPropagation();
2023-09-04 17:28:50 +00:00
const realTarget = getTr(eventArg.target as HTMLElement);
2023-09-15 18:11:51 +00:00
realTarget.classList.remove('hasAttachment');
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();
2023-09-04 17:28:50 +00:00
const newFiles = [];
2022-12-07 01:28:31 +00:00
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) {
2023-09-04 17:28:50 +00:00
this.fileWeakMap.set(itemArg as object, newFiles);
2022-12-07 01:28:31 +00:00
} else {
result.push(...newFiles);
}
2022-12-06 12:11:06 +00:00
}}
2023-09-04 17:28:50 +00:00
@contextmenu=${async (eventArg: MouseEvent) => {
2023-09-15 17:03:18 +00:00
DeesContextmenu.openContextMenuWithOptions(
eventArg,
this.getActionsForType('contextmenu').map((action) => {
const menuItem: plugins.tsclass.website.IMenuItem = {
name: action.name,
iconName: action.iconName as any,
action: async () => {
2023-09-22 17:04:02 +00:00
await action.actionFunc({
item: itemArg,
2023-09-22 18:02:48 +00:00
table: this,
2023-09-22 17:04:02 +00:00
});
2023-09-15 17:03:18 +00:00
return null;
},
};
return menuItem;
})
);
2023-09-04 17:28:50 +00:00
}}
2021-10-07 16:47:36 +00:00
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
>
${headings.map(
(headingArg) => html`
2023-09-15 17:03:18 +00:00
<td
@dblclick=${(e: Event) => {
if (this.editableFields.includes(headingArg)) {
this.handleCellEditing(e, itemArg, headingArg);
} else {
const wantedAction = this.dataActions.find((actionArg) =>
actionArg.type.includes('doubleClick')
);
if (wantedAction) {
2023-09-22 17:04:02 +00:00
wantedAction.actionFunc({
item: itemArg,
2023-09-22 18:02:48 +00:00
table: this,
2023-09-22 17:04:02 +00:00
});
2023-09-15 17:03:18 +00:00
}
}
}}
>
2023-09-04 17:28:50 +00:00
<div class="innerCellContainer">${transformedItem[headingArg]}</div>
2021-10-07 16:47:36 +00:00
</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">
2024-01-21 16:14:15 +00:00
<div class="actionsContainer">
${this.getActionsForType('inRow').map(
(actionArg) => html`
<div
class="action"
@click=${() =>
actionArg.actionFunc({
item: itemArg,
table: this,
})}
>
${actionArg.iconName
? html`
<dees-icon
.iconFA=${actionArg.iconName}
></dees-icon>
`
: actionArg.name}
</div>
`
)}
</div>
2022-12-06 12:11:06 +00:00
</div>
</td>
`;
}
})()}
2021-10-07 16:47:36 +00:00
</tr>
2023-09-04 17:28:50 +00:00
`;
})}
2021-10-07 16:01:05 +00:00
</table>
`;
})()
: html` <div class="noDataSet">No data set!</div> `}
2023-09-04 17:28:50 +00:00
<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) {
2023-09-12 11:42:55 +00:00
if (!action.type.includes('footer')) continue;
2023-09-04 17:28:50 +00:00
resultArray.push(
html`<div
class="footerAction"
@click=${() => {
2023-09-22 17:04:02 +00:00
action.actionFunc({
item: this.selectedDataRow,
2023-09-22 18:02:48 +00:00
table: this,
2023-09-22 17:04:02 +00:00
});
2023-09-04 17:28:50 +00:00
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
);
}
return resultArray;
})}
</div>
2021-10-07 16:01:05 +00:00
</div>
</div>
`;
}
2024-01-21 21:37:39 +00:00
public async firstUpdated() {
}
2023-09-12 11:42:55 +00:00
2023-09-16 12:31:03 +00:00
public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
super.updated(changedProperties);
2023-10-20 08:47:53 +00:00
this.determineColumnWidths();
2024-01-21 21:37:39 +00:00
if (this.searchable) {
const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
if (!existing) {
this.dataActions.unshift({
name: 'Search',
iconName: 'magnifyingGlass',
type: ['header'],
actionFunc: async () => {
console.log('open search');
const searchGrid = this.shadowRoot.querySelector('.searchGrid');
searchGrid.classList.toggle('hidden');
}
});
console.log(this.dataActions);
this.requestUpdate();
};
}
2023-09-16 12:31:03 +00:00
}
2023-10-20 08:47:53 +00:00
public async determineColumnWidths() {
const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(0);
2023-09-16 12:31:03 +00:00
// Get the table element
const table = this.shadowRoot.querySelector('table');
if (!table) return;
2023-09-17 19:38:02 +00:00
2023-09-16 12:31:03 +00:00
// Get the first row's cells to measure the widths
const cells = table.rows[0].cells;
2023-09-17 19:38:02 +00:00
2023-10-20 08:47:53 +00:00
const handleColumnByIndex = async (i: number, waitForRenderArg: boolean = false) => {
const done = plugins.smartpromise.defer();
2023-09-16 12:31:03 +00:00
const cell = cells[i];
2023-09-17 19:38:02 +00:00
2023-09-16 12:31:03 +00:00
// Get computed width
const width = window.getComputedStyle(cell).width;
2023-10-20 08:47:53 +00:00
if (cell.textContent.includes('Actions')) {
2023-10-24 12:18:03 +00:00
const neededWidth =
2024-01-21 12:57:26 +00:00
this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
2023-10-20 09:17:42 +00:00
cell.style.width = `${Math.max(neededWidth, 68)}px`;
2023-10-20 08:47:53 +00:00
} else {
cell.style.width = width;
}
if (waitForRenderArg) {
requestAnimationFrame(() => {
done.resolve();
});
await done.promise;
2023-09-16 12:31:03 +00:00
}
2023-10-24 12:18:03 +00:00
};
2023-10-20 08:47:53 +00:00
if (cells[cells.length - 1].textContent.includes('Actions')) {
await handleColumnByIndex(cells.length - 1, true);
}
2023-09-17 19:38:02 +00:00
2023-10-20 08:47:53 +00:00
for (let i = 0; i < cells.length; i++) {
if (cells[i].textContent.includes('Actions')) {
continue;
}
await handleColumnByIndex(i);
2023-09-16 12:31:03 +00:00
}
2023-10-20 08:47:53 +00:00
table.style.tableLayout = 'fixed';
2023-09-16 12:31:03 +00:00
}
2023-09-12 11:42:55 +00:00
getActionsForType(typeArg: ITableAction['type'][0]) {
const actions: ITableAction[] = [];
for (const action of this.dataActions) {
if (!action.type.includes(typeArg)) continue;
actions.push(action);
}
return actions;
}
2023-09-15 17:03:18 +00:00
2023-10-07 17:33:04 +00:00
async handleCellEditing(event: Event, itemArg: T, key: string) {
const domtools = await this.domtoolsPromise;
2023-09-15 17:03:18 +00:00
const target = event.target as HTMLElement;
2023-10-07 18:01:49 +00:00
const originalColor = target.style.color;
target.style.color = 'transparent';
2023-09-17 19:38:02 +00:00
const transformedItem = this.displayFunction(itemArg);
const initialValue = (transformedItem[key] as unknown as string) || '';
2023-09-15 17:03:18 +00:00
// Create an input element
const input = document.createElement('input');
input.type = 'text';
2023-09-17 19:38:02 +00:00
input.value = initialValue;
2023-10-07 17:33:04 +00:00
const blurInput = async (blurArg = true, saveArg = false) => {
2023-09-17 19:38:02 +00:00
if (blurArg) {
input.blur();
}
if (saveArg) {
itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
2023-10-18 13:18:49 +00:00
this.changeSubject.next(this);
2023-09-17 19:38:02 +00:00
}
2023-10-07 17:33:04 +00:00
input.remove();
2023-10-07 18:01:49 +00:00
target.style.color = originalColor;
2023-10-07 17:33:04 +00:00
this.requestUpdate();
2023-09-17 19:38:02 +00:00
};
2023-09-15 17:03:18 +00:00
// When the input loses focus or the Enter key is pressed, update the data
input.addEventListener('blur', () => {
2023-09-17 19:38:02 +00:00
blurInput(false, false);
2023-09-15 17:03:18 +00:00
});
input.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'Enter') {
2023-09-17 19:38:02 +00:00
blurInput(true, true); // This will trigger the blur event handler above
2023-09-15 17:03:18 +00:00
}
});
// Replace the cell's content with the input
target.appendChild(input);
input.focus();
}
2021-10-07 16:01:05 +00:00
}