design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2023-09-15 19:03:18 +02:00
parent 462df2b648
commit cfd48de885
3 changed files with 95 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '1.0.202',
version: '1.0.203',
description: 'website for lossless.com'
}

1
ts_web/elements/dees-table.demo.ts
View File

@ -23,6 +23,7 @@ export const demoFunc = () => html`
<dees-table
heading1="Current Account Statement"
heading2="Bunq - Payment Account 2 - April 2021"
.editableFields="${['description']}"
.data=${[
{
date: '2021-04-01',

97
ts_web/elements/dees-table.ts
View File

@ -37,7 +37,15 @@ export interface ITableAction<T = any> {
/**
* the type of the action
*/
type: ('inRow' | 'contextmenu' | 'doubleClick' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
type: (
| 'inRow'
| 'contextmenu'
| 'doubleClick'
| 'footer'
| 'header'
| 'preview'
| 'keyCombination'
)[];
/**
* allows to check if the action is relevant for the given item
* @param itemArg
@ -96,6 +104,11 @@ export class DeesTable<T> extends DeesElement {
})
public selectedDataRow: T;
@property({
type: Array,
})
public editableFields: string[] = [];
public files: File[] = [];
public fileWeakMap = new WeakMap();
@ -185,7 +198,7 @@ export class DeesTable<T> extends DeesElement {
tr:hover {
cursor: pointer;
}
tr:hover .innerCellContainer {
tr:hover td {
background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
}
tr:first-child:hover {
@ -194,7 +207,7 @@ export class DeesTable<T> extends DeesElement {
tr:first-child:hover .innerCellContainer {
background: none;
}
tr.selected .innerCellContainer {
tr.selected td {
background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
}
th {
@ -202,11 +215,17 @@ export class DeesTable<T> extends DeesElement {
}
th,
td {
padding: 3px 0px;
position: relative;
padding: 0px;
border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
}
.innerCellContainer {
min-height: 36px;
position: relative;
height: 100%;
width: 100%;
padding: 6px 8px;
line-height: 24px;
}
th:first-child .innerCellContainer,
td:first-child .innerCellContainer {
@ -220,6 +239,23 @@ export class DeesTable<T> extends DeesElement {
td:last-child {
border-right: none;
}
td input {
width: 100%;
height: 100%;
outline: none;
border: 2px solid #fa6101;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
position: absolute;
background: #00000060;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
padding: 0px 6px
}
.action {
margin: -8px 0px;
@ -383,27 +419,39 @@ export class DeesTable<T> extends DeesElement {
}
}}
@contextmenu=${async (eventArg: MouseEvent) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
DeesContextmenu.openContextMenuWithOptions(
eventArg,
this.getActionsForType('contextmenu').map((action) => {
const menuItem: plugins.tsclass.website.IMenuItem = {
name: action.name,
iconName: action.iconName as any,
action: async () => {
await action.actionFunc(itemArg);
return null;
}
}
},
};
return menuItem;
}));
})
);
}}
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
>
${headings.map(
(headingArg) => html`
<td @dblclick=${() => {
const wantedAction = this.dataActions.find((actionArg) => actionArg.type.includes('doubleClick'));
if (!wantedAction) return;
<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) {
wantedAction.actionFunc(itemArg);
}}>
}
}
}}
>
<div class="innerCellContainer">${transformedItem[headingArg]}</div>
</td>
`
@ -480,4 +528,29 @@ export class DeesTable<T> extends DeesElement {
}
return actions;
}
handleCellEditing(event: Event, item: T, key: string) {
const target = event.target as HTMLElement;
// Create an input element
const input = document.createElement('input');
input.type = 'text';
input.value = (item[key] as unknown as string) || '';
// When the input loses focus or the Enter key is pressed, update the data
input.addEventListener('blur', () => {
item[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
target.innerHTML = input.value; // Update the cell's display
});
input.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'Enter') {
input.blur(); // This will trigger the blur event handler above
}
});
// Replace the cell's content with the input
target.innerHTML = '';
target.appendChild(input);
input.focus();
}
}