/**
* Column selector for nextmatch
*/
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";
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 [
super.styles,
shoelace,
css`
:host {
max-height: inherit;
min-width: 35em;
display: flex;
flex-direction: column;
flex: 1 1 auto;
--icon-width: 20px;
}
sl-menu {
flex: 1 10 auto;
overflow-y: auto;
max-height: 50em;
}
/* 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},
columns: {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 render() : TemplateResult
{
return html`
${repeat(this.__columns, (column) => column.id, (column) => this.rowTemplate(column))}
`;
}
protected footerTemplate()
{
let autoRefresh = html`
`;
// Add default checkbox for admins
const apps = this.egw().user('apps');
return html`
${this.__autoRefresh !== "false" ? autoRefresh : ''}
${!apps['admin'] ? '' : html`
`
}
`;
}
/**
* Template for each individual column
*
* @param column
* @returns {TemplateResult}
* @protected
*/
protected rowTemplate(column) : TemplateResult
{
const isCustom = column.widget?.instanceOf(et2_nextmatch_customfields) || false;
const alwaysOn = [et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS, et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT].indexOf(column.visibility) !== -1;
// Don't show disabled columns
if(column.visibility == et2_dataview_column.ET2_COL_VISIBILITY_DISABLED)
{
return html``;
}
return html`
${column.caption}
${isCustom ? this.customFieldsTemplate(column) : ''}
`;
}
/**
* 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((widget).customfields))
{
// No customfields defined, don't show column
return html``;
}
return html`
${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)
});
})}
`;
}
columnClickHandler(event)
{
const item = event.detail.item;
// Toggle checked state
item.checked = !item.checked;
}
handleSelectAll(event)
{
let checked = (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 = 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);
})
}
}
});
// Add in letters
this.shadowRoot?.querySelectorAll("[part='columns'] > :not(.column)").forEach((i : SlMenuItem) =>
{
if(i.checked)
{
value.push(i.value);
}
})
return value;
}
set value(new_value)
{
// TODO? Only here to avoid error right now
}
private get _autoRefreshNode() : Et2Select
{
return (this.shadowRoot?.querySelector("#nm_autorefresh"));
}
private get _preferenceNode() : Et2Select
{
return (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);