3a703 admin edit submission (#305)

* wip: admin submission edit feature

* wip: refresh form submission after update

* wip: connect submissions page data to store

* Fixed the submission loading issue

* test: admin edit submission feature test

* Fix pending submission, editabe submission & more (#306)

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/components/EditSubmissionModal.vue

@@ -0,0 +1,42 @@
+<template>
+    <modal :show="show" max-width="lg" @close="emit('close')">
+        <open-form :theme="theme" :loading="false" :show-hidden="true" :form="form" :fields="form.properties" @submit="updateForm" :default-data-form="submission">
+        <template #submit-btn="{submitForm}">
+                <v-button :loading="loading" class="mt-2 px-8 mx-1" @click.prevent="submitForm">
+                Update Submission
+                </v-button>
+            </template>
+        </open-form>
+    </modal>
+</template>
+<script setup>
+import {ref, defineProps, defineEmits, onMounted } from 'vue'
+import OpenForm from '../forms/OpenForm.vue';
+import { themes } from '~/lib/forms/form-themes.js'
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  form: { type: Object, required: true },
+  theme:{type:Object, default:themes.default},
+  submission:{type:Object}
+})
+
+let loading = ref(false)
+
+const emit = defineEmits(['close', 'updated'])
+const updateForm =  (form, onFailure) =>{
+    loading.value  = true
+    form.put('/open/forms/' + props.form.id + '/submissions/'+props.submission.id).then((res) => {
+        useAlert().success(res.message)
+        loading.value  = false
+        emit('close')
+        emit('updated', res.data.data)
+
+      }).catch((error) => {
+        console.error(error)
+        loading.value = false
+        onFailure()
+      })
+    
+}
+
+</script>

client/components/open/components/RecordOperations.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="flex items-center justify-center space-x-1">
+    <button v-track.delete_record_click
+            class="border rounded py-1 px-2 text-gray-500 dark:text-gray-400 hover:text-blue-700"
+            @click="showEditSubmissionModal=true"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+      </svg>
+    </button>
     <button v-track.delete_record_click
             class="border rounded py-1 px-2 text-gray-500 dark:text-gray-400 hover:text-red-700"
             @click="onDeleteClick"
@@ -13,12 +21,15 @@
       </svg>
     </button>
   </div>
+  <EditSubmissionModal :show="showEditSubmissionModal" :form="form" :submission="submission" @close="showEditSubmissionModal=false" @updated="(submission)=>$emit('updated', submission)"/>
 </template>
 
 <script>
+import EditSubmissionModal from './EditSubmissionModal.vue'
 
 export default {
-  components: { },
+  components: { EditSubmissionModal },
+  emits: ["updated",  "deleted"],
   props: {
     form: {
       type: Object,
@@ -28,8 +39,8 @@ export default {
       type: Array,
       default: () => []
     },
-    rowid: {
-      type: Number,
+    submission: {
+      type: Object,
       default: () => {}
     }
   },
@@ -40,6 +51,7 @@ export default {
   },
   data () {
     return {
+      showEditSubmissionModal:false,
     }
   },
   computed: {
@@ -51,9 +63,9 @@ export default {
       this.useAlert.confirm('Do you really want to delete this record?', this.deleteRecord)
     },
     async deleteRecord () {
-      opnFetch('/open/forms/' + this.form.id + '/records/' + this.rowid + '/delete', {method:'DELETE'}).then(async (data) => {
+      opnFetch('/open/forms/' + this.form.id + '/records/' + this.submission.id + '/delete', {method:'DELETE'}).then(async (data) => {
         if (data.type === 'success') {
-          this.$emit('deleted')
+          this.$emit('deleted',this.submission)
           this.useAlert.success(data.message)
         } else {
           this.useAlert.error('Something went wrong!')