ajaxify form submit

Author: bikubi

froide/foirequest/templates/foirequest/request.html

@@ -36,9 +36,9 @@
         {% for k, v in config.items %}
             {% if v %}<input type="hidden" name="{{ k }}" value="1" />{% endif %}
         {% endfor %}
-        <request-page id="make-request" v-cloak publicbody-default-search="{{ public_body_search }}" :publicbodies="{{ publicbodies_json }}" :request-form="{{ request_form.as_json }}" :user-form="{{ user_form.as_json }}" :was-post="{{ was_post_json }}"
+        <request-page id="make-request" v-cloak publicbody-default-search="{{ public_body_search }}" :publicbodies="{{ publicbodies_json }}" :request-form-initial="{{ request_form.as_json }}" :user-form-initial="{{ user_form.as_json }}" :was-post="{{ was_post_json }}"
         {% if request.user.is_authenticated %}:user-info="{{ request.user.as_json }}"{% endif %}
-        {% if proof_form %}:proof-form="{{ proof_form.as_json }}"{% endif %}
+        {% if proof_form %}:proof-form-initial="{{ proof_form.as_json }}"{% endif %}
         {% if not config.hide_similar %}:show-similar="true"{% endif %}
         {% if not config.hide_draft %}:show-draft="true"{% endif %}
         {% if config.hide_publicbody %}:hide-publicbody-chooser="true"{% endif %}

froide/foirequest/views/make_request.py

@@ -4,7 +4,7 @@
 from django.conf import settings
 from django.contrib import messages
 from django.contrib.auth.mixins import LoginRequiredMixin
-from django.http import Http404
+from django.http import Http404, JsonResponse
 from django.shortcuts import get_object_or_404, redirect
 from django.urls import reverse
 from django.utils import timezone
@@ -22,7 +22,7 @@
 from froide.georegion.models import GeoRegion
 from froide.helper.auth import get_read_queryset
 from froide.helper.content_urls import get_content_url
-from froide.helper.utils import update_query_params
+from froide.helper.utils import is_fetch, update_query_params
 from froide.proof.forms import ProofMessageForm
 from froide.publicbody.forms import MultiplePublicBodyForm, PublicBodyForm
 from froide.publicbody.models import PublicBody
@@ -630,6 +630,14 @@ def post(self, request, *args, **kwargs):
 
         if not error:
             return self.form_valid(**form_kwargs)
+
+        if is_fetch(request):
+            return JsonResponse(
+                # make json serializeable
+                {form_key: form.as_data() for form_key, form in form_kwargs.items()},
+                status=400,
+            )
+
         return self.form_invalid(**form_kwargs)
 
     def save_draft(self, request_form, publicbody_form):

frontend/javascript/components/makerequest/request-form.vue

@@ -327,7 +327,8 @@ export default {
   },
   props: {
     config: {
-      type: Object
+      type: Object,
+      default: null
     },
     publicbodies: {
       type: Array,
@@ -338,11 +339,17 @@ export default {
       default: null
     },
     requestForm: {
+      required: true,
       type: Object
     },
     userForm: {
+      required: true,
       type: Object
     },
+    proofForm: {
+      type: Object,
+      default: null
+    },
     lawType: {
       type: String,
       default: ''
@@ -379,10 +386,6 @@ export default {
       type: Boolean,
       default: false
     },
-    proofForm: {
-      type: Object,
-      default: null
-    },
     proofRequired: {
       type: Boolean,
       default: false
@@ -414,24 +417,15 @@ export default {
     }
   },
   computed: {
-    nonFieldErrors() {
-      return this.form.nonFieldErrors
-    },
-    form() {
-      return this.requestForm
-    },
     formFields() {
-      return this.form.fields
+      return this.requestForm.fields
     },
     errors() {
-      return this.form.errors
+      return this.requestForm.errors
     },
     userformFields() {
       return this.userForm.fields
     },
-    usererrors() {
-      return this.userForm.errors
-    },
     nonMeaningfulSubjects() {
       return this.config.settings.non_meaningful_subject_regex.map(
         (x) => new RegExp(x, 'i')

frontend/javascript/components/makerequest/request-page.vue

@@ -50,6 +50,10 @@
           <div v-if="requestForm.nonFieldErrors.length > 0" class="alert alert-danger">
             <p v-for="error in requestForm.nonFieldErrors" :key="error" v-html="error" />
           </div>
+          <div v-if="fetchError" class="alert alert-danger">
+            <strong>{{ i18n.error }}</strong>
+            {{ fetchError }}
+          </div>
 
           <h1
             v-if="hidePublicbodyChooser && hasPublicBodies"
@@ -320,7 +324,7 @@
               :hide-public="hidePublic"
               :hide-publicbody-chooser="hidePublicbodyChooser"
               :show-draft="showDraft"
-              @submit="submitting = true"
+              @submit="submit"
               @onlinehelp-click="onlineHelpShow($event)"
               />
           </div>
@@ -433,13 +437,13 @@ export default {
       type: Object,
       default: null
     },
-    requestForm: {
+    requestFormInitial: {
       type: Object
     },
-    userForm: {
+    userFormInitial: {
       type: Object
     },
-    proofForm: {
+    proofFormInitial: {
       type: Object,
       default: null
     },
@@ -489,6 +493,8 @@ export default {
       submitting: false,
       STEPS,
       similarSubject: '',
+      fetchedForms: null,
+      fetchError: null,
     }
   },
   provide() {
@@ -497,21 +503,17 @@ export default {
     }
   },
   computed: {
-    form() {
-      return this.requestForm
-    },
-    formFields() {
-      return this.form.fields
+    requestForm() {
+      return this.fetchedForms?.request_form || this.requestFormInitial
     },
-    userformFields() {
-      return this.userForm.fields
+    userForm() {
+      return this.fetchedForms?.user_form || this.userFormInitial
     },
-    conditionalProofForm() {
-      if (this.proofForm && this.proofForm.fields.proof) {
-        return this.proofForm
-      } else {
+    proofForm() {
+      if (!this.proofForm?.fields?.proof) {
         return null
       }
+      return this.fetchedForms?.proof_form || this.proofFormInitial
     },
     steps() {
       // TODO needs discussion:
@@ -752,7 +754,7 @@ export default {
     this.initStoreValues({
       scope: this.pbScope,
       ignoreStorage: this.config.wasPost,
-      formFields: this.formFields,
+      formFields: this.requestForm.fields,
       formCoerce: {
         public: coerceDjangoBool
       },
@@ -785,7 +787,7 @@ export default {
     this.initStoreValues({
       scope: this.pbScope,
       ignoreStorage: true,
-      formFields: this.formFields,
+      formFields: this.requestForm.fields,
       mutationMap: {
         law_type: UPDATE_LAW_TYPE
       }
@@ -816,7 +818,7 @@ export default {
       this.initStoreValues({
         scope: this.pbScope,
         ignoreStorage: this.config.wasPost,
-        formFields: this.userformFields,
+        formFields: this.userForm.fields,
         formCoerce: {
           private: coerceDjangoBool,
           claims_vip: coerceDjangoBool
@@ -845,7 +847,7 @@ export default {
     this.initStoreValues({
       scope: this.pbScope,
       ignoreStorage: this.config.wasPost,
-      formFields: this.userformFields,
+      formFields: this.userForm.fields,
       mutationMap: {
         address: UPDATE_ADDRESS
       }
@@ -890,6 +892,45 @@ export default {
     })
   },
   methods: {
+    submit() {
+      this.fetchError = null
+      this.submitting = true
+      const form = document.forms.make_request
+      const fd = new FormData(form)
+      fetch(form.action, {
+        method: 'POST',
+        body: fd,
+        headers: { 'x-requested-with': 'fetch' },
+      })
+        .then((resp) => {
+          if (resp.ok) {
+            if (resp.redirected && resp.url) {
+              // success: redirect
+              document.location.href = resp.url
+              return
+            }
+            console.error(resp)
+            throw new Error('unexpected success response')
+          }
+          if (resp.status === 400) {
+            // resp not ok, assume forms have errors...
+            return resp.json()
+          }
+          console.error(resp)
+          throw new Error(`${resp.status} ${resp.statusText}`)
+        })
+        .then((resp) => {
+          // ...frontend will display/handle them
+          this.fetchedForms = resp
+        })
+        .catch((e) => {
+          console.error(e)
+          this.fetchError = e.message || this.i18n.error
+        })
+        .finally(() => {
+          this.submitting = false
+        })
+    },
     setFirstStep() {
       // this step may at this point be "remembered" from Storage
       // but this case is the "default"

frontend/javascript/components/makerequest/review-request.vue

@@ -167,7 +167,7 @@
         type="submit"
         class="btn btn-primary me-2 mb-3"
         :disabled="needCorrection"
-        @click="$emit('submit')">
+        @click.prevent="$emit('submit')">
         <i class="fa fa-send" aria-hidden="true" />
         {{ i18n.submitRequest }}
       </button>