1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-23 07:16:30 +00:00
homebox/frontend/pages/label/[id].vue
Hayden 891d41b75f
feat: new-card-design ()
* card option 1

* UI updates for item card

* fix test error

* fix pagination issues on backend

* add integer support

* remove date from cards

* implement pagination for search page

* resolve search state problems

* other fixes

* fix broken datetime

* attempt to fix scroll behavior
2023-01-01 12:50:48 -09:00

165 lines
4.3 KiB
Vue

<script setup lang="ts">
import type { AnyDetail, Details } from "~~/components/global/DetailsSection/types";
definePageMeta({
middleware: ["auth"],
});
const route = useRoute();
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 () => {
const { data, error } = await api.labels.get(labelId.value);
if (error) {
toast.error("Failed to load label");
navigateTo("/home");
return;
}
return data;
});
const details = computed<Details>(() => {
const details = [
{
name: "Name",
text: label.value?.name,
},
{
name: "Description",
type: "markdown",
text: label.value?.description,
} as AnyDetail,
];
if (preferences.value.showDetails) {
return [
...details,
{
name: "Created",
text: label.value?.createdAt,
type: "date",
},
{
name: "Updated",
text: label.value?.updatedAt,
type: "date",
},
{
name: "Database ID",
text: label.value?.id,
},
];
}
return details;
});
const confirm = useConfirm();
async function confirmDelete() {
const { isCanceled } = await confirm.open(
"Are you sure you want to delete this label? This action cannot be undone."
);
if (isCanceled) {
return;
}
const { error } = await api.labels.delete(labelId.value);
if (error) {
toast.error("Failed to delete label");
return;
}
toast.success("Label deleted");
navigateTo("/home");
}
const updateModal = ref(false);
const updating = ref(false);
const updateData = reactive({
name: "",
description: "",
color: "",
});
function openUpdate() {
updateData.name = label.value?.name || "";
updateData.description = label.value?.description || "";
updateModal.value = true;
}
async function update() {
updating.value = true;
const { error, data } = await api.labels.update(labelId.value, updateData);
if (error) {
toast.error("Failed to update label");
return;
}
toast.success("Label updated");
label.value = data;
updateModal.value = false;
updating.value = false;
}
</script>
<template>
<BaseContainer>
<BaseModal v-model="updateModal">
<template #title> Update Label </template>
<form v-if="label" @submit.prevent="update">
<FormTextField v-model="updateData.name" :autofocus="true" label="Label Name" />
<FormTextArea v-model="updateData.description" label="Label Description" />
<div class="modal-action">
<BaseButton type="submit" :loading="updating"> Update </BaseButton>
</div>
</form>
</BaseModal>
<BaseCard class="mb-16">
<template #title>
<BaseSectionHeader>
<Icon name="mdi-tag" 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 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>
</div>
</template>
<DetailsSection :details="details" />
</BaseCard>
<section v-if="label">
<BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<ItemCard v-for="item in label.items" :key="item.id" :item="item" />
</div>
</section>
</BaseContainer>
</template>