feat: save experiment form

src/frontend/src/dialogs/DialogComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-dialog v-model="showDialog" aria-labelledby="modalTitle">
+  <q-dialog v-model="showDialog" aria-labelledby="modalTitle" :persistent="persistent">
     <q-card style="width: 95%" flat >
       <q-form @submit="$emit('emitSubmit')">
         <q-card-section class="bg-primary text-white q-mb-md">
@@ -31,5 +31,5 @@
 <script setup>
   const showDialog = defineModel()
   defineEmits(['emitSubmit', 'emitCancel', 'emitSaveDraft'])
-  defineProps(['hideDraftBtn'])
+  const props = defineProps(['hideDraftBtn', 'persistent'])
 </script>

src/frontend/src/dialogs/LeaveFormDialog.vue

@@ -7,7 +7,8 @@
     <template #title>Leave <span class="text-capitalize">{{ type }}</span> Form?</template>
     <q-card-section class="q-pt-none">
       You are about to leave the {{ type }} form and have unsaved changes. <br>
-      All unsaved changes will be lost.  Continue?
+      {{ props.edit ? 'All changes will be lost.' : 'Changes will be temporarily saved.' }}
+      Continue?
     </q-card-section>
   </DialogComponent>
 </template>
@@ -16,7 +17,7 @@
   import DialogComponent from './DialogComponent.vue'
 
   defineEmits(['leaveForm'])
-  defineProps(['type'])
+  const props = defineProps(['type', 'edit'])
 
   const showDialog = defineModel()
 

src/frontend/src/dialogs/ReturnToFormDialog.vue

@@ -0,0 +1,26 @@
+<template>
+  <DialogComponent 
+    v-model="showDialog"
+    :hideDraftBtn="true"
+    @emitSubmit="showDialog = false"
+    @emitCancel="$emit('cancel')"
+    :persistent="true"
+  >
+    <template #title>Load Unsaved Form?</template>
+    <q-card-section class="q-pt-none">
+      You have previously visited this form without submitting.  Load previous inputs?
+    </q-card-section>
+  </DialogComponent>
+</template>
+
+<script setup>
+  import DialogComponent from './DialogComponent.vue'
+  import { useLoginStore } from '@/stores/LoginStore.ts'
+
+  const store = useLoginStore()
+
+  defineEmits(['cancel'])
+
+  const showDialog = defineModel()
+
+</script>

src/frontend/src/stores/LoginStore.ts

@@ -38,12 +38,14 @@ export const useLoginStore = defineStore('login', () => {
     { name: 'Mila', id: '20', read: true, write: false, shareRead: true, shareWrite: true, admin: false, owner: false }
   ])
 
+
+  const savedForms = ref({})
 
 
   // computed()'s are getters
 
   // function()'s are actions
 
 
-  return { loggedInUser, loggedInGroup, groups, users, };
+  return { loggedInUser, loggedInGroup, groups, users, savedForms };
 })

src/frontend/src/views/CreateExperiment.vue

@@ -104,18 +104,24 @@
     <LeaveFormDialog 
       v-model="showLeaveDialog"
       type="experiment"
-      @leaveForm="confirmLeave = true; router.push(toPath)"
+      :edit="route.params.id === 'new' ? false : true"
+      @leaveForm="leaveForm"
+    />
+    <ReturnToFormDialog
+      v-model="showReturnDialog"
+      @cancel="clearForm"
     />
 </template>
 
 <script setup>
-  import { ref, inject, computed } from 'vue'
+  import { ref, inject, computed, watch } from 'vue'
   import { useLoginStore } from '@/stores/LoginStore.ts'
   import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
   import * as api from '@/services/dataApi'
   import * as notify from '../notify'
   import PageTitle from '@/components/PageTitle.vue'
   import LeaveFormDialog from '@/dialogs/LeaveFormDialog.vue'
+  import ReturnToFormDialog from '@/dialogs/ReturnToFormDialog.vue'
 
   const route = useRoute()
   
