feat: save entrypoint form

src/frontend/src/views/CreateEntryPoint.vue

@@ -155,7 +155,7 @@
           use-input
           use-chips
           multiple
-          emit-value
+
           map-options
           option-label="name"
           option-value="id"
@@ -177,7 +177,7 @@
           use-input
           use-chips
           multiple
-          emit-value
+
           map-options
           option-label="name"
           option-value="id"
@@ -258,18 +258,27 @@
     type="Parameter"
     :name="selectedParam.name"
   />
-
   <EditParamDialog 
     v-model="showEditParamDialog"
     :editParam="selectedParam"
     @updateParam="updateParam"
   />
+  <LeaveFormDialog 
+    v-model="showLeaveDialog"
+    type="entrypoint"
+    :edit="route.params.id === 'new' ? false : true"
+    @leaveForm="leaveForm"
+  />
+  <ReturnToFormDialog
+    v-model="showReturnDialog"
+    @cancel="clearForm"
+  />
 </template>
 
 <script setup>
   import { ref, inject, reactive, watch, computed } from 'vue'
   import { useLoginStore } from '@/stores/LoginStore.ts'
-  import { useRouter } from 'vue-router'
+  import { useRouter, onBeforeRouteLeave } from 'vue-router'
   import DeleteDialog from '@/dialogs/DeleteDialog.vue'
   import CodeEditor from '@/components/CodeEditor.vue'
   import EditParamDialog from '@/dialogs/EditParamDialog.vue'
@@ -278,6 +287,8 @@
   import * as notify from '../notify'
   import PageTitle from '@/components/PageTitle.vue'
   import TableComponent from '@/components/TableComponent.vue'
+  import LeaveFormDialog from '@/dialogs/LeaveFormDialog.vue'
+  import ReturnToFormDialog from '@/dialogs/ReturnToFormDialog.vue'
 
   const route = useRoute()
   
@@ -301,6 +312,25 @@
     plugins: []
   })
 
+  const initialCopy = ref({
+    name: '',
+    group: '',
+    description: '',
+    parameters: [],
+    taskGraph: '',
+    queues: [],
+    plugins: []
+  })
+
+  const valuesChanged = computed(() => {
+    for (const key in initialCopy.value) {
+      if(JSON.stringify(initialCopy.value[key]) !== JSON.stringify(entryPoint.value[key])) {
+        return true
+      }
+    }
+    return false
+  })
+
   const tasks = ref([])
 
   watch(() => entryPoint.value.plugins, () => {
@@ -371,22 +401,46 @@
   ]
 
   const title = ref('')
+  const showReturnDialog = ref(false)
+
   getEntrypoint()
+
   async function getEntrypoint() {
     if(route.params.id === 'new') {
       title.value = 'Create Entrypoint'
+      if(store.savedForms?.entryPoint) {
+        showReturnDialog.value = true
+        await checkIfStillValid('queues')
+        await checkIfStillValid('plugins')
+        entryPoint.value = store.savedForms.entryPoint
+      }
       return
     }
     try {
       const res = await api.getItem('entrypoints', route.params.id)
       entryPoint.value = res.data
+      initialCopy.value = JSON.parse(JSON.stringify(entryPoint.value))
       title.value = `Edit ${res.data.name}`
       console.log('entryPoint = ', entryPoint.value)
     } catch(err) {
       notify.error(err.response.data.message)
     } 
   }
 
+  async function checkIfStillValid(type) {
+    console.log('store.savedForms = ', store.savedForms)
+    for(let index = store.savedForms.entryPoint[type].length - 1; index >= 0; index--) {
+      let id = store.savedForms.entryPoint[type][index].id
+      try {
+        const res =  await api.getItem(type, id)
+        console.log('ressss = ', res)
+      } catch(err) {
+        await store.savedForms.entryPoint[type].splice(index, 1)
+        console.warn(err)
+      } 
+    }
+  }
+
 
   function addParam() {
     entryPoint.value.parameters.push({
@@ -419,6 +473,7 @@
     }
     basicInfoForm.value.validate().then(success => {
       if (success && taskGraphError.value === '') {
+        confirmLeave.value = true
         addOrModifyEntrypoint()
       }
       else {
@@ -433,9 +488,15 @@
         array[index] = queue.id
       }
     })
+    entryPoint.value.plugins.forEach((plugin, index, array) => {
+      if(typeof plugin === 'object') {
+        array[index] = plugin.id
+      }
+    })
     try {
       if (route.params.id === 'new') {
         await api.addItem('entrypoints', entryPoint.value)
+        store.savedForms.entryPoint = null
         notify.success(`Successfully created '${entryPoint.value.name}'`)
       } else {
         await api.updateItem('entrypoints', route.params.id, {
@@ -524,4 +585,40 @@
     }
   }
 
+  const showLeaveDialog = ref(false)
+  const confirmLeave = ref(false)
+  const toPath = ref()
+
+  onBeforeRouteLeave((to, from, next) => {
+    toPath.value = to.path
+    if(confirmLeave.value) {
+      next(true)
+    } else if(valuesChanged.value) {
+      showLeaveDialog.value = true
+    } else {
+      next(true)
+    }
+  })
+
+  function clearForm() {
+    entryPoint.value = {
+      name: '',
+      group: '',
+      description: '',
+      parameters: [],
+      taskGraph: '',
+      queues: [],
+      plugins: []
+    }
+    basicInfoForm.value.reset()
+    store.savedForms.entryPoint = null
+  }
+
+  function leaveForm() {
+    if(route.params.id === 'new') {
+      store.savedForms.entryPoint = entryPoint.value
+    }
+    confirmLeave.value = true
+    router.push(toPath.value)
+  }
 </script>

src/frontend/src/views/CreateExperiment.vue

@@ -246,6 +246,7 @@
     try {
       if(route.params.id === 'new') {
         await api.addItem('experiments', experiment.value)
+        store.savedForms.experiment = null
         notify.success(`Successfully created '${experiment.value.name}'`)
       } else {
         await api.updateItem('experiments', route.params.id, {

src/frontend/src/views/CreateJob.vue

@@ -211,6 +211,7 @@
   function submit() {
     basicInfoForm.value.validate().then(success => {
       if (success) {
+        confirmLeave.value = true
         createJob()
       }
       else {
@@ -227,8 +228,11 @@
     try {
       await api.addJob(route.params.id, job.value)
       notify.success(`Successfully created job`)
+      store.savedForms.jobs[route.params.id] = null
       router.push(`/experiments/${route.params.id}/jobs`)
     } catch(err) {
+      // error shows when reddis isn't installed, but job is still created
+      store.savedForms.jobs[route.params.id] = null
       notify.error(err.response.data.message)
     }
   }