vbatts/homebox
1
0
Fork 0
forked from mirrors/homebox
Code Pull requests Activity

implement date picker

Browse source
This commit is contained in:
Hayden 2022-09-06 21:58:59 -08:00
parent 863adbd106
commit ad2bcd84f3
5 changed files with 311 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

146
frontend/pages/item/[id]/edit.vue
View file

@ -1,11 +1,147 @@
<template>
<div>Edit Me</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'home',
});
const route = useRoute();
const api = useUserApi();
const toast = useNotifier();
const itemId = computed<string>(() => route.params.id as string);
const { data: item } = useAsyncData(async () => {
const { data, error } = await api.items.get(itemId.value);
if (error) {
toast.error('Failed to load item');
navigateTo('/home');
return;
}
return data;
});
type FormField = {
type: 'text' | 'textarea' | 'select' | 'date';
label: string;
ref: string;
};
const mainFields: FormField[] = [
{
type: 'text',
label: 'Name',
ref: 'name',
},
{
type: 'textarea',
label: 'Description',
ref: 'description',
},
{
type: 'text',
label: 'Serial Number',
ref: 'serialNumber',
},
{
type: 'text',
label: 'Model Number',
ref: 'modelNumber',
},
{
type: 'text',
label: 'Manufacturer',
ref: 'manufacturer',
},
{
type: 'textarea',
label: 'Notes',
ref: 'notes',
},
];
const purchaseFields: FormField[] = [
{
type: 'text',
label: 'Purchased From',
ref: 'purchaseFrom',
},
{
type: 'text',
label: 'Purchased Price',
ref: 'purchasePrice',
},
{
type: 'date',
label: 'Purchased At',
ref: 'purchaseTime',
},
];
const soldFields = [
{
type: 'text',
label: 'Sold To',
ref: 'soldTo',
},
{
type: 'text',
label: 'Sold Price',
ref: 'soldPrice',
},
{
type: 'date',
label: 'Sold At',
ref: 'soldTime',
},
];
</script>
<style scoped></style>
<template>
<BaseContainer v-if="item" class="pb-8">
<div class="space-y-4">
<div class="overflow-hidden card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">Item Details</h3>
</div>
<div class="border-t border-gray-300 sm:p-0">
<div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in mainFields">
<div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
<FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
<FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
<FormDatePicker v-else-if="field.type === 'date'" v-model="item[field.ref]" :label="field.label" inline />
</div>
</div>
</div>
</div>
<div class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">Purchase Details</h3>
</div>
<div class="border-t border-gray-300 sm:p-0">
<div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in purchaseFields">
<div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
<FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
<FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
<FormDatePicker v-else-if="field.type === 'date'" v-model="item[field.ref]" :label="field.label" inline />
</div>
</div>
</div>
</div>
<div class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">Sold Details</h3>
</div>
<div class="border-t border-gray-300 sm:p-0">
<div class="sm:divide-y sm:divide-gray-300 grid grid-cols-1" v-for="field in soldFields">
<div class="pt-2 pb-4 sm:px-6 border-b border-gray-300">
<FormTextArea v-if="field.type === 'textarea'" v-model="item[field.ref]" :label="field.label" inline />
<FormTextField v-else-if="field.type === 'text'" v-model="item[field.ref]" :label="field.label" inline />
<FormDatePicker v-else-if="field.type === 'date'" v-model="item[field.ref]" :label="field.label" inline />
</div>
</div>
</div>
</div>
</div>
</BaseContainer>
</template>