diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/assets/javascripts/lib/forms.js | 40 | ||||
| -rw-r--r-- | resources/vue/apps/StudipWizard.vue | 44 |
2 files changed, 51 insertions, 33 deletions
diff --git a/resources/assets/javascripts/lib/forms.js b/resources/assets/javascripts/lib/forms.js index 125c7d8..9f9aae3 100644 --- a/resources/assets/javascripts/lib/forms.js +++ b/resources/assets/javascripts/lib/forms.js @@ -80,6 +80,9 @@ const Forms = { params.STUDIPFORM_SELECTEDLANGUAGES = {}; params.STUDIPFORM_EMIT_VALUES = f.dataset.emit; params.STUDIPFORM_USE_STORE = f.dataset.useStore === 'true'; + if (params.STUDIPFORM_USE_STORE) { + params.store = useFormsStore(); + } params.STUDIPFORM_FORM_ID = f.dataset.formId; for (let i in JSON.parse(f.dataset.inputs)) { params.STUDIPFORM_INPUTS_ORDER.push(i); @@ -87,20 +90,25 @@ const Forms = { return params; }, methods: { - submit: function (e) { + submit: async function (e) { if (this.STUDIPFORM_VALIDATED) { - return; + return Promise.resolve(); } this.STUDIPFORM_VALIDATIONNOTES = []; this.STUDIPFORM_DISPLAYVALIDATION = true; + if (e) { + e.preventDefault(); + } + // validation: - this.validate() + return this.validate() .then(() => { if (this.STUDIPFORM_USE_STORE) { - const store = useFormsStore(); - store.initialize(); - store.setData(this.STUDIPFORM_FORM_ID, this.getFormValues()); + this.store.setData(this.STUDIPFORM_FORM_ID, this.getFormValues()); + this.STUDIPFORM_VALIDATED = true; + //this.$el.submit(); + return Promise.resolve(); } else { if (this.STUDIPFORM_AUTOSAVEURL) { let params = this.getFormValues(); @@ -110,21 +118,24 @@ const Forms = { if (output === 'STUDIPFORM_STORE_SUCCESS' && this.STUDIPFORM_REDIRECTURL) { //The form has been stored successfully: window.location.href = this.STUDIPFORM_REDIRECTURL; + return Promise.resolve([]); } else if (output !== 'STUDIPFORM_STORE_SUCCESS') { Report.error($gettext('Es ist ein Fehler aufgetreten.'), output); + return Promise.reject(output); } }); } else { this.STUDIPFORM_VALIDATED = true; this.$el.submit(); + return Promise.resolve(); } } }).catch(errors => { this.STUDIPFORM_VALIDATIONNOTES = errors; this.$el.scrollIntoView({behavior: 'smooth'}); + return Promise.reject(errors); } ); - e.preventDefault(); }, getFormValues() { let params = { @@ -179,7 +190,7 @@ const Forms = { }); // Optional server validation - if (this.STUDIPFORM_SERVERVALIDATION && !this.STUDIPFORM_USE_STORE) { + if (this.STUDIPFORM_SERVERVALIDATION) { let params = this.getFormValues(); if (this.STUDIPFORM_AUTOSAVEURL) { params.STUDIPFORM_AUTOSTORE = 1; @@ -187,6 +198,10 @@ const Forms = { params.STUDIPFORM_SERVERVALIDATION = 1; params.STUDIPFORM_FORM_ID = this.STUDIPFORM_FORM_ID; + if (this.STUDIPFORM_USE_STORE) { + params.step_id = this.STUDIPFORM_FORM_ID; + } + const output = await fetch(this.STUDIPFORM_VALIDATION_URL, { method: 'POST', body: new URLSearchParams(params), @@ -252,11 +267,12 @@ const Forms = { } } - STUDIP.Vue.on('form.submit', id => { - if (this.STUDIPFORM_FORM_ID === id) { - this.submit(new Event('submit')); + if (this.STUDIPFORM_USE_STORE) { + const storedData = this.store.getData(this.STUDIPFORM_FORM_ID); + if (storedData) { + this.setInputs(storedData); } - }); + } } }); const instance = app.mount(f); diff --git a/resources/vue/apps/StudipWizard.vue b/resources/vue/apps/StudipWizard.vue index 941f1a8..5acca93 100644 --- a/resources/vue/apps/StudipWizard.vue +++ b/resources/vue/apps/StudipWizard.vue @@ -113,32 +113,41 @@ const currentStep = ref(0); // HTML content of current step let stepContent = ref(''); let mountedApp = null; +let appInstance = null; const currentStepType = ref(null); const visibleSteps = ref(props.showAllSteps ? props.steps : [props.steps[0]]); -const checkValidity = () => { +const validate = async () => { if (currentStepType.value === 'form') { - STUDIP.Vue.emit('form.submit', props.steps[currentStep.value].id); + return appInstance.submit() + .then(() => { + return true; + }).catch(errors => { + return false; + }); + } else { + return true; } }; -const jumpToStep = (number) => { - checkValidity(); - - if (mountedApp !== null) { - mountedApp.unmount(); - } +const jumpToStep = async (number) => { + const success = await validate(); + if (success) { + if (mountedApp !== null) { + mountedApp.unmount(); + } - if (!visibleSteps.value.includes(props.steps[number])) { - visibleSteps.value[number] = props.steps[number]; + if (!visibleSteps.value.includes(props.steps[number])) { + console.log('Visible steps', visibleSteps.value); + visibleSteps.value[number] = props.steps[number]; + } + currentStep.value = number; + initializeContent(number); } - currentStep.value = number; - initializeContent(number); }; const finishWizard = () => { - checkValidity(); }; const initializeContent = async (stepNumber) => { @@ -165,20 +174,13 @@ onMounted(() => { STUDIP.Vue.on('form.mounted', (mounted) => { mountedApp = mounted.app; + appInstance = mounted.instance; }); STUDIP.Vue.on('vueApp.mounted', (mounted) => { if (mounted.config.appPath === stepContent.value.appPath) { mountedApp = mounted.app; } }); - - visibleSteps.value.push({ - type: 'Vue', - id: 'stock-images', - title: 'Bilderpool', - content: StockImages, - icon: 'block-gallery' - }); }); </script> |