1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-22 14:56:31 +00:00
homebox/frontend/pages/location/[id].vue

179 lines
5.4 KiB
Vue
Raw Normal View History

2022-09-01 22:32:03 +00:00
<script setup lang="ts">
import { LocationSummary, LocationUpdate } from "~~/lib/api/types/data-contracts";
import { useLocationStore } from "~~/stores/locations";
2022-09-01 22:32:03 +00:00
definePageMeta({
middleware: ["auth"],
2022-09-01 22:32:03 +00:00
});
const route = useRoute();
const api = useUserApi();
const toast = useNotifier();
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) {
toast.error("Failed to load location");
navigateTo("/home");
2022-09-02 01:52:40 +00:00
return;
}
if (data.parent) {
parent.value = locations.value.find(l => l.id === data.parent.id);
}
2022-09-02 01:52:40 +00:00
return data;
});
const confirm = useConfirm();
2022-09-01 22:32:03 +00:00
async function confirmDelete() {
const { isCanceled } = await confirm.open(
"Are you sure you want to delete this location and all of its items? This action cannot be undone."
);
2022-09-01 22:32:03 +00:00
if (isCanceled) {
return;
}
const { error } = await api.locations.delete(locationId.value);
if (error) {
toast.error("Failed to delete location");
2022-09-01 22:32:03 +00:00
return;
}
toast.success("Location deleted");
navigateTo("/home");
2022-09-01 22:32:03 +00:00
}
const updateModal = ref(false);
const updating = ref(false);
const updateData = reactive<LocationUpdate>({
id: locationId.value,
name: "",
description: "",
parentId: null,
2022-09-01 22:32:03 +00:00
});
function openUpdate() {
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;
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) {
updating.value = false;
toast.error("Failed to update location");
2022-09-01 22:32:03 +00:00
return;
}
toast.success("Location updated");
2022-09-01 22:32:03 +00:00
location.value = data;
updateModal.value = false;
updating.value = false;
}
const locationStore = useLocationStore();
const locations = computed(() => locationStore.allLocations);
const parent = ref<LocationSummary | any>({});
const items = computedAsync(async () => {
if (!location.value) {
return [];
}
const resp = await api.items.getAll({
locations: [location.value.id],
});
if (resp.error) {
toast.error("Failed to load items");
return [];
}
return resp.data.items;
});
2022-09-01 22:32:03 +00:00
</script>
<template>
<div>
<!-- Update Dialog -->
2022-09-01 22:32:03 +00:00
<BaseModal v-model="updateModal">
<template #title> Update Location </template>
<form v-if="location" @submit.prevent="update">
<FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" />
<FormTextArea v-model="updateData.description" label="Location Description" />
<LocationSelector v-model="parent" />
2022-09-01 22:32:03 +00:00
<div class="modal-action">
<BaseButton type="submit" :loading="updating"> Update </BaseButton>
</div>
</form>
</BaseModal>
<BaseContainer v-if="location">
<div class="bg-base-100 rounded p-3">
<header class="mb-2">
<div class="flex flex-wrap items-end gap-2">
<div class="avatar placeholder mb-auto">
<div class="bg-neutral-focus text-neutral-content rounded-full w-12">
<Icon name="mdi-package-variant" class="h-7 w-7" />
</div>
</div>
<div>
<div v-if="location?.parent" class="text-sm breadcrumbs pt-0 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>
<h1 class="text-2xl pb-1">
{{ location ? location.name : "" }}
</h1>
<div class="flex gap-1 flex-wrap text-xs">
<div>
Created
<DateTime :date="location?.createdAt" />
</div>
</div>
</div>
<div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
<div class="btn-group">
<PageQRCode class="dropdown-left" />
<BaseButton 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>
</div>
</div>
</header>
<div class="divider my-0 mb-1"></div>
<Markdown v-if="location && location.description" class="text-base" :source="location.description"> </Markdown>
</div>
<section v-if="location && items">
<ItemViewSelectable :items="items" />
</section>
<section v-if="location && location.children.length > 0" class="mt-6">
<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" />
</div>
</section>
</BaseContainer>
</div>
2022-09-01 22:32:03 +00:00
</template>