Better nm column selection

api/js/etemplate/Et2Nextmatch/ColumnSelection.ts

@@ -0,0 +1,297 @@
+/**
+ * Column selector for nextmatch
+ */
+import {classMap, css, html, LitElement, PropertyValues, repeat, TemplateResult} from "@lion/core";
+import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
+import {et2_nextmatch_customfields} from "../et2_extension_nextmatch";
+import shoelace from "../Styles/shoelace";
+import {et2_dataview_column} from "../et2_dataview_model_columns";
+import {et2_customfields_list} from "../et2_extension_customfields";
+import Sortable from "sortablejs/modular/sortable.complete.esm";
+import {cssImage} from "../Et2Widget/Et2Widget";
+import {SlMenuItem} from "@shoelace-style/shoelace";
+import {Et2Select} from "../Et2Select/Et2Select";
+
+export class Et2ColumnSelection extends Et2InputWidget(LitElement)
+{
+	static get styles()
+	{
+		return [
+			// Parent (SlSelect) returns a single cssResult, not an array
+			super.styles,
+			shoelace,
+			css`
+			:host {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				flex: 1 0 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);
+			}
+			.title sl-icon {
+				vertical-align: middle;
+				cursor: pointer;
+			}
+			sl-menu {
+				flex: 1 1 auto;
+				overflow-y: auto;
+			}
+			/* Drag handle on columns (not individual custom fields or search letter) */
+			sl-menu > .select_row::part(base) {
+				padding-left: 10px;
+			}
+			sl-menu > .column::part(base) {
+				background-image: ${cssImage("splitter_vert")};
+				background-position: 3px 1.5ex;
+				background-repeat: no-repeat;
+				cursor: grab;
+			}
+			/* Change vertical alignment of CF checkbox line to up with title, not middle */
+			.custom_fields::part(base) {
+				align-items: baseline;
+			}
+			`
+		]
+	}
+
+	static get properties()
+	{
+		return {
+			/**
+			 * List of currently selected columns
+			 */
+			value: {type: Object},
+
+			autoRefresh: {type: Number}
+		}
+	}
+
+	private __columns = [];
+	private __autoRefresh : number | false = false;
+	private sort : Sortable;
+
+	constructor(...args : any[])
+	{
+		super(...args);
+
+		this.columnClickHandler = this.columnClickHandler.bind(this);
+		this.handleSelectAll = this.handleSelectAll.bind(this);
+	}
+
+	connectedCallback()
+	{
+		super.connectedCallback();
+
+		this.updateComplete.then(() =>
+		{
+			this.sort = Sortable.create(this.shadowRoot.querySelector('sl-menu'), {
+				ghostClass: 'ui-fav-sortable-placeholder',
+				draggable: 'sl-menu-item.column',
+				dataIdAttr: 'value',
+				direction: 'vertical',
+				delay: 25
+			});
+		});
+	}
+
+	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()}
+        <sl-menu @sl-select="${this.columnClickHandler}" part="columns">
+            ${repeat(this.__columns, (column) => column.id, (column) => this.rowTemplate(column))}
+        </sl-menu>
+        <et2-hbox class="dialogFooterToolbar">
+            <slot name="buttons"></slot>
+            ${this.footerTemplate()}
+        </et2-hbox>`;
+	}
+
+	protected headerTemplate()
+	{
+		return html`
+            <div class="title">
+                <sl-icon name="check-all" @click=${this.handleSelectAll}></sl-icon>
+                ${this.egw().lang("Select columns")}
+            </div>
+		`;
+	}
+
+	protected footerTemplate()
+	{
+		let autoRefresh = html`
+            <et2-select id="nm_autorefresh" empty_label="Refresh" statustext="Automatically refresh list"
+                        value="${this.__autoRefresh}">
+            </et2-select>
+		`;
+		// Add default checkbox for admins
+		const apps = this.egw().user('apps');
+
+		return html`
+            ${this.__autoRefresh !== false ? autoRefresh : ''}
+            ${!apps['admin'] ? '' : html`
+                <et2-select id="default_preference" empty_label="${this.egw().lang("Preference")}">
+                </et2-select>`
+            }
+		`;
+	}
+
+	/**
+	 * Template for each individual column
+	 *
+	 * @param column
+	 * @returns {TemplateResult}
+	 * @protected
+	 */
+	protected rowTemplate(column) : TemplateResult
+	{
+		let isCustom = column.widget?.instanceOf(et2_nextmatch_customfields) || false;
+		/*     ?disabled=${column.visibility == et2_dataview_column.ET2_COL_VISIBILITY_DISABLED} */
+		return html`
+            <sl-menu-item
+                    value="${column.id}"
+                    ?checked=${column.visibility == et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE}
+
+                    title="${column.title}"
+                    class="${classMap({
+                        select_row: true,
+                        custom_fields: isCustom,
+                        column: column.widget
+                    })}">
+                ${column.caption}
+                <!-- Custom fields get listed separately -->
+                ${isCustom ? this.customFieldsTemplate(column) : ''}
+            </sl-menu-item>`;
+	}
+
+	/**
+	 * Template for all custom fields
+	 * Does not include "Custom fields", it's done as a regular column
+	 *
+	 * @param column
+	 * @returns {TemplateResult}
+	 * @protected
+	 */
+	protected customFieldsTemplate(column) : TemplateResult
+	{
+		// Custom fields get listed separately
+		let widget = column.widget;
+		if(jQuery.isEmptyObject((<et2_nextmatch_customfields><unknown>widget).customfields))
+		{
+			// No customfields defined, don't show column
+			return html``;
+		}
+		return html`
+            <sl-divider></sl-divider>
+            ${repeat(Object.values(widget.customfields), (field) => field.name, (field) =>
+            {
+                return this.rowTemplate({
+                    id: et2_customfields_list.PREFIX + field.name,
+                    caption: field.label,
+                    visibility: (widget.fields[field.name] ? et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE : false)
+
+                });
+            })}
+            <sl-divider></sl-divider>`;
+	}
+
+	columnClickHandler(event)
+	{
+		const item = event.detail.item;
+
+		// Toggle checked state
+		item.checked = !item.checked;
+	}
+
+	handleSelectAll(event)
+	{
+		let checked = (<SlMenuItem>this.shadowRoot.querySelector("sl-menu-item")).checked || false;
+		this.shadowRoot.querySelectorAll('sl-menu-item').forEach((item) => {item.checked = !checked});
+	}
+
+	set columns(new_columns)
+	{
+		this.__columns = new_columns;
+		this.requestUpdate();
+	}
+
+	get value()
+	{
+		let value = [];
+
+		this.sort.toArray().forEach((val) =>
+		{
+			let column = this.__columns.find((col) => col.id == val);
+			let menuItem = <SlMenuItem>this.shadowRoot.querySelector("[value='" + val + "']");
+			if(column && menuItem)
+			{
+				if(menuItem.checked)
+				{
+					value.push(val);
+				}
+				if(column.widget?.customfields)
+				{
+					menuItem.querySelectorAll("[value][checked]").forEach((cf : SlMenuItem) =>
+					{
+						value.push(cf.value);
+					})
+				}
+			}
+		});
+		return value;
+	}
+
+	private get _autoRefreshNode() : Et2Select
+	{
+		return (<Et2Select>this.shadowRoot?.querySelector("#nm_autorefresh"));
+	}
+
+	private get _preferenceNode() : Et2Select
+	{
+		return (<Et2Select>this.shadowRoot.querySelector("#default_preference"))
+	}
+
+	get autoRefresh() : number
+	{
+		return parseInt(this._autoRefreshNode?.value.toString()) || 0;
+	}
+
+	set autoRefresh(new_value : number)
+	{
+		this.__autoRefresh = new_value;
+		this.requestUpdate("autoRefresh");
+	}
+}
+
+customElements.define("et2-nextmatch-columnselection", Et2ColumnSelection);

api/js/etemplate/et2_extension_nextmatch.ts

@@ -70,13 +70,13 @@ import {et2_template} from "./et2_widget_template";
 import {egw} from "../jsapi/egw_global";
 import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
 import {egwIsMobile} from "../egw_action/egw_action_common.js";
-import Sortable from 'sortablejs/modular/sortable.complete.esm.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 {et2_selectAccount} from "./et2_widget_SelectAccount";
 let keep_import : Et2AccountFilterHeader
@@ -1938,96 +1938,32 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 		{
 			var col = columnMgr.columns[i];
 			const widget = this.columns[i].widget;
-
+			columns.push({...col, widget: widget});
-			if(col.visibility == et2_dataview_column.ET2_COL_VISIBILITY_DISABLED ||
-				col.visibility == et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
-			{
-				continue;
-			}
-			if(col.caption)
-			{
-				columns.push({value: col.id, label: col.caption});
-				if(col.visibility == et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE) columns_selected.push(col.id);
-			}
-			// Custom fields get listed separately
-			if(widget.instanceOf(et2_nextmatch_customfields))
-			{
-				if(jQuery.isEmptyObject((<et2_nextmatch_customfields><unknown>widget).customfields))
-				{
-					// No customfields defined, don't show column
-					columns.pop();
-					continue;
-				}
-				for(var field_name in (<et2_nextmatch_customfields><unknown>widget).customfields)
-				{
-					columns.push({
-						value: et2_nextmatch_customfields.PREFIX + field_name, label: " - " +
-							(<et2_nextmatch_customfields><unknown>widget).customfields[field_name].label
-					});
-					if(widget.options.fields[field_name])
-					{
-						columns_selected.push(et2_customfields_list.PREFIX + field_name);
-					}
-				}
-			}
 		}
 
 		// Letter search
 		if(this.options.settings.lettersearch)
 		{
-			columns.push({value: LETTERS, label: egw.lang('Search letter')});
+			columns.push({
-			if(this.header.lettersearch.is(':visible')) columns_selected.push(LETTERS);
+				id: LETTERS,
+				caption: this.egw().lang('Search letter'),
+				visibility: (this.header.lettersearch.is(':visible') ? et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE : et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
+			});
 		}
 
 		// Build the popup
-		if(!this.selectPopup)
+		let selectPopup = new Et2ColumnSelection();
-		{
+		selectPopup.setParent(this);
-			const select = <Et2Select>loadWebComponent("et2-select", {
+		selectPopup.columns = columns;
-				id: "columns",
-				multiple: true,
-				rows: 8,
-				empty_label: this.egw().lang("select columns"),
-				selected_first: false
-			}, this);
-			// Don't let options run through the loading stuff
-			select.select_options = columns;
-			select.value = columns_selected;
-
-			let autoRefresh;
-			let sort;
 		if(!this.options.disable_autorefresh)
 		{
-				autoRefresh = <Et2Select>loadWebComponent("et2-select", {
+			selectPopup.autoRefresh = parseInt(this._get_autorefresh());
-					empty_label: "Refresh",
-					id: "nm_autorefresh",
-					statustext: egw.lang("Automatically refresh list"),
-					value: this._get_autorefresh()
-				}, this);
-				autoRefresh.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"
-				};
 		}
 
-			const defaultCheck = <Et2Select>loadWebComponent("et2-select", {
-				id: "nm_col_preference",
-				empty_label: "Preference",
-				value: this.options.settings.columns_forced ? 'force' : ''
-			}, this);
-			defaultCheck.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'}
-			];
-
 		const okButton = <Et2Button>loadWebComponent("et2-button", {
 			image: "check",
-				label: this.egw().lang("ok")
+			label: this.egw().lang("ok"),
+			slot: "buttons"
 		}, this);
 		okButton.onclick = function()
 		{
@@ -2042,7 +1978,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 						visibility[col.id] = {visible: false};
 					}
 				}
-				const value = select.value;
+			const value = selectPopup.value;
 
 				// Update & remove letter filter
 				if(self.header.lettersearch)
@@ -2058,7 +1994,6 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 					}
 					self._set_lettersearch(show_letters);
 				}
-
 				let column = 0;
 				for(var i = 0; i < value.length; i++)
 				{
@@ -2097,42 +2032,13 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 				}
 				columnMgr.setColumnVisibilitySet(visibility);
 
-				this.sortedColumnsList = [];
-				if(sort)
-				{
-					sort.toArray().forEach((data_id) =>
-					{
-						const value = select.getValue();
-						if(data_id.match(/^col_/) && value.indexOf(data_id) != -1)
-						{
-							const col_id = data_id.replace('col_', '');
-							const col_widget = self.columns[col_id].widget;
-							if(col_widget.customfields)
-							{
-								self.sortedColumnsList.push(col_widget.id);
-								for(let field_name in col_widget.customfields)
-							{
-								if(jQuery.isEmptyObject(col_widget.options.fields) || col_widget.options.fields[field_name] == true)
-								{
-									self.sortedColumnsList.push(et2_customfields_list.PREFIX + field_name);
-								}
-							}
-							}
-							else
-							{
-								self.sortedColumnsList.push(self._getColumnName(col_widget));
-							}
-						}
-					});
-				}
-
 				// Hide popup
 				self.selectPopup.toggle();
 
 				self.dataview.updateColumns();
 
 				// Auto refresh
-				self._set_autorefresh(autoRefresh ? autoRefresh.get_value() : 0);
+			self._set_autorefresh(selectPopup.autoRefresh);
 
 			// Set default or clear forced
 			if(show_letters)
@@ -2146,56 +2052,22 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
 
 		const cancelButton = <Et2Button>loadWebComponent("et2-button", {
 			label: this.egw().lang("cancel"),
-				image: "cancel"
+			image: "cancel",
+			slot: "buttons"
 		}, this);
 		cancelButton.onclick = function()
 		{
 			self.selectPopup.toggle();
-				self.selectPopup = null;
 		};
 
-			select.updateComplete.then(() =>
+		selectPopup.append(okButton);
-			{
+		selectPopup.append(cancelButton);
-				window.setTimeout(() =>
-				{
-					sort = Sortable.create(select.shadowRoot.querySelector('.select__tags'), {
-						ghostClass: 'ui-fav-sortable-placeholder',
-						draggable: 'et2-tag',
-						dataIdAttr: 'value',
-						direction: 'vertical',
-						delay: 25,
 
-					});
-				}, 100);
-			});
-
-			const $footerWrap = jQuery(document.createElement("div"))
-				.addClass('dialogFooterToolbar')
-				.append(okButton)
-				.append(cancelButton);
 		this.selectPopup = jQuery(document.createElement("div"))
 			.addClass("colselection ui-dialog ui-widget-content")
-				.append(select)
+			.append(selectPopup)
-				.append($footerWrap)
 			.appendTo(this.innerDiv);
 
-			// Add autorefresh
-			if(autoRefresh)
-			{
-				$footerWrap.append(autoRefresh);
-			}
-
-			// Add default checkbox for admins
-			const apps = this.egw().user('apps');
-			if(apps['admin'])
-			{
-				$footerWrap.append(defaultCheck);
-			}
-		}
-		else
-		{
-			this.selectPopup.toggle();
-		}
 		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 -
@@ -3791,10 +3663,12 @@ export class et2_nextmatch_header_bar extends et2_DOMWidget implements et2_INext
 				this.nextmatch.applyFilters(set);
 			});
 		}
+		// Sometimes the filter does not display the current value
+		// Call sync to try to get it to display
 		select.updateComplete.then(async() =>
 		{
 			await select.updateComplete;
-			//select.syncValueFromItems();
+			select.syncItemsFromValue();
 		})
 		return select;
 	}

api/templates/default/etemplate2.css

@@ -4003,10 +4003,6 @@ tr.disableIfNoEPL {
     border: 2px dashed silver;
 }
 
-.colselection [id*="columns"]::part(tags) {
-    max-height: 10em;
-}
-
 .colselection .dialogFooterToolbar {
     display: flex;
     flex-direction: row;