Get front end tests passing

.github/workflows/partial-frontend.yaml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: pnpm/[email protected]
         with:
-          version: 6.0.2
+          version: 9.12.2
 
       - name: Install dependencies
         run: pnpm install --shamefully-hoist
@@ -54,7 +54,7 @@ jobs:
 
       - uses: pnpm/[email protected]
         with:
-          version: 6.0.2
+          version: 9.12.2
 
       - name: Install dependencies
         run: pnpm install

frontend/assets/css/main.css

@@ -28,3 +28,61 @@
 ::-webkit-scrollbar-thumb:hover {
   background-color: #9B9B9B;
 }
+
+.scroll-bg::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+.scroll-bg::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  @apply bg-base-300;
+}
+
+.markdown > :first-child {
+  margin-top: 0px !important;
+}
+
+.markdown :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--y-gap);
+  margin-bottom: var(--y-gap);
+}
+
+.markdown :where(ul) {
+  list-style: disc;
+  margin-left: 2rem;
+}
+
+.markdown :where(ol) {
+  list-style: decimal;
+  margin-left: 2rem;
+}
+/* Heading Styles */
+.markdown :where(h1) {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.markdown :where(h2) {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.markdown :where(h3) {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.markdown :where(h4) {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.markdown :where(h5) {
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.markdown :where(h6) {
+  font-size: 0.75rem;
+  font-weight: 700;
+}

frontend/components/Base/SectionHeader.vue

@@ -4,7 +4,6 @@
       class="flex items-center text-3xl font-bold tracking-tight"
       :class="{
         'text-neutral-content': dark,
-        'text-content': !dark,
       }"
     >
       <slot />

frontend/components/Form/Autocomplete2.vue

@@ -85,7 +85,10 @@
   type Props = {
     label: string;
     modelValue: SupportValues | null | undefined;
-    items: string[] | object[];
+    items: {
+      id: string;
+      treeString: string;
+    }[];
     display?: string;
     multiple?: boolean;
   };
@@ -156,7 +159,7 @@
 
     const matches = index.value.search("*" + search.value + "*");
 
-    let resultIDs = []
+    const resultIDs = [];
     for (let i = 0; i < matches.length; i++) {
       const match = matches[i];
       const item = props.items[parseInt(match.ref)];
@@ -170,9 +173,11 @@
      * Resolve the issue of language not being supported
      */
     for (let i = 0; i < props.items.length; i++) {
-      const item = props.items[i]
-      if(resultIDs.find(item_ => item_ === item.id) != undefined){continue}
-      if(item.treeString.indexOf(search.value) > -1){
+      const item = props.items[i];
+      if (resultIDs.find(item_ => item_ === item.id) !== undefined) {
+        continue;
+      }
+      if (item.treeString.includes(search.value)) {
         const display = extractDisplay(item);
         list.push({ id: i, display, value: item });
       }

frontend/components/Form/TextArea.vue

@@ -6,10 +6,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <textarea ref="el" v-model="value" class="textarea textarea-bordered h-28 w-full" :placeholder="placeholder" />
@@ -21,10 +21,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <textarea
@@ -63,10 +63,12 @@
     },
     maxLength: {
       type: Number,
+      default: -1,
       required: false,
     },
     minLength: {
       type: Number,
+      default: -1,
       required: false,
     },
   });
@@ -84,7 +86,4 @@
   });
 
   const value = useVModel(props, "modelValue", emit);
-  const valueLen = computed(() => {
-    return value.value ? value.value.length : 0;
-  });
 </script>

frontend/components/Form/TextField.vue

@@ -6,10 +6,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <input
@@ -28,10 +28,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <input
@@ -76,10 +76,12 @@
     },
     maxLength: {
       type: Number,
+      default: -1,
       required: false,
     },
     minLength: {
       type: Number,
+      default: -1,
       required: false,
     },
   });

frontend/components/Item/Card.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="col-span-4 flex grow flex-col gap-y-1 rounded-b bg-base-100 p-4 pt-2">
-      <h2 class="line-clamp-2 text-ellipsis text-lg font-bold text-wrap">{{ item.name }}</h2>
+      <h2 class="line-clamp-2 text-ellipsis text-wrap text-lg font-bold">{{ item.name }}</h2>
       <div class="divider my-0"></div>
       <div class="flex gap-2">
         <div v-if="item.insured" class="tooltip z-10" data-tip="Insured">

frontend/components/Item/CreateModal.vue

@@ -12,7 +12,11 @@
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" :label="$t('components.item.create_modal.item_description')" :max-length="1000" />
+      <FormTextArea
+        v-model="form.description"
+        :label="$t('components.item.create_modal.item_description')"
+        :max-length="1000"
+      />
       <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
 
       <div class="modal-action mb-6">
@@ -39,7 +43,7 @@
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <MdiChevronDown class="size-5" name="mdi-chevron-down" />
             </label>
-            <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 right-0 w-64 p-2 shadow">
+            <ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
               <li>
                 <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
               </li>

