holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Put nextmatch column selection into a dialog

Browse Source
This commit is contained in:
nathan 2022-08-18 14:46:44 -06:00
parent c91e5cf218
commit 4318d1c0a5
6 changed files with 119 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Et2Dialog/Et2DialogContent.ts
View File

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

7
api/js/etemplate/Et2Dialog/Et2DialogOverlay.ts
View File

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

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

@ -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"));

156
api/js/etemplate/et2_extension_nextmatch.ts
View File

@ -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);
}
/**

1
api/js/etemplate/etemplate2.ts
View File

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

22
api/templates/default/nm_column_selection.xet Normal file
View File

@ -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>