118 lines
3.7 KiB
Vue
118 lines
3.7 KiB
Vue
<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> |