mirrors/homebox
1
0
Fork 0
mirror of https://github.com/sysadminsmedia/homebox.git synced 2025-12-25 23:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

rework frontend for maintenances (factorize)

Browse Source
This commit is contained in:
Maximilien Carbonne
2024-09-22 19:54:10 +02:00
parent ca85d4b483
commit dc88406bcc
4 changed files with 214 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
frontend/pages/maintenance.vue
View File

@@ -1,154 +1,10 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import type { StatsFormat } from "~~/components/global/StatCard/types";
import { MaintenanceFilterStatus } from "~~/lib/api/types/data-contracts";
import MdiCheck from "~icons/mdi/check";
import MdiDelete from "~icons/mdi/delete";
import MdiEdit from "~icons/mdi/edit";
import MdiCalendar from "~icons/mdi/calendar";
import MdiContentDuplicate from "~icons/mdi/content-duplicate";
import MaintenanceEditModal from "~~/components/Maintenance/EditModal.vue";
const { t } = useI18n();
const api = useUserApi();
const maintenanceFilter = ref(MaintenanceFilterStatus.MaintenanceFilterStatusScheduled);
const maintenanceEditModal = ref<InstanceType<typeof MaintenanceEditModal>>();
const { data: maintenanceData, refresh: refreshList } = useAsyncData(
async () => {
const { data } = await api.maintenance.getAll({ status: maintenanceFilter.value });
console.log(data);
return data;
},
{
watch: [maintenanceFilter],
}
);
const stats = computed(() => {
if (!maintenanceData.value) return [];
return [
{
id: "count",
title: t("maintenance.total_entries"),
value: maintenanceData.value ? maintenanceData.value.length || 0 : 0,
type: "number" as StatsFormat,
},
];
});
</script>
<script setup lang="ts"></script>
<template>
<div>
<BaseContainer class="mb-6 flex flex-col gap-8">
<BaseSectionHeader> {{ $t("menu.maintenance") }} </BaseSectionHeader>
<section class="space-y-6">
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<StatCard
v-for="stat in stats"
:key="stat.id"
class="stats border-l-primary block shadow-xl"
:title="stat.title"
:value="stat.value"
:type="stat.type"
/>
</div>
<div class="flex">
<div class="btn-group">
<button
class="btn btn-sm"
:class="`${maintenanceFilter == MaintenanceFilterStatus.MaintenanceFilterStatusScheduled ? 'btn-active' : ''}`"
@click="maintenanceFilter = MaintenanceFilterStatus.MaintenanceFilterStatusScheduled"
>
{{ $t("maintenance.filter.scheduled") }}
</button>
<button
class="btn btn-sm"
:class="`${maintenanceFilter == MaintenanceFilterStatus.MaintenanceFilterStatusCompleted ? 'btn-active' : ''}`"
@click="maintenanceFilter = MaintenanceFilterStatus.MaintenanceFilterStatusCompleted"
>
{{ $t("maintenance.filter.completed") }}
</button>
<button
class="btn btn-sm"
:class="`${maintenanceFilter == MaintenanceFilterStatus.MaintenanceFilterStatusBoth ? 'btn-active' : ''}`"
@click="maintenanceFilter = MaintenanceFilterStatus.MaintenanceFilterStatusBoth"
>
{{ $t("maintenance.filter.both") }}
</button>
</div>
</div>
</section>
<section>
<!-- begin -->
<MaintenanceEditModal ref="maintenanceEditModal" @changed="refreshList"></MaintenanceEditModal>
<div class="container space-y-6">
<BaseCard v-for="e in maintenanceData" :key="e.id">
<BaseSectionHeader class="border-b border-b-gray-300 p-6">
<span class="text-base-content">
<NuxtLink class="hover:underline" :to="`/item/${e.itemID}`">
{{ e.itemName }}
</NuxtLink>
-
{{ e.name }}
</span>
<template #description>
<div class="flex flex-wrap gap-2">
<div v-if="validDate(e.completedDate)" class="badge p-3">
<MdiCheck class="mr-2" />
<DateTime :date="e.completedDate" format="human" datetime-type="date" />
</div>
<div v-else-if="validDate(e.scheduledDate)" class="badge p-3">
<MdiCalendar class="mr-2" />
<DateTime :date="e.scheduledDate" format="human" datetime-type="date" />
</div>
<div class="tooltip tooltip-primary" data-tip="Cost">
<div class="badge badge-primary p-3">
<Currency :amount="e.cost" />
</div>
</div>
</div>
</template>
</BaseSectionHeader>
<div class="p-6">
<Markdown :source="e.description" />
</div>
<div class="flex justify-end gap-1 p-4">
<BaseButton size="sm" @click="maintenanceEditModal?.openUpdateModal(e)">
<template #icon>
<MdiEdit />
</template>
{{ $t("maintenance.list.edit") }}
</BaseButton>
<BaseButton v-if="!validDate(e.completedDate)" size="sm" @click="maintenanceEditModal?.complete(e)">
<template #icon>
<MdiCheck />
</template>
{{ $t("maintenance.list.complete") }}
</BaseButton>
<BaseButton
v-if="!validDate(e.completedDate)"
size="sm"
@click="maintenanceEditModal?.completeAndDuplicate(e, e.itemID)"
>
<template #icon>
<MdiContentDuplicate />
</template>
{{ $t("maintenance.list.complete_and_duplicate") }}
</BaseButton>
<BaseButton size="sm" @click="maintenanceEditModal?.deleteEntry(e.id)">
<template #icon>
<MdiDelete />
</template>
{{ $t("maintenance.list.delete") }}
</BaseButton>
</div>
</BaseCard>
</div>
</section>
<MaintenanceListView></MaintenanceListView>
</BaseContainer>
</div>
</template>