feat: Equipment details page

Fixes #149
Perdolique · Nov 11, 2024 · 096a16e · 096a16e
1 parent fc44a51
commit 096a16e
Show file tree

Hide file tree

Showing 21 changed files with 367 additions and 28 deletions.
diff --git a/app/app.vue b/app/app.vue
@@ -64,5 +64,22 @@
         cursor: not-allowed;
       }
     }
+
+    // Reset default p styles
+    p {
+      margin: 0;
+    }
+
+    // Reset default ul styles
+    ul {
+      margin: 0;
+      padding: 0;
+      margin-left: 2rem;
+    }
+
+    // Reset default li styles
+    li {
+      line-height: 1.5em;
+    }
   }
 </style>
diff --git a/app/assets/styles/_base.scss b/app/assets/styles/_base.scss
@@ -193,6 +193,9 @@
 }
 
 :root {
+  // Text
+  --text-color-secondary: color-mix(in oklch, var(--text), transparent 30%);
+
   // Overlay
   --overlay-color-background: oklch(0 0 0 / 50%);
   --overlay-backdrop-filter: blur(4px);

diff --git a/app/components/PerdLink.vue b/app/components/PerdLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink :class="$style.root">
+  <NuxtLink :class="$style.component">
     <slot />
   </NuxtLink>
 </template>
@@ -13,25 +13,22 @@
 </script>
 
 <style module>
-  .root {
+  .component {
     outline: none;
     color: var(--primary-700);
-    border-bottom: 1px solid transparent;
+    position: relative;
     text-decoration: none;
-
-    transition:
-      border-color var(--transition-time-quick),
-      color var(--transition-time-quick);
+    transition: color var(--transition-time-quick);
+    cursor: pointer;
 
     &:hover,
     &:focus-visible {
+      text-decoration: underline;
       color: var(--primary-600);
-      border-color: var(--primary-600);
     }
 
     &:active {
       color: var(--primary-500);
-      border-color: var(--primary-500);
     }
   }
 </style>
diff --git a/app/components/PerdTable/PerdTable.vue b/app/components/PerdTable/PerdTable.vue
@@ -42,7 +42,7 @@
   defineProps<Props>();
 </script>
 
-<style module>
+<style lang="scss" module>
   .component {
     width: 100%;
     table-layout: fixed;
@@ -70,6 +70,8 @@
   }
 
   .cell {
+    @include overflow-ellipsis();
+
     padding: var(--table-cell-padding);
   }
 </style>
diff --git a/app/components/PerdTag.vue b/app/components/PerdTag.vue
@@ -0,0 +1,51 @@
+<template>
+  <div :class="$style.component">
+    <Icon
+      :name="icon"
+      size="14px"
+    />
+
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  interface Props {
+    readonly icon: string;
+    readonly color?: 'green' | 'gray' | 'blue';
+  }
+
+  const { color } = defineProps<Props>()
+
+  const tagColor = computed(() => {
+    switch (color) {
+      case 'green': {
+        return 'oklch(95% 0.12 140)'
+      }
+
+      case 'blue': {
+        return 'oklch(95% 0.1 250)'
+      }
+
+      case 'gray':
+      default: {
+        return 'oklch(90% 0 0)'
+      }
+    }
+  });
+</script>
+
+<style module>
+  .component {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-secondary);
+    column-gap: var(--spacing-2);
+    font-size: var(--font-size-14);
+    background-color: v-bind(tagColor);
+    padding: var(--spacing-4) var(--spacing-8);
+    border-radius: var(--border-radius-8);
+    font-weight: var(--font-weight-medium);
+    border: 1px solid color-mix(in oklch, v-bind(tagColor), black 5%);
+  }
+</style>
diff --git a/app/components/checklists/ChecklistItem.vue b/app/components/checklists/ChecklistItem.vue
@@ -10,7 +10,16 @@
     />
 
     <div :class="$style.name">
-      {{ item.equipment.name}}
+      <temlplate v-if="checkMode">
+        {{ item.equipment.name }}
+      </temlplate>
+
+      <PerdLink
+        v-else
+        :to="`/equipment/item/${item.equipment.id}`"
+      >
+        {{ item.equipment.name}}
+      </PerdLink>
     </div>
 
     <div
@@ -37,6 +46,7 @@
   import type { ChecklistItemModel } from '~/models/checklist'
   import IconButton from '@/components/IconButton.vue'
   import PerdToggle from '@/components/PerdToggle.vue'
+  import PerdLink from '@/components/PerdLink.vue';
 
   interface Props {
     readonly item: ChecklistItemModel;

diff --git a/app/components/equipment/AddEquipmentForm.vue b/app/components/equipment/AddEquipmentForm.vue
@@ -125,7 +125,7 @@
 
       const descriptionValue = description.value === '' ? undefined : description.value
 
-      await $fetch('/api/equipment', {
+      await $fetch('/api/equipment/items', {
         method: 'POST',
 
         body: {

diff --git a/app/components/equipment/EquipmentCard.vue b/app/components/equipment/EquipmentCard.vue
@@ -1,13 +1,16 @@
 <template>
-  <div :class="$style.component">
+  <NuxtLink
+    :to="`/equipment/item/${id}`"
+    :class="$style.component"
+  >
     <div :class="$style.name">
       {{ name }}
     </div>
 
     <div :class="$style.weight">
       {{ formattedWeight }}
     </div>
-  </div>
+  </NuxtLink>
 </template>
 
 <script lang="ts" setup>
@@ -23,6 +26,8 @@
 
 <style module>
   .component {
+    text-decoration: none;
+    color: inherit;
     display: grid;
     justify-content: space-between;
     row-gap: var(--spacing-8);

diff --git a/app/components/equipment/EquipmentTable.vue b/app/components/equipment/EquipmentTable.vue
@@ -5,9 +5,12 @@
     :class="$style.table"
   >
     <template #name="{ rowData }">
-      <span :class="$style.nameCell">
+      <PerdLink
+        :class="$style.nameLink"
+        :to="`/equipment/item/${rowData.id}`"
+      >
         {{ rowData.name }}
-      </span>
+      </PerdLink>
     </template>
 
     <template #weight="{ rowData }">
@@ -18,6 +21,7 @@
 
 <script lang="ts" setup>
   import PerdTable from '@/components/PerdTable/PerdTable.vue';
+  import PerdLink from '@/components/PerdLink.vue';
 
   interface Item {
     readonly id: string;
@@ -47,7 +51,7 @@
     }
   }
 
-  .nameCell {
+  .nameLink {
     font-weight: var(--font-weight-medium);
   }
 </style>
diff --git a/app/components/layout/PageContent.vue b/app/components/layout/PageContent.vue
@@ -22,7 +22,7 @@
   import PerdHeading from '~/components/PerdHeading.vue'
 
   interface Props {
-    readonly pageTitle: string;
+    readonly pageTitle?: string;
   }
 
   defineProps<Props>()

diff --git a/app/components/manager/equipment/EquipmentCard.vue b/app/components/manager/equipment/EquipmentCard.vue
@@ -1,7 +1,10 @@
 <template>
-  <div :class="$style.component">
+  <NuxtLink
+    :to="`/equipment/item/${id}`"
+    :class="$style.component"
+  >
     {{ name }}
-  </div>
+  </NuxtLink>
 </template>
 
 <script lang="ts" setup>
@@ -15,6 +18,8 @@
 
 <style module>
   .component {
+    text-decoration: none;
+    color: inherit;
     background-color: var(--accent-50);
     border: 1px solid var(--accent-200);
     border-radius: var(--border-radius-8);

diff --git a/app/components/manager/equipment/EquipmentTable.vue b/app/components/manager/equipment/EquipmentTable.vue
@@ -5,15 +5,19 @@
     :class="$style.table"
   >
     <template #name="{ rowData }">
-      <span :class="$style.nameCell">
+      <PerdLink
+        :class="$style.nameLink"
+        :to="`/equipment/item/${rowData.id}`"
+      >
         {{ rowData.name }}
-      </span>
+      </PerdLink>
     </template>
   </PerdTable>
 </template>
 
 <script lang="ts" setup>
   import PerdTable from '@/components/PerdTable/PerdTable.vue';
+  import PerdLink from '@/components/PerdLink.vue';
 
   interface Item {
     readonly id: string;
@@ -41,7 +45,7 @@
     }
   }
 
-  .nameCell {
+  .nameLink {
     font-weight: var(--font-weight-medium);
   }
 </style>
diff --git a/app/pages/equipment/index.vue b/app/pages/equipment/index.vue
@@ -71,7 +71,7 @@
   const searchValue = ref('')
   const searchQuery = computed(() => searchValue.value === '' ? undefined : searchValue.value)
 
-  const { data, error, status, refresh } = await useFetch('/api/equipment', {
+  const { data, error, status, refresh } = await useFetch('/api/equipment/items', {
     watch: false,
 
     query: {