forked from mirrors/homebox
feat: add scheduled maintenance tasks (#320)
* add scheduled maintenance tasks * fix failing typecheck
This commit is contained in:
parent
70297b9d27
commit
025521431e
25 changed files with 521 additions and 121 deletions
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div v-if="!inline" class="form-control w-full">
|
||||
<label class="label">
|
||||
<span class="label-text"> Date </span>
|
||||
<span class="label-text"> {{ label }}</span>
|
||||
</label>
|
||||
<input ref="input" v-model="selected" type="date" class="input input-bordered w-full" />
|
||||
</div>
|
||||
<div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
|
||||
<label class="label">
|
||||
<span class="label-text"> Date </span>
|
||||
<span class="label-text"> {{ label }} </span>
|
||||
</label>
|
||||
<input v-model="selected" type="date" class="input input-bordered col-span-3 w-full mt-2" />
|
||||
</div>
|
||||
|
@ -18,7 +18,7 @@
|
|||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Date as () => Date | string,
|
||||
type: Date as () => Date | string | null,
|
||||
required: false,
|
||||
default: null,
|
||||
},
|
||||
|
@ -26,6 +26,10 @@
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "Date",
|
||||
},
|
||||
});
|
||||
|
||||
const selected = computed({
|
||||
|
|
|
@ -5,6 +5,10 @@ export function validDate(dt: Date | string | null | undefined): boolean {
|
|||
|
||||
// If it's a string, try to parse it
|
||||
if (typeof dt === "string") {
|
||||
if (dt.startsWith("0001")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const parsed = new Date(dt);
|
||||
if (isNaN(parsed.getTime())) {
|
||||
return false;
|
||||
|
|
|
@ -135,7 +135,8 @@ describe("user should be able to create an item and add an attachment", () => {
|
|||
const { response, data } = await api.items.maintenance.create(item.id, {
|
||||
name: faker.vehicle.model(),
|
||||
description: faker.lorem.paragraph(1),
|
||||
date: faker.date.past(1),
|
||||
completedDate: faker.date.past(1),
|
||||
scheduledDate: "null",
|
||||
cost: faker.datatype.number(100).toString(),
|
||||
});
|
||||
|
||||
|
|
|
@ -59,9 +59,14 @@ export class FieldsAPI extends BaseAPI {
|
|||
}
|
||||
}
|
||||
|
||||
type MaintenanceEntryQuery = {
|
||||
scheduled?: boolean;
|
||||
completed?: boolean;
|
||||
};
|
||||
|
||||
export class MaintenanceAPI extends BaseAPI {
|
||||
getLog(itemId: string) {
|
||||
return this.http.get<MaintenanceLog>({ url: route(`/items/${itemId}/maintenance`) });
|
||||
getLog(itemId: string, q: MaintenanceEntryQuery = {}) {
|
||||
return this.http.get<MaintenanceLog>({ url: route(`/items/${itemId}/maintenance`, q) });
|
||||
}
|
||||
|
||||
create(itemId: string, data: MaintenanceEntryCreate) {
|
||||
|
|
|
@ -227,28 +227,37 @@ export interface LocationUpdate {
|
|||
}
|
||||
|
||||
export interface MaintenanceEntry {
|
||||
/** Sold */
|
||||
completedDate: Date | string;
|
||||
/** @example "0" */
|
||||
cost: string;
|
||||
date: Date | string;
|
||||
description: string;
|
||||
id: string;
|
||||
name: string;
|
||||
/** Sold */
|
||||
scheduledDate: Date | string;
|
||||
}
|
||||
|
||||
export interface MaintenanceEntryCreate {
|
||||
/** Sold */
|
||||
completedDate: Date | string;
|
||||
/** @example "0" */
|
||||
cost: string;
|
||||
date: Date | string;
|
||||
description: string;
|
||||
name: string;
|
||||
/** Sold */
|
||||
scheduledDate: Date | string;
|
||||
}
|
||||
|
||||
export interface MaintenanceEntryUpdate {
|
||||
/** Sold */
|
||||
completedDate: Date | string;
|
||||
/** @example "0" */
|
||||
cost: string;
|
||||
date: Date | string;
|
||||
description: string;
|
||||
name: string;
|
||||
/** Sold */
|
||||
scheduledDate: Date | string;
|
||||
}
|
||||
|
||||
export interface MaintenanceLog {
|
||||
|
|
|
@ -360,8 +360,8 @@
|
|||
},
|
||||
{
|
||||
id: "log",
|
||||
name: "Log",
|
||||
to: `/item/${itemId.value}/log`,
|
||||
name: "Maintenance",
|
||||
to: `/item/${itemId.value}/maintenance`,
|
||||
},
|
||||
{
|
||||
id: "edit",
|
||||
|
|
|
@ -10,8 +10,20 @@
|
|||
const api = useUserApi();
|
||||
const toast = useNotifier();
|
||||
|
||||
const scheduled = ref(true);
|
||||
|
||||
watch(
|
||||
() => scheduled.value,
|
||||
() => {
|
||||
refreshLog();
|
||||
}
|
||||
);
|
||||
|
||||
const { data: log, refresh: refreshLog } = useAsyncData(async () => {
|
||||
const { data } = await api.items.maintenance.getLog(props.item.id);
|
||||
const { data } = await api.items.maintenance.getLog(props.item.id, {
|
||||
scheduled: scheduled.value,
|
||||
completed: !scheduled.value,
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
|
@ -48,7 +60,8 @@
|
|||
id: null as string | null,
|
||||
modal: false,
|
||||
name: "",
|
||||
date: new Date(),
|
||||
completedDate: null as Date | null,
|
||||
scheduledDate: null as Date | null,
|
||||
description: "",
|
||||
cost: "",
|
||||
});
|
||||
|
@ -60,7 +73,8 @@
|
|||
function resetEntry() {
|
||||
entry.id = null;
|
||||
entry.name = "";
|
||||
entry.date = new Date();
|
||||
entry.completedDate = null;
|
||||
entry.scheduledDate = null;
|
||||
entry.description = "";
|
||||
entry.cost = "";
|
||||
}
|
||||
|
@ -74,9 +88,10 @@
|
|||
|
||||
const { error } = await api.items.maintenance.create(props.item.id, {
|
||||
name: entry.name,
|
||||
date: entry.date,
|
||||
completedDate: entry.completedDate ?? "",
|
||||
scheduledDate: entry.scheduledDate ?? "",
|
||||
description: entry.description,
|
||||
cost: entry.cost,
|
||||
cost: parseFloat(entry.cost) ? entry.cost : "0",
|
||||
});
|
||||
|
||||
if (error) {
|
||||
|
@ -108,10 +123,12 @@
|
|||
}
|
||||
|
||||
function openEditDialog(e: MaintenanceEntry) {
|
||||
console.log(e);
|
||||
entry.modal = true;
|
||||
entry.id = e.id;
|
||||
entry.name = e.name;
|
||||
entry.date = new Date(e.date);
|
||||
entry.completedDate = new Date(e.completedDate);
|
||||
entry.scheduledDate = new Date(e.scheduledDate);
|
||||
entry.description = e.description;
|
||||
entry.cost = e.cost;
|
||||
}
|
||||
|
@ -123,7 +140,8 @@
|
|||
|
||||
const { error } = await api.items.maintenance.update(props.item.id, entry.id, {
|
||||
name: entry.name,
|
||||
date: entry.date,
|
||||
completedDate: entry.completedDate ?? "null",
|
||||
scheduledDate: entry.scheduledDate ?? "null",
|
||||
description: entry.description,
|
||||
cost: entry.cost,
|
||||
});
|
||||
|
@ -142,10 +160,13 @@
|
|||
<template>
|
||||
<div v-if="log">
|
||||
<BaseModal v-model="entry.modal">
|
||||
<template #title> Create Entry </template>
|
||||
<template #title>
|
||||
{{ entry.id ? "Edit Entry" : "New Entry" }}
|
||||
</template>
|
||||
<form @submit.prevent="createEntry">
|
||||
<FormTextField v-model="entry.name" autofocus label="Entry Name" />
|
||||
<DatePicker v-model="entry.date" label="Date" />
|
||||
<DatePicker v-model="entry.completedDate" label="Completed Date" />
|
||||
<DatePicker v-model="entry.scheduledDate" label="Scheduled Date" />
|
||||
<FormTextArea v-model="entry.description" label="Notes" />
|
||||
<FormTextField v-model="entry.cost" autofocus label="Cost" />
|
||||
<div class="py-2 flex justify-end">
|
||||
|
@ -171,11 +192,19 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm" :class="`${scheduled ? 'btn-active' : ''}`" @click="scheduled = true">
|
||||
Scheduled
|
||||
</button>
|
||||
<button class="btn btn-sm" :class="`${scheduled ? '' : 'btn-active'}`" @click="scheduled = false">
|
||||
Completed
|
||||
</button>
|
||||
</div>
|
||||
<BaseButton class="ml-auto" size="sm" @click="newEntry()">
|
||||
<template #icon>
|
||||
<Icon name="mdi-post" />
|
||||
<Icon name="mdi-plus" />
|
||||
</template>
|
||||
Log Maintenance
|
||||
New
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="container space-y-6">
|
||||
|
@ -185,10 +214,14 @@
|
|||
{{ e.name }}
|
||||
</span>
|
||||
<template #description>
|
||||
<div class="flex gap-2">
|
||||
<div class="badge p-3">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div v-if="validDate(e.completedDate)" class="badge p-3">
|
||||
<Icon name="mdi-check" class="mr-2" />
|
||||
<DateTime :date="e.completedDate" format="human" />
|
||||
</div>
|
||||
<div v-else-if="validDate(e.scheduledDate)" class="badge p-3">
|
||||
<Icon name="mdi-calendar" class="mr-2" />
|
||||
<DateTime :date="e.date" format="human" />
|
||||
<DateTime :date="e.scheduledDate" format="human" />
|
||||
</div>
|
||||
<div class="tooltip tooltip-primary" data-tip="Cost">
|
||||
<div class="badge badge-primary p-3">
|
Loading…
Add table
Add a link
Reference in a new issue