forked from mirrors/homebox
frontend: cleanup
* dummy commit * cleanup workflows * setup and run eslint * add linter to CI * use eslint for formatting * reorder rules * drop editor config
This commit is contained in:
Hayden
GitHub
parent
78fa714297
commit
75c633dcb5
65 changed files with 2048 additions and 641 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
layout: "home",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
|
@ -12,85 +12,85 @@
|
|||
const { data: item } = useAsyncData(async () => {
|
||||
const { data, error } = await api.items.get(itemId.value);
|
||||
if (error) {
|
||||
toast.error('Failed to load item');
|
||||
navigateTo('/home');
|
||||
toast.error("Failed to load item");
|
||||
navigateTo("/home");
|
||||
return;
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
type FormField = {
|
||||
type: 'text' | 'textarea' | 'select' | 'date';
|
||||
type: "text" | "textarea" | "select" | "date";
|
||||
label: string;
|
||||
ref: string;
|
||||
};
|
||||
|
||||
const mainFields: FormField[] = [
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Name',
|
||||
ref: 'name',
|
||||
type: "text",
|
||||
label: "Name",
|
||||
ref: "name",
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
label: 'Description',
|
||||
ref: 'description',
|
||||
type: "textarea",
|
||||
label: "Description",
|
||||
ref: "description",
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Serial Number',
|
||||
ref: 'serialNumber',
|
||||
type: "text",
|
||||
label: "Serial Number",
|
||||
ref: "serialNumber",
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Model Number',
|
||||
ref: 'modelNumber',
|
||||
type: "text",
|
||||
label: "Model Number",
|
||||
ref: "modelNumber",
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Manufacturer',
|
||||
ref: 'manufacturer',
|
||||
type: "text",
|
||||
label: "Manufacturer",
|
||||
ref: "manufacturer",
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
label: 'Notes',
|
||||
ref: 'notes',
|
||||
type: "textarea",
|
||||
label: "Notes",
|
||||
ref: "notes",
|
||||
},
|
||||
];
|
||||
|
||||
const purchaseFields: FormField[] = [
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Purchased From',
|
||||
ref: 'purchaseFrom',
|
||||
type: "text",
|
||||
label: "Purchased From",
|
||||
ref: "purchaseFrom",
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Purchased Price',
|
||||
ref: 'purchasePrice',
|
||||
type: "text",
|
||||
label: "Purchased Price",
|
||||
ref: "purchasePrice",
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
label: 'Purchased At',
|
||||
ref: 'purchaseTime',
|
||||
type: "date",
|
||||
label: "Purchased At",
|
||||
ref: "purchaseTime",
|
||||
},
|
||||
];
|
||||
|
||||
const soldFields = [
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Sold To',
|
||||
ref: 'soldTo',
|
||||
type: "text",
|
||||
label: "Sold To",
|
||||
ref: "soldTo",
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
label: 'Sold Price',
|
||||
ref: 'soldPrice',
|
||||
type: "text",
|
||||
label: "Sold Price",
|
||||
ref: "soldPrice",
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
label: 'Sold At',
|
||||
ref: 'soldTime',
|
||||
type: "date",
|
||||
label: "Sold At",
|
||||
ref: "soldTime",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
<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 v-for="field in mainFields" :key="field.ref" class="sm:divide-y sm:divide-gray-300 grid grid-cols-1">
|
||||
<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 />
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
<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 v-for="field in purchaseFields" :key="field.ref" class="sm:divide-y sm:divide-gray-300 grid grid-cols-1">
|
||||
<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 />
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
<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 v-for="field in soldFields" :key="field.ref" class="sm:divide-y sm:divide-gray-300 grid grid-cols-1">
|
||||
<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 />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
layout: "home",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
const { data: item } = useAsyncData(async () => {
|
||||
const { data, error } = await api.items.get(itemId.value);
|
||||
if (error) {
|
||||
toast.error('Failed to load item');
|
||||
navigateTo('/home');
|
||||
toast.error("Failed to load item");
|
||||
navigateTo("/home");
|
||||
return;
|
||||
}
|
||||
return data;
|
||||
|
|
@ -22,12 +22,12 @@
|
|||
|
||||
const itemSummary = computed(() => {
|
||||
return {
|
||||
Description: item.value?.description || '',
|
||||
'Serial Number': item.value?.serialNumber || '',
|
||||
'Model Number': item.value?.modelNumber || '',
|
||||
Manufacturer: item.value?.manufacturer || '',
|
||||
Notes: item.value?.notes || '',
|
||||
Attachments: '', // TODO: Attachments
|
||||
Description: item.value?.description || "",
|
||||
"Serial Number": item.value?.serialNumber || "",
|
||||
"Model Number": item.value?.modelNumber || "",
|
||||
Manufacturer: item.value?.manufacturer || "",
|
||||
Notes: item.value?.notes || "",
|
||||
Attachments: "", // TODO: Attachments
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -42,12 +42,12 @@
|
|||
const payload = {};
|
||||
|
||||
if (item.value.lifetimeWarranty) {
|
||||
payload['Lifetime Warranty'] = 'Yes';
|
||||
payload["Lifetime Warranty"] = "Yes";
|
||||
} else {
|
||||
payload['Warranty Expires'] = item.value?.warrantyExpires || '';
|
||||
payload["Warranty Expires"] = item.value?.warrantyExpires || "";
|
||||
}
|
||||
|
||||
payload['Warranty Details'] = item.value?.warrantyDetails || '';
|
||||
payload["Warranty Details"] = item.value?.warrantyDetails || "";
|
||||
|
||||
return payload;
|
||||
});
|
||||
|
|
@ -61,9 +61,9 @@
|
|||
|
||||
const purchaseDetails = computed(() => {
|
||||
return {
|
||||
'Purchased From': item.value?.purchaseFrom || '',
|
||||
'Purchased Price': item.value?.purchasePrice || '',
|
||||
'Purchased At': item.value?.purchaseTime || '',
|
||||
"Purchased From": item.value?.purchaseFrom || "",
|
||||
"Purchased Price": item.value?.purchasePrice || "",
|
||||
"Purchased At": item.value?.purchaseTime || "",
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -77,16 +77,16 @@
|
|||
|
||||
const soldDetails = computed(() => {
|
||||
return {
|
||||
'Sold To': item.value?.soldTo || '',
|
||||
'Sold Price': item.value?.soldPrice || '',
|
||||
'Sold At': item.value?.soldTime || '',
|
||||
"Sold To": item.value?.soldTo || "",
|
||||
"Sold Price": item.value?.soldPrice || "",
|
||||
"Sold At": item.value?.soldTime || "",
|
||||
};
|
||||
});
|
||||
|
||||
const confirm = useConfirm();
|
||||
|
||||
async function deleteItem() {
|
||||
const confirmed = await confirm.reveal('Are you sure you want to delete this item?');
|
||||
const confirmed = await confirm.reveal("Are you sure you want to delete this item?");
|
||||
|
||||
if (!confirmed.data) {
|
||||
return;
|
||||
|
|
@ -94,11 +94,11 @@
|
|||
|
||||
const { error } = await api.items.delete(itemId.value);
|
||||
if (error) {
|
||||
toast.error('Failed to delete item');
|
||||
toast.error("Failed to delete item");
|
||||
return;
|
||||
}
|
||||
toast.success('Item deleted');
|
||||
navigateTo('/home');
|
||||
toast.success("Item deleted");
|
||||
navigateTo("/home");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -118,11 +118,11 @@
|
|||
</span>
|
||||
<template #after>
|
||||
<div class="flex flex-wrap gap-3 mt-3">
|
||||
<LabelChip class="badge-primary" v-for="label in item.labels" :label="label"></LabelChip>
|
||||
<LabelChip v-for="label in item.labels" :key="label.id" class="badge-primary" :label="label" />
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<label class="label cursor-pointer mr-auto">
|
||||
<input type="checkbox" v-model="preferences.showEmpty" class="toggle toggle-primary" />
|
||||
<input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
|
||||
<span class="label-text ml-4"> Show Empty </span>
|
||||
</label>
|
||||
<BaseButton size="sm" :to="`/item/${itemId}/edit`">
|
||||
|
|
@ -164,13 +164,13 @@
|
|||
</ul>
|
||||
</template>
|
||||
</BaseDetails>
|
||||
<BaseDetails :details="purchaseDetails" v-if="showPurchase">
|
||||
<BaseDetails v-if="showPurchase" :details="purchaseDetails">
|
||||
<template #title> Purchase Details </template>
|
||||
</BaseDetails>
|
||||
<BaseDetails :details="warrantyDetails" v-if="showWarranty">
|
||||
<BaseDetails v-if="showWarranty" :details="warrantyDetails">
|
||||
<template #title> Warranty </template>
|
||||
</BaseDetails>
|
||||
<BaseDetails :details="soldDetails" v-if="showSold">
|
||||
<BaseDetails v-if="showSold" :details="soldDetails">
|
||||
<template #title> Sold </template>
|
||||
</BaseDetails>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
layout: "home",
|
||||
});
|
||||
|
||||
const show = reactive({
|
||||
|
|
@ -11,83 +11,85 @@
|
|||
});
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
description: '',
|
||||
notes: '',
|
||||
name: "",
|
||||
description: "",
|
||||
notes: "",
|
||||
|
||||
// Item Identification
|
||||
serialNumber: '',
|
||||
modelNumber: '',
|
||||
manufacturer: '',
|
||||
serialNumber: "",
|
||||
modelNumber: "",
|
||||
manufacturer: "",
|
||||
|
||||
// Purchase Information
|
||||
purchaseTime: '',
|
||||
purchasePrice: '',
|
||||
purchaseFrom: '',
|
||||
purchaseTime: "",
|
||||
purchasePrice: "",
|
||||
purchaseFrom: "",
|
||||
|
||||
// Sold Information
|
||||
soldTime: '',
|
||||
soldPrice: '',
|
||||
soldTo: '',
|
||||
soldNotes: '',
|
||||
soldTime: "",
|
||||
soldPrice: "",
|
||||
soldTo: "",
|
||||
soldNotes: "",
|
||||
});
|
||||
|
||||
function submit() {}
|
||||
function submit() {
|
||||
console.log("Submitted!");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseContainer is="section">
|
||||
<BaseContainer cmp="section">
|
||||
<BaseSectionHeader> Add an Item To Your Inventory </BaseSectionHeader>
|
||||
<form @submit.prevent="submit" class="max-w-3xl mx-auto my-5 space-y-6">
|
||||
<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 label="Name" v-model="form.name" />
|
||||
<FormTextArea label="Description" v-model="form.description" limit="1000" />
|
||||
<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 class="card bg-base-200" v-if="show.identification">
|
||||
<div v-if="show.identification" class="card bg-base-200">
|
||||
<div class="card-body grid md:grid-cols-2">
|
||||
<FormTextField label="Serial Number" v-model="form.serialNumber" />
|
||||
<FormTextField label="Model Number" v-model="form.modelNumber" />
|
||||
<FormTextField label="Manufacturer" v-model="form.manufacturer" />
|
||||
<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 class="card bg-base-200" v-if="show.purchase">
|
||||
<div v-if="show.purchase" class="card bg-base-200">
|
||||
<div class="card-body grid md:grid-cols-2">
|
||||
<FormTextField label="Purchase Time" v-model="form.purchaseTime" />
|
||||
<FormTextField label="Purchase Price" v-model="form.purchasePrice" />
|
||||
<FormTextField label="Purchase From" v-model="form.purchaseFrom" />
|
||||
<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 class="card bg-base-200" v-if="show.sold">
|
||||
<div v-if="show.sold" class="card bg-base-200">
|
||||
<div class="card-body">
|
||||
<div class="grid md:grid-cols-2 gap-2">
|
||||
<FormTextField label="Sold Time" v-model="form.soldTime" />
|
||||
<FormTextField label="Sold Price" v-model="form.soldPrice" />
|
||||
<FormTextField label="Sold To" v-model="form.soldTo" />
|
||||
<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 label="Sold Notes" v-model="form.soldNotes" limit="1000" />
|
||||
<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 class="card bg-base-200" v-if="show.extras">
|
||||
<div v-if="show.extras" class="card bg-base-200">
|
||||
<div class="card-body">
|
||||
<FormTextArea label="Notes" v-model="form.notes" limit="1000" />
|
||||
<FormTextArea v-model="form.notes" label="Notes" limit="1000" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue