File modules/cms/ui/themes/default/script/openrat/form.js

Last commit: Tue Mar 1 23:15:52 2022 +0100	dankert	Fix: try without catch is not good, because the error will be thrown to the caller.


     1 import $         from  '../jquery-global.js';
     2 import Workbench from "./workbench.js";
     3 import Notice    from "./notice.js";
     4 import Callback  from "./callback.js";
     5 import Api       from "./api.js";
     6 
     7 /**
     8  * Form.
     9  *
    10  * @constructor
    11  */
    12 export default class Form {
    13 
    14 	static modes = {
    15 		keepOpen           :  2,
    16 		closeAfterSubmit   :  4,
    17 		closeAfterSuccess  :  8,
    18 	};
    19 
    20 	constructor() {
    21 
    22 
    23 		/**
    24 		 * Fires on input.
    25 		 */
    26 		this.onChangeHandler = new Callback();
    27 		this.onSaveHandler   = new Callback();
    28 		this.onCloseHandler  = new Callback();
    29 		this.forwardHandler  = new Callback();
    30 
    31 		this.async = false;
    32 		this.afterSuccess = '';
    33 		this.element = null;
    34 		this.autosave = false;
    35 		this.mode = Form.modes.keepOpen;
    36 		this.formMethod = 'GET';
    37 		this.forwardToMethod = null;
    38 	}
    39 
    40 	set isLoadStatus( isLoading ) {
    41 		if   ( isLoading )
    42 			Workbench.getInstance().startSpinner();
    43 		else
    44 			Workbench.getInstance().stopSpinner();
    45     }
    46 
    47     initOnElement( element ) {
    48         this.element = element;
    49 
    50 		this.formMethod      = $(this.element).attr('method').toUpperCase();
    51 		this.afterSuccess    = $(this.element).data('afterSuccess');
    52 		this.forwardToMethod = $(this.element).data('forwardTo');
    53 		this.async           = $(this.element).data('async');
    54 
    55         // Autosave in Formularen.
    56         // Bei Veränderungen von Checkboxen wird das Formular sofort abgeschickt.
    57         if   ( $(this.element).data('autosave') ) {
    58 
    59         	this.autosave = true;
    60 
    61             $(this.element).find('input[type="checkbox"]').click( () => {
    62                 this.submit(Form.modes.keepOpen);
    63             });
    64             $(this.element).find('select').change( () => {
    65                 this.submit(Form.modes.keepOpen);
    66             });
    67         }
    68 
    69 
    70         $(element).find('.or-act-form-cancel').click( () => {
    71 			this.cancel();
    72         });
    73         $(element).find('.or-act-form-reset').click( () => {
    74 			this.rollback();
    75         });
    76         $(element).find('.or-act-form-apply').click( () => {
    77 			this.submit(Form.modes.keepOpen);
    78         });
    79         $(element).find('.or-act-form-save').click( () => {
    80 			if   ( this.async )
    81 				this.submit( Form.modes.closeAfterSubmit );
    82 			else
    83 				this.submit( Form.modes.closeAfterSuccess );
    84         });
    85 
    86 		// Bei Änderungen in der View das Tab als 'dirty' markieren
    87 		$(element).find('.or-input').change( () => {
    88 			this.onChangeHandler.fire();
    89 		});
    90 
    91 
    92 		// Catches the form submit.
    93 		// This is called by hitting the enter key.
    94         $(element).submit( ( event ) => {
    95 
    96             if   ( this.async )
    97 				this.submit( Form.modes.closeAfterSubmit );
    98 			else
    99 				this.submit( Form.modes.closeAfterSuccess );
   100 
   101             event.preventDefault();
   102         });
   103     }
   104 
   105     cancel() {
   106         //$(this.element).html('').parent().removeClass('is-open');
   107 		Notice.removeAllNotices();
   108 
   109         this.close();
   110     }
   111 
   112 
   113     rollback() {
   114         this.element.nodes[0].reset();
   115     }
   116 
   117 
   118 	/**
   119 	 * Forward to another action.
   120 	 *
   121 	 * @param action
   122 	 * @param subaction
   123 	 * @param id
   124 	 * @param data
   125 	 */
   126     forwardTo(action, subaction, id, data) {
   127 		this.forwardHandler.fire( action, subaction, id, data );
   128 	}
   129 
   130 
   131     async submit( mode ) {
   132 
   133 		Notice.removeAllNotices();
   134 
   135 		// Show progress
   136         let progressStatus = new Notice();
   137         progressStatus.setStatus('info');
   138         progressStatus.inProgress();
   139         progressStatus.msg = Workbench.language.PROGRESS;
   140         progressStatus.show();
   141 
   142         // Alle vorhandenen Error-Marker entfernen.
   143         // Falls wieder ein Fehler auftritt, werden diese erneut gesetzt.
   144 		this.removeErrorMarkers();
   145 
   146         let formData = new FormData( $(this.element).get(0) );
   147 
   148         // If form does not contain action/id, get it from the workbench.
   149         if   (!formData.has('id') )
   150             formData.append('id',Workbench.state.id);
   151         if   (!formData.has('action') )
   152             formData.append('action',Workbench.state.action);
   153 
   154 
   155         if	( this.formMethod == 'GET' )
   156         {
   157             // Mehrseitiges Formular
   158             // Die eingegebenen Formulardaten werden zur nächsten Action geschickt.
   159             this.forwardTo( formData.get('action'), formData.get('subaction'),formData.get('id,'),formData );
   160             progressStatus.close();
   161         }
   162         else
   163         {
   164 			if	( mode == Form.modes.closeAfterSubmit )
   165 				this.close();
   166 			// Async: Window is closed, but the action will be startet now.
   167 
   168 			try {
   169 				await this.sendFormData( formData,mode );
   170 			}
   171 			catch( error ) {
   172 				// no catch logic here, error messages are already displayed.
   173 			}
   174 			finally {
   175 				progressStatus.close();
   176 			}
   177 		}
   178 
   179     }
   180 
   181 
   182     sendFormData = async function( formData,mode ) {
   183 
   184 		if   ( !this.async )
   185 			this.isLoadStatus = true;
   186 
   187 		let api = new Api();
   188 		api.notifyBrowser = this.async;
   189 		api.validationErrorForField = (name) => {
   190 			$('.or-input[name='+name+']').addClass('input--error').parent().addClass('input--error').parents('.or-group').removeClass('closed').addClass('show').addClass('open');
   191 		}
   192 
   193 
   194 		try {
   195 			await api.sendData( formData );
   196 
   197 			this.onSaveHandler.fire();
   198 			// The data was successful saved.
   199 
   200 			if (mode == Form.modes.closeAfterSuccess) {
   201 				this.close();
   202 			}
   203 
   204 			if (this.afterSuccess) {
   205 				if (this.afterSuccess == 'reloadAll') {
   206 					Workbench.getInstance().reloadAll();
   207 				} else if (this.afterSuccess == 'forward') {
   208 					// Forwarding to next subaction.
   209 					if (this.forwardToMethod)
   210 						this.forwardTo(formData.get('action'), this.forwardToMethod, formData.get('id'), []);
   211 				}
   212 			} else {
   213 				if (this.async)
   214 					; // do not reload
   215 				else
   216 					Workbench.getInstance().reloadViews();
   217 			}
   218 			//this.onSuccess();
   219 			Callback.dataChangedHandler.fire();
   220 		} finally {
   221 			this.isLoadStatus = false;
   222 		}
   223 	}
   224 
   225 
   226 	/**
   227 	 * Closing the form.
   228 	 */
   229 	close = function() {
   230 		this.onCloseHandler.fire();
   231 	}
   232 
   233 
   234 	removeErrorMarkers = function() {
   235 		$(this.element).find('.or-input--error').removeClass('input--error');
   236 	}
   237 }
   238 



