extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-08 00:54:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix column selection

Browse Source
This commit is contained in:
nathan 2023-09-26 15:47:16 -06:00
parent b999f0be98
commit d7b6306d32
1 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
api/js/etemplate/Et2Nextmatch/ColumnSelection.ts
View File

@ -45,6 +45,10 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement)
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: grab; cursor: grab;
} }
sl-menu-item::part(label), sl-menu-item::part(submenu-icon) {
cursor: initial;
}
/* Change vertical alignment of CF checkbox line to up with title, not middle */ /* Change vertical alignment of CF checkbox line to up with title, not middle */
.custom_fields::part(base) { .custom_fields::part(base) {
align-items: baseline; align-items: baseline;
@ -75,19 +79,17 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement)
{ {
super(...args); super(...args);
this.columnClickHandler = this.columnClickHandler.bind(this);
this.handleSelectAll = this.handleSelectAll.bind(this); this.handleSelectAll = this.handleSelectAll.bind(this);
} }
connectedCallback() connectedCallback()
{ {
super.connectedCallback(); super.connectedCallback();
this.updateComplete.then(() => this.updateComplete.then(() =>
{ {
this.sort = Sortable.create(this.shadowRoot.querySelector('sl-menu'), { this.sort = Sortable.create(this.shadowRoot.querySelector('sl-menu'), {
ghostClass: 'ui-fav-sortable-placeholder', ghostClass: 'ui-fav-sortable-placeholder',
draggable: 'sl-option.column', draggable: 'sl-menu-item.column',
dataIdAttr: 'value', dataIdAttr: 'value',
direction: 'vertical', direction: 'vertical',
delay: 25 delay: 25
@ -101,7 +103,7 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement)
<sl-icon slot="header" name="check-all" @click=${this.handleSelectAll} <sl-icon slot="header" name="check-all" @click=${this.handleSelectAll}
title="${this.egw().lang("Select all")}" title="${this.egw().lang("Select all")}"
style="font-size:24px"></sl-icon> style="font-size:24px"></sl-icon>
<sl-menu @sl-select="${this.columnClickHandler}" part="columns" slot="content"> <sl-menu part="columns" slot="content">
${repeat(this.__columns, (column) => column.id, (column) => this.rowTemplate(column))} ${repeat(this.__columns, (column) => column.id, (column) => this.rowTemplate(column))}
</sl-menu>`; </sl-menu>`;
} }
@ -143,11 +145,11 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement)
return html``; return html``;
} }
return html` return html`
<sl-option <sl-menu-item
value="${column.id}" value="${column.id.replaceAll(" ", "___")}"
type="checkbox"
?checked=${alwaysOn || column.visibility == et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE} ?checked=${alwaysOn || column.visibility == et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE}
?disabled=${alwaysOn} ?disabled=${alwaysOn}
.selected="${this.value.some(v => v == column.id)}"
title="${column.title}" title="${column.title}"
class="${classMap({ class="${classMap({
select_row: true, select_row: true,
@ -157,7 +159,7 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement)
${column.caption} ${column.caption}
<!-- Custom fields get listed separately --> <!-- Custom fields get listed separately -->
${isCustom ? this.customFieldsTemplate(column) : ''} ${isCustom ? this.customFieldsTemplate(column) : ''}
</sl-option>`; </sl-menu-item>`;
} }
/** /**
@ -191,18 +193,10 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement)
<sl-divider></sl-divider>`; <sl-divider></sl-divider>`;
} }
columnClickHandler(event)
{
const item = event.detail.item;
// Toggle checked state
item.checked = !item.checked;
}
handleSelectAll(event) handleSelectAll(event)
{ {
let checked = (<SlMenuItem>this.shadowRoot.querySelector("sl-option")).checked || false; let checked = (<SlMenuItem>this.shadowRoot.querySelector("sl-menu-item")).checked || false;
this.shadowRoot.querySelectorAll('sl-option').forEach((item) => {item.checked = !checked}); this.shadowRoot.querySelectorAll('sl-menu-item').forEach((item) => {item.checked = !checked});
} }
set columns(new_columns) set columns(new_columns)
@ -229,7 +223,7 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement)
{ {
menuItem.querySelectorAll("[value][checked]").forEach((cf : SlMenuItem) => menuItem.querySelectorAll("[value][checked]").forEach((cf : SlMenuItem) =>
{ {
value.push(cf.value); value.push(cf.value.replaceAll("___", " "));
}) })
} }
} }