feat: add scheduled maintenance tasks (#320)

* add scheduled maintenance tasks

* fix failing typecheck

frontend/components/Form/DatePicker.vue

@@ -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({

frontend/composables/utils.ts

@@ -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;

frontend/lib/api/__test__/user/items.test.ts

@@ -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(),
       });
 

frontend/lib/api/classes/items.ts

@@ -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) {

frontend/lib/api/types/data-contracts.ts

@@ -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 {

frontend/pages/item/[id]/index.vue

@@ -360,8 +360,8 @@
       },
       {
         id: "log",
-        name: "Log",
-        to: `/item/${itemId.value}/log`,
+        name: "Maintenance",
+        to: `/item/${itemId.value}/maintenance`,
       },
       {
         id: "edit",

frontend/pages/item/[id]/index/maintenance.vue

@@ -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">