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

feat: new dashboard implementation (#168)

Browse source 
* wip: charts.js experimental work

* update lock file

* wip: frontend redesign

* wip: more UI fixes for consistency across themes

* cleanup

* improve UI log

* style updates

* fix lint errors
This commit is contained in:
Hayden 2022-12-29 17:19:15 -08:00 • committed by GitHub
parent a3954dab0f
commit 6a8a25e3f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 1690 additions and 296 deletions
Download patch file Download diff file Expand all files Collapse all files

56
frontend/pages/item/[id]/index.vue
View file

@ -343,8 +343,8 @@
<img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src" />
</div>
</dialog>
<section class="px-3">
<div class="space-y-3">
<section>
<div class="space-y-6">
<BaseCard>
<template #title>
<BaseSectionHeader>
@ -374,35 +374,31 @@
</BaseSectionHeader>
</template>
<template #title-actions>
<div class="modal-action mt-0">
<label v-if="!hasNested" class="label cursor-pointer mr-auto">
<div class="flex flex-wrap justify-between items-center mt-2 gap-4">
<label v-if="!hasNested" class="label cursor-pointer">
<input v-model="preferences.showEmpty" type="checkbox" class="toggle toggle-primary" />
<span class="label-text ml-4"> Show Empty </span>
</label>
<BaseButton v-else class="mr-auto" size="sm" @click="$router.go(-1)">
<template #icon>
<Icon name="mdi-arrow-left" class="h-5 w-5" />
</template>
Back
</BaseButton>
<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>
<BaseButton size="sm" :to="`/item/${itemId}/log`">
<template #icon>
<Icon name="mdi-post" />
</template>
Log
</BaseButton>
<div class="flex flex-wrap justify-end gap-2 ml-auto">
<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>
<BaseButton size="sm" :to="`/item/${itemId}/log`">
<template #icon>
<Icon name="mdi-post" />
</template>
Log
</BaseButton>
</div>
</div>
</template>
@ -410,7 +406,7 @@
</BaseCard>
<NuxtPage :item="item" :page-key="itemId" />
<div v-if="!hasNested">
<template v-if="!hasNested">
<BaseCard v-if="photos && photos.length > 0">
<template #title> Photos </template>
<div
@ -470,7 +466,7 @@
<template #title> Sold Details </template>
<DetailsSection :details="soldDetails" />
</BaseCard>
</div>
</template>
</div>
</section>

94
frontend/pages/item/[id]/index/log.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import DatePicker from "~~/components/Form/DatePicker.vue";
import { StatsFormat } from "~~/components/global/StatCard/types";
import { ItemOut } from "~~/lib/api/types/data-contracts";
const props = defineProps<{
@ -14,21 +15,31 @@
return data;
});
const count = computed(() => {
if (!log.value) return 0;
return log.value.entries.length;
});
const stats = computed(() => {
if (!log.value) return [];
return [
{
id: "count",
title: "Total Entries",
value: count.value || 0,
type: "number" as StatsFormat,
},
{
id: "total",
title: "Total Cost",
subtitle: "Sum over all entries",
value: fmtCurrency(log.value.costTotal),
value: log.value.costTotal || 0,
type: "currency" as StatsFormat,
},
{
id: "average",
title: "Monthly Average",
subtitle: "Average over all entries",
value: fmtCurrency(log.value.costAverage),
value: log.value.costAverage || 0,
type: "currency" as StatsFormat,
},
];
});
@ -63,14 +74,20 @@
refreshLog();
}
const confirm = useConfirm();
async function deleteEntry(id: string) {
const result = await confirm.open("Are you sure you want to delete this entry?");
if (result.isCanceled) {
return;
}
const { error } = await api.items.maintenance.delete(props.item.id, id);
if (error) {
toast.error("Failed to delete entry");
return;
}
refreshLog();
}
</script>
@ -95,16 +112,32 @@
</form>
</BaseModal>
<div class="flex">
<BaseButton class="ml-auto" size="sm" @click="newEntry()">
<template #icon>
<Icon name="mdi-post" />
</template>
Log Maintenance
</BaseButton>
</div>
<section class="page-layout my-6">
<div class="main-slot container space-y-6">
<section class="space-y-6">
<div class="flex">
<BaseButton size="sm" @click="$router.go(-1)">
<template #icon>
<Icon name="mdi-arrow-left" class="h-5 w-5" />
</template>
Back
</BaseButton>
<BaseButton class="ml-auto" size="sm" @click="newEntry()">
<template #icon>
<Icon name="mdi-post" />
</template>
Log Maintenance
</BaseButton>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<StatCard
v-for="stat in stats"
:key="stat.id"
class="stats block shadow-xl border-l-primary"
:title="stat.title"
:value="stat.value"
:type="stat.type"
/>
</div>
<div class="container space-y-6">
<BaseCard v-for="e in log.entries" :key="e.id">
<BaseSectionHeader class="p-6 border-b border-b-gray-300">
<span class="text-base-content">
@ -137,37 +170,6 @@
</div>
</BaseCard>
</div>
<div class="side-slot space-y-6">
<div v-for="stat in stats" :key="stat.id" class="stats block shadow-xl border-l-primary">
<div class="stat">
<div class="stat-title">{{ stat.title }}</div>
<div class="stat-value text-primary">{{ stat.value }}</div>
<div class="stat-desc">{{ stat.subtitle }}</div>
</div>
</div>
</div>
</section>
</div>
</template>
<style scoped>
.page-layout {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas: "side main";
gap: 1rem;
}
.side-slot {
grid-area: side;
}
.main-slot {
grid-area: main;
}
.grid {
display: grid;
}
</style>