frontend/components/Item/View/Table.vue

@@ -83,7 +83,7 @@
         </label>
         <ul tabindex="0" class="dropdown-content rounded-box flex w-64 flex-col gap-2 bg-base-100 p-2 pl-3 shadow">
           <li>Headers:</li>
-          <li v-for="(h, i) in headers" class="flex flex-row items-center gap-1">
+          <li v-for="(h, i) in headers" :key="h.value" class="flex flex-row items-center gap-1">
             <button
               class="btn btn-square btn-ghost btn-xs"
               :class="{
@@ -150,7 +150,10 @@
 
   const defaultHeaders = [
     {
-      text: "items.name", value: "name", enabled: true, type: "name"
+      text: "items.name",
+      value: "name",
+      enabled: true,
+      type: "name",
     },
     { text: "items.quantity", value: "quantity", align: "center", enabled: true },
     { text: "items.insured", value: "insured", align: "center", enabled: true, type: "boolean" },
@@ -162,16 +165,13 @@
   ] satisfies TableHeader[];
 
   const headers = ref<TableHeader[]>(
-    (preferences.value.tableHeaders ?? []).concat(
-      defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value))
-    )
-    // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
-      .map(h => (
-        {
-          ...defaultHeaders.find(h2 => h2.value === h.value) as TableHeader,
-          enabled: h.enabled
-        }
-      ))
+    (preferences.value.tableHeaders ?? [])
+      .concat(defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value)))
+      // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
+      .map(h => ({
+        ...(defaultHeaders.find(h2 => h2.value === h.value) as TableHeader),
+        enabled: h.enabled,
+      }))
   );
 
   console.log(headers.value);

frontend/components/Label/CreateModal.vue

@@ -11,7 +11,11 @@
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" :label="$t('components.label.create_modal.label_description')" :max-length="255" />
+      <FormTextArea
+        v-model="form.description"
+        :label="$t('components.label.create_modal.label_description')"
+        :max-length="255"
+      />
       <div class="modal-action">
         <div class="flex justify-center">
           <BaseButton class="rounded-r-none" :loading="loading" type="submit"> {{ $t("global.create") }} </BaseButton>

frontend/components/Location/CreateModal.vue

@@ -12,7 +12,11 @@
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" :label="$t('components.location.create_modal.location_description')" :max-length="1000" />
+      <FormTextArea
+        v-model="form.description"
+        :label="$t('components.location.create_modal.location_description')"
+        :max-length="1000"
+      />
       <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">
@@ -21,7 +25,7 @@
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <MdiChevronDown class="size-5" />
             </label>
-            <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 right-0 w-64 p-2 shadow">
+            <ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
               <li>
                 <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
               </li>

frontend/components/Location/Selector.vue

@@ -1,5 +1,11 @@
 <template>
-  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" :label="$t('components.location.selector.parent_location')">
+  <FormAutocomplete2
+    v-if="locations"
+    v-model="value"
+    :items="locations"
+    display="name"
+    :label="$t('components.location.selector.parent_location')"
+  >
     <template #display="{ item, selected, active }">
       <div>
         <div class="flex w-full">

frontend/components/Location/Tree/Root.vue

@@ -10,6 +10,7 @@
 </script>
 
 <template>
+  <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
   <div class="root border-2 p-4">
     <p v-if="locs.length === 0" class="text-center text-sm">
       {{ $t("location.tree.no_locations") }}

frontend/components/Maintenance/ListView.vue

@@ -25,17 +25,17 @@
     },
   });
 
-  const { data: maintenanceDataList, refresh: refreshList } = useAsyncData<MaintenanceEntryWithDetails[]>(
+  const { data: maintenanceDataList, refresh: refreshList } = useAsyncData(
     async () => {
       const { data } =
         props.currentItemId !== undefined
           ? await api.items.maintenance.getLog(props.currentItemId, { status: maintenanceFilterStatus.value })
           : await api.maintenance.getAll({ status: maintenanceFilterStatus.value });
       console.log(data);
-      return data as MaintenanceEntryWithDetails[];
+      return data;
     },
     {
-      watch: maintenanceFilterStatus,
+      watch: [maintenanceFilterStatus],
     }
   );
 
@@ -80,7 +80,7 @@
       <StatCard
         v-for="stat in stats"
         :key="stat.id"
-        class="stats border-l-primary block shadow-xl"
+        class="stats block border-l-primary shadow-xl"
         :title="stat.title"
         :value="stat.value"
         :type="stat.type"
@@ -189,7 +189,7 @@
       <div v-if="props.currentItemId" class="hidden first:block">
         <button
           type="button"
-          class="border-base-content relative block w-full rounded-lg border-2 border-dashed p-12 text-center"
+          class="relative block w-full rounded-lg border-2 border-dashed border-base-content p-12 text-center"
           @click="maintenanceEditModal?.openCreateModal(props.currentItemId)"
         >
           <MdiWrenchClock class="inline size-16" />