Fix logic on hidden, loading on edit submission (#75)

resources/js/components/open/forms/OpenForm.vue

@@ -256,7 +256,7 @@ export default {
       }
 
       if (this.form.editable_submissions && this.form.submission_id) {
-        this.dataForm["submission_id"] = this.form.submission_id
+        this.dataForm.submission_id = this.form.submission_id
       }
 
       this.$emit('submit', this.dataForm, this.onSubmissionFailure)
@@ -290,18 +290,20 @@ export default {
       }
     },
     async getSubmissionData() {
-      if (!this.form || !this.form.editable_submissions || !this.form.submission_id) {
-        return null
-      }
-      const response = await axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id)
-      return response.data
+      if (!this.form || !this.form.editable_submissions || !this.form.submission_id) { return null }
+      await this.$store.dispatch('open/records/loadRecord',
+        axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((response) => {
+          return { submission_id: this.form.submission_id, ...response.data.data }
+        })
+      )
+      return this.$store.getters['open/records/getById'](this.form.submission_id)
     },
     async initForm() {
       if (this.isPublicFormPage && this.form.editable_submissions) {
-        let urlParam = new URLSearchParams(window.location.search)
+        const urlParam = new URLSearchParams(window.location.search)
         if (urlParam && urlParam.get('submission_id')) {
           this.form.submission_id = urlParam.get('submission_id')
-          const {data} = await this.getSubmissionData()
+          const data = await this.getSubmissionData()
           if (data !== null && data) {
             this.dataForm = new Form(data)
             return

resources/js/pages/forms/show-public.vue

@@ -34,7 +34,16 @@
           <loader class="h-6 w-6 text-nt-blue mx-auto" />
         </p>
       </div>
-      <open-complete-form v-else ref="open-complete-form" :form="form" class="mb-10" @password-entered="passwordEntered" />
+      <template v-else>
+        <div v-if="recordLoading">
+          <p class="text-center mt-6 p-4">
+            <loader class="h-6 w-6 text-nt-blue mx-auto" />
+          </p>
+        </div>
+        <open-complete-form v-show="!recordLoading" ref="open-complete-form" :form="form" class="mb-10"
+                              @password-entered="passwordEntered"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -125,7 +134,6 @@ export default {
 
   data () {
     return {
-      loading: false,
       submitted: false
     }
   },
@@ -160,7 +168,8 @@ export default {
   computed: {
     ...mapState({
       forms: state => state['open/forms'].content,
-      formLoading: state => state['open/forms'].loading
+      formLoading: state => state['open/forms'].loading,
+      recordLoading: state => state['open/records'].loading
     }),
     formSlug () {
       return this.$route.params.slug
@@ -175,7 +184,7 @@ export default {
       return this.form ? this.form.title : 'Create beautiful forms'
     },
     metaDescription () {
-      return (this.form && this.form.description) ? this.form.description.substring(0,160) : null
+      return (this.form && this.form.description) ? this.form.description.substring(0, 160) : null
     },
     metaImage () {
       return (this.form && this.form.cover_picture) ? this.form.cover_picture : null

resources/js/store/modules/open/records.js

@@ -0,0 +1,58 @@
+import axios from 'axios'
+
+export const namespaced = true
+export const workspaceEndpoint = '/api/open/records/'
+
+/**
+ * Loads records from database
+ */
+
+// state
+export const state = {
+  content: [],
+  loading: false
+}
+
+// getters
+export const getters = {
+  getById: (state) => (id) => {
+    if (state.content.length === 0) return null
+    return state.content.find(item => item.submission_id === id)
+  }
+}
+
+// mutations
+export const mutations = {
+  set (state, items) {
+    state.content = items
+  },
+  addOrUpdate (state, item) {
+    state.content = state.content.filter((val) => val.id !== item.id)
+    state.content.push(item)
+  },
+  remove (state, itemId) {
+    state.content = state.content.filter((val) => val.id !== itemId)
+  },
+  startLoading () {
+    state.loading = true
+  },
+  stopLoading () {
+    state.loading = false
+  }
+}
+
+// actions
+export const actions = {
+  resetState (context) {
+    context.commit('set', [])
+    context.commit('stopLoading')
+  },
+  loadRecord (context, request) {
+    context.commit('set', [])
+    context.commit('startLoading')
+    return request.then((data) => {
+      context.commit('addOrUpdate', data)
+      context.commit('stopLoading')
+    })
+  }
+}