mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2025-08-03 16:20:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

update labels page

Browse source
This commit is contained in:
Hayden 2022-09-24 22:38:55 -08:00
parent 17c29efdeb
commit 1f230eef7d
8 changed files with 119 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/components/Base/Card.vue
View file

@ -14,7 +14,3 @@
<slot />
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

32
frontend/components/global/DetailsSection/DetailsSection.vue Normal file
View file

@ -0,0 +1,32 @@
<template>
<div class="border-t border-gray-300 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-300">
<div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">
{{ detail.name }}
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<slot :name="detail.slot || detail.name" v-bind="{ detail }">
<template v-if="detail.type == 'date'">
<DateTime :date="detail.text" />
</template>
<template v-else>
{{ detail.text }}
</template>
</slot>
</dd>
</div>
</dl>
</div>
</template>
<script setup lang="ts">
import type { DateDetail, Detail } from "./types";
defineProps({
details: {
type: Object as () => (Detail | DateDetail)[],
required: true,
},
});
</script>

2
frontend/components/global/DetailsSection/index.ts Normal file
View file

@ -0,0 +1,2 @@
import DetailsSection from "./DetailsSection.vue";
export default DetailsSection;

15
frontend/components/global/DetailsSection/types.ts Normal file
View file

@ -0,0 +1,15 @@
export type StringLike = string | number | boolean;
export type DateDetail = {
name: string;
text: string | Date;
slot?: string;
type: "date";
};
export type Detail = {
name: string;
text: StringLike;
slot?: string;
type?: "text";
};

14
frontend/pages/home.vue
View file

@ -159,6 +159,13 @@
</BaseCard>
</section>
<section>
<BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
<div class="flex gap-2 flex-wrap">
<LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
</div>
</section>
<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">
@ -172,13 +179,6 @@
<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" :key="label.id" size="lg" :label="label" />
</div>
</section>
</BaseContainer>
</div>
</template>

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

@ -200,7 +200,7 @@
<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" />
<Icon name="mdi-package-variant" class="mr-2 text-gray-600" />
<span class="text-gray-600">
{{ item.name }}
</span>

98
frontend/pages/label/[id].vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import ActionsDivider from "../../components/Base/ActionsDivider.vue";
import type { DateDetail, Detail } from "~~/components/global/DetailsSection/types";
definePageMeta({
layout: "home",
@ -23,30 +23,39 @@
return data;
});
function maybeTimeAgo(date?: string): string {
if (!date) {
return "??";
}
const time = new Date(date);
return `${useTimeAgo(time).value} (${useDateFormat(time, "MM-DD-YYYY").value})`;
}
const details = computed(() => {
const dt = {
Name: label.value?.name || "",
Description: label.value?.description || "",
};
const details = computed<(Detail | DateDetail)[]>(() => {
const details = [
{
name: "Name",
text: label.value?.name,
},
{
name: "Description",
text: 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 || "";
return [
...details,
{
name: "Created",
text: label.value?.createdAt,
type: "date",
},
{
name: "Updated",
text: label.value?.updatedAt,
type: "date",
},
{
name: "Database ID",
text: label.value?.id,
},
];
}
return dt;
return details;
});
const { reveal } = useConfirm();
@ -110,21 +119,38 @@
</div>
</form>
</BaseModal>
<section>
<BaseSectionHeader class="mb-5" dark>
{{ 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-[160px]">
<label class="label cursor-pointer">
<input v-model="preferences.showDetails" type="checkbox" class="toggle" />
<span class="label-text"> Detailed View </span>
</label>
</div>
<ActionsDivider @delete="confirmDelete" @edit="openUpdate" />
</section>
<BaseCard class="mb-16">
<template #title>
<BaseSectionHeader>
<Icon name="mdi-tag" class="mr-2 text-gray-600" />
<span class="text-gray-600">
{{ label ? label.name : "" }}
</span>
</BaseSectionHeader>
</template>
<template #title-actions>
<div class="flex mt-2 gap-2">
<div class="form-control max-w-[160px]">
<label class="label cursor-pointer">
<input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
<span class="label-text ml-2"> Detailed View </span>
</label>
</div>
<BaseButton class="ml-auto" size="sm" @click="openUpdate">
<Icon class="mr-1" name="mdi-pencil" />
Edit
</BaseButton>
<BaseButton size="sm" @click="confirmDelete">
<Icon class="mr-1" name="mdi-delete" />
Delete
</BaseButton>
</div>
</template>
<DetailsSection :details="details" />
</BaseCard>
<section v-if="label">
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>

1
frontend/test/vitest.config.ts
View file

@ -1,4 +1,3 @@
/// <reference types="vitest" />
import { defineConfig } from "vite";
export default defineConfig({