commit 0b09b86185cf6f9526c551188233fb11cad86b0a
parent 36c5786585247d46e97229e5a6892d936357c785
Author: dankert <openrat@jandankert.de>
Date: Fri, 11 Feb 2022 01:28:51 +0100
Fixed some UI problems: The dialogs are now closed after submitting the data; Workbench is reloaded after login/logout.
Diffstat:
11 files changed, 204 insertions(+), 207 deletions(-)
diff --git a/modules/cms/ui/themes/default/script/openrat/api.js b/modules/cms/ui/themes/default/script/openrat/api.js
@@ -5,18 +5,6 @@ import Notice from "./notice.js";
*/
export default class Api {
- static modes = {
- get : 1,
- write : 2,
- };
-
- constructor() {
-
- this.notifyBrowser = false;
- this.mode = Api.modes.get;
- }
-
-
/**
* Sending data to the server.
*
diff --git a/modules/cms/ui/themes/default/script/openrat/api.min.js b/modules/cms/ui/themes/default/script/openrat/api.min.js
@@ -1,13 +1,5 @@
import Notice from "./notice.min.js";
export default class Api {
-static modes = {
-get : 1,
-write : 2,
-};
-constructor() {
-this.notifyBrowser = false;
-this.mode = Api.modes.get;
-}
sendData = function( formData ) {
console.debug( "API form data", formData );
let api = this;
diff --git a/modules/cms/ui/themes/default/script/openrat/dialog.js b/modules/cms/ui/themes/default/script/openrat/dialog.js
@@ -18,13 +18,6 @@ export default class Dialog {
this.view;
/**
- * Dirty-marker (if unsaved changes exist).
- *
- * @type {boolean}
- */
- this.isDirty = false;
-
- /**
* the DOM element which contains the dialog.
* @type {*|jQuery|HTMLElement}
*/
@@ -32,6 +25,25 @@ export default class Dialog {
}
/**
+ * Set Dirty-marker.
+ * @param dirty true, if unsaved changes exist
+ */
+ set isDirty( dirty ) {
+ if ( dirty )
+ this.element.addClass('view--is-dirty');
+ else
+ this.element.removeClass('view--is-dirty');
+ }
+
+ /**
+ * Get Dirty-marker.
+ * @return true, if unsaved changes exist
+ */
+ get isDirty() {
+ this.element.hasClass('view--is-dirty');
+ }
+
+ /**
* Creating a new dialog.
*
* @param name
@@ -70,15 +82,11 @@ export default class Dialog {
// data has changed
console.debug("Changes detected");
dialog.isDirty = true;
- // Remove dirty-flag from view
- dialog.element.addClass('view--is-dirty');
});
view.onSaveHandler.add( function() {
// data was saved
dialog.isDirty = false;
- // Remove dirty-flag from view
- dialog.element.removeClass('view--is-dirty');
});
this.view = view;
diff --git a/modules/cms/ui/themes/default/script/openrat/dialog.min.js b/modules/cms/ui/themes/default/script/openrat/dialog.min.js
@@ -6,9 +6,17 @@ import WorkbenchNavigator from "./navigator.min.js";
export default class Dialog {
constructor() {
this.view;
-this.isDirty = false;
this.element = $('.or-dialog-content .or-view');
}
+set isDirty( dirty ) {
+if ( dirty )
+this.element.addClass('view--is-dirty');
+else
+this.element.removeClass('view--is-dirty');
+}
+get isDirty() {
+this.element.hasClass('view--is-dirty');
+}
start( name,action,method,id,params )
{
if (!action)
@@ -27,11 +35,9 @@ dialog.back();
view.onChangeHandler.add( function() {
console.debug("Changes detected");
dialog.isDirty = true;
-dialog.element.addClass('view--is-dirty');
});
view.onSaveHandler.add( function() {
dialog.isDirty = false;
-dialog.element.removeClass('view--is-dirty');
});
this.view = view;
Workbench.getInstance().startSpinner();
diff --git a/modules/cms/ui/themes/default/script/openrat/form.js b/modules/cms/ui/themes/default/script/openrat/form.js
@@ -12,10 +12,9 @@ import Api from "./api.js";
export default class Form {
static modes = {
- showBrowserNotice : 1,
- keepOpen : 2,
- closeAfterSubmit : 4,
- closeAfterSuccess : 8,
+ keepOpen : 2,
+ closeAfterSubmit : 4,
+ closeAfterSuccess : 8,
};
constructor() {
@@ -27,6 +26,7 @@ export default class Form {
this.onChangeHandler = new Callback();
this.onSaveHandler = new Callback();
this.onCloseHandler = new Callback();
+ this.forwardHandler = new Callback();
this.async = false;
this.afterSuccess = '';
@@ -37,7 +37,7 @@ export default class Form {
this.forwardToMethod = null;
}
- setLoadStatus( isLoading ) {
+ set isLoadStatus( isLoading ) {
if ( isLoading )
Workbench.getInstance().startSpinner();
else
@@ -47,12 +47,10 @@ export default class Form {
initOnElement( element ) {
this.element = element;
- this.formMethod = $(this.element).attr('method').toUpperCase();
- this.afterSuccess = $(this.element).data('afterSuccess');
+ this.formMethod = $(this.element).attr('method').toUpperCase();
+ this.afterSuccess = $(this.element).data('afterSuccess');
this.forwardToMethod = $(this.element).data('forwardTo');
- this.async = $(this.element).data('async');
-
- let form = this;
+ this.async = $(this.element).data('async');
// Autosave in Formularen.
// Bei Veränderungen von Checkboxen wird das Formular sofort abgeschickt.
@@ -60,46 +58,47 @@ export default class Form {
this.autosave = true;
- $(this.element).find('input[type="checkbox"]').click( function() {
- form.submit(Form.modes.keepOpen);
+ $(this.element).find('input[type="checkbox"]').click( () => {
+ this.submit(Form.modes.keepOpen);
});
- $(this.element).find('select').change( function() {
- form.submit(Form.modes.keepOpen);
+ $(this.element).find('select').change( () => {
+ this.submit(Form.modes.keepOpen);
});
}
- $(element).find('.or-act-form-cancel').click( function() {
- form.cancel();
-
+ $(element).find('.or-act-form-cancel').click( () => {
+ this.cancel();
});
- $(element).find('.or-act-form-reset').click( function() {
- form.rollback();
-
+ $(element).find('.or-act-form-reset').click( () => {
+ this.rollback();
});
- $(element).find('.or-act-form-apply').click( function() {
- form.submit(Form.modes.keepOpen);
+ $(element).find('.or-act-form-apply').click( () => {
+ this.submit(Form.modes.keepOpen);
});
- $(element).find('.or-act-form-save').click( function() {
- form.submit();
+ $(element).find('.or-act-form-save').click( () => {
+ if ( this.async )
+ this.submit( Form.modes.closeAfterSubmit );
+ else
+ this.submit( Form.modes.closeAfterSuccess );
});
// Bei Änderungen in der View das Tab als 'dirty' markieren
- $(element).find('.or-input').change( function() {
- form.onChangeHandler.fire();
+ $(element).find('.or-input').change( () => {
+ this.onChangeHandler.fire();
});
- // Submithandler for the whole form.
- $(element).submit( function( event ) {
+ // Catches the form submit.
+ // This is called by hitting the enter key.
+ $(element).submit( ( event ) => {
- //
- if ($(this).data('target')=='view')
- {
- form.submit();
- event.preventDefault();
- }
- // target=top will load the native way without javascript.
+ if ( this.async )
+ this.submit( Form.modes.closeAfterSubmit );
+ else
+ this.submit( Form.modes.closeAfterSuccess );
+
+ event.preventDefault();
});
}
@@ -107,37 +106,42 @@ export default class Form {
//$(this.element).html('').parent().removeClass('is-open');
Notice.removeAllNotices();
- this.onCloseHandler.fire();
+ this.close();
}
rollback() {
- this.element.trigger('reset');
+ this.element.nodes[0].reset();
}
+
+ /**
+ * Forward to another action.
+ *
+ * @param action
+ * @param subaction
+ * @param id
+ * @param data
+ */
forwardTo(action, subaction, id, data) {
- }
+ this.forwardHandler.fire( action, subaction, id, data );
+ }
- submit( mode ) {
- if ( mode === undefined )
- if ( this.async )
- mode = Form.modes.closeAfterSubmit;
- else
- mode = Form.modes.closeAfterSuccess;
+ async submit( mode ) {
Notice.removeAllNotices();
// Show progress
- let status = new Notice();
- status.setStatus('info');
- status.inProgress();
- status.msg = Workbench.language.PROGRESS;
- status.show();
+ let progressStatus = new Notice();
+ progressStatus.setStatus('info');
+ progressStatus.inProgress();
+ progressStatus.msg = Workbench.language.PROGRESS;
+ progressStatus.show();
// Alle vorhandenen Error-Marker entfernen.
// Falls wieder ein Fehler auftritt, werden diese erneut gesetzt.
- $(this.element).find('.or-input--error').removeClass('input--error');
+ this.removeErrorMarkers();
let formData = new FormData( $(this.element).get(0) );
@@ -153,75 +157,75 @@ export default class Form {
// Mehrseitiges Formular
// Die eingegebenen Formulardaten werden zur nächsten Action geschickt.
this.forwardTo( formData.get('action'), formData.get('subaction'),formData.get('id,'),formData );
- $(status).remove();
+ progressStatus.close();
}
else
{
if ( mode == Form.modes.closeAfterSubmit )
- this.onCloseHandler.fire();
+ this.close();
// Async: Window is closed, but the action will be startet now.
- formData.append('output','json');
- this.sendFormData( formData );
- status.close();
+ await this.sendFormData( formData,mode );
+ progressStatus.close();
}
}
- sendFormData = function( formData ) {
-
- this.setLoadStatus(true);
+ sendFormData = async function( formData,mode ) {
- let form = this;
+ if ( !this.async )
+ this.isLoadStatus = true;
let api = new Api();
- api.notifyBrowser = form.async;
+ api.notifyBrowser = this.async;
api.validationErrorForField = (name) => {
$('.or-input[name='+name+']').addClass('input--error').parent().addClass('input--error').parents('.or-group').removeClass('closed').addClass('show').addClass('open');
}
- let result = api.sendData( formData );
- let mode = 0;
- result.then(
- () => {
- form.onSaveHandler.fire();
- if (this.afterSuccess == 'forward')
- mode = Form.modes.keepOpen;
+ try {
+ await api.sendData( formData );
- // The data was successful saved.
- // Now we can close the form.
- if (mode == Form.modes.closeAfterSuccess) {
- form.onCloseHandler.fire();
+ this.onSaveHandler.fire();
+ // The data was successful saved.
- // clear the dirty flag.
- $(form.element).closest('div.panel').find('div.header ul.views li.action.active').removeClass('dirty');
- }
+ if (mode == Form.modes.closeAfterSuccess) {
+ this.close();
+ }
- if (form.afterSuccess) {
- if (form.afterSuccess == 'reloadAll') {
- Workbench.getInstance().reloadAll();
- } else if (form.afterSuccess == 'forward') {
- // Forwarding to next subaction.
- if (form.forwardToMethod)
- form.forwardTo(formData.get('action'), form.forwardToMethod, formData.get('id'), []);
- }
- } else {
- if (async)
- ; // do not reload
- else
- Workbench.getInstance().reloadViews();
+ if (this.afterSuccess) {
+ if (this.afterSuccess == 'reloadAll') {
+ Workbench.getInstance().reloadAll();
+ } else if (this.afterSuccess == 'forward') {
+ // Forwarding to next subaction.
+ if (this.forwardToMethod)
+ this.forwardTo(formData.get('action'), this.forwardToMethod, formData.get('id'), []);
}
- //form.onSuccess();
- Callback.dataChangedHandler.fire();
+ } else {
+ if (this.async)
+ ; // do not reload
+ else
+ Workbench.getInstance().reloadViews();
}
- ).catch( (reason) => {
+ //this.onSuccess();
+ Callback.dataChangedHandler.fire();
+ } finally {
+ this.isLoadStatus = false;
+ }
+ }
+
+
+ /**
+ * Closing the form.
+ */
+ close = function() {
+ this.onCloseHandler.fire();
+ }
- }).finally( () => {
- form.setLoadStatus(false);
- })
+ removeErrorMarkers = function() {
+ $(this.element).find('.or-input--error').removeClass('input--error');
}
}
diff --git a/modules/cms/ui/themes/default/script/openrat/form.min.js b/modules/cms/ui/themes/default/script/openrat/form.min.js
@@ -5,15 +5,15 @@ import Callback from "./callback.min.js";
import Api from "./api.min.js";
export default class Form {
static modes = {
-showBrowserNotice : 1,
-keepOpen : 2,
-closeAfterSubmit : 4,
-closeAfterSuccess : 8,
+keepOpen : 2,
+closeAfterSubmit : 4,
+closeAfterSuccess : 8,
};
constructor() {
this.onChangeHandler = new Callback();
this.onSaveHandler = new Callback();
this.onCloseHandler = new Callback();
+this.forwardHandler = new Callback();
this.async = false;
this.afterSuccess = '';
this.element = null;
@@ -22,7 +22,7 @@ this.mode = Form.modes.keepOpen;
this.formMethod = 'GET';
this.forwardToMethod = null;
}
-setLoadStatus( isLoading ) {
+set isLoadStatus( isLoading ) {
if ( isLoading )
Workbench.getInstance().startSpinner();
else
@@ -30,65 +30,63 @@ Workbench.getInstance().stopSpinner();
}
initOnElement( element ) {
this.element = element;
-this.formMethod = $(this.element).attr('method').toUpperCase();
-this.afterSuccess = $(this.element).data('afterSuccess');
+this.formMethod = $(this.element).attr('method').toUpperCase();
+this.afterSuccess = $(this.element).data('afterSuccess');
this.forwardToMethod = $(this.element).data('forwardTo');
-this.async = $(this.element).data('async');
-let form = this;
+this.async = $(this.element).data('async');
if ( $(this.element).data('autosave') ) {
this.autosave = true;
-$(this.element).find('input[type="checkbox"]').click( function() {
-form.submit(Form.modes.keepOpen);
+$(this.element).find('input[type="checkbox"]').click( () => {
+this.submit(Form.modes.keepOpen);
});
-$(this.element).find('select').change( function() {
-form.submit(Form.modes.keepOpen);
+$(this.element).find('select').change( () => {
+this.submit(Form.modes.keepOpen);
});
}
-$(element).find('.or-act-form-cancel').click( function() {
-form.cancel();
+$(element).find('.or-act-form-cancel').click( () => {
+this.cancel();
});
-$(element).find('.or-act-form-reset').click( function() {
-form.rollback();
+$(element).find('.or-act-form-reset').click( () => {
+this.rollback();
});
-$(element).find('.or-act-form-apply').click( function() {
-form.submit(Form.modes.keepOpen);
+$(element).find('.or-act-form-apply').click( () => {
+this.submit(Form.modes.keepOpen);
});
-$(element).find('.or-act-form-save').click( function() {
-form.submit();
+$(element).find('.or-act-form-save').click( () => {
+if ( this.async )
+this.submit( Form.modes.closeAfterSubmit );
+else
+this.submit( Form.modes.closeAfterSuccess );
});
-$(element).find('.or-input').change( function() {
-form.onChangeHandler.fire();
+$(element).find('.or-input').change( () => {
+this.onChangeHandler.fire();
});
-$(element).submit( function( event ) {
-if ($(this).data('target')=='view')
-{
-form.submit();
+$(element).submit( ( event ) => {
+if ( this.async )
+this.submit( Form.modes.closeAfterSubmit );
+else
+this.submit( Form.modes.closeAfterSuccess );
event.preventDefault();
-}
});
}
cancel() {
Notice.removeAllNotices();
-this.onCloseHandler.fire();
+this.close();
}
rollback() {
-this.element.trigger('reset');
+this.element.nodes[0].reset();
}
forwardTo(action, subaction, id, data) {
+this.forwardHandler.fire( action, subaction, id, data );
}
-submit( mode ) {
-if ( mode === undefined )
-if ( this.async )
-mode = Form.modes.closeAfterSubmit;
-else
-mode = Form.modes.closeAfterSuccess;
+async submit( mode ) {
Notice.removeAllNotices();
-let status = new Notice();
-status.setStatus('info');
-status.inProgress();
-status.msg = Workbench.language.PROGRESS;
-status.show();
-$(this.element).find('.or-input--error').removeClass('input--error');
+let progressStatus = new Notice();
+progressStatus.setStatus('info');
+progressStatus.inProgress();
+progressStatus.msg = Workbench.language.PROGRESS;
+progressStatus.show();
+this.removeErrorMarkers();
let formData = new FormData( $(this.element).get(0) );
if (!formData.has('id') )
formData.append('id',Workbench.state.id);
@@ -97,54 +95,52 @@ formData.append('action',Workbench.state.action);
if ( this.formMethod == 'GET' )
{
this.forwardTo( formData.get('action'), formData.get('subaction'),formData.get('id,'),formData );
-$(status).remove();
+progressStatus.close();
}
else
{
if ( mode == Form.modes.closeAfterSubmit )
-this.onCloseHandler.fire();
-formData.append('output','json');
-this.sendFormData( formData );
-status.close();
+this.close();
+await this.sendFormData( formData,mode );
+progressStatus.close();
}
}
-sendFormData = function( formData ) {
-this.setLoadStatus(true);
-let form = this;
+sendFormData = async function( formData,mode ) {
+if ( !this.async )
+this.isLoadStatus = true;
let api = new Api();
-api.notifyBrowser = form.async;
+api.notifyBrowser = this.async;
api.validationErrorForField = (name) => {
$('.or-input[name='+name+']').addClass('input--error').parent().addClass('input--error').parents('.or-group').removeClass('closed').addClass('show').addClass('open');
}
-let result = api.sendData( formData );
-let mode = 0;
-result.then(
-() => {
-form.onSaveHandler.fire();
-if (this.afterSuccess == 'forward')
-mode = Form.modes.keepOpen;
+try {
+await api.sendData( formData );
+this.onSaveHandler.fire();
if (mode == Form.modes.closeAfterSuccess) {
-form.onCloseHandler.fire();
-$(form.element).closest('div.panel').find('div.header ul.views li.action.active').removeClass('dirty');
+this.close();
}
-if (form.afterSuccess) {
-if (form.afterSuccess == 'reloadAll') {
+if (this.afterSuccess) {
+if (this.afterSuccess == 'reloadAll') {
Workbench.getInstance().reloadAll();
-} else if (form.afterSuccess == 'forward') {
-if (form.forwardToMethod)
-form.forwardTo(formData.get('action'), form.forwardToMethod, formData.get('id'), []);
+} else if (this.afterSuccess == 'forward') {
+if (this.forwardToMethod)
+this.forwardTo(formData.get('action'), this.forwardToMethod, formData.get('id'), []);
}
} else {
-if (async)
+if (this.async)
;
else
Workbench.getInstance().reloadViews();
}
Callback.dataChangedHandler.fire();
+} finally {
+this.isLoadStatus = false;
+}
}
-).catch( (reason) => {
-}).finally( () => {
-form.setLoadStatus(false);
-})
+close = function() {
+this.onCloseHandler.fire();
+}
+removeErrorMarkers = function() {
+$(this.element).find('.or-input--error').removeClass('input--error');
}
}
\ No newline at end of file
diff --git a/modules/cms/ui/themes/default/script/openrat/notice.js b/modules/cms/ui/themes/default/script/openrat/notice.js
@@ -46,10 +46,6 @@ export default class Notice {
// Close the notice.
close() {
- /* no effects in jquery slim
- this.element.fadeOut('fast', () => {
- this.element.remove();
- } );*/
this.element.remove();
}
diff --git a/modules/cms/ui/themes/default/script/openrat/view.js b/modules/cms/ui/themes/default/script/openrat/view.js
@@ -111,13 +111,13 @@ export default class View {
form.onSaveHandler .add( () => { view.onSaveHandler .fire() } );
form.onCloseHandler .add( () => { view.close() } );
- form.forwardTo = function (action, subaction, id, data) {
+ form.forwardHandler.add( (action, subaction, id, data) => {
view.action = action;
view.method = subaction;
view.id = id;
view.params = data;
view.loadView();
- }
+ } );
form.initOnElement(this);
});
diff --git a/modules/cms/ui/themes/default/script/openrat/view.min.js b/modules/cms/ui/themes/default/script/openrat/view.min.js
@@ -60,13 +60,13 @@ let form = new Form();
form.onChangeHandler.add( () => { view.onChangeHandler.fire() } );
form.onSaveHandler .add( () => { view.onSaveHandler .fire() } );
form.onCloseHandler .add( () => { view.close() } );
-form.forwardTo = function (action, subaction, id, data) {
+form.forwardHandler.add( (action, subaction, id, data) => {
view.action = action;
view.method = subaction;
view.id = id;
view.params = data;
view.loadView();
-}
+} );
form.initOnElement(this);
});
view.fireViewLoadedEvents( element );
diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orLinkify.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orLinkify.js
@@ -54,7 +54,6 @@ export default function( options )
case 'post':
let api = new Api();
- api.mode = Api.modes.write;
let formData = new FormData();
let params = JSON.parse( $link.attr('data-data') );
@@ -72,6 +71,11 @@ export default function( options )
// Submit the form.
api.sendData( formData );
+ if ( $link.data('afterSuccess') === 'reload' )
+ Workbench.getInstance().reloadViews();
+ if ( $link.data('afterSuccess') === 'reloadAll' )
+ Workbench.getInstance().reloadAll();
+
break;
case 'edit':
diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orLinkify.min.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orLinkify.min.js
@@ -32,7 +32,6 @@ switch( type )
{
case 'post':
let api = new Api();
-api.mode = Api.modes.write;
let formData = new FormData();
let params = JSON.parse( $link.attr('data-data') );
params.output = 'json';
@@ -44,6 +43,10 @@ formData.set('id',Workbench.state.id);
if (!formData.get('action') )
formData.set('action',Workbench.state.action);
api.sendData( formData );
+if ( $link.data('afterSuccess') === 'reload' )
+Workbench.getInstance().reloadViews();
+if ( $link.data('afterSuccess') === 'reloadAll' )
+Workbench.getInstance().reloadAll();
break;
case 'edit':
case 'dialog':
