mirror of
https://github.com/hay-kot/homebox.git
synced 2025-08-05 09:10:26 +00:00
update location/labels
This commit is contained in:
parent
77101121be
commit
2b8373f636
3 changed files with 36 additions and 64 deletions
|
@ -56,6 +56,7 @@
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
<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" />
|
<ItemCard v-for="item in items" :key="item.id" :item="item" />
|
||||||
|
<div class="first:block hidden text-lg">No Items to Display</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -123,40 +123,50 @@
|
||||||
</form>
|
</form>
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
|
|
||||||
<BaseCard class="mb-16">
|
<BaseContainer v-if="label" class="space-y-6 mb-16">
|
||||||
<template #title>
|
<section>
|
||||||
<BaseSectionHeader>
|
<BaseSectionHeader v-if="label">
|
||||||
<Icon name="mdi-tag" class="mr-2 -mt-1 text-base-content" />
|
<Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
|
||||||
<span class="text-base-content">
|
<span class="text-base-content">
|
||||||
{{ label ? label.name : "" }}
|
{{ label ? label.name : "" }}
|
||||||
</span>
|
</span>
|
||||||
</BaseSectionHeader>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #title-actions>
|
<template #description>
|
||||||
<div class="flex flex-wrap mt-2 gap-2">
|
<Markdown class="text-lg" :source="label.description"> </Markdown>
|
||||||
<div class="form-control max-w-[160px]">
|
</template>
|
||||||
<label class="label cursor-pointer">
|
</BaseSectionHeader>
|
||||||
<input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
|
|
||||||
<span class="label-text ml-2"> Detailed View </span>
|
<div class="flex gap-3 flex-wrap mb-6 text-sm italic">
|
||||||
</label>
|
<div>
|
||||||
|
Created
|
||||||
|
<DateTime :date="label?.createdAt" />
|
||||||
</div>
|
</div>
|
||||||
<BaseButton class="ml-auto" size="sm" @click="openUpdate">
|
<div>
|
||||||
<Icon class="mr-1" name="mdi-pencil" />
|
<Icon name="mdi-circle-small" />
|
||||||
Edit
|
</div>
|
||||||
</BaseButton>
|
<div>
|
||||||
<BaseButton size="sm" @click="confirmDelete">
|
Last Updated
|
||||||
<Icon class="mr-1" name="mdi-delete" />
|
<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
|
Delete
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
<PageQRCode />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</section>
|
||||||
|
</BaseContainer>
|
||||||
|
|
||||||
<DetailsSection :details="details" />
|
<section v-if="label && label.items">
|
||||||
</BaseCard>
|
|
||||||
|
|
||||||
<section v-if="label && label.items && label.items.length > 0">
|
|
||||||
<ItemViewSelectable :items="label.items" />
|
<ItemViewSelectable :items="label.items" />
|
||||||
</section>
|
</section>
|
||||||
</BaseContainer>
|
</BaseContainer>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
|
|
||||||
import { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
|
import { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
|
||||||
import { useLocationStore } from "~~/stores/locations";
|
import { useLocationStore } from "~~/stores/locations";
|
||||||
|
|
||||||
|
@ -11,8 +10,6 @@
|
||||||
const api = useUserApi();
|
const api = useUserApi();
|
||||||
const toast = useNotifier();
|
const toast = useNotifier();
|
||||||
|
|
||||||
const preferences = useViewPreferences();
|
|
||||||
|
|
||||||
const locationId = computed<string>(() => route.params.id as string);
|
const locationId = computed<string>(() => route.params.id as string);
|
||||||
|
|
||||||
const { data: location } = useAsyncData(locationId.value, async () => {
|
const { data: location } = useAsyncData(locationId.value, async () => {
|
||||||
|
@ -30,42 +27,6 @@
|
||||||
return data;
|
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();
|
const confirm = useConfirm();
|
||||||
|
|
||||||
async function confirmDelete() {
|
async function confirmDelete() {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue