feat: maintenance log (#170)

* remove repo for document tokens

* remove schema for doc tokens

* fix id template and generate cmd

* schema updates

* code gen

* bump dependencies

* fix broken migrations + add maintenance entry type

* spelling

* remove debug logger

* implement repository layer

* routes

* API client

* wip: maintenance log

* remove depreciated call

frontend/components/Base/Button.vue

@@ -9,6 +9,7 @@
       'btn-sm': size === 'sm',
       'btn-lg': size === 'lg',
     }"
+    :style="upper ? '' : 'text-transform: none'"
   >
     <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
       <slot name="icon" />

frontend/components/Base/Card.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="card bg-base-100 shadow-xl sm:rounded-lg">
-    <div class="px-4 py-5 sm:px-6">
+    <div v-if="$slots.title" class="px-4 py-5 sm:px-6">
       <h3 class="text-lg font-medium leading-6">
         <slot name="title"></slot>
       </h3>

frontend/components/Form/DatePicker.vue

@@ -13,6 +13,7 @@
             <button
               v-if="day.number != ''"
               :key="day.number"
+              type="button"
               class="text-center btn-xs btn btn-outline"
               @click="select($event, day.date)"
             >
@@ -22,11 +23,11 @@
           </template>
         </div>
         <div class="flex justify-between mt-1 items-center">
-          <button class="btn btn-xs" @click="prevMonth">
+          <button type="button" class="btn btn-xs" @click="prevMonth">
             <Icon class="h-5 w-5" name="mdi-arrow-left"></Icon>
           </button>
           <p class="text-center">{{ month }} {{ year }}</p>
-          <button class="btn btn-xs" @click="nextMonth">
+          <button type="button" class="btn btn-xs" @click="nextMonth">
             <Icon class="h-5 w-5" name="mdi-arrow-right"></Icon>
           </button>
         </div>

frontend/components/global/DateTime.vue

@@ -3,12 +3,37 @@
 </template>
 
 <script setup lang="ts">
-  enum DateTimeFormat {
-    RELATIVE = "relative",
-    LONG = "long",
-    SHORT = "short",
+  type DateTimeFormat = "relative" | "long" | "short" | "human";
+
+  function ordinalIndicator(num: number) {
+    if (num > 3 && num < 21) return "th";
+    switch (num % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
   }
 
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
   const value = computed(() => {
     if (!props.date) {
       return "";
@@ -24,12 +49,15 @@
     }
 
     switch (props.format) {
-      case DateTimeFormat.RELATIVE:
+      case "relative":
         return useTimeAgo(dt).value + useDateFormat(dt, " (MM-DD-YYYY)").value;
-      case DateTimeFormat.LONG:
+      case "long":
         return useDateFormat(dt, "MM-DD-YYYY (dddd)").value;
-      case DateTimeFormat.SHORT:
+      case "short":
         return useDateFormat(dt, "MM-DD-YYYY").value;
+      case "human":
+        // January 1st, 2021
+        return `${months[dt.getMonth()]} ${dt.getDate()}${ordinalIndicator(dt.getDate())}, ${dt.getFullYear()}`;
       default:
         return "";
     }

frontend/components/global/Markdown.vue

@@ -3,10 +3,12 @@
   import DOMPurify from "dompurify";
 
   type Props = {
-    source: string;
+    source: string | null | undefined;
   };
 
-  const props = withDefaults(defineProps<Props>(), {});
+  const props = withDefaults(defineProps<Props>(), {
+    source: null,
+  });
 
   const md = new MarkdownIt({
     html: true,
@@ -15,7 +17,7 @@
   });
 
   const raw = computed(() => {
-    const html = md.render(props.source);
+    const html = md.render(props.source || "");
     return DOMPurify.sanitize(html);
   });
 </script>