Put nextmatch column selection into a dialog

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;

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()

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()}
-        <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>
-		`;
+            <sl-icon slot="header" name="check-all" @click=${this.handleSelectAll}
+                     title="${this.egw().lang("Select all")}"
+                     style="font-size:24px"></sl-icon>
+            <sl-menu @sl-select="${this.columnClickHandler}" part="columns" slot="content">
+                ${repeat(this.__columns, (column) => column.id, (column) => this.rowTemplate(column))}
+            </sl-menu>`;
 	}
 
 	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`
-                <et2-select id="default_preference" emptyLabel="${this.egw().lang("Preference")}">
+                <et2-select id="default_preference" emptylabel="${this.egw().lang("Preference")}">
                 </et2-select>`
             }
 		`;
@@ -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 (<Et2Select>this.shadowRoot?.querySelector("#nm_autorefresh"));

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 = <Et2Button>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++;
-						}
-						(<et2_customfields_list><unknown>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++;
+					}
+					(<et2_customfields_list><unknown>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 = <Et2Button>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);
 	}
 
 	/**

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';

api/templates/default/nm_column_selection.xet

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
+<!-- $Id$ -->
+<overlay>
+    <template id="nm_column_selection" template="" lang="" group="0" version="16.1">
+        <et2-nextmatch-columnselection id="columns"></et2-nextmatch-columnselection>
+        <hbox>
+            <et2-select id="autoRefresh" emptyLabel="Refresh" statustext="Automatically refresh list">
+                <option value="30">30 seconds</option>
+                <option value="180">3 Minutes</option>
+                <option value="300">5 Minutes</option>
+                <option value="900">15 Minutes</option>
+                <option value="1800">30 Minutes</option>
+            </et2-select>
+            <et2-select id="default_preference" emptyLabel="Preference">
+                <option value="default" title="Set these columns as the default">Default</option>,
+                <option value="reset" title="Reset all user's column preferences">Reset</option>,
+                <option value="force" title="Force column preference so users cannot change it">Force</option>
+            </et2-select>
+        </hbox>
+    </template>
+</overlay>