frontend/src/pages/loads/Add.vue

@@ -67,7 +67,7 @@
           COL
         </div>
         <div class="w-full mt-3">
-          <InputMask placeholder="0.000" v-model="load.col" mask="9.999" class="w-full" />
+          <InputMask :unmask="loading" :value="load.col" placeholder="0.000" v-model="load.col" mask="9.999" class="w-full" />
           <Message v-if="v$.$dirty && v$.col.$invalid" :value="false" size="small" severity="error"
                    variant="simple">COL Required
           </Message>
@@ -75,15 +75,20 @@
 
         <div class="w-full mt-5">
           <label>Picture</label>
-          <Message v-if="v$.$dirty && !file" :value="false" size="small" severity="error"
+          <Message v-if="v$.$dirty && (!route.params.id && !file)" :value="false" size="small" severity="error"
                    variant="simple">Picture Required
           </Message>
+          <div class="w-1/2">
+            <img v-if="pictureUrl && route.params.id && !loading" :src="pictureUrl" alt="picture" />
+          </div>
           <FileUpload v-model="file" mode="basic" @select="fileSelected" customUpload />
         </div>
       </div>
     </template>
     <template #footer>
-      <Button label="Add" :icon="icons.add" @click="add" />
+      <Button v-if="!route.params.id" label="Add" :icon="icons.add" @click="add" />
+      <Button v-else label="Save" :icon="icons.edit" @click="add" />
+      <Button class="ml-3" severity="danger" v-if="route.params.id" label="Delete" :icon="icons.delete" @click="deleteLoad" />
     </template>
   </Card>
 
@@ -161,6 +166,12 @@ const fileSelected = (e: FileUploadSelectEvent) => {
   file.value = e.files[0]
 }
 
+const pictureUrl = ref<string | null>(null)
+const calcUrl = () => {
+  const cache = new Date().getMilliseconds()
+  pictureUrl.value =  import.meta.env.VITE_API + `/load/${route.params.id}/photo?cache=${cache}`
+}
+
 const load = ref({
   bullet: '',
   cartridge: '',
@@ -243,7 +254,7 @@ const addCartridgeName = async () => {
 const add = async () => {
   v$.value.$touch()
 
-  if (v$.value.$invalid || !file.value) {
+  if (v$.value.$invalid || (!route.params.id && !file.value)) {
     toast.add({
       severity: 'error',
       summary: 'Error',
@@ -254,6 +265,12 @@ const add = async () => {
     return
   }
 
+  let id = ""
+
+  if (route.params.id) {
+    id = "/" + route.params.id.toString()
+  }
+
   const formData = new FormData()
   formData.append('bullet_id', load.value.bullet)
   formData.append('cartridge_id', load.value.cartridge)
@@ -261,22 +278,43 @@ const add = async () => {
   formData.append('powder_gr', load.value.powderGrs.toString())
   formData.append('primer_id', load.value.primer)
   formData.append('col', load.value.col)
+  if (file.value) {
     formData.append('photo', file.value)
+  }
 
   try {
-    const response = await axios.post<any, Response<string>>(`${import.meta.env.VITE_API}/load`, formData, {
+    const response = await axios.post<any, Response<string>>(`${import.meta.env.VITE_API}/load${id}`, formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
       },
     })
 
+    const message = route.params.id ? 'Load updated' : 'Load added'
+
     toast.add({
       severity: 'success',
       summary: 'Success',
-      detail: 'Load added',
+      detail: message,
       life: 3000,
     })
 
+    if (route.params.id) {
+      load.value = {
+        bullet: '',
+        cartridge: '',
+        powder: '',
+        powderGrs: 0,
+        primer: '',
+        col: '',
+      }
+      file.value = null
+
+      v$.value.$reset()
+      await fetchLoad()
+
+      return
+    }
+
     await router.push(`/loads/edit/${response.data.payload}`)
   } catch (error) {
     toast.add({
@@ -287,6 +325,31 @@ const add = async () => {
     })
   }
 }
+const deleteLoad = async () => {
+  if (!route.params.id) {
+    return
+  }
+
+  try {
+    await axios.delete(`${import.meta.env.VITE_API}/load/${route.params.id}`)
+
+    toast.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: 'Load deleted',
+      life: 3000,
+    })
+
+    await router.push('/loads/search')
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Error deleting load',
+      life: 3000,
+    })
+  }
+}
 
 const fetchLoad = async () => {
   if (!route.params.id) {
@@ -302,6 +365,18 @@ const fetchLoad = async () => {
     load.value.powder = response.data.payload.powder.id
     load.value.powderGrs = response.data.payload.powder_gr
     load.value.primer = response.data.payload.primer.id
+    load.value.col = response.data.payload.col.toString()
+
+    if (!load.value.col.includes('.')) {
+      load.value.col = `${load.value.col}.000`
+    } else {
+      const parts = load.value.col.split('.')
+      if (parts[1].length < 3) {
+        load.value.col = `${parts[0]}.${parts[1].padEnd(3, '0')}`
+      }
+    }
+
+    calcUrl()
   } else {
     toast.add({
       severity: 'error',
@@ -324,7 +399,9 @@ onMounted(() => {
   fetchCartridges()
 
   if (route.params.id) {
+    setTimeout(() => {
       fetchLoad()
+    }, 100)
   }
 })