From 4318d1c0a5ae53de5106607ced89203d07e26b85 Mon Sep 17 00:00:00 2001 From: nathan Date: Thu, 18 Aug 2022 14:46:44 -0600 Subject: [PATCH] Put nextmatch column selection into a dialog --- .../etemplate/Et2Dialog/Et2DialogContent.ts | 2 + .../etemplate/Et2Dialog/Et2DialogOverlay.ts | 7 +- .../etemplate/Et2Nextmatch/ColumnSelection.ts | 75 ++------- api/js/etemplate/et2_extension_nextmatch.ts | 156 ++++++++---------- api/js/etemplate/etemplate2.ts | 1 + api/templates/default/nm_column_selection.xet | 22 +++ 6 files changed, 119 insertions(+), 144 deletions(-) create mode 100644 api/templates/default/nm_column_selection.xet diff --git a/api/js/etemplate/Et2Dialog/Et2DialogContent.ts b/api/js/etemplate/Et2Dialog/Et2DialogContent.ts index ea8c415c66..d4805a925c 100644 --- a/api/js/etemplate/Et2Dialog/Et2DialogContent.ts +++ b/api/js/etemplate/Et2Dialog/Et2DialogContent.ts @@ -1,5 +1,6 @@ import {css, CSSResultArray, html, LitElement} from "@lion/core"; import {Et2Widget} from "../Et2Widget/Et2Widget"; +import shoelace from "../Styles/shoelace"; /** * Widget for the actual content of a dialog, used when we're not doing a template @@ -8,6 +9,7 @@ import {Et2Widget} from "../Et2Widget/Et2Widget"; export class Et2DialogContent extends Et2Widget(LitElement) { static styles : CSSResultArray = [ + shoelace, css` :host { display: block; diff --git a/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts b/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts index 949190c5ea..db2052ea9c 100644 --- a/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts +++ b/api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts @@ -2,6 +2,7 @@ import {css, html, ifDefined, LitElement, repeat, SlotMixin} from '@lion/core'; import {DialogButton, Et2Dialog} from "./Et2Dialog"; import {et2_template} from "../et2_widget_template"; import {Et2DialogContent} from "./Et2DialogContent"; +import shoelace from "../Styles/shoelace"; /** * This handles the visible portion of the dialog, including the title & close button. @@ -24,7 +25,8 @@ export class Et2DialogOverlay extends SlotMixin(LitElement) */ static get _styles() { - return css` + return [shoelace, + css` :host { display: inline-block; background: white; @@ -95,8 +97,7 @@ export class Et2DialogOverlay extends SlotMixin(LitElement) ::slotted([align="right"]) { margin-left: auto; order: 1; - } - `; + }`]; } get properties() diff --git a/api/js/etemplate/Et2Nextmatch/ColumnSelection.ts b/api/js/etemplate/Et2Nextmatch/ColumnSelection.ts index 173c846ca5..6a2e4f8c03 100644 --- a/api/js/etemplate/Et2Nextmatch/ColumnSelection.ts +++ b/api/js/etemplate/Et2Nextmatch/ColumnSelection.ts @@ -1,7 +1,7 @@ /** * Column selector for nextmatch */ -import {classMap, css, html, LitElement, PropertyValues, repeat, TemplateResult} from "@lion/core"; +import {classMap, css, html, LitElement, repeat, TemplateResult} from "@lion/core"; import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {et2_nextmatch_customfields} from "../et2_extension_nextmatch"; import shoelace from "../Styles/shoelace"; @@ -17,7 +17,6 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement) static get styles() { return [ - // Parent (SlSelect) returns a single cssResult, not an array super.styles, shoelace, css` @@ -28,19 +27,10 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement) flex: 1 1 auto; --icon-width: 20px; } - .title { - font-size: var(--sl-font-size-large); - color: var(--sl-color-neutral-0); - background-color: var(--sl-color-primary-600); - flex: 1 1 auto; - } - .title sl-icon { - vertical-align: middle; - cursor: pointer; - } sl-menu { flex: 1 10 auto; overflow-y: auto; + max-height: 40em; } /* Drag handle on columns (not individual custom fields or search letter) */ sl-menu > .select_row::part(base) { @@ -68,6 +58,8 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement) */ value: {type: Object}, + columns: {type: Object}, + autoRefresh: {type: Number} } } @@ -100,53 +92,15 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement) }); } - protected firstUpdated(_changedProperties : PropertyValues) - { - super.firstUpdated(_changedProperties); - - if(this._autoRefreshNode) - { - this._autoRefreshNode.select_options = { - // Cause [unknown] problems with mail - 30: "30 seconds", - //60: "1 Minute", - 180: "3 Minutes", - 300: "5 Minutes", - 900: "15 Minutes", - 1800: "30 Minutes" - }; - } - - if(this._preferenceNode) - { - this._preferenceNode.select_options = [ - {value: 'default', label: 'Default', title: 'Set these columns as the default'}, - {value: 'reset', label: 'Reset', title: "Reset all user's column preferences"}, - {value: 'force', label: 'Force', title: 'Force column preference so users cannot change it'} - ]; - } - } - protected render() : TemplateResult - { - return html`${this.headerTemplate()} - - ${repeat(this.__columns, (column) => column.id, (column) => this.rowTemplate(column))} - - - - ${this.footerTemplate()} - `; - } - - protected headerTemplate() { return html` -
- - ${this.egw().lang("Select columns")} -
- `; + + + ${repeat(this.__columns, (column) => column.id, (column) => this.rowTemplate(column))} + `; } protected footerTemplate() @@ -160,9 +114,9 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement) const apps = this.egw().user('apps'); return html` - ${this.__autoRefresh !== false ? autoRefresh : ''} + ${this.__autoRefresh !== "false" ? autoRefresh : ''} ${!apps['admin'] ? '' : html` - + ` } `; @@ -282,6 +236,11 @@ export class Et2ColumnSelection extends Et2InputWidget(LitElement) return value; } + set value(new_value) + { + // TODO? Only here to avoid error right now + } + private get _autoRefreshNode() : Et2Select { return (this.shadowRoot?.querySelector("#nm_autorefresh")); diff --git a/api/js/etemplate/et2_extension_nextmatch.ts b/api/js/etemplate/et2_extension_nextmatch.ts index 5b6509e3b0..e56b7558f6 100644 --- a/api/js/etemplate/et2_extension_nextmatch.ts +++ b/api/js/etemplate/et2_extension_nextmatch.ts @@ -71,11 +71,9 @@ import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions"; import {egwIsMobile} from "../egw_action/egw_action_common.js"; import {Et2Dialog} from "./Et2Dialog/Et2Dialog"; import {Et2Select} from "./Et2Select/Et2Select"; -import {Et2Button} from "./Et2Button/Et2Button"; import {loadWebComponent} from "./Et2Widget/Et2Widget"; import {Et2AccountFilterHeader} from "./Nextmatch/Headers/AccountFilterHeader"; import {Et2SelectCategory} from "./Et2Select/Et2SelectCategory"; -import {Et2ColumnSelection} from "./Et2Nextmatch/ColumnSelection"; import {Et2Searchbox} from "./Et2Textbox/Et2Searchbox"; //import {et2_selectAccount} from "./et2_widget_SelectAccount"; @@ -1954,22 +1952,13 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2 }); } - // Build the popup - let selectPopup = new Et2ColumnSelection(); - selectPopup.setParent(this); - selectPopup.columns = columns; - if(!this.options.disable_autorefresh) + let updateColumns = function(button, values) { - selectPopup.autoRefresh = parseInt(this._get_autorefresh()); - } + if(button != Et2Dialog.OK_BUTTON) + { + return; + } - const okButton = loadWebComponent("et2-button", { - image: "check", - label: this.egw().lang("ok"), - slot: "buttons" - }, this); - okButton.onclick = function() - { // Update visibility const visibility = {}; for(var i = 0; i < columnMgr.columns.length; i++) @@ -1981,7 +1970,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2 visibility[col.id] = {visible: false}; } } - const value = selectPopup.value; + const value = values.columns; // Update & remove letter filter if(self.header.lettersearch) @@ -2006,54 +1995,54 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2 { column++; } - if(visibility[value[i]]) - { - visibility[value[i]].visible = true; - } - let col_name = self._getColumnName(self.columns[column].widget); - - // Custom fields are listed seperately in column list, but are only 1 column - if(self.columns[column] && self.columns[column].widget.instanceOf(et2_nextmatch_customfields)) - { - const cf = self.columns[column].widget.options.customfields; - const visible = self.columns[column].widget.options.fields; - self.sortedColumnsList.push(self.columns[column].widget.id); - - // Turn off all custom fields - for(var field_name in cf) - { - visible[field_name] = false; - } - // Turn on selected custom fields - for(let j = i; j < value.length; j++) - { - if(value[j].indexOf(et2_customfields_list.PREFIX) != 0) - { - continue; - } - self.sortedColumnsList.push(value[j]); - - visible[value[j].substring(1)] = true; - i++; - } - (self.columns[column].widget).set_visible(visible); - } - else - { - self.sortedColumnsList.push(col_name); - } + if(!self.columns[column]) + { + continue } - columnMgr.setColumnVisibilitySet(visibility); + if(visibility[value[i]]) + { + visibility[value[i]].visible = true; + } + let col_name = self._getColumnName(self.columns[column].widget); - // Hide popup - self.selectPopup.toggle(); + // Custom fields are listed seperately in column list, but are only 1 column + if(self.columns[column] && self.columns[column].widget.instanceOf(et2_nextmatch_customfields)) + { + const cf = self.columns[column].widget.options.customfields; + const visible = self.columns[column].widget.options.fields; + self.sortedColumnsList.push(self.columns[column].widget.id); + + // Turn off all custom fields + for(var field_name in cf) + { + visible[field_name] = false; + } + // Turn on selected custom fields + for(let j = i; j < value.length; j++) + { + if(value[j].indexOf(et2_customfields_list.PREFIX) != 0) + { + continue; + } + self.sortedColumnsList.push(value[j]); + + visible[value[j].substring(1)] = true; + i++; + } + (self.columns[column].widget).set_visible(visible); + } + else + { + self.sortedColumnsList.push(col_name); + } + } + columnMgr.setColumnVisibilitySet(visibility); self.dataview.updateColumns(); // Auto refresh - self._set_autorefresh(selectPopup.autoRefresh); + self._set_autorefresh(values.autoRefresh); - // Set default or clear forced if(show_letters) { self.activeFilters.selectcols.push('lettersearch'); @@ -2063,32 +2052,33 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2 self.selectPopup = null; }; - const cancelButton = loadWebComponent("et2-button", { - label: this.egw().lang("cancel"), - image: "cancel", - slot: "buttons" - }, this); - cancelButton.onclick = function() - { - self.selectPopup.toggle(); - }; + // Build the popup + const apps = this.egw().user('apps'); + let colDialog = new Et2Dialog(this.egw()); + colDialog.transformAttributes({ + title: this.egw().lang("Select columns"), + buttons: Et2Dialog.BUTTONS_OK_CANCEL, + template: this.egw().link(this.egw().webserverUrl + "/api/templates/default/nm_column_selection.xet"), + callback: updateColumns, + value: { + content: { + autoRefresh: parseInt(this._get_autorefresh()) + }, + readonlys: { + default_preference: typeof apps.admin == "undefined" + }, + modifications: { + autoRefresh: { + disabled: this.options.disable_autorefresh + }, + columns: { + columns: columns, + } + } + } + }); - selectPopup.append(okButton); - selectPopup.append(cancelButton); - - this.selectPopup = jQuery(document.createElement("div")) - .addClass("colselection ui-dialog ui-widget-content") - .append(selectPopup) - .appendTo(this.innerDiv); - - const t_position = jQuery(e.target).position(); - const s_position = this.div.position(); - const max_height = this.getDOMNode().getElementsByClassName('egwGridView_outer')[0]['tBodies'][0].clientHeight - - (2 * this.selectPopup.find('.dialogFooterToolbar').height()); - this.selectPopup.find('.ui-multiselect-checkboxes').css('max-height', max_height); - this.selectPopup.css("top", t_position.top) - .css("left", s_position.left + this.div.width() - this.selectPopup.width()) - .css("position", "absolute"); + document.body.appendChild(colDialog); } /** diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index 63e18fa699..c2c2983b88 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -60,6 +60,7 @@ import './Et2Link/Et2LinkList'; import './Et2Link/Et2LinkSearch'; import './Et2Link/Et2LinkString'; import './Et2Link/Et2LinkTo'; +import './Et2Nextmatch/ColumnSelection'; import './Et2Nextmatch/Headers/AccountFilterHeader'; import './Et2Nextmatch/Headers/CustomFilterHeader'; import './Et2Nextmatch/Headers/EntryHeader'; diff --git a/api/templates/default/nm_column_selection.xet b/api/templates/default/nm_column_selection.xet new file mode 100644 index 0000000000..413aab1416 --- /dev/null +++ b/api/templates/default/nm_column_selection.xet @@ -0,0 +1,22 @@ + + + + + + \ No newline at end of file