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

Change nextmatch column selection to use webcomponents

Browse Source
This commit is contained in:
nathan 2022-07-05 15:26:10 -06:00
parent 761b0ee6cc
commit 6c8e85311f
2 changed files with 98 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,6 +74,9 @@ import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
import {egwIsMobile} from "../egw_action/egw_action_common.js"; import {egwIsMobile} from "../egw_action/egw_action_common.js";
import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
import {Et2Dialog} from "./Et2Dialog/Et2Dialog"; import {Et2Dialog} from "./Et2Dialog/Et2Dialog";
import {Et2Select} from "./Et2Select/Et2Select";
import {Et2Button} from "./Et2Button/Et2Button";
import {loadWebComponent} from "./Et2Widget/Et2Widget";
//import {et2_selectAccount} from "./et2_widget_SelectAccount"; //import {et2_selectAccount} from "./et2_widget_SelectAccount";
@ -1927,7 +1930,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
// ID for faking letter selection in column selection // ID for faking letter selection in column selection
const LETTERS = '~search_letter~'; const LETTERS = '~search_letter~';
const columns = {}; const columns = [];
const columns_selected = []; const columns_selected = [];
for(var i = 0; i < columnMgr.columns.length; i++) for(var i = 0; i < columnMgr.columns.length; i++)
@ -1942,7 +1945,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
} }
if(col.caption) if(col.caption)
{ {
columns[col.id] = 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); if(col.visibility == et2_dataview_column.ET2_COL_VISIBILITY_VISIBLE) columns_selected.push(col.id);
} }
// Custom fields get listed separately // Custom fields get listed separately
@ -1951,14 +1954,19 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
if(jQuery.isEmptyObject((<et2_nextmatch_customfields><unknown>widget).customfields)) if(jQuery.isEmptyObject((<et2_nextmatch_customfields><unknown>widget).customfields))
{ {
// No customfields defined, don't show column // No customfields defined, don't show column
delete (columns[col.id]); columns.pop();
continue; continue;
} }
for(var field_name in (<et2_nextmatch_customfields><unknown>widget).customfields) for(var field_name in (<et2_nextmatch_customfields><unknown>widget).customfields)
{ {
columns[et2_nextmatch_customfields.PREFIX + field_name] = " - " + columns.push({
(<et2_nextmatch_customfields><unknown>widget).customfields[field_name].label; value: et2_nextmatch_customfields.PREFIX + field_name, label: " - " +
if(widget.options.fields[field_name]) columns_selected.push(et2_customfields_list.PREFIX + field_name); (<et2_nextmatch_customfields><unknown>widget).customfields[field_name].label
});
if(widget.options.fields[field_name])
{
columns_selected.push(et2_customfields_list.PREFIX + field_name);
}
} }
} }
} }
@ -1966,31 +1974,32 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
// Letter search // Letter search
if(this.options.settings.lettersearch) if(this.options.settings.lettersearch)
{ {
columns[LETTERS] = egw.lang('Search letter'); columns.push({value: LETTERS, label: egw.lang('Search letter')});
if(this.header.lettersearch.is(':visible')) columns_selected.push(LETTERS); if(this.header.lettersearch.is(':visible')) columns_selected.push(LETTERS);
} }
// Build the popup // Build the popup
if(!this.selectPopup) if(!this.selectPopup)
{ {
const select = <et2_selectbox>et2_createWidget("select", { const select = <Et2Select>loadWebComponent("et2-select", {
id: "columns",
multiple: true, multiple: true,
rows: 8, rows: 8,
empty_label: this.egw().lang("select columns"), empty_label: this.egw().lang("select columns"),
selected_first: false, selected_first: false
value_class: "selcolumn_sortable_"
}, this); }, this);
select.set_select_options(columns); // Don't let options run through the loading stuff
select.set_value(columns_selected); select.select_options = columns;
select.value = columns_selected;
let autoRefresh; let autoRefresh;
let sort;
if(!this.options.disable_autorefresh) if(!this.options.disable_autorefresh)
{ {
autoRefresh = <et2_selectbox>et2_createWidget("select", { autoRefresh = <Et2Select>loadWebComponent("et2-select", {
"empty_label": "Refresh" empty_label: "Refresh",
}, this); id: "nm_autorefresh",
autoRefresh.set_id("nm_autorefresh"); select_options: {
autoRefresh.set_select_options({
// Cause [unknown] problems with mail // Cause [unknown] problems with mail
30: "30 seconds", 30: "30 seconds",
//60: "1 Minute", //60: "1 Minute",
@ -1998,25 +2007,27 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
300: "5 Minutes", 300: "5 Minutes",
900: "15 Minutes", 900: "15 Minutes",
1800: "30 Minutes" 1800: "30 Minutes"
}); },
autoRefresh.set_value(this._get_autorefresh()); statustext: egw.lang("Automatically refresh list"),
autoRefresh.set_statustext(egw.lang("Automatically refresh list")); value: this._get_autorefresh()
}, this);
} }
const defaultCheck = <et2_selectbox>et2_createWidget("select", {"empty_label": "Preference"}, this); const defaultCheck = <Et2Select>loadWebComponent("et2-select", {
defaultCheck.set_id('nm_col_preference'); id: "nm_col_preference",
defaultCheck.set_select_options({ empty_label: "Preference",
'default': {label: 'Default', title: 'Set these columns as the default'}, value: this.options.settings.columns_forced ? 'force' : ''
'reset': {label: 'Reset', title: "Reset all user's column preferences"}, }, this);
'force': {label: 'Force', title: 'Force column preference so users cannot change it'} defaultCheck.select_options = [
}); {value: 'default', label: 'Default', title: 'Set these columns as the default'},
defaultCheck.set_value(this.options.settings.columns_forced ? 'force' : ''); {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 = <et2_button>et2_createWidget("buttononly", { ];
"background_image": true,
image: "check" const okButton = <Et2Button>loadWebComponent("et2-button", {
image: "check",
label: this.egw().lang("ok")
}, this); }, this);
okButton.set_label(this.egw().lang("ok"));
okButton.onclick = function() okButton.onclick = function()
{ {
// Update visibility // Update visibility
@ -2030,7 +2041,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
visibility[col.id] = {visible: false}; visibility[col.id] = {visible: false};
} }
} }
const value = select.getValue(); const value = select.value;
// Update & remove letter filter // Update & remove letter filter
if(self.header.lettersearch) if(self.header.lettersearch)
@ -2073,7 +2084,10 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
// Turn on selected custom fields - start from 0 in case they're not in order // Turn on selected custom fields - start from 0 in case they're not in order
for(let j = 0; j < value.length; j++) for(let j = 0; j < value.length; j++)
{ {
if(value[j].indexOf(et2_customfields_list.PREFIX) != 0) continue; if(value[j].indexOf(et2_customfields_list.PREFIX) != 0)
{
continue;
}
visible[value[j].substring(1)] = true; visible[value[j].substring(1)] = true;
i++; i++;
} }
@ -2083,9 +2097,10 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
columnMgr.setColumnVisibilitySet(visibility); columnMgr.setColumnVisibilitySet(visibility);
this.sortedColumnsList = []; this.sortedColumnsList = [];
jQuery(select.getDOMNode()).find('li[class^="selcolumn_sortable_"]').each(function(i, v) if(sort)
{
sort.toArray().forEach((data_id) =>
{ {
const data_id = v.getAttribute('data-value');
const value = select.getValue(); const value = select.getValue();
if(data_id.match(/^col_/) && value.indexOf(data_id) != -1) if(data_id.match(/^col_/) && value.indexOf(data_id) != -1)
{ {
@ -2108,6 +2123,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
} }
} }
}); });
}
// Hide popup // Hide popup
self.selectPopup.toggle(); self.selectPopup.toggle();
@ -2127,39 +2143,38 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
self.selectPopup = null; self.selectPopup = null;
}; };
const cancelButton = <et2_button>et2_createWidget("buttononly", { const cancelButton = <Et2Button>loadWebComponent("et2-button", {
"background_image": true, label: this.egw().lang("cancel"),
image: "cancel" image: "cancel"
}, this); }, this);
cancelButton.set_label(this.egw().lang("cancel"));
cancelButton.onclick = function() cancelButton.onclick = function()
{ {
self.selectPopup.toggle(); self.selectPopup.toggle();
self.selectPopup = null; self.selectPopup = null;
}; };
const $select = jQuery(select.getDOMNode());
let sortablejs = Sortable.create(select.getDOMNode().getElementsByClassName('ui-multiselect-checkboxes')[0], { select.updateComplete.then(() =>
{
window.setTimeout(() =>
{
sort = Sortable.create(select.shadowRoot.querySelector('.select__tags'), {
ghostClass: 'ui-fav-sortable-placeholder', ghostClass: 'ui-fav-sortable-placeholder',
draggable: 'li[class^="selcolumn_sortable_col"]', draggable: 'et2-tag',
filter: 'li[class^="selcolumn_sortable_#"]', dataIdAttr: 'value',
direction: 'vertical', direction: 'vertical',
delay: 25, delay: 25,
});
}, 100);
}); });
$select.disableSelection();
$select.find('li[class^="selcolumn_sortable_"]').each(function(i, v)
{
// @ts-ignore
jQuery(v).attr('data-value', (jQuery(v).find('input')[0].value))
});
const $footerWrap = jQuery(document.createElement("div")) const $footerWrap = jQuery(document.createElement("div"))
.addClass('dialogFooterToolbar') .addClass('dialogFooterToolbar')
.append(okButton.getDOMNode()) .append(okButton)
.append(cancelButton.getDOMNode()); .append(cancelButton);
this.selectPopup = jQuery(document.createElement("div")) this.selectPopup = jQuery(document.createElement("div"))
.addClass("colselection ui-dialog ui-widget-content") .addClass("colselection ui-dialog ui-widget-content")
.append(select.getDOMNode()) .append(select)
.append($footerWrap) .append($footerWrap)
.appendTo(this.innerDiv); .appendTo(this.innerDiv);
@ -2173,7 +2188,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
const apps = this.egw().user('apps'); const apps = this.egw().user('apps');
if(apps['admin']) if(apps['admin'])
{ {
$footerWrap.append(defaultCheck.getSurroundings().getDOMNode(defaultCheck.getDOMNode())); $footerWrap.append(defaultCheck);
} }
} }
else else
@ -2186,7 +2201,8 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
(2 * this.selectPopup.find('.dialogFooterToolbar').height()); (2 * this.selectPopup.find('.dialogFooterToolbar').height());
this.selectPopup.find('.ui-multiselect-checkboxes').css('max-height', max_height); this.selectPopup.find('.ui-multiselect-checkboxes').css('max-height', max_height);
this.selectPopup.css("top", t_position.top) this.selectPopup.css("top", t_position.top)
.css("left", s_position.left + this.div.width() - this.selectPopup.width()); .css("left", s_position.left + this.div.width() - this.selectPopup.width())
.css("position", "absolute");
} }
/** /**

32
api/templates/default/etemplate2.css
View File

@ -4005,35 +4005,13 @@ tr.disableIfNoEPL {
border: 2px dashed silver; border: 2px dashed silver;
} }
.colselection.ui-widget-content { .colselection [id*="columns"]::part(tags) {
width: 45%; max-height: 10em;
} }
.colselection .et2_selectbox .ui-widget-header.ui-helper-clearfix { .colselection .dialogFooterToolbar {
padding: 10px; display: flex;
font-size: 10pt; flex-direction: row;
}
.colselection .et2_selectbox .ui-multiselect-checkboxes li {
border-bottom: 1px solid #e6e6e6;
padding-bottom: 3px;
padding-top: 3px;
}
.colselection .et2_selectbox .ui-multiselect-checkboxes li label {
cursor: grab;
}
.colselection .et2_selectbox .ui-multiselect-checkboxes li label.ui-state-hover {
background: none;
}
.colselection.ui-widget-content .et2_selectbox {
height: calc(100% - 68px);
}
.colselection.ui-widget-content .et2_selectbox .ui-multiselect-checkboxes {
height: calc(100% - 68px) !important;
} }
.et2_countdown { .et2_countdown {