forked from mirrors/homebox
ui cleanup
This commit is contained in:
Hayden
parent
bf2ad30609
commit
6263278ff5
14 changed files with 253 additions and 130 deletions
|
|
@ -44,6 +44,7 @@
|
|||
|
||||
const importDialog = ref(false);
|
||||
const importCsv = ref(null);
|
||||
const importLoading = ref(false);
|
||||
const importRef = ref<HTMLInputElement>(null);
|
||||
whenever(
|
||||
() => !importDialog.value,
|
||||
|
|
@ -53,10 +54,12 @@
|
|||
);
|
||||
|
||||
function setFile(e: Event & { target: HTMLInputElement }) {
|
||||
console.log(e);
|
||||
importCsv.value = e.target.files[0];
|
||||
console.log('importCsv.value', importCsv.value);
|
||||
}
|
||||
|
||||
const toast = useNotifier();
|
||||
|
||||
function openDialog() {
|
||||
importDialog.value = true;
|
||||
}
|
||||
|
|
@ -64,32 +67,49 @@
|
|||
function uploadCsv() {
|
||||
importRef.value.click();
|
||||
}
|
||||
|
||||
async function submitCsvFile() {
|
||||
importLoading.value = true;
|
||||
|
||||
const { error } = await api.items.import(importCsv.value);
|
||||
|
||||
if (error) {
|
||||
toast.error('Import failed. Please try again later.');
|
||||
}
|
||||
|
||||
// Reset
|
||||
importDialog.value = false;
|
||||
importLoading.value = false;
|
||||
importCsv.value = null;
|
||||
importRef.value.value = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseContainer class="space-y-16 pb-16">
|
||||
<BaseModal v-model="importDialog">
|
||||
<template #title> Import CSV File </template>
|
||||
|
||||
<p>
|
||||
Import a CSV file containing your items, labels, and locations. See documentation for more information on the
|
||||
required format.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col gap-2 py-6">
|
||||
<input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
|
||||
<BaseButton @click="uploadCsv">
|
||||
<Icon class="h-5 w-5 mr-2" name="mdi-upload" />
|
||||
Upload
|
||||
</BaseButton>
|
||||
<p class="text-center py-4">
|
||||
{{ importCsv?.name }}
|
||||
</p>
|
||||
</div>
|
||||
<form @submit.prevent="submitCsvFile">
|
||||
<div class="flex flex-col gap-2 py-6">
|
||||
<input ref="importRef" type="file" class="hidden" accept=".csv" @change="setFile" />
|
||||
<BaseButton type="button" @click="uploadCsv">
|
||||
<Icon class="h-5 w-5 mr-2" name="mdi-upload" />
|
||||
Upload
|
||||
</BaseButton>
|
||||
<p class="text-center pt-4 -mb-5">
|
||||
{{ importCsv?.name }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<BaseButton :disabled="!importCsv"> Submit </BaseButton>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<BaseButton type="submit" :disabled="!importCsv"> Submit </BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</BaseModal>
|
||||
|
||||
<section aria-labelledby="profile-overview-title" class="mt-8">
|
||||
|
|
|
|||
|
|
@ -1,66 +1,3 @@
|
|||
<template>
|
||||
<BaseContainer class="pb-8">
|
||||
<section class="px-3">
|
||||
<BaseSectionHeader v-if="item" dark class="mb-5">
|
||||
<Icon name="mdi-package-variant" class="-mt-1" />
|
||||
{{ item.name }}
|
||||
<template #description>
|
||||
<div class="flex flex-wrap gap-3 mt-3">
|
||||
<LabelChip class="badge-primary" v-for="label in item.labels" :label="label"></LabelChip>
|
||||
</div>
|
||||
</template>
|
||||
</BaseSectionHeader>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<input type="checkbox" v-model.checked="preferences.showEmpty" class="checkbox" />
|
||||
<span class="label-text ml-4"> Show Empty </span>
|
||||
</label>
|
||||
</div>
|
||||
<BaseButton size="sm" :to="`/item/${itemId}/edit`">
|
||||
<template #icon>
|
||||
<Icon name="mdi-pencil" />
|
||||
</template>
|
||||
Edit
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<BaseDetails :details="itemSummary">
|
||||
<template #title> Item Summary </template>
|
||||
<template #Attachments>
|
||||
<ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
|
||||
<li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
|
||||
<div class="flex w-0 flex-1 items-center">
|
||||
<Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
|
||||
<span class="ml-2 w-0 flex-1 truncate">User Guide.pdf</span>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0">
|
||||
<a href="#" class="font-medium">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
|
||||
<div class="flex w-0 flex-1 items-center">
|
||||
<Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
|
||||
<span class="ml-2 w-0 flex-1 truncate">Purchase Receipts.pdf</span>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0">
|
||||
<a href="#" class="font-medium">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BaseDetails>
|
||||
<BaseDetails :details="purchaseDetails" v-if="showPurchase">
|
||||
<template #title> Purchase Details </template>
|
||||
</BaseDetails>
|
||||
<BaseDetails :details="soldDetails" v-if="showSold">
|
||||
<template #title> Sold Details </template>
|
||||
</BaseDetails>
|
||||
</div>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
|
|
@ -85,7 +22,6 @@
|
|||
|
||||
const itemSummary = computed(() => {
|
||||
return {
|
||||
Name: item.value?.name || '',
|
||||
Description: item.value?.description || '',
|
||||
'Serial Number': item.value?.serialNumber || '',
|
||||
'Model Number': item.value?.modelNumber || '',
|
||||
|
|
@ -125,6 +61,95 @@
|
|||
'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?');
|
||||
|
||||
if (!confirmed.data) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await api.items.delete(itemId.value);
|
||||
if (error) {
|
||||
toast.error('Failed to delete item');
|
||||
return;
|
||||
}
|
||||
toast.success('Item deleted');
|
||||
navigateTo('/home');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<template>
|
||||
<BaseContainer class="pb-8">
|
||||
<section class="px-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="form-control"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<BaseDetails :details="itemSummary">
|
||||
<template #title>
|
||||
<BaseSectionHeader v-if="item" class="pb-0">
|
||||
<Icon name="mdi-package-variant" class="-mt-1 mr-2 text-gray-600" />
|
||||
<span class="text-gray-600">
|
||||
{{ item.name }}
|
||||
</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>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<label class="label cursor-pointer mr-auto">
|
||||
<input type="checkbox" v-model="preferences.showEmpty" class="toggle toggle-primary" />
|
||||
<span class="label-text ml-4"> Show Empty </span>
|
||||
</label>
|
||||
<BaseButton size="sm" :to="`/item/${itemId}/edit`">
|
||||
<template #icon>
|
||||
<Icon name="mdi-pencil" />
|
||||
</template>
|
||||
Edit
|
||||
</BaseButton>
|
||||
<BaseButton size="sm" @click="deleteItem">
|
||||
<template #icon>
|
||||
<Icon name="mdi-delete" />
|
||||
</template>
|
||||
Delete
|
||||
</BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
</BaseSectionHeader>
|
||||
</template>
|
||||
<template #Attachments>
|
||||
<ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
|
||||
<li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
|
||||
<div class="flex w-0 flex-1 items-center">
|
||||
<Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
|
||||
<span class="ml-2 w-0 flex-1 truncate">User Guide.pdf</span>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0">
|
||||
<a href="#" class="font-medium">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
|
||||
<div class="flex w-0 flex-1 items-center">
|
||||
<Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
|
||||
<span class="ml-2 w-0 flex-1 truncate">Purchase Receipts.pdf</span>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0">
|
||||
<a href="#" class="font-medium">Download</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BaseDetails>
|
||||
<BaseDetails :details="purchaseDetails" v-if="showPurchase">
|
||||
<template #title> Purchase Details </template>
|
||||
</BaseDetails>
|
||||
<BaseDetails :details="soldDetails" v-if="showSold">
|
||||
<template #title> Sold Details </template>
|
||||
</BaseDetails>
|
||||
</div>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue