From e25152fb1ed8bee9787e7306e6e5bb90e4b260f6 Mon Sep 17 00:00:00 2001 From: nathan Date: Fri, 9 Feb 2024 08:47:04 -0700 Subject: [PATCH] Et2VfsSelect WIP - Support for custom footer buttons via slotting inside Et2VfsSelectButton - pass dialog button ID along to Et2VfsSelectButton method --- api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts | 42 ++++++++++++------- api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts | 13 ++++-- 2 files changed, 36 insertions(+), 19 deletions(-) diff --git a/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts b/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts index 4690be5175..3a1b0f399f 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts +++ b/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts @@ -21,16 +21,12 @@ import {waitForEvent} from "../Et2Widget/event"; * @dependency et2-vfs-select-dialog * @dependency et2-button * - * @slot prefix - Before the toolbar - * @slot suffix - Like prefix, but after + * @slot footer - Buttons are added to the dialog footer. Control their position with CSS `order` property. * * @event change - Emitted when the control's value changes. * - * @csspart form-control-input - The textbox's wrapper. - * @csspart form-control-help-text - The help text's wrapper. - * @csspart prefix - The container that wraps the prefix slot. - * @csspart suffix - The container that wraps the suffix slot. - * + * @csspart button - The button control + * @csspart dialog - The et2-vfs-select-dialog */ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) @@ -76,7 +72,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) */ @property() method : string = ""; /** ID passed to method */ - @property({type: String, reflect: true}) methodId : string; + @property({type: String, reflect: true, attribute: "method-id"}) methodId : string; protected readonly hasSlotController = new HasSlotController(this, ''); protected processingPromise : Promise = null; @@ -89,6 +85,12 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) this.handleClick = this.handleClick.bind(this); } + /** Programmatically trigger the dialog */ + public click() + { + this.handleClick(new Event("click")); + } + protected handleClick(event) { if(this._dialog && typeof this._dialog.show == "function") @@ -105,10 +107,17 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) } } - protected processDialogComplete([button, paths]) + /** + * The select dialog has been closed, now deal with the provided paths + * + * @param {string | number} button + * @param {string[]} paths + * @protected + */ + protected processDialogComplete([button, paths] : [string | number, string[]]) { // Cancel or close do nothing - if(!button) + if(typeof button !== "undefined" && !button) { return; } @@ -127,7 +136,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) } else if(this.method) { - this.sendFiles(); + this.sendFiles(button); } this.updateComplete.then(() => { @@ -142,11 +151,11 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) }) } - protected sendFiles() + protected sendFiles(button? : string | number) { this.processingPromise = this.egw().request( this.method, - [this.methodId, this.value/*, submit_button_id, savemode*/] + [this.methodId, this.value, button/*, savemode*/] ).then((data) => { this.processingPromise = null; @@ -165,6 +174,7 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) { return html` + `; } @@ -186,7 +197,8 @@ export class Et2VfsSelectButton extends Et2InputWidget(LitElement) const image = processing ? "" : (this.image || "filemanager/navbar"); return html` - ` : nothing} - ${hasUserDialog ? nothing : this.dialogTemplate()} + ${hasUserDialog ? nothing : this.dialogTemplate()} `; } } diff --git a/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts b/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts index 48b22a2903..1383e1e046 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts +++ b/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts @@ -42,10 +42,11 @@ import {Et2VfsPath} from "./Et2VfsPath"; * * @event change - Emitted when the control's value changes. * - * @csspart form-control-input - The textbox's wrapper. + * @csspart toolbar - controls at the top + * @csspart path + * @csspart listbox - The list of files + * @csspart mimefilter - Mime filter select * @csspart form-control-help-text - The help text's wrapper. - * @csspart prefix - The container that wraps the prefix slot. - * @csspart suffix - The container that wraps the suffix slot. * */ @@ -798,12 +799,16 @@ export class Et2VfsSelectDialog extends Et2InputWidget(LitElement) implements Se ]; return html` + ${repeat(buttons, (button : DialogButton) => button.id, (button, index) => { + // style=order is to allow slotted buttons an opportunity to choose where they go. + // Default is they'll go before our primary button return html` ${this.helpText} - ${hasFooterSlot ? nothing : this.footerTemplate()} + ${this.footerTemplate()} `; }