From 6884902d938a9dea64db844a274cecd40fafac87 Mon Sep 17 00:00:00 2001 From: nathan Date: Mon, 20 Sep 2021 16:28:20 -0600 Subject: [PATCH] W.I.P on collabora placeholder insert - better button styling - make entry select app = selected app --- api/js/etemplate/et2_widget_placeholder.ts | 40 ++++++++++++++----- .../default/insert_merge_placeholder.xet | 21 ++++++++-- 2 files changed, 48 insertions(+), 13 deletions(-) diff --git a/api/js/etemplate/et2_widget_placeholder.ts b/api/js/etemplate/et2_widget_placeholder.ts index 189a827d10..8a9abc161d 100644 --- a/api/js/etemplate/et2_widget_placeholder.ts +++ b/api/js/etemplate/et2_widget_placeholder.ts @@ -24,6 +24,7 @@ import type {egw} from "../jsapi/egw_global"; import {et2_selectbox} from "./et2_widget_selectbox"; import {et2_description} from "./et2_widget_description"; import {et2_link_entry} from "./et2_widget_link"; +import type {et2_button} from "./et2_widget_button"; /** @@ -104,6 +105,7 @@ export class et2_placeholder_select extends et2_inputWidget { text: this.egw().lang("Insert"), id: "submit", + image: "export" } ]; let extra_buttons_action = {}; @@ -121,8 +123,9 @@ export class et2_placeholder_select extends et2_inputWidget buttons.push({text: this.egw().lang("Cancel"), id: "cancel", image: "cancel"}); let data = { - content: {app: '', group: ''}, - sel_options: {app: [], group: []} + content: {app: '', group: '', entry: {}}, + sel_options: {app: [], group: []}, + modifications: {outer_box: {entry: {}}} }; Object.keys(_data).map((key) => @@ -136,9 +139,11 @@ export class et2_placeholder_select extends et2_inputWidget data.sel_options.group = this._get_group_options(Object.keys(_data)[0]); data.content.app = data.sel_options.app[0].value; data.content.group = data.sel_options.group[0].value; + data.content.entry = data.modifications.outer_box.entry.only_app = data.content.app; + data.modifications.outer_box.entry.application_list = Object.keys(_data); // callback for dialog - this.submit_callback = function(submit_button_id, submit_value, savemode) + this.submit_callback = function(submit_button_id, submit_value) { if((submit_button_id == 'submit' || (extra_buttons_action && extra_buttons_action[submit_button_id])) && submit_value) { @@ -161,8 +166,6 @@ export class et2_placeholder_select extends et2_inputWidget }, et2_dialog._create_parent('api')); this.dialog.template.uniqueId = 'api.insert_merge_placeholder'; - // Keep the dialog always at the top - this.dialog.div.parent().css({"z-index": 100000}); this.dialog.div.on('load', function(e) { @@ -184,6 +187,11 @@ export class et2_placeholder_select extends et2_inputWidget placeholder_list.getDOMNode().size = 5; // Bind some handlers + app.onchange = (node, widget) => + { + group.set_select_options(this._get_group_options(widget.get_value())); + entry.set_value({app: widget.get_value()}); + } group.onchange = (select_node, select_widget) => { console.log(this, arguments); @@ -192,6 +200,16 @@ export class et2_placeholder_select extends et2_inputWidget } placeholder_list.onchange = this._on_placeholder_select.bind(this); entry.onchange = this._on_placeholder_select.bind(this); + (this.dialog.template.widgetContainer.getDOMWidgetById("insert_placeholder")).onclick = () => + { + this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder").getDOMNode().textContent); + }; + (this.dialog.template.widgetContainer.getDOMWidgetById("insert_content")).onclick = () => + { + this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_content").getDOMNode().textContent); + }; + + this._on_placeholder_select(); }.bind(this)); } @@ -203,19 +221,22 @@ export class et2_placeholder_select extends et2_inputWidget _on_placeholder_select(node, widget : et2_selectbox | et2_link_entry) { - let app = this.dialog.template.widgetContainer.getDOMWidgetById("app"); + let app = this.dialog.template.widgetContainer.getDOMWidgetById("app"); let entry = this.dialog.template.widgetContainer.getDOMWidgetById("entry"); let placeholder_list = this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list"); let preview = this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder"); let preview_content = this.dialog.template.widgetContainer.getDOMWidgetById("preview_content"); - console.log(this, arguments); + + // Show the selected placeholder preview.set_value(placeholder_list.get_value()); - if(placeholder_list.get_value() && entry.get_value() && entry.get_value().app && entry.get_value().id) + preview.getDOMNode().parentNode.style.visibility = placeholder_list.get_value().trim() ? null : 'hidden'; + + if(placeholder_list.get_value() && entry.get_value()) { // Show the selected placeholder replaced with value from the selected entry this.egw().json( 'EGroupware\\Api\\Etemplate\\Widget\\Placeholder::ajax_fill_placeholders', - [entry.get_value().app, placeholder_list.get_value(), entry.get_value().id], + [app.get_value(), placeholder_list.get_value(), entry.get_value()], function(_content) { preview_content.set_value(_content); @@ -225,6 +246,7 @@ export class et2_placeholder_select extends et2_inputWidget } else { + // No value, hide the row preview_content.getDOMNode().parentNode.style.visibility = 'hidden'; } } diff --git a/api/templates/default/insert_merge_placeholder.xet b/api/templates/default/insert_merge_placeholder.xet index 1dbdd7f5b4..59d358cd20 100644 --- a/api/templates/default/insert_merge_placeholder.xet +++ b/api/templates/default/insert_merge_placeholder.xet @@ -12,14 +12,15 @@