forked from mirrors/homebox
75c633dcb5
* dummy commit * cleanup workflows * setup and run eslint * add linter to CI * use eslint for formatting * reorder rules * drop editor config
97 lines
3.1 KiB
Vue
97 lines
3.1 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: "home",
|
|
});
|
|
|
|
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>
|