extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 09:42:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select: Fix some static option selects did not show their values when readonly

Browse Source
This commit is contained in:
nathan 2023-08-28 13:50:09 -06:00
parent b34789e676
commit 0b036f49b8
4 changed files with 94 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -911,9 +911,16 @@ export class Et2SelectApp extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
}
this.static_options = so.app(this, {other: this.other || []});
public connectedCallback()
{
super.connectedCallback()
this.fetchComplete = so.app(this, {}).then((options) =>
{
this.set_static_options(cleanSelectOptions(options));
})
}
}
@ -924,7 +931,7 @@ export class Et2SelectTab extends Et2SelectApp
{
constructor()
{
super();
super(...arguments);
this.allowFreeEntries = true;
}
@ -982,6 +989,7 @@ export class Et2SelectBitwise extends Et2StaticSelectMixin(Et2Select)
{
set value(new_value)
{
/* beforeSendToClient does this, we don't want it twice
let oldValue = this._value;
let expanded_value = [];
let options = this.select_options;
@ -994,8 +1002,8 @@ export class Et2SelectBitwise extends Et2StaticSelectMixin(Et2Select)
}
}
super.value = expanded_value;
this.requestUpdate("value", oldValue);
*/
super.value = new_value;
}
}
@ -1006,7 +1014,7 @@ export class Et2SelectBool extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
this.static_options = so.bool(this);
}
@ -1020,9 +1028,9 @@ export class Et2SelectDay extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
this.static_options = so.day(this, {other: this.other || []});
this.static_options = so.day(this, {});
}
}
@ -1084,7 +1092,7 @@ export class Et2SelectHour extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
this.static_options = so.hour(this, {other: this.other || []});
}
@ -1097,7 +1105,7 @@ export class Et2SelectMonth extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
this.static_options = so.month(this);
}
@ -1131,9 +1139,9 @@ export class Et2SelectNumber extends Et2StaticSelectMixin(Et2Select)
}
}
constructor()
constructor(...args)
{
super();
super(...args);
this.min = 1;
this.max = 10;
this.interval = 1;
@ -1158,9 +1166,9 @@ customElements.define("et2-select-number", Et2SelectNumber);
export class Et2SelectPercent extends Et2SelectNumber
{
constructor()
constructor(...args)
{
super();
super(...args);
this.min = 0;
this.max = 100;
this.interval = 10;
@ -1175,7 +1183,7 @@ export class Et2SelectPriority extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
this.static_options = so.priority(this);
}
@ -1201,7 +1209,7 @@ export class Et2SelectState extends Et2StaticSelectMixin(Et2Select)
constructor()
{
super();
super(...arguments);
this.countryCode = 'DE';
}
@ -1214,7 +1222,7 @@ export class Et2SelectState extends Et2StaticSelectMixin(Et2Select)
set countryCode(code : string)
{
this.__countryCode = code;
this.static_options = so.state(this, {country_code: code});
this.static_options = <SelectOption[]>so.state(this, {country_code: code});
this.requestUpdate("select_options");
}
@ -1231,9 +1239,13 @@ export class Et2SelectTimezone extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
this.select_options = so.timezone(this, {other: this.other || []});
const options = so.timezone(this, {other: this.other || []});
if(Array.isArray(options))
{
this.static_options = options;
}
}
}
@ -1242,9 +1254,9 @@ customElements.define("et2-select-timezone", Et2SelectTimezone);
export class Et2SelectYear extends Et2SelectNumber
{
constructor()
constructor(args)
{
super();
super(...args);
this.min = -3;
this.max = 2;
}
@ -1267,7 +1279,7 @@ export class Et2SelectLang extends Et2StaticSelectMixin(Et2Select)
{
constructor()
{
super();
super(...arguments);
this.static_options = so.lang(this, {other: this.other || []});
}

123
api/js/etemplate/Et2Select/Et2SelectReadonly.ts
View File

@ -11,8 +11,8 @@
import {css, html, LitElement, repeat, TemplateResult} from "@lion/core";
import {et2_IDetachedDOM} from "../et2_core_interfaces";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {StaticOptions, StaticOptions as so} from "./StaticOptions";
import {find_select_options, SelectOption} from "./FindSelectOptions";
import {Et2StaticSelectMixin, StaticOptions, StaticOptions as so} from "./StaticOptions";
import {cleanSelectOptions, find_select_options, SelectOption} from "./FindSelectOptions";
import {SelectAccountMixin} from "./SelectAccountMixin";
/**
@ -206,14 +206,11 @@ li {
render()
{
if(!this.value || Array.isArray(this.value) && !this.value.length)
{
return this._readonlyRender({label: this.emptyLabel || "", value: ""});
}
return html`
<ul>
${repeat(this.value, (val : string) => val, (val) =>
${repeat(
(Array.isArray(this.value) ? this.value : [this.value]),
(val : string) => val, (val) =>
{
let option = (<SelectOption[]>this.select_options).find(option => option.value == val);
if(!option)
@ -269,16 +266,15 @@ export class Et2SelectAccountReadonly extends SelectAccountMixin(Et2SelectReadon
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
customElements.define("et2-select-account_ro", Et2SelectAccountReadonly);
export class Et2SelectAppReadonly extends Et2SelectReadonly
export class Et2SelectAppReadonly extends Et2StaticSelectMixin(Et2SelectReadonly)
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.app(this, {other: this.other || []});
this.fetchComplete = so.app(this, _attrs).then((options) =>
{
this.set_static_options(cleanSelectOptions(options));
});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -316,15 +312,12 @@ export class Et2SelectBitwiseReadonly extends Et2SelectReadonly
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
customElements.define("et2-select-bitwise_ro", Et2SelectBitwiseReadonly);
export class Et2SelectBoolReadonly extends Et2SelectReadonly
export class Et2SelectBoolReadonly extends Et2StaticSelectMixin(Et2SelectReadonly)
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.bool(this);
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -334,7 +327,6 @@ export class Et2SelectCategoryReadonly extends Et2SelectReadonly
{
protected find_select_options(_attrs)
{
// Need to do this in find_select_options so attrs can be used to get proper options
so.cat(this).then(_options =>
{
@ -356,25 +348,22 @@ export class Et2SelectPercentReadonly extends Et2SelectReadonly
{
constructor()
{
super();
this.select_options = so.percent(this, {});
super(...arguments);
this.suffix = "%%";
this.select_options = so.percent(this);
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
customElements.define("et2-select-percent_ro", Et2SelectPercentReadonly);
export class Et2SelectCountryReadonly extends Et2SelectReadonly
export class Et2SelectCountryReadonly extends Et2StaticSelectMixin(Et2SelectReadonly)
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.country(this, {});
this.fetchComplete = (<Promise<SelectOption[]>>so.country(this, _attrs, true))
.then((options) => {this.set_static_options(cleanSelectOptions(options));});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -382,29 +371,26 @@ customElements.define("et2-select-country_ro", Et2SelectCountryReadonly);
export class Et2SelectDayReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.day(this, {other: this.other || []});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
customElements.define("et2-select-day_ro", Et2SelectDayReadonly);
export class Et2SelectDayOfWeekReadonly extends Et2SelectReadonly
export class Et2SelectDayOfWeekReadonly extends Et2StaticSelectMixin(Et2SelectReadonly)
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.dow(this, {other: this.other || []});
// Wait for connected instead of constructor because attributes make a difference in
// which options are offered
this.fetchComplete = so.dow(this, {other: this.other || []}).then(options =>
{
this.set_static_options(cleanSelectOptions(options));
});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -412,14 +398,10 @@ customElements.define("et2-select-dow_ro", Et2SelectDayOfWeekReadonly);
export class Et2SelectHourReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.hour(this, {other: this.other || []});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -427,29 +409,21 @@ customElements.define("et2-select-hour_ro", Et2SelectHourReadonly);
export class Et2SelectMonthReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.month(this);
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
customElements.define("et2-select-month_ro", Et2SelectMonthReadonly);
export class Et2SelectNumberReadonly extends Et2SelectReadonly
export class Et2SelectNumberReadonly extends Et2StaticSelectMixin(Et2SelectReadonly)
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.number(this, {other: this.other || []});
this.static_options = so.number(this, _attrs);
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -457,13 +431,10 @@ customElements.define("et2-select-number_ro", Et2SelectNumberReadonly);
export class Et2SelectPriorityReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.priority(this);
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -471,14 +442,10 @@ customElements.define("et2-select-priority_ro", Et2SelectPriorityReadonly);
export class Et2SelectStateReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.state(this, {other: this.other || []});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -486,14 +453,10 @@ customElements.define("et2-select-state_ro", Et2SelectStateReadonly);
export class Et2SelectTimezoneReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.timezone(this, {other: this.other || []});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -501,14 +464,10 @@ customElements.define("et2-select-timezone_ro", Et2SelectTimezoneReadonly);
export class Et2SelectYearReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.year(this, {other: this.other || []});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
@ -516,14 +475,10 @@ customElements.define("et2-select-year_ro", Et2SelectYearReadonly);
export class Et2SelectLangReadonly extends Et2SelectReadonly
{
constructor()
protected find_select_options(_attrs)
{
super();
this.select_options = so.lang(this, {other: this.other || []});
}
protected find_select_options(_attrs) {}
}
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement

4
api/js/etemplate/Et2Select/SearchMixin.ts
View File

@ -553,10 +553,10 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
let options = [];
// Any provided options
options = options.concat(this.__select_options);
options = options.concat(this.__select_options ?? []);
// Any kept remote options
options = options.concat(this._selected_remote);
options = options.concat(this._selected_remote ?? []);
if(this.allowFreeEntries)
{

29
api/js/etemplate/Et2Select/StaticOptions.ts
View File

@ -10,7 +10,7 @@
import {sprintf} from "../../egw_action/egw_action_common";
import {Et2SelectReadonly} from "./Et2SelectReadonly";
import {cleanSelectOptions, find_select_options, SelectOption} from "./FindSelectOptions";
import {Et2Select, Et2SelectNumber, Et2WidgetWithSelect} from "./Et2Select";
import {Et2Select, Et2WidgetWithSelect} from "./Et2Select";
export type Et2SelectWidgets = Et2Select | Et2WidgetWithSelect | Et2SelectReadonly;
@ -51,8 +51,17 @@ export const Et2StaticSelectMixin = <T extends Constructor<Et2WidgetWithSelect>>
{
// @ts-ignore
const options = super.select_options || [];
// make sure result is unique
const statics = this.static_options || [];
if(options.length == 0)
{
return statics;
}
if(statics.length == 0)
{
return options;
}
// Merge & make sure result is unique
return [...new Map([...(this.static_options || []), ...options].map(item =>
[item.value, item])).values()];
@ -273,9 +282,9 @@ export const StaticOptions = new class StaticOptionsType
{
var options = [];
var min = attrs.min ?? parseFloat(widget.min);
var max = attrs.max ?? parseFloat(widget.max);
var interval = attrs.interval ?? parseFloat(widget.interval);
var min = parseFloat(attrs.min ?? widget.min ?? 1);
var max = parseFloat(attrs.max ?? widget.max ?? 10);
var interval = parseFloat(attrs.interval ?? widget.interval ?? 1);
var format = attrs.format ?? '%d';
// leading zero specified in interval
@ -302,9 +311,9 @@ export const StaticOptions = new class StaticOptionsType
return options;
}
percent(widget : Et2SelectNumber) : SelectOption[]
percent(widget : Et2SelectWidgets) : SelectOption[]
{
return this.number(widget);
return this.number(widget, {min: 0, max: 100, interval: 10, format: undefined});
}
year(widget : Et2SelectWidgets, attrs?) : SelectOption[]
@ -332,7 +341,7 @@ export const StaticOptions = new class StaticOptionsType
for(var h = 0; h <= 23; ++h)
{
options.push({
value: h,
value: "" + h,
label: timeformat == 12 ?
((12 ? h % 12 : 12) + ' ' + (h < 12 ? egw.lang('am') : egw.lang('pm'))) :
sprintf('%02d', h)
@ -341,10 +350,10 @@ export const StaticOptions = new class StaticOptionsType
return options;
}
app(widget : Et2SelectWidgets | Et2Select, attrs) : SelectOption[] | Promise<SelectOption[]>
app(widget : Et2SelectWidgets | Et2Select, attrs) : Promise<SelectOption[]>
{
var options = ',' + (attrs.other || []).join(',');
return this.cached_server_side(widget, 'select-app', options);
return this.cached_server_side(widget, 'select-app', options, true);
}
cat(widget : Et2SelectWidgets) : Promise<SelectOption[]>