Changes for opening etemplate in a dialog

- openDialog() now returns Promise<Et2Dialog>
- fixed etemplate reload
This commit is contained in:
nathan 2023-07-13 16:18:11 -06:00
parent efaa3ae386
commit 9d61a2ef17
4 changed files with 75 additions and 26 deletions

View File

@ -477,7 +477,7 @@ export class Et2Dialog extends Et2Widget(SlotMixin(SlDialog))
*/ */
close() close()
{ {
this.hide(); return this.hide();
} }
addOpenListeners() addOpenListeners()

View File

@ -146,6 +146,7 @@ import './et2_extension_nextmatch';
import './et2_extension_customfields'; import './et2_extension_customfields';
import './vfsSelectUI'; import './vfsSelectUI';
import {Et2Tabs} from "./Layout/Et2Tabs/Et2Tabs"; import {Et2Tabs} from "./Layout/Et2Tabs/Et2Tabs";
import {Et2Dialog} from "./Et2Dialog/Et2Dialog";
/** /**
@ -317,7 +318,7 @@ export class etemplate2
*/ */
public clear(_keep_app_object? : boolean, _keep_session? : boolean) public clear(_keep_app_object? : boolean, _keep_session? : boolean)
{ {
jQuery(this._DOMContainer).trigger('clear'); this.DOMContainer.dispatchEvent(new Event("clear", {bubbles: true}));
// Remove any handlers on window (resize) // Remove any handlers on window (resize)
if(this.uniqueId) if(this.uniqueId)
@ -1516,7 +1517,9 @@ export class etemplate2
// Check the parameters // Check the parameters
const data = _response.data; const data = _response.data;
// window-close does NOT send data.DOMNodeID! // window-close does NOT send data.DOMNodeID!
const dialog = <any>document.querySelector('et2-dialog > form'+(data.DOMNodeID?'#'+data.DOMNodeID:'.dialog_content'))?.parentNode; const dialog = <any>document.querySelector('et2-dialog > form' + (data.DOMNodeID ? '#' + data.DOMNodeID : '.dialog_content'))?.parentNode ??
// Reloaded into same container
(this?.DOMContainer?.parentNode instanceof Et2Dialog ? this.DOMContainer.parentNode : undefined);
if (dialog) if (dialog)
{ {
@ -1527,7 +1530,7 @@ export class etemplate2
// handle Api\Framework::refresh_opener() // handle Api\Framework::refresh_opener()
if(Array.isArray(data['refresh-opener'])) if(Array.isArray(data['refresh-opener']))
{ {
if(window.opener)// && typeof window.opener.egw_refresh == 'function') if(window.opener || dialog)// && typeof window.opener.egw_refresh == 'function')
{ {
const egw = window.egw(dialog ? window : opener); const egw = window.egw(dialog ? window : opener);
egw.refresh.apply(egw, data['refresh-opener']); egw.refresh.apply(egw, data['refresh-opener']);
@ -1564,9 +1567,7 @@ export class etemplate2
} }
if (dialog) if (dialog)
{ {
dialog.close(); return dialog.close();
dialog.parentNode.removeChild(dialog);
return Promise.resolve();
} }
egw.close(); egw.close();
return true; return true;
@ -1592,14 +1593,16 @@ export class etemplate2
// regular et2 re-load // regular et2 re-load
if(typeof data.url == "string" && typeof data.data === 'object') if(typeof data.url == "string" && typeof data.data === 'object')
{ {
let load : Promise<any>;
// @ts-ignore // @ts-ignore
if(this && typeof this.load == 'function') if(this && typeof this.load == 'function')
{ {
// Called from etemplate // Called from etemplate
// set id in case serverside returned a different template // set id in case serverside returned a different template
this._DOMContainer.id = this.uniqueId = data.DOMNodeID; this._DOMContainer.id = this.uniqueId = data.DOMNodeID;
// @ts-ignore // @ts-ignore
return this.load(data.name, data.url, data.data); load = this.load(data.name, data.url, data.data);
} }
else else
{ {
@ -1623,20 +1626,30 @@ export class etemplate2
uniqueId = data.DOMNodeID.replace('.', '-') + '-' + data['open_target']; uniqueId = data.DOMNodeID.replace('.', '-') + '-' + data['open_target'];
} }
const et2 = new etemplate2(node, data.data.menuaction, uniqueId); const et2 = new etemplate2(node, data.data.menuaction, uniqueId);
return et2.load(data.name, data.url, data.data, null, null, null, data['fw-target']) load = et2.load(data.name, data.url, data.data, null, null, null, data['fw-target']);
.then(() =>
{
if(dialog)
{
dialog._adoptTemplateButtons();
}
});
} }
else else
{ {
egw.debug("error", "Could not find target node %s", data.DOMNodeId); egw.debug("error", "Could not find target node %s", data.DOMNodeId);
} }
} }
// Extra handling for being loaded into a Et2Dialog
if(dialog)
{
load.then(() =>
{
// Move footer type buttons into dialog footer
const buttons = dialog._adoptTemplateButtons();
// Make sure adopted buttons are removed on clear
dialog.addEventListener("clear", () =>
{
buttons.forEach(n => n.remove());
});
});
}
return load;
} }
throw("Error while parsing et2_load response"); throw("Error while parsing et2_load response");

View File

@ -751,25 +751,43 @@ export abstract class EgwApp
/** /**
* Opens _menuaction in an Et2Dialog * Opens _menuaction in an Et2Dialog
* *
* Equivalent to egw.openDialog, thought this one works in popups too. * Equivalent to egw.openDialog, though this one works in popups too.
* *
* @param _menuaction * @param _menuaction
* @return Promise<any> * @return Promise<Et2Dialog>
*/ */
openDialog(_menuaction : string) openDialog(_menuaction : string)
{ {
return this.egw.json(_menuaction.match(/^([^.:]+)/)[0] + '.jdots_framework.ajax_exec.template.' + _menuaction, let resolver;
let rejector;
const dialog_promise = new Promise((resolve, reject) =>
{
resolver = value => resolve(value);
rejector = reason => reject(reason);
});
let request = this.egw.json(_menuaction.match(/^([^.:]+)/)[0] + '.jdots_framework.ajax_exec.template.' + _menuaction,
['index.php?menuaction=' + _menuaction, true], _response => ['index.php?menuaction=' + _menuaction, true], _response =>
{ {
if(Array.isArray(_response) && typeof _response[0] === 'string') if(Array.isArray(_response) && typeof _response[0] === 'string')
{ {
jQuery(_response[0]).appendTo(document.body); let dialog = jQuery(_response[0]).appendTo(document.body);
if(dialog.length > 0 && dialog.get(0))
{
resolver(dialog.get(0));
}
else
{
console.log("Unable to add dialog with dialogExec('" + _menuaction + "')", _response);
rejector(new Error("Unable to add dialog"));
}
} }
else else
{ {
console.log("Invalid response to dialogExec('" + _menuaction + "')", _response); console.log("Invalid response to dialogExec('" + _menuaction + "')", _response);
rejector(new Error("Invalid response to dialogExec('" + _menuaction + "')"));
} }
}).sendRequest(); }).sendRequest();
return dialog_promise;
} }
/** /**

View File

@ -386,22 +386,40 @@ egw.extend('open', egw.MODULE_WND_LOCAL, function(_egw, _wnd)
* For popups you have to use the app.ts method openDialog(), which creates the dialog in the correct window / popup. * For popups you have to use the app.ts method openDialog(), which creates the dialog in the correct window / popup.
* *
* @param string _menuaction * @param string _menuaction
* @return Promise<any> * @return Promise<Et2Dialog>
*/ */
openDialog: function(_menuaction) openDialog: function(_menuaction)
{ {
return this.json(_menuaction.match(/^([^.:]+)/)[0] + '.jdots_framework.ajax_exec.template.' + _menuaction, let resolver;
let rejector;
const dialog_promise = new Promise((resolve, reject) =>
{
resolver = value => resolve(value);
rejector = reason => reject(reason);
});
let request = egw.json(_menuaction.match(/^([^.:]+)/)[0] + '.jdots_framework.ajax_exec.template.' + _menuaction,
['index.php?menuaction=' + _menuaction, true], _response => ['index.php?menuaction=' + _menuaction, true], _response =>
{ {
if (Array.isArray(_response) && typeof _response[0] === 'string') if (Array.isArray(_response) && typeof _response[0] === 'string')
{ {
jQuery(_response[0]).appendTo(_wnd.document.body); let dialog = jQuery(_response[0]).appendTo(_wnd.document.body);
if (dialog.length > 0 && dialog.get(0))
{
resolver(dialog.get(0));
}
else
{
console.log("Unable to add dialog with dialogExec('" + _menuaction + "')", _response);
rejector(new Error("Unable to add dialog"));
}
} }
else else
{ {
console.log("Invalid response to dialogExec('" + _menuaction + "')", _response); console.log("Invalid response to dialogExec('" + _menuaction + "')", _response);
rejector(new Error("Invalid response to dialogExec('" + _menuaction + "')"));
} }
}).sendRequest(); }).sendRequest();
return dialog_promise;
}, },
/** /**