@@ -137,6 +143,40 @@
     entrypoints: [],
   })
 
+  function clearForm() {
+    experiment.value = {
+      name: '',
+      group: '',
+      description: '',
+      entrypoints: [],
+    }
+    basicInfoForm.value.reset()
+    store.savedForms.experiment = null
+  }
+
+  // watch(experiment.value.entrypoints, () => {
+  //   console.log('entrypoint changed!')
+  // })
+
+  watch(() => experiment.value.entrypoints, async() => {
+    if(!store.savedForms?.experiment) return
+    if(experiment.value.entrypoints.length === 0) return
+    for (const [index, entrypoint] of experiment.value.entrypoints.entries()) {
+      if(typeof entrypoint === 'number') {
+        const res = await getEntrypoint(entrypoint)
+        experiment.value.entrypoints[index] = res.data
+      }
+    }
+  })
+
+  async function getEntrypoint(entrypointID) {
+    try{
+      return await api.getItem('entrypoints', entrypointID)
+    }catch(err) {
+      console.warn(err)
+    }
+  }
+
   const isEmptyValues = computed(() => {
     return Object.values(experiment.value).every((value) => 
       (typeof value === 'string' && value === '') || 
@@ -163,10 +203,16 @@
   })
 
   const title = ref('')
+  const showReturnDialog = ref(false)
+
   getExperiment()
   async function getExperiment() {
     if(route.params.id === 'new') {
       title.value = 'Create Experiment'
+      if(store.savedForms?.experiment) {
+        showReturnDialog.value = true
+        experiment.value = store.savedForms.experiment
+      }
       return
     }
     try {
@@ -196,28 +242,27 @@
   }
 
   async function addorModifyExperiment() {
+    experiment.value.entrypoints.forEach((entrypoint, index, array) => {
+      if(typeof entrypoint === 'object') {
+        array[index] = entrypoint.id
+      }
+    })
     try {
       if(route.params.id === 'new') {
         await api.addItem('experiments', experiment.value)
         notify.success(`Successfully created '${experiment.value.name}'`)
       } else {
-        experiment.value.entrypoints.forEach((entrypoint, index, array) => {
-          if(typeof entrypoint === 'object') {
-            array[index] = entrypoint.id
-          }
-        })
         await api.updateItem('experiments', route.params.id, {
         name: experiment.value.name,
         description: experiment.value.description,
         entrypoints: experiment.value.entrypoints
       })
         notify.success(`Successfully updated '${experiment.value.name}'`)
       }
+      router.push('/experiments')
     } catch(err) {
       console.log('err = ', err)
       notify.error(err.response.data.message)
-    } finally {
-      router.push('/experiments')
     }
   }
 
@@ -253,4 +298,12 @@
   const confirmLeave = ref(false)
   const toPath = ref()
 
+  function leaveForm() {
+    if(route.params.id === 'new') {
+      store.savedForms.experiment = experiment.value
+    }
+    confirmLeave.value = true
+    router.push(toPath.value)
+  }
+
 </script>

src/frontend/src/views/CreateJob.vue

@@ -2,6 +2,7 @@
   <PageTitle 
     title="Create Job"
   />
+  {{ job }}
   <div :class="`row ${isMobile ? '' : 'q-mx-xl'} q-my-lg`">
     <div :class="`${isMobile ? 'col-12' : 'col-5'} q-mr-xl`">
       <fieldset>
@@ -206,11 +207,10 @@
     console.log('submitting job = ', JSON.parse(JSON.stringify(job.value)))
     try {
       await api.addJob(route.params.id, job.value)
-      notify.success(`Successfully created ''`)
+      notify.success(`Successfully created job`)
+      router.push(`/experiments/${route.params.id}/jobs`)
     } catch(err) {
       notify.error(err.response.data.message)
-    } finally {
-      router.push(`/experiments/${route.params.id}/jobs`)
     }
   }