From 96c174d4839eecc91cd4035398a2b09f7131593c Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 19 Jan 2022 13:17:07 -0700 Subject: [PATCH] Implement select-account_ro as web component --- api/etemplate.php | 7 +- .../etemplate/Et2Select/Et2SelectAccount.ts | 19 +++ .../etemplate/Et2Select/Et2SelectReadonly.ts | 120 +++++++++++++++--- api/js/etemplate/etemplate2.ts | 1 + 4 files changed, 125 insertions(+), 22 deletions(-) create mode 100644 api/js/etemplate/Et2Select/Et2SelectAccount.ts diff --git a/api/etemplate.php b/api/etemplate.php index 199d96f283..d05d0b9c0e 100644 --- a/api/etemplate.php +++ b/api/etemplate.php @@ -82,12 +82,7 @@ function send_template() { preg_match_all('/(^| )([a-z0-9_-]+)="([^"]+)"/', $matches[3], $attrs, PREG_PATTERN_ORDER); $attrs = array_combine($attrs[2], $attrs[3]); - // fix not understood 0) + { + value = value.split(","); + } this.value = value; } @@ -103,23 +120,30 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet render() { let label = ""; - if(this.value) + if(!this.value) { - let current = this._options.find(option => option.value == this.value); - label = current ? current.label : ""; - } - else if(this.empty_text) - { - label = this.empty_text; + return this._readonlyRender({label: this.empty_text, value: ""}); } - return this._readonlyRender(label) + return html` +
    + ${repeat(this.value, (val : string) => val, (val) => + { + let option = this._options.find(option => option.value == val); + if(!option) + { + return ""; + } + return this._readonlyRender(option); + })} +
+ `; } - _readonlyRender(label) : TemplateResult + _readonlyRender(option : SelectOption) : TemplateResult { return html` - ${label} +
  • ${option.label}
    • `; } @@ -147,6 +171,58 @@ export class Et2SelectReadonly extends Et2Widget(LitElement) implements et2_IDet // @ts-ignore TypeScript is not recognizing that this widget is a LitElement customElements.define("et2-select_ro", Et2SelectReadonly); +export class Et2SelectAccountReadonly extends Et2SelectReadonly +{ + + protected find_select_options(_attrs) {} + + set value(new_value) + { + if(!new_value) + { + super.value = new_value; + return; + } + + if(typeof new_value == "string" && new_value.indexOf(",") > 0) + { + new_value = new_value.split(","); + } + if(typeof new_value == "string" || typeof new_value == "number") + { + new_value = ["" + new_value]; + } + for(let id of new_value) + { + let account_name = null; + let option = {value: id, label: id + " ..."}; + this._options.push(option); + if(new_value && (account_name = this.egw().link_title('api-accounts', id))) + { + option.label = account_name; + } + else if(!account_name) + { + // Not already cached, need to fetch it + this.egw().link_title('api-accounts', id, function(title) + { + this.option.label = title; + this.select.requestUpdate(); + }, {select: this, option: option}); + } + } + super.value = new_value; + } + + get value() + { + return super.value; + } +} + +// @ts-ignore TypeScript is not recognizing that this widget is a LitElement +customElements.define("et2-select-account_ro", Et2SelectAccountReadonly); + export class Et2SelectAppReadonly extends Et2SelectReadonly { constructor() @@ -167,16 +243,28 @@ export class Et2SelectBitwiseReadonly extends Et2SelectReadonly render() { let new_value = []; - for(var index in this.options.select_options) + for(let index in this._options) { - var option = this.options.select_options[index]; - var right = option && option.value ? option.value : index; + let option = this._options[index]; + let right = parseInt(option && option.value ? option.value : index); if(!!(this.value & right)) { new_value.push(right); } } - return this._readonlyRender(new_value); + return html` +
      + ${repeat(new_value, (val : string) => val, (val) => + { + let option = this._options.find(option => option.value == val); + if(!option) + { + return ""; + } + return this._readonlyRender(option); + })} +
    `; + return } } diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts index 063a9657de..96d5c8e5d9 100644 --- a/api/js/etemplate/etemplate2.ts +++ b/api/js/etemplate/etemplate2.ts @@ -31,6 +31,7 @@ import './Et2Date/Et2DateTime'; import './Et2Date/Et2DateTimeReadonly'; import './Et2Description/Et2Description'; import './Et2Select/Et2Select'; +import './Et2Select/Et2SelectAccount'; import './Et2Select/Et2SelectReadonly'; import './Et2Textarea/Et2Textarea'; import './Et2Textbox/Et2Textbox';