You've already forked gun-manager-frontend
Revert "git please work"
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-row m-10 justify-around">
|
<div class="flex flex-row flex-wrap m-10 justify-around">
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
98
src/components/GunForm.vue
Normal file
98
src/components/GunForm.vue
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<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">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</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"/>
|
||||||
|
<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";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
gun: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -1,87 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<Card class="w-full md:w-2/3">
|
<div class="md:w-2/3">
|
||||||
<template #header>
|
<GunForm @save="save" :gun="gun" />
|
||||||
<div class="ml-5 mt-7">
|
|
||||||
<h2 class="text-3xl">Add Gun</h2>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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">
|
<script lang="ts">
|
||||||
import {defineComponent} from "vue";
|
import {defineComponent} from "vue";
|
||||||
import {Nullable} from "primevue/ts-helpers";
|
import {Nullable} from "primevue/ts-helpers";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import {Response} from "../types/Response";
|
import {Response} from "../types/Response";
|
||||||
|
import GunForm from "../components/GunForm.vue";
|
||||||
|
|
||||||
interface Data {
|
interface Data {
|
||||||
gun: {
|
gun: {
|
||||||
@@ -96,6 +23,7 @@ interface Data {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {GunForm},
|
||||||
data: (): Data => ({
|
data: (): Data => ({
|
||||||
gun: {
|
gun: {
|
||||||
make: "",
|
make: "",
|
||||||
|
|||||||
@@ -1,18 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<img :src="`${remoteUrl}/gun/photo/1/IMG_0436.jpg`" />
|
<div class="w-full flex flex-row flex-wrap justify-around">
|
||||||
|
<div class="w-full lg:w-1/2 m-5">
|
||||||
|
<GunForm @save="save" :gun="gun"/>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10 w-full lg:w-1/2 m-5">
|
||||||
|
<Card>
|
||||||
|
<template #content v-if="gun != null">
|
||||||
|
<h3 class="text-lg font-bold">
|
||||||
|
Images
|
||||||
|
</h3>
|
||||||
|
<div style="border-top: 1px rgba(123,123,123,0.4) solid; border-bottom: 1px rgba(123,123,123,0.4) solid;" class="p-5 mt-4 flex justify-evenly" v-for="photo in gun.photos">
|
||||||
|
<div>
|
||||||
|
<a target="_blank" :href="`${remoteUrl}/gun/photo/${photo.id}/${photo.file_name}`">
|
||||||
|
<img :alt="photo.file_name" :src="`${remoteUrl}/gun/photo/${photo.id}/100/${photo.file_name}`"/>
|
||||||
|
{{ photo.file_name }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<i style="color: red;" class="fa-regular fa-2x fa-trash"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent} from "vue";
|
import {defineComponent} from "vue"
|
||||||
import axios from "axios"
|
import axios from "axios"
|
||||||
|
import {Response} from "../types/Response"
|
||||||
|
import {Guns} from "../types/guns";
|
||||||
|
import GunForm from "../components/GunForm.vue";
|
||||||
|
|
||||||
|
interface Data {
|
||||||
|
gun: Guns | null
|
||||||
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {GunForm},
|
||||||
|
data: (): Data => ({
|
||||||
|
gun: null
|
||||||
|
}),
|
||||||
created() {
|
created() {
|
||||||
axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
|
this.getGun()
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
remoteUrl() {
|
remoteUrl() {
|
||||||
return import.meta.env.VITE_API
|
return import.meta.env.VITE_API
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getGun() {
|
||||||
|
axios.get(import.meta.env.VITE_API + `/gun/${this.$route.params.id}`)
|
||||||
|
.then((r: Response<Guns>) => {
|
||||||
|
this.gun = r.data.payload
|
||||||
|
})
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
7
src/types/guns.d.ts
vendored
7
src/types/guns.d.ts
vendored
@@ -3,4 +3,11 @@ export interface Guns {
|
|||||||
make: string
|
make: string
|
||||||
model: string
|
model: string
|
||||||
value_amount: Number
|
value_amount: Number
|
||||||
|
purchase_amount: number
|
||||||
|
photos: Array<Photo>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Photo {
|
||||||
|
id: Number
|
||||||
|
file_name: string
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user