REALLY FUCKING FIXED

src/components/GunForm.vue

@@ -62,22 +62,24 @@
             <Textarea v-model="gun.notes"/>
           </div>
         </div>
-        <div class="w-full mt-5">
+        <div class="w-full mt-5" v-if="gun.id">
           <div class="flex gap-2" style="flex-direction: column">
             <label for="value_amount">Photos</label>
             <FileUpload
-                :showUploadButton="gun.id === false"
                 :showCancelButton="false"
                 accept="image/*"
-                :multiple="gun.id === null"
+                multiple
+                :url="`${url}/gun/photo/${gun.id}`"
+                @upload="$emit('upload')"
             />
           </div>
         </div>
         <div class="w-full mt-5">
-          <Button @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
+          <Button :loading="loading" @click="$emit('save')" class="p-button-success" icon="fa-sharp fa-light fa-floppy-disk" label="Save"/>
           <router-link to="/guns">
             <Button class="p-button-warning ml-3" icon="fa-sharp fa-light fa-times" label="Cancel"/>
           </router-link>
+          <Button @click="deleteGun" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
         </div>
       </div>
     </template>
@@ -85,13 +87,33 @@
 
 </template>
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent} from "vue"
+import axios from "axios"
 
 export default defineComponent({
   props: {
+    loading: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
     gun: {
       type: Object,
       required: true
+    },
+  },
+  computed: {
+    url() {
+      return import.meta.env.VITE_API
+    }
+  },
+  methods: {
+    deleteGun() {
+      axios.delete(`${import.meta.env.VITE_API}/gun/${this.gun.id}`)
+          .then(() => {
+            this.$router.push('/guns')
+          })
     }
   }
 })