Download modules/cms/ui/themes/default/script/openrat/form.js


History
Tue, 1 Mar 2022 23:15:52 +0100	dankert	Fix: try without catch is not good, because the error will be thrown to the caller.
Fri, 11 Feb 2022 01:28:51 +0100	dankert	Fixed some UI problems: The dialogs are now closed after submitting the data; Workbench is reloaded after login/logout.
Mon, 29 Nov 2021 23:54:33 +0100	Jan Dankert	New: Spinner image with pure css. So we can colorize it now.
Sat, 27 Nov 2021 04:39:51 +0100	Jan Dankert	Refactoring: Extract the api request form.js into a new api class which returns a promise.
Wed, 31 Mar 2021 01:52:57 +0200	Jan Dankert	New: Replace JQuery with OQuery, a selfmade light JQuery replacement.
Sat, 27 Mar 2021 19:07:36 +0100	Jan Dankert	Fix: Import Navigator
Sat, 27 Mar 2021 05:14:11 +0100	Jan Dankert	Refactoring: Converting all script files to ES6 modules (work in progress); removed jquery-ui (drag and drop will be replaced by HTML5, sortable by a small lib)
Wed, 17 Mar 2021 22:27:33 +0100	Jan Dankert	Refactoring: Using ES6-Modules (experimental)
Wed, 17 Mar 2021 02:18:50 +0100	Jan Dankert	Refactoring: Using "Jquery slim" without ajax and effects.
Wed, 17 Mar 2021 00:57:14 +0100	Jan Dankert	Replaced all Jquery ajax methods by the native fetch api.
Tue, 16 Mar 2021 23:52:22 +0100	Jan Dankert	Refactoring: Use ES6 classes.
Tue, 16 Mar 2021 02:38:13 +0100	Jan Dankert	Fix: Using the new FormData object instead of JQuery (JQuery's serialize-functions are not available in the slim version)
Mon, 15 Mar 2021 23:29:48 +0100	Jan Dankert	Refactoring: Use ES6 classes.
Sat, 6 Mar 2021 00:41:10 +0100	Jan Dankert	New: Notice are collapsible.
Wed, 17 Feb 2021 02:42:20 +0100	Jan Dankert	Fix: Calling the callback with fire()
Wed, 17 Feb 2021 02:34:51 +0100	Jan Dankert	Refactoring: Extract Dialog into a separate js class
Wed, 17 Feb 2021 00:37:45 +0100	Jan Dankert	Refactoring: Extract Notices into a separate js class
Tue, 9 Feb 2021 19:25:59 +0100	Jan Dankert	New: Adding console messages instead of weired dialog messages.
Fri, 27 Nov 2020 20:14:22 +0100	Jan Dankert	Fix: Mark input fields on input error.
Sat, 21 Nov 2020 12:13:03 +0100	Jan Dankert	Fix: Dirty marker.
Thu, 12 Nov 2020 01:12:45 +0100	Jan Dankert	Fix: Workflow for changing the users email adress; Mail sending; Forwarding forms
Mon, 5 Oct 2020 23:32:06 +0200	Jan Dankert	UI: Nicer buttons
Fri, 2 Oct 2020 23:11:48 +0200	Jan Dankert	Cleanup: No '.inputholder' any more, notices with links to objects.
Sun, 23 Aug 2020 23:01:55 +0200	Jan Dankert	Fix: Open groups if they contain input errors.
Sun, 23 Feb 2020 04:01:30 +0100	Jan Dankert	Refactoring with Namespaces for the cms modules, part 1: moving.