W.I.P on collabora placeholder insert

- better button styling
- make entry select app = selected app

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: ''},
+			content: {app: '', group: '', entry: {}},
-			sel_options: {app: [], group: []}
+			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);
+			(<et2_button>this.dialog.template.widgetContainer.getDOMWidgetById("insert_placeholder")).onclick = () =>
+			{
+				this.options.insert_callback(this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder").getDOMNode().textContent);
+			};
+			(<et2_button>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 = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("app");
+		let app = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("app");
 		let entry = <et2_link_entry>this.dialog.template.widgetContainer.getDOMWidgetById("entry");
 		let placeholder_list = <et2_selectbox>this.dialog.template.widgetContainer.getDOMWidgetById("placeholder_list");
 		let preview = <et2_description>this.dialog.template.widgetContainer.getDOMWidgetById("preview_placeholder");
 		let preview_content = <et2_description>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';
 		}
 	}

api/templates/default/insert_merge_placeholder.xet

@@ -12,14 +12,15 @@
                 </vbox>
                 <select id="placeholder_list"/>
             </hbox>
-            <link-entry id="entry" label="Preview with entry"/>
             <hbox class="preview">
                 <description id="preview_placeholder"/>
-                <button id="insert_placeholder"></button>
+                <button id="insert_placeholder" label="Insert" statustext="Insert placeholder" image="export"></button>
             </hbox>
+            <hrule/>
+            <link-entry id="entry" label="Preview with entry"/>
             <hbox class="preview">
                 <description id="preview_content"/>
-                <button id="insert_content"></button>
+                <button id="insert_content" label="Insert" statustext="Insert merged content" image="export"></button>
             </hbox>
         </vbox>
         <styles>
@@ -59,9 +60,21 @@
             div.et2_link_entry input.ui-autocomplete-input {
             width: 75%
             }
-            .et2_hbox button {
+            div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button, button#cancel, .et2_button {
+            border: none;
+            border-radius: 0px;
+            background-color: transparent;
+            }
+            div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover, button#cancel:hover {
+            box-shadow: none;
+            -webkit-box-shadow: none;
+            }
+            .preview .et2_button {
             flex: 0 1 24px;
             height: 24px;
+            border: none;
+            border-radius: 0px;
+            background-color: transparent;
             }
         </styles>
     </template>