gun-manager-frontend/src/components/GunForm.vue

<template>
  <Card>
    <template #header>
      <div class="ml-5 pt-10">
        <h2 v-if="gun.id" class="text-3xl">Edit Gun</h2>
        <h2 v-else 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" v-if="gun.id">
          <div class="flex gap-2" style="flex-direction: column">
            <label for="value_amount">Photos</label>
            <FileUpload
                :showCancelButton="false"
                accept="image/*"
                multiple
                :url="`${url}/gun/photo/${gun.id}`"
                @upload="$emit('upload')"
            />
          </div>
        </div>
        <div class="w-full mt-5">
          <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="confirm" v-if="gun.id" class="p-button-danger ml-3" icon="fa-sharp fa-light fa-trash" label="Delete"/>
        </div>
      </div>
    </template>
  </Card>
</template>
<script lang="ts">
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: {
    confirm() {
      this.$confirm.require({
        message: 'Are you sure you want to proceed?',
        header: 'Confirmation',
        icon: 'pi pi-exclamation-triangle',
        accept: () => {
          this.deleteGun()
        },
        reject: () => {
        }
      });
    },
    deleteGun() {
      axios.delete(`${import.meta.env.VITE_API}/gun/${this.gun.id}`)
          .then(() => {
            this.$router.push('/guns')
          })
    }
  }
})
</script>