2022-09-01 22:32:03 +00:00
|
|
|
<script setup lang="ts">
|
2022-12-03 01:12:32 +00:00
|
|
|
import { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
|
2022-10-24 04:54:39 +00:00
|
|
|
import { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
|
|
|
|
import { useLocationStore } from "~~/stores/locations";
|
2022-09-01 22:32:03 +00:00
|
|
|
|
|
|
|
definePageMeta({
|
2022-10-15 20:15:55 +00:00
|
|
|
middleware: ["auth"],
|
2022-09-01 22:32:03 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
|
|
const api = useUserApi();
|
|
|
|
const toast = useNotifier();
|
|
|
|
|
2022-09-02 17:46:20 +00:00
|
|
|
const preferences = useViewPreferences();
|
2022-09-01 22:32:03 +00:00
|
|
|
|
|
|
|
const locationId = computed<string>(() => route.params.id as string);
|
|
|
|
|
2022-09-02 01:52:40 +00:00
|
|
|
const { data: location } = useAsyncData(locationId.value, async () => {
|
|
|
|
const { data, error } = await api.locations.get(locationId.value);
|
|
|
|
if (error) {
|
2022-09-09 22:46:53 +00:00
|
|
|
toast.error("Failed to load location");
|
|
|
|
navigateTo("/home");
|
2022-09-02 01:52:40 +00:00
|
|
|
return;
|
|
|
|
}
|
2022-10-24 04:54:39 +00:00
|
|
|
|
|
|
|
if (data.parent) {
|
|
|
|
parent.value = locations.value.find(l => l.id === data.parent.id);
|
|
|
|
}
|
|
|
|
|
2022-09-02 01:52:40 +00:00
|
|
|
return data;
|
|
|
|
});
|
|
|
|
|
2022-12-03 01:12:32 +00:00
|
|
|
const details = computed<Details>(() => {
|
2022-09-25 22:33:13 +00:00
|
|
|
const details = [
|
|
|
|
{
|
|
|
|
name: "Name",
|
2022-12-03 01:12:32 +00:00
|
|
|
text: location.value?.name ?? "",
|
2022-09-25 22:33:13 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Description",
|
2022-12-03 01:12:32 +00:00
|
|
|
type: "markdown",
|
|
|
|
text: location.value?.description ?? "",
|
|
|
|
} as AnyDetail,
|
2022-09-25 22:33:13 +00:00
|
|
|
];
|
2022-09-01 22:32:03 +00:00
|
|
|
|
|
|
|
if (preferences.value.showDetails) {
|
2022-09-25 22:33:13 +00:00
|
|
|
return [
|
|
|
|
...details,
|
|
|
|
{
|
|
|
|
name: "Created",
|
|
|
|
text: location.value?.createdAt,
|
|
|
|
type: "date",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Updated",
|
|
|
|
text: location.value?.updatedAt,
|
|
|
|
type: "date",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Database ID",
|
|
|
|
text: location.value?.id,
|
|
|
|
},
|
|
|
|
];
|
2022-09-01 22:32:03 +00:00
|
|
|
}
|
|
|
|
|
2022-09-25 22:33:13 +00:00
|
|
|
return details;
|
2022-09-01 22:32:03 +00:00
|
|
|
});
|
|
|
|
|
2022-09-25 22:33:13 +00:00
|
|
|
const confirm = useConfirm();
|
2022-09-01 22:32:03 +00:00
|
|
|
|
|
|
|
async function confirmDelete() {
|
2022-09-25 22:33:13 +00:00
|
|
|
const { isCanceled } = await confirm.open(
|
2022-10-24 04:54:39 +00:00
|
|
|
"Are you sure you want to delete this location and all of its items? This action cannot be undone."
|
2022-09-25 22:33:13 +00:00
|
|
|
);
|
2022-09-01 22:32:03 +00:00
|
|
|
if (isCanceled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const { error } = await api.locations.delete(locationId.value);
|
|
|
|
if (error) {
|
2022-09-09 22:46:53 +00:00
|
|
|
toast.error("Failed to delete location");
|
2022-09-01 22:32:03 +00:00
|
|
|
return;
|
|
|
|
}
|
2022-09-25 22:33:13 +00:00
|
|
|
|
2022-09-09 22:46:53 +00:00
|
|
|
toast.success("Location deleted");
|
|
|
|
navigateTo("/home");
|
2022-09-01 22:32:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const updateModal = ref(false);
|
|
|
|
const updating = ref(false);
|
2022-10-24 04:54:39 +00:00
|
|
|
const updateData = reactive<LocationUpdate>({
|
|
|
|
id: locationId.value,
|
2022-09-09 22:46:53 +00:00
|
|
|
name: "",
|
|
|
|
description: "",
|
2022-10-24 04:54:39 +00:00
|
|
|
parentId: null,
|
2022-09-01 22:32:03 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
function openUpdate() {
|
2022-09-09 22:46:53 +00:00
|
|
|
updateData.name = location.value?.name || "";
|
|
|
|
updateData.description = location.value?.description || "";
|
2022-09-01 22:32:03 +00:00
|
|
|
updateModal.value = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
async function update() {
|
|
|
|
updating.value = true;
|
2022-10-24 04:54:39 +00:00
|
|
|
updateData.parentId = parent.value?.id || null;
|
2022-09-01 22:32:03 +00:00
|
|
|
const { error, data } = await api.locations.update(locationId.value, updateData);
|
|
|
|
|
|
|
|
if (error) {
|
2022-09-09 22:46:53 +00:00
|
|
|
toast.error("Failed to update location");
|
2022-09-01 22:32:03 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2022-09-09 22:46:53 +00:00
|
|
|
toast.success("Location updated");
|
2022-09-01 22:32:03 +00:00
|
|
|
location.value = data;
|
|
|
|
updateModal.value = false;
|
|
|
|
updating.value = false;
|
|
|
|
}
|
2022-10-24 04:54:39 +00:00
|
|
|
|
|
|
|
const locationStore = useLocationStore();
|
2022-11-02 19:54:43 +00:00
|
|
|
const locations = computed(() => locationStore.allLocations);
|
2022-10-24 04:54:39 +00:00
|
|
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
|
|
const parent = ref<LocationSummary | any>({});
|
2022-09-01 22:32:03 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2022-10-25 02:24:18 +00:00
|
|
|
<div>
|
2022-09-01 22:32:03 +00:00
|
|
|
<BaseModal v-model="updateModal">
|
|
|
|
<template #title> Update Location </template>
|
|
|
|
<form v-if="location" @submit.prevent="update">
|
2022-09-09 22:46:53 +00:00
|
|
|
<FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" />
|
2022-09-25 22:33:13 +00:00
|
|
|
<FormTextArea v-model="updateData.description" label="Location Description" />
|
2022-10-24 04:54:39 +00:00
|
|
|
<FormAutocomplete v-model="parent" :items="locations" item-text="name" item-value="id" label="Parent" />
|
2022-09-01 22:32:03 +00:00
|
|
|
<div class="modal-action">
|
|
|
|
<BaseButton type="submit" :loading="updating"> Update </BaseButton>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</BaseModal>
|
2022-10-25 02:24:18 +00:00
|
|
|
<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 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>
|
2023-01-19 05:44:06 +00:00
|
|
|
<PageQRCode />
|
2022-09-25 22:33:13 +00:00
|
|
|
</div>
|
2022-10-25 02:24:18 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<DetailsSection :details="details" />
|
|
|
|
</BaseCard>
|
|
|
|
|
|
|
|
<section v-if="location && location.items.length > 0">
|
|
|
|
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
|
2023-01-01 21:50:48 +00:00
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
2022-10-25 02:24:18 +00:00
|
|
|
<ItemCard v-for="item in location.items" :key="item.id" :item="item" />
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
<section v-if="location && location.children.length > 0">
|
|
|
|
<BaseSectionHeader class="mb-5"> Child Locations </BaseSectionHeader>
|
|
|
|
<div class="grid gap-2 grid-cols-1 sm:grid-cols-3">
|
|
|
|
<LocationCard v-for="item in location.children" :key="item.id" :location="item" />
|
2022-09-25 22:33:13 +00:00
|
|
|
</div>
|
2022-10-25 02:24:18 +00:00
|
|
|
</section>
|
|
|
|
</BaseContainer>
|
|
|
|
</div>
|
2022-09-01 22:32:03 +00:00
|
|
|
</template>
|