update location/labels

This commit is contained in:
Hayden 2023-06-02 18:08:06 -08:00
parent 77101121be
commit 2b8373f636
No known key found for this signature in database
GPG key ID: 17CF79474E257545
3 changed files with 36 additions and 64 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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() {