1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-23 07:16:30 +00:00
homebox/frontend/pages/item/new.vue
Hayden 461be2afca
feat: currency selection support ()
* initial UI for currency selection

* add task to purge invitation tokens

* group API contracts

* fix type import

* use auth middleware

* add currency setting support (UI)

* use group settings for format currency

* fix casing
2022-10-15 12:15:55 -08:00

97 lines
3.1 KiB
Vue

<script setup>
definePageMeta({
middleware: ["auth"],
});
const show = reactive({
identification: true,
purchase: false,
sold: false,
extras: false,
});
const form = reactive({
name: "",
description: "",
notes: "",
// Item Identification
serialNumber: "",
modelNumber: "",
manufacturer: "",
// Purchase Information
purchaseTime: "",
purchasePrice: "",
purchaseFrom: "",
// Sold Information
soldTime: "",
soldPrice: "",
soldTo: "",
soldNotes: "",
});
function submit() {
console.log("Submitted!");
}
</script>
<template>
<BaseContainer cmp="section">
<BaseSectionHeader> Add an Item To Your Inventory </BaseSectionHeader>
<form class="max-w-3xl mx-auto my-5 space-y-6" @submit.prevent="submit">
<div class="divider collapse-title px-0 cursor-pointer">Required Information</div>
<div class="bg-base-200 card">
<div class="card-body">
<FormTextField v-model="form.name" label="Name" />
<FormTextArea v-model="form.description" label="Description" limit="1000" />
</div>
</div>
<div class="divider">
<button class="btn btn-sm" @click="show.identification = !show.identification">Product Information</button>
</div>
<div v-if="show.identification" class="card bg-base-200">
<div class="card-body grid md:grid-cols-2">
<FormTextField v-model="form.serialNumber" label="Serial Number" />
<FormTextField v-model="form.modelNumber" label="Model Number" />
<FormTextField v-model="form.manufacturer" label="Manufacturer" />
</div>
</div>
<div class="">
<button class="btn btn-sm" @click="show.purchase = !show.purchase">Purchase Information</button>
<div class="divider"></div>
</div>
<div v-if="show.purchase" class="card bg-base-200">
<div class="card-body grid md:grid-cols-2">
<FormTextField v-model="form.purchaseTime" label="Purchase Time" />
<FormTextField v-model="form.purchasePrice" label="Purchase Price" />
<FormTextField v-model="form.purchaseFrom" label="Purchase From" />
</div>
</div>
<div class="divider">
<button class="btn btn-sm" @click="show.sold = !show.sold">Sold Information</button>
</div>
<div v-if="show.sold" class="card bg-base-200">
<div class="card-body">
<div class="grid md:grid-cols-2 gap-2">
<FormTextField v-model="form.soldTime" label="Sold Time" />
<FormTextField v-model="form.soldPrice" label="Sold Price" />
<FormTextField v-model="form.soldTo" label="Sold To" />
</div>
<FormTextArea v-model="form.soldNotes" label="Sold Notes" limit="1000" />
</div>
</div>
<div class="divider">
<button class="btn btn-sm" @click="show.extras = !show.extras">Extras</button>
</div>
<div v-if="show.extras" class="card bg-base-200">
<div class="card-body">
<FormTextArea v-model="form.notes" label="Notes" limit="1000" />
</div>
</div>
</form>
</BaseContainer>
</template>