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,10 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: "404. Not Found",
|
||||
});
|
||||
definePageMeta({
|
||||
layout: "404",
|
||||
});
|
||||
useHead({
|
||||
title: "404. Not Found",
|
||||
});
|
||||
definePageMeta({
|
||||
layout: "404",
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
layout: "home",
|
||||
});
|
||||
useHead({
|
||||
title: 'Homebox | Home',
|
||||
title: "Homebox | Home",
|
||||
});
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
const { data: locations } = useAsyncData('locations', async () => {
|
||||
const { data: locations } = useAsyncData("locations", async () => {
|
||||
const { data } = await api.locations.getAll();
|
||||
return data.items;
|
||||
});
|
||||
|
||||
const { data: labels } = useAsyncData('labels', async () => {
|
||||
const { data: labels } = useAsyncData("labels", async () => {
|
||||
const { data } = await api.labels.getAll();
|
||||
return data.items;
|
||||
});
|
||||
|
||||
const { data: items } = useAsyncData('items', async () => {
|
||||
const { data: items } = useAsyncData("items", async () => {
|
||||
const { data } = await api.items.getAll();
|
||||
return data.items;
|
||||
});
|
||||
|
|
@ -29,15 +29,15 @@
|
|||
|
||||
const stats = [
|
||||
{
|
||||
label: 'Locations',
|
||||
label: "Locations",
|
||||
value: totalLocations,
|
||||
},
|
||||
{
|
||||
label: 'Items',
|
||||
label: "Items",
|
||||
value: totalItems,
|
||||
},
|
||||
{
|
||||
label: 'Labels',
|
||||
label: "Labels",
|
||||
value: totalLabels,
|
||||
},
|
||||
];
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
function setFile(e: Event & { target: HTMLInputElement }) {
|
||||
importCsv.value = e.target.files[0];
|
||||
console.log('importCsv.value', importCsv.value);
|
||||
console.log("importCsv.value", importCsv.value);
|
||||
}
|
||||
|
||||
const toast = useNotifier();
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
const { error } = await api.items.import(importCsv.value);
|
||||
|
||||
if (error) {
|
||||
toast.error('Import failed. Please try again later.');
|
||||
toast.error("Import failed. Please try again later.");
|
||||
}
|
||||
|
||||
// Reset
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
|
||||
<section aria-labelledby="profile-overview-title" class="mt-8">
|
||||
<div class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
|
||||
<h2 id="profile-overview-title" class="sr-only">Profile Overview</h2>
|
||||
<div class="bg-white p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
>
|
||||
<div v-for="stat in stats" :key="stat.label" class="px-6 py-5 text-center text-sm font-medium">
|
||||
<span class="text-gray-900">{{ stat.value.value }}</span>
|
||||
{{ ' ' }}
|
||||
{{ " " }}
|
||||
<span class="text-gray-600">{{ stat.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
<section>
|
||||
<BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
|
||||
<LocationCard v-for="location in locations" :location="location" />
|
||||
<LocationCard v-for="location in locations" :key="location.id" :location="location" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
Items
|
||||
<template #description>
|
||||
<div class="tooltip" data-tip="Import CSV File">
|
||||
<button @click="openDialog" class="btn btn-primary btn-sm">
|
||||
<button class="btn btn-primary btn-sm" @click="openDialog">
|
||||
<Icon name="mdi-database" class="mr-2"></Icon>
|
||||
Import
|
||||
</button>
|
||||
|
|
@ -165,14 +165,14 @@
|
|||
</template>
|
||||
</BaseSectionHeader>
|
||||
<div class="grid sm:grid-cols-2 gap-4">
|
||||
<ItemCard v-for="item in items" :item="item" />
|
||||
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<LabelChip v-for="label in labels" size="lg" :label="label" />
|
||||
<LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
|
||||
</div>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,43 @@
|
|||
<script setup lang="ts">
|
||||
import TextField from '@/components/Form/TextField.vue';
|
||||
import { useNotifier } from '@/composables/use-notifier';
|
||||
import { usePublicApi } from '@/composables/use-api';
|
||||
import { useAuthStore } from '~~/stores/auth';
|
||||
import TextField from "@/components/Form/TextField.vue";
|
||||
import { useNotifier } from "@/composables/use-notifier";
|
||||
import { usePublicApi } from "@/composables/use-api";
|
||||
import { useAuthStore } from "~~/stores/auth";
|
||||
useHead({
|
||||
title: 'Homebox | Organize and Tag Your Stuff',
|
||||
title: "Homebox | Organize and Tag Your Stuff",
|
||||
});
|
||||
|
||||
definePageMeta({
|
||||
layout: 'empty',
|
||||
layout: "empty",
|
||||
});
|
||||
|
||||
const authStore = useAuthStore();
|
||||
if (!authStore.isTokenExpired) {
|
||||
navigateTo('/home');
|
||||
navigateTo("/home");
|
||||
}
|
||||
|
||||
const registerFields = [
|
||||
{
|
||||
label: "What's your name?",
|
||||
value: '',
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
label: "What's your email?",
|
||||
value: '',
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
label: 'Name your group',
|
||||
value: '',
|
||||
label: "Name your group",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
label: 'Set your password',
|
||||
value: '',
|
||||
type: 'password',
|
||||
label: "Set your password",
|
||||
value: "",
|
||||
type: "password",
|
||||
},
|
||||
{
|
||||
label: 'Confirm your password',
|
||||
value: '',
|
||||
type: 'password',
|
||||
label: "Confirm your password",
|
||||
value: "",
|
||||
type: "password",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -57,11 +57,11 @@
|
|||
});
|
||||
|
||||
if (error) {
|
||||
toast.error('Problem registering user');
|
||||
toast.error("Problem registering user");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('User registered');
|
||||
toast.success("User registered");
|
||||
|
||||
loading.value = false;
|
||||
loginFields[0].value = registerFields[1].value;
|
||||
|
|
@ -70,13 +70,13 @@
|
|||
|
||||
const loginFields = [
|
||||
{
|
||||
label: 'Email',
|
||||
value: '',
|
||||
label: "Email",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
label: 'Password',
|
||||
value: '',
|
||||
type: 'password',
|
||||
label: "Password",
|
||||
value: "",
|
||||
type: "password",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -88,16 +88,16 @@
|
|||
const { data, error } = await api.login(loginFields[0].value, loginFields[1].value);
|
||||
|
||||
if (error) {
|
||||
toast.error('Invalid email or password');
|
||||
toast.error("Invalid email or password");
|
||||
} else {
|
||||
toast.success('Logged in successfully');
|
||||
toast.success("Logged in successfully");
|
||||
|
||||
authStore.$patch({
|
||||
token: data.token,
|
||||
expires: data.expiresAt,
|
||||
});
|
||||
|
||||
navigateTo('/home');
|
||||
navigateTo("/home");
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
|
@ -161,9 +161,9 @@
|
|||
</h2>
|
||||
<TextField
|
||||
v-for="field in registerFields"
|
||||
:key="field.label"
|
||||
v-model="field.value"
|
||||
:label="field.label"
|
||||
:key="field.label"
|
||||
:type="field.type"
|
||||
/>
|
||||
<div class="card-actions justify-end">
|
||||
|
|
@ -188,9 +188,9 @@
|
|||
</h2>
|
||||
<TextField
|
||||
v-for="field in loginFields"
|
||||
:key="field.label"
|
||||
v-model="field.value"
|
||||
:label="field.label"
|
||||
:key="field.label"
|
||||
:type="field.type"
|
||||
/>
|
||||
<div class="card-actions justify-end mt-2">
|
||||
|
|
@ -204,10 +204,10 @@
|
|||
</Transition>
|
||||
<div class="text-center mt-6">
|
||||
<button
|
||||
@click="toggleLogin"
|
||||
class="text-base-content text-lg hover:bg-primary hover:text-primary-content px-3 py-1 rounded-xl transition-colors duration-200"
|
||||
@click="toggleLogin"
|
||||
>
|
||||
{{ registerForm ? 'Already a User? Login' : 'Not a User? Register' }}
|
||||
{{ registerForm ? "Already a User? Login" : "Not a User? Register" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import ActionsDivider from '../../components/Base/ActionsDivider.vue';
|
||||
import ActionsDivider from "../../components/Base/ActionsDivider.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
layout: "home",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
const { data: label } = useAsyncData(labelId.value, async () => {
|
||||
const { data, error } = await api.labels.get(labelId.value);
|
||||
if (error) {
|
||||
toast.error('Failed to load label');
|
||||
navigateTo('/home');
|
||||
toast.error("Failed to load label");
|
||||
navigateTo("/home");
|
||||
return;
|
||||
}
|
||||
return data;
|
||||
|
|
@ -25,25 +25,25 @@
|
|||
|
||||
function maybeTimeAgo(date?: string): string {
|
||||
if (!date) {
|
||||
return '??';
|
||||
return "??";
|
||||
}
|
||||
|
||||
const time = new Date(date);
|
||||
|
||||
return `${useTimeAgo(time).value} (${useDateFormat(time, 'MM-DD-YYYY').value})`;
|
||||
return `${useTimeAgo(time).value} (${useDateFormat(time, "MM-DD-YYYY").value})`;
|
||||
}
|
||||
|
||||
const details = computed(() => {
|
||||
const dt = {
|
||||
Name: label.value?.name || '',
|
||||
Description: label.value?.description || '',
|
||||
Name: label.value?.name || "",
|
||||
Description: label.value?.description || "",
|
||||
};
|
||||
|
||||
if (preferences.value.showDetails) {
|
||||
dt['Created At'] = maybeTimeAgo(label.value?.createdAt);
|
||||
dt['Updated At'] = maybeTimeAgo(label.value?.updatedAt);
|
||||
dt['Database ID'] = label.value?.id || '';
|
||||
dt['Group Id'] = label.value?.groupId || '';
|
||||
dt["Created At"] = maybeTimeAgo(label.value?.createdAt);
|
||||
dt["Updated At"] = maybeTimeAgo(label.value?.updatedAt);
|
||||
dt["Database ID"] = label.value?.id || "";
|
||||
dt["Group Id"] = label.value?.groupId || "";
|
||||
}
|
||||
|
||||
return dt;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
const { reveal } = useConfirm();
|
||||
|
||||
async function confirmDelete() {
|
||||
const { isCanceled } = await reveal('Are you sure you want to delete this label? This action cannot be undone.');
|
||||
const { isCanceled } = await reveal("Are you sure you want to delete this label? This action cannot be undone.");
|
||||
|
||||
if (isCanceled) {
|
||||
return;
|
||||
|
|
@ -61,24 +61,24 @@
|
|||
const { error } = await api.labels.delete(labelId.value);
|
||||
|
||||
if (error) {
|
||||
toast.error('Failed to delete label');
|
||||
toast.error("Failed to delete label");
|
||||
return;
|
||||
}
|
||||
toast.success('Label deleted');
|
||||
navigateTo('/home');
|
||||
toast.success("Label deleted");
|
||||
navigateTo("/home");
|
||||
}
|
||||
|
||||
const updateModal = ref(false);
|
||||
const updating = ref(false);
|
||||
const updateData = reactive({
|
||||
name: '',
|
||||
description: '',
|
||||
color: '',
|
||||
name: "",
|
||||
description: "",
|
||||
color: "",
|
||||
});
|
||||
|
||||
function openUpdate() {
|
||||
updateData.name = label.value?.name || '';
|
||||
updateData.description = label.value?.description || '';
|
||||
updateData.name = label.value?.name || "";
|
||||
updateData.description = label.value?.description || "";
|
||||
updateModal.value = true;
|
||||
}
|
||||
|
||||
|
|
@ -87,11 +87,11 @@
|
|||
const { error, data } = await api.labels.update(labelId.value, updateData);
|
||||
|
||||
if (error) {
|
||||
toast.error('Failed to update label');
|
||||
toast.error("Failed to update label");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Label updated');
|
||||
toast.success("Label updated");
|
||||
label.value = data;
|
||||
updateModal.value = false;
|
||||
updating.value = false;
|
||||
|
|
@ -103,8 +103,8 @@
|
|||
<BaseModal v-model="updateModal">
|
||||
<template #title> Update Label </template>
|
||||
<form v-if="label" @submit.prevent="update">
|
||||
<FormTextField :autofocus="true" label="Label Name" v-model="updateData.name" />
|
||||
<FormTextField label="Label Description" v-model="updateData.description" />
|
||||
<FormTextField v-model="updateData.name" :autofocus="true" label="Label Name" />
|
||||
<FormTextField v-model="updateData.description" label="Label Description" />
|
||||
<div class="modal-action">
|
||||
<BaseButton type="submit" :loading="updating"> Update </BaseButton>
|
||||
</div>
|
||||
|
|
@ -112,14 +112,14 @@
|
|||
</BaseModal>
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5" dark>
|
||||
{{ label ? label.name : '' }}
|
||||
{{ label ? label.name : "" }}
|
||||
</BaseSectionHeader>
|
||||
<BaseDetails class="mb-2" :details="details">
|
||||
<template #title> Label Details </template>
|
||||
</BaseDetails>
|
||||
<div class="form-control ml-auto mr-2 max-w-[130px]">
|
||||
<label class="label cursor-pointer">
|
||||
<input type="checkbox" v-model.checked="preferences.showDetails" class="checkbox" />
|
||||
<input v-model="preferences.showDetails" type="checkbox" class="toggle" />
|
||||
<span class="label-text"> Detailed View </span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
<section v-if="label">
|
||||
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
|
||||
<div class="grid gap-2 grid-cols-2">
|
||||
<ItemCard v-for="item in label.items" :item="item" :key="item.id" />
|
||||
<ItemCard v-for="item in label.items" :key="item.id" :item="item" />
|
||||
</div>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import ActionsDivider from '../../components/Base/ActionsDivider.vue';
|
||||
import ActionsDivider from "../../components/Base/ActionsDivider.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
layout: "home",
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
const { data: location } = useAsyncData(locationId.value, async () => {
|
||||
const { data, error } = await api.locations.get(locationId.value);
|
||||
if (error) {
|
||||
toast.error('Failed to load location');
|
||||
navigateTo('/home');
|
||||
toast.error("Failed to load location");
|
||||
navigateTo("/home");
|
||||
return;
|
||||
}
|
||||
return data;
|
||||
|
|
@ -25,25 +25,25 @@
|
|||
|
||||
function maybeTimeAgo(date?: string): string {
|
||||
if (!date) {
|
||||
return '??';
|
||||
return "??";
|
||||
}
|
||||
|
||||
const time = new Date(date);
|
||||
|
||||
return `${useTimeAgo(time).value} (${useDateFormat(time, 'MM-DD-YYYY').value})`;
|
||||
return `${useTimeAgo(time).value} (${useDateFormat(time, "MM-DD-YYYY").value})`;
|
||||
}
|
||||
|
||||
const details = computed(() => {
|
||||
const dt = {
|
||||
Name: location.value?.name || '',
|
||||
Description: location.value?.description || '',
|
||||
Name: location.value?.name || "",
|
||||
Description: location.value?.description || "",
|
||||
};
|
||||
|
||||
if (preferences.value.showDetails) {
|
||||
dt['Created At'] = maybeTimeAgo(location.value?.createdAt);
|
||||
dt['Updated At'] = maybeTimeAgo(location.value?.updatedAt);
|
||||
dt['Database ID'] = location.value?.id || '';
|
||||
dt['Group Id'] = location.value?.groupId || '';
|
||||
dt["Created At"] = maybeTimeAgo(location.value?.createdAt);
|
||||
dt["Updated At"] = maybeTimeAgo(location.value?.updatedAt);
|
||||
dt["Database ID"] = location.value?.id || "";
|
||||
dt["Group Id"] = location.value?.groupId || "";
|
||||
}
|
||||
|
||||
return dt;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
const { reveal } = useConfirm();
|
||||
|
||||
async function confirmDelete() {
|
||||
const { isCanceled } = await reveal('Are you sure you want to delete this location? This action cannot be undone.');
|
||||
const { isCanceled } = await reveal("Are you sure you want to delete this location? This action cannot be undone.");
|
||||
|
||||
if (isCanceled) {
|
||||
return;
|
||||
|
|
@ -61,23 +61,23 @@
|
|||
const { error } = await api.locations.delete(locationId.value);
|
||||
|
||||
if (error) {
|
||||
toast.error('Failed to delete location');
|
||||
toast.error("Failed to delete location");
|
||||
return;
|
||||
}
|
||||
toast.success('Location deleted');
|
||||
navigateTo('/home');
|
||||
toast.success("Location deleted");
|
||||
navigateTo("/home");
|
||||
}
|
||||
|
||||
const updateModal = ref(false);
|
||||
const updating = ref(false);
|
||||
const updateData = reactive({
|
||||
name: '',
|
||||
description: '',
|
||||
name: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
function openUpdate() {
|
||||
updateData.name = location.value?.name || '';
|
||||
updateData.description = location.value?.description || '';
|
||||
updateData.name = location.value?.name || "";
|
||||
updateData.description = location.value?.description || "";
|
||||
updateModal.value = true;
|
||||
}
|
||||
|
||||
|
|
@ -86,11 +86,11 @@
|
|||
const { error, data } = await api.locations.update(locationId.value, updateData);
|
||||
|
||||
if (error) {
|
||||
toast.error('Failed to update location');
|
||||
toast.error("Failed to update location");
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Location updated');
|
||||
toast.success("Location updated");
|
||||
location.value = data;
|
||||
updateModal.value = false;
|
||||
updating.value = false;
|
||||
|
|
@ -102,8 +102,8 @@
|
|||
<BaseModal v-model="updateModal">
|
||||
<template #title> Update Location </template>
|
||||
<form v-if="location" @submit.prevent="update">
|
||||
<FormTextField :autofocus="true" label="Location Name" v-model="updateData.name" />
|
||||
<FormTextField label="Location Description" v-model="updateData.description" />
|
||||
<FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" />
|
||||
<FormTextField v-model="updateData.description" label="Location Description" />
|
||||
<div class="modal-action">
|
||||
<BaseButton type="submit" :loading="updating"> Update </BaseButton>
|
||||
</div>
|
||||
|
|
@ -111,14 +111,14 @@
|
|||
</BaseModal>
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5" dark>
|
||||
{{ location ? location.name : '' }}
|
||||
{{ location ? location.name : "" }}
|
||||
</BaseSectionHeader>
|
||||
<BaseDetails class="mb-2" :details="details">
|
||||
<template #title> Location Details </template>
|
||||
</BaseDetails>
|
||||
<div class="form-control ml-auto mr-2 max-w-[130px]">
|
||||
<label class="label cursor-pointer">
|
||||
<input type="checkbox" v-model.checked="preferences.showDetails" class="checkbox" />
|
||||
<input v-model="preferences.showDetails" type="checkbox" class="toggle" />
|
||||
<span class="label-text"> Detailed View </span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
<section v-if="location">
|
||||
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
|
||||
<div class="grid gap-2 grid-cols-2">
|
||||
<ItemCard v-for="item in location.items" :item="item" :key="item.id" />
|
||||
<ItemCard v-for="item in location.items" :key="item.id" :item="item" />
|
||||
</div>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue