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
Downloadmodules/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.