forked from mirrors/homebox
ui: rework location/labels pages (#475)
* formatting * slimdown locations page * update location/labels * fix dependency issues * fix type generator * cleanup unused variables
This commit is contained in:
Hayden
GitHub
parent
06eb6c1f91
commit
016780920d
12 changed files with 137 additions and 267 deletions
|
|
@ -25,9 +25,8 @@
|
|||
|
||||
<template>
|
||||
<section>
|
||||
<BaseSectionHeader class="mb-5 flex justify-between items-center">
|
||||
<BaseSectionHeader class="mb-2 flex justify-between items-center">
|
||||
Items
|
||||
|
||||
<template #description>
|
||||
<div v-if="!viewSet" class="dropdown dropdown-hover dropdown-left">
|
||||
<label tabindex="0" class="btn btn-ghost m-1">
|
||||
|
|
@ -57,6 +56,7 @@
|
|||
<template v-else>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
||||
<div class="first:block hidden text-lg">No Items to Display</div>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@
|
|||
* ---------------------------------------------------------------
|
||||
*/
|
||||
|
||||
export interface MidErrorResponse {
|
||||
error: string;
|
||||
fields: Record<string, string>;
|
||||
}
|
||||
|
||||
export interface DocumentOut {
|
||||
id: string;
|
||||
path: string;
|
||||
|
|
@ -432,3 +427,8 @@ export interface TokenResponse {
|
|||
export interface Wrapped {
|
||||
item: any;
|
||||
}
|
||||
|
||||
export interface ValidateErrorResponse {
|
||||
error: string;
|
||||
fields: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import type { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
|
||||
|
||||
definePageMeta({
|
||||
middleware: ["auth"],
|
||||
});
|
||||
|
|
@ -9,8 +7,6 @@
|
|||
const api = useUserApi();
|
||||
const toast = useNotifier();
|
||||
|
||||
const preferences = useViewPreferences();
|
||||
|
||||
const labelId = computed<string>(() => route.params.id as string);
|
||||
|
||||
const { data: label } = useAsyncData(labelId.value, async () => {
|
||||
|
|
@ -23,42 +19,6 @@
|
|||
return data;
|
||||
});
|
||||
|
||||
const details = computed<Details>(() => {
|
||||
const details = [
|
||||
{
|
||||
name: "Name",
|
||||
text: label.value?.name,
|
||||
} as AnyDetail,
|
||||
{
|
||||
name: "Description",
|
||||
type: "markdown",
|
||||
text: label.value?.description,
|
||||
} as AnyDetail,
|
||||
];
|
||||
|
||||
if (preferences.value.showDetails) {
|
||||
return [
|
||||
...details,
|
||||
{
|
||||
name: "Created",
|
||||
text: label.value?.createdAt,
|
||||
type: "date",
|
||||
} as AnyDetail,
|
||||
{
|
||||
name: "Updated",
|
||||
text: label.value?.updatedAt,
|
||||
type: "date",
|
||||
} as AnyDetail,
|
||||
{
|
||||
name: "Database ID",
|
||||
text: label.value?.id,
|
||||
} as AnyDetail,
|
||||
];
|
||||
}
|
||||
|
||||
return details;
|
||||
});
|
||||
|
||||
const confirm = useConfirm();
|
||||
|
||||
async function confirmDelete() {
|
||||
|
|
@ -123,40 +83,50 @@
|
|||
</form>
|
||||
</BaseModal>
|
||||
|
||||
<BaseCard class="mb-16">
|
||||
<template #title>
|
||||
<BaseSectionHeader>
|
||||
<Icon name="mdi-tag" class="mr-2 -mt-1 text-base-content" />
|
||||
<BaseContainer v-if="label" class="space-y-6 mb-16">
|
||||
<section>
|
||||
<BaseSectionHeader v-if="label">
|
||||
<Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
|
||||
<span class="text-base-content">
|
||||
{{ label ? label.name : "" }}
|
||||
</span>
|
||||
</BaseSectionHeader>
|
||||
</template>
|
||||
|
||||
<template #title-actions>
|
||||
<div class="flex flex-wrap 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>
|
||||
<template #description>
|
||||
<Markdown class="text-lg" :source="label.description"> </Markdown>
|
||||
</template>
|
||||
</BaseSectionHeader>
|
||||
|
||||
<div class="flex gap-3 flex-wrap mb-6 text-sm italic">
|
||||
<div>
|
||||
Created
|
||||
<DateTime :date="label?.createdAt" />
|
||||
</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" />
|
||||
<div>
|
||||
<Icon name="mdi-circle-small" />
|
||||
</div>
|
||||
<div>
|
||||
Last Updated
|
||||
<DateTime :date="label?.updatedAt" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between mb-6 mt-3">
|
||||
<div class="btn-group">
|
||||
<PageQRCode class="dropdown-right" />
|
||||
<BaseButton class="ml-auto" size="sm" @click="openUpdate">
|
||||
<Icon class="mr-1" name="mdi-pencil" />
|
||||
Edit
|
||||
</BaseButton>
|
||||
</div>
|
||||
<BaseButton class="btn btn-sm" @click="confirmDelete()">
|
||||
<Icon name="mdi-delete" class="mr-2" />
|
||||
Delete
|
||||
</BaseButton>
|
||||
<PageQRCode />
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</BaseContainer>
|
||||
|
||||
<DetailsSection :details="details" />
|
||||
</BaseCard>
|
||||
|
||||
<section v-if="label && label.items && label.items.length > 0">
|
||||
<section v-if="label && label.items">
|
||||
<ItemViewSelectable :items="label.items" />
|
||||
</section>
|
||||
</BaseContainer>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts">
|
||||
import { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
|
||||
import { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
|
||||
import { useLocationStore } from "~~/stores/locations";
|
||||
|
||||
|
|
@ -11,8 +10,6 @@
|
|||
const api = useUserApi();
|
||||
const toast = useNotifier();
|
||||
|
||||
const preferences = useViewPreferences();
|
||||
|
||||
const locationId = computed<string>(() => route.params.id as string);
|
||||
|
||||
const { data: location } = useAsyncData(locationId.value, async () => {
|
||||
|
|
@ -30,42 +27,6 @@
|
|||
return data;
|
||||
});
|
||||
|
||||
const details = computed<Details>(() => {
|
||||
const details = [
|
||||
{
|
||||
name: "Name",
|
||||
text: location.value?.name ?? "",
|
||||
},
|
||||
{
|
||||
name: "Description",
|
||||
type: "markdown",
|
||||
text: location.value?.description ?? "",
|
||||
} as AnyDetail,
|
||||
];
|
||||
|
||||
if (preferences.value.showDetails) {
|
||||
return [
|
||||
...details,
|
||||
{
|
||||
name: "Created",
|
||||
text: location.value?.createdAt,
|
||||
type: "date",
|
||||
} as AnyDetail,
|
||||
{
|
||||
name: "Updated",
|
||||
text: location.value?.updatedAt,
|
||||
type: "date",
|
||||
} as AnyDetail,
|
||||
{
|
||||
name: "Database ID",
|
||||
text: location.value?.id,
|
||||
} as AnyDetail,
|
||||
];
|
||||
}
|
||||
|
||||
return details;
|
||||
});
|
||||
|
||||
const confirm = useConfirm();
|
||||
|
||||
async function confirmDelete() {
|
||||
|
|
@ -125,6 +86,7 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Update Dialog -->
|
||||
<BaseModal v-model="updateModal">
|
||||
<template #title> Update Location </template>
|
||||
<form v-if="location" @submit.prevent="update">
|
||||
|
|
@ -136,47 +98,56 @@
|
|||
</div>
|
||||
</form>
|
||||
</BaseModal>
|
||||
<BaseContainer class="space-y-10 mb-16">
|
||||
<BaseCard>
|
||||
<template #title>
|
||||
<BaseSectionHeader>
|
||||
<Icon name="mdi-map-marker" class="mr-2 -mt-1 text-base-content" />
|
||||
<span class="text-base-content">
|
||||
{{ location ? location.name : "" }}
|
||||
</span>
|
||||
<div v-if="location && location.parent" class="text-sm breadcrumbs pb-0">
|
||||
<ul class="text-base-content/70">
|
||||
<li>
|
||||
<NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
|
||||
</li>
|
||||
<li>{{ location.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</BaseSectionHeader>
|
||||
</template>
|
||||
|
||||
<template #title-actions>
|
||||
<div class="flex flex-wrap 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>
|
||||
<BaseContainer v-if="location" class="space-y-6 mb-16">
|
||||
<section>
|
||||
<BaseSectionHeader v-if="location">
|
||||
<Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
|
||||
<span class="text-base-content">
|
||||
{{ location ? location.name : "" }}
|
||||
</span>
|
||||
|
||||
<div v-if="location?.parent" class="text-sm breadcrumbs pb-0">
|
||||
<ul class="text-base-content/70">
|
||||
<li>
|
||||
<NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
|
||||
</li>
|
||||
<li>{{ location.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<template #description>
|
||||
<Markdown class="text-lg" :source="location.description"> </Markdown>
|
||||
</template>
|
||||
</BaseSectionHeader>
|
||||
|
||||
<div class="flex gap-3 flex-wrap mb-6 text-sm italic">
|
||||
<div>
|
||||
Created
|
||||
<DateTime :date="location?.createdAt" />
|
||||
</div>
|
||||
<div>
|
||||
<Icon name="mdi-circle-small" />
|
||||
</div>
|
||||
<div>
|
||||
Last Updated
|
||||
<DateTime :date="location?.updatedAt" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between mb-6 mt-3">
|
||||
<div class="btn-group">
|
||||
<PageQRCode class="dropdown-right" />
|
||||
<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>
|
||||
<PageQRCode />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<DetailsSection :details="details" />
|
||||
</BaseCard>
|
||||
<BaseButton class="btn btn-sm" @click="confirmDelete()">
|
||||
<Icon name="mdi-delete" class="mr-2" />
|
||||
Delete
|
||||
</BaseButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<template v-if="location && location.items.length > 0">
|
||||
<ItemViewSelectable :items="location.items" />
|
||||
|
|
|
|||
50
frontend/pnpm-lock.yaml
generated
50
frontend/pnpm-lock.yaml
generated
|
|
@ -87,7 +87,7 @@ devDependencies:
|
|||
version: 6.0.0(eslint@8.29.0)(typescript@5.0.2)
|
||||
'@vite-pwa/nuxt':
|
||||
specifier: ^0.1.0
|
||||
version: 0.1.0(@nuxt/kit@3.6.3)(vite-plugin-pwa@0.16.4)
|
||||
version: 0.1.0(@nuxt/kit@3.6.5)(vite-plugin-pwa@0.16.4)
|
||||
eslint:
|
||||
specifier: ^8.23.0
|
||||
version: 8.29.0
|
||||
|
|
@ -1900,32 +1900,6 @@ packages:
|
|||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@nuxt/kit@3.6.3(rollup@2.79.1):
|
||||
resolution: {integrity: sha512-Eq+2whSIsZ+2IdB9J3okYOc+nZHassjt13vJZowxO3dw0rsXTnWGFHx40IX+wrBYE6eiOHjU/cXQ1XHdiU2GyQ==}
|
||||
engines: {node: ^14.18.0 || >=16.10.0}
|
||||
dependencies:
|
||||
'@nuxt/schema': 3.6.3(rollup@2.79.1)
|
||||
c12: 1.4.2
|
||||
consola: 3.2.3
|
||||
defu: 6.1.2
|
||||
globby: 13.2.2
|
||||
hash-sum: 2.0.0
|
||||
ignore: 5.2.4
|
||||
jiti: 1.19.1
|
||||
knitwork: 1.0.0
|
||||
mlly: 1.4.0
|
||||
pathe: 1.1.1
|
||||
pkg-types: 1.0.3
|
||||
scule: 1.0.0
|
||||
semver: 7.5.4
|
||||
unctx: 2.3.1
|
||||
unimport: 3.0.14(rollup@2.79.1)
|
||||
untyped: 1.3.2
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@nuxt/kit@3.6.5(rollup@2.79.1):
|
||||
resolution: {integrity: sha512-uBI5I2Zx6sk+vRHU+nBmifwxg/nyXCGZ1g5hUKrUfgv1ZfiKB8JkN5T9iRoduDOaqbwM6XSnEl1ja73iloDcrw==}
|
||||
engines: {node: ^14.18.0 || >=16.10.0}
|
||||
|
|
@ -2009,24 +1983,6 @@ packages:
|
|||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@nuxt/schema@3.6.3(rollup@2.79.1):
|
||||
resolution: {integrity: sha512-ZkcDt1DbgKX4Zv6Y+uLdn4Zt2WUDsZy+cuVx9XTRPoGVaG9PXZEgQr1XYoVH1vBMH/8VgDApvjok/Vzo+x+Nrg==}
|
||||
engines: {node: ^14.18.0 || >=16.10.0}
|
||||
dependencies:
|
||||
defu: 6.1.2
|
||||
hookable: 5.5.3
|
||||
pathe: 1.1.1
|
||||
pkg-types: 1.0.3
|
||||
postcss-import-resolver: 2.0.0
|
||||
std-env: 3.3.3
|
||||
ufo: 1.1.2
|
||||
unimport: 3.0.14(rollup@2.79.1)
|
||||
untyped: 1.3.2
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@nuxt/schema@3.6.5(rollup@2.79.1):
|
||||
resolution: {integrity: sha512-UPUnMB0W5TZ/Pi1fiF71EqIsPlj8LGZqzhSf8wOeh538KHwxbA9r7cuvEUU92eXRksOZaylbea3fJxZWhOITVw==}
|
||||
engines: {node: ^14.18.0 || >=16.10.0}
|
||||
|
|
@ -2896,13 +2852,13 @@ packages:
|
|||
- encoding
|
||||
- supports-color
|
||||
|
||||
/@vite-pwa/nuxt@0.1.0(@nuxt/kit@3.6.3)(vite-plugin-pwa@0.16.4):
|
||||
/@vite-pwa/nuxt@0.1.0(@nuxt/kit@3.6.5)(vite-plugin-pwa@0.16.4):
|
||||
resolution: {integrity: sha512-w6wm/0Y9yIqo6UTj9LeQUMR+xuRTf2sRdUTffu03SbRyWBzF7SnQcTqTRkXQy+NK+XafZuIDDLC12VkhValg4g==}
|
||||
peerDependencies:
|
||||
'@nuxt/kit': ^3.5.3
|
||||
vite-plugin-pwa: '>=0.16.3 <1'
|
||||
dependencies:
|
||||
'@nuxt/kit': 3.6.3(rollup@2.79.1)
|
||||
'@nuxt/kit': 3.6.5(rollup@2.79.1)
|
||||
vite-plugin-pwa: 0.16.4(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
|
||||
dev: true
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue