What happens in vegas stays in vegas

src/pages/Add.vue

@@ -0,0 +1,118 @@
+<template>
+  <Card class="w-full md:w-2/3">
+    <template #header>
+      <div class="ml-5 mt-7">
+        <h2 class="text-3xl">Add Gun</h2>
+      </div>
+    </template>
+    <template #content>
+      <div class="flex flex-row flex-wrap">
+        <div class="w-full">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="make">Make</label>
+            <InputText v-model="gun.make" id="make"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="model">Model</label>
+            <InputText v-model="gun.model" id="model"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="serial_number">Serial Number</label>
+            <InputText v-model="gun.serial_number" id="serial_number"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="purchase_amount">Purchase Amount</label>
+            <InputNumber
+                v-model="gun.purchase_amount"
+                :maxFractionDigits="0"
+                :minFractionDigits="0"
+                :min="0"
+                id="purchase_amount"
+            />
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="value_amount">Value Amount</label>
+            <InputNumber
+                v-model="gun.value_amount"
+                :maxFractionDigits="0"
+                :minFractionDigits="0"
+                :min="0"
+                id="value_amount"
+            />
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="date_purchased">Date Purchased</label>
+            <Calendar v-model="gun.date_purchased"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="value_amount">Notes</label>
+            <Textarea v-model="gun.notes"/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <div class="flex gap-2" style="flex-direction: column">
+            <label for="value_amount">Photos</label>
+            <FileUpload :showUploadButton="false" :showCancelButton="false" accept="image/*" multiple/>
+          </div>
+        </div>
+        <div class="w-full mt-5">
+          <Button @click="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>
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+<script lang="ts">
+import {defineComponent} from "vue";
+import {Nullable} from "primevue/ts-helpers";
+import axios from "axios";
+import {Response} from "../types/Response";
+
+interface Data {
+  gun: {
+    make: string
+    model: string
+    serial_number: string
+    purchase_amount: Nullable<number>
+    value_amount: Nullable<number>
+    date_purchased: string
+    notes: string
+  }
+}
+
+export default defineComponent({
+  data: (): Data => ({
+    gun: {
+      make: "",
+      model: "",
+      serial_number: "",
+      purchase_amount: 0,
+      value_amount: 0,
+      date_purchased: "",
+      notes: ""
+    }
+  }),
+  methods: {
+    save() {
+      axios.post(import.meta.env.VITE_API + '/gun', this.gun).then((r: Response<{ id: number }>) => {
+        this.$router.push('/gun/' + r.data.payload.id)
+      })
+    }
+  }
+})
+</script>