feat: Show checklist items

Fixes #61

app/components/checklists/ChecklistItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="$style.component">
+    <div>
+      {{ item.equipment.name}}
+    </div>
+
+    <div :class="$style.weight">
+      {{ item.equipment.weight }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { ChecklistItemModel } from '~/models/checklist';
+
+  interface Props {
+    readonly item: ChecklistItemModel;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style module>
+  .component {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    padding: var(--border-radius-8) var(--spacing-12);
+    background-color: var(--color-blue-100);
+    border: 1px solid var(--color-blue-300);
+    border-radius: var(--border-radius-12);
+    font-size: var(--font-size-16);
+    color: var(--color-blue-800);
+  }
+
+  .weight {
+    color: var(--color-blue-700);
+    font-size: var(--font-size-14);
+  }
+</style>

app/components/checklists/ChecklistItemsList.vue

@@ -0,0 +1,28 @@
+<template>
+  <div :class="$style.component">
+    <ChecklistItem
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { ChecklistItemModel } from '~/models/checklist';
+  import ChecklistItem from './ChecklistItem.vue';
+
+  interface Props {
+    readonly items: ChecklistItemModel[];
+  }
+
+  defineProps<Props>();
+</script>
+
+<style module>
+  .component {
+    width: 100%;
+    display: grid;
+    row-gap: var(--spacing-4);
+  }
+</style>

app/composables/use-checklist-items-data.ts

@@ -1,34 +1,12 @@
-interface EquipmentItem {
-  readonly id: string;
-  readonly name: string;
-  readonly weight: number;
-}
-
-interface ChecklistItem {
-  readonly id: string;
-  readonly equipment: EquipmentItem;
-}
+import type { ChecklistItemModel } from "~/models/checklist"
 
 export async function useChecklistItemsData(checklistId: string) {
-  const items = ref<ChecklistItem[]>([])
+  const items = ref<ChecklistItemModel[]>([])
   const { data } = await useFetch(`/api/checklists/${checklistId}/items`)
 
   if (data.value !== undefined) {
     items.value = data.value
   }
 
-  async function updateItems() {
-    try {
-      const response = await $fetch(`/api/checklists/${checklistId}/items`)
-
-      items.value = response
-    } catch {
-      console.error('Failed to update equipment')
-    }
-  }
-
-  return {
-    items,
-    updateItems
-  }
+  return items
 }

app/models/checklist.ts

@@ -0,0 +1,10 @@
+interface ChecklistEquipment {
+  readonly id: string;
+  readonly name: string;
+  readonly weight: number;
+}
+
+export interface ChecklistItemModel {
+  readonly id: string;
+  readonly equipment: ChecklistEquipment;
+}

app/pages/checklists/[id].vue

@@ -23,6 +23,8 @@
           </SearchOptionAdd>
         </template>
       </PerdSearch>
+
+      <ChecklistItemsList :items="items" />
     </div>
   </PageContent>
 </template>
@@ -32,6 +34,7 @@
   import PerdButton from '~/components/PerdButton.vue';
   import SearchOptionAdd from '~/components/PerdSearch/SearchOptionAdd.vue';
   import PerdSearch from '~/components/PerdSearch/PerdSearch.vue';
+  import ChecklistItemsList from '~/components/checklists/ChecklistItemsList.vue';
 
   interface InventoryItem {
     readonly id: string;
@@ -45,7 +48,7 @@
   const options = ref<InventoryItem[]>([]);
   const isSearching = ref(false);
   const { data: checklistData } = await useFetch(`/api/checklists/${checklistId}`)
-  const { items, updateItems } = await useChecklistItemsData(checklistId)
+  const items = await useChecklistItemsData(checklistId)
 
   if (checklistData.value !== undefined) {
     name.value = checklistData.value.name
@@ -99,7 +102,7 @@
 
   async function addItem(item: InventoryItem) {
     try {
-      await $fetch(`/api/checklists/${checklistId}/items`, {
+      const insertedItem = await $fetch(`/api/checklists/${checklistId}/items`, {
         method: 'POST',
 
         body: {
@@ -109,9 +112,12 @@
 
       options.value = options.value.filter(({ id }) => id !== item.id)
 
-      await updateItems()
-
-      console.log('items', items.value);
+      if (insertedItem !== undefined) {
+        items.value.push({
+          id: insertedItem.id,
+          equipment: insertedItem.equipment
+        })
+      }
     } catch (error) {
       console.error(error)
     }

server/api/checklists/[id]/items.post.ts

@@ -1,3 +1,4 @@
+import { eq } from 'drizzle-orm'
 import * as v from 'valibot'
 
 const bodySchema = v.object({
@@ -23,14 +24,37 @@ export default defineEventHandler(async (event) => {
   const { equipmentId } = await readValidatedBody(event, validateBody)
 
   try {
-    await db
+    const [{ itemId }] = await db
       .insert(tables.checklistItems)
       .values({
         checklistId,
         equipmentId
       })
+      .returning({
+        itemId: tables.checklistItems.id
+      })
+
+    const insertedItem = await db.query.checklistItems.findFirst({
+      where: eq(tables.checklistItems.id, itemId),
+
+      columns: {
+        id: true
+      },
+
+      with: {
+        equipment: {
+          columns: {
+            id: true,
+            name: true,
+            weight: true
+          }
+        }
+      }
+    })
 
     setResponseStatus(event, 201)
+
+    return insertedItem
   } catch (error) {
     if (error instanceof Error) {
       console.error(error.message);

server/database/schema.ts

@@ -1,4 +1,4 @@
-import { sql } from 'drizzle-orm'
+import { relations, sql } from 'drizzle-orm'
 import { ulid } from 'ulid'
 
 import {
@@ -183,3 +183,50 @@ export const checklistItems = sqliteTable('checklistItems', {
 }, (table) => ({
   checklistIdEquipmentIdKey: unique().on(table.checklistId, table.equipmentId)
 }))
+
+/**
+ * Relations
+ */
+
+export const usersRelations = relations(users, ({ many }) => ({
+  userEquipment: many(userEquipment),
+  checklists: many(checklists)
+}))
+
+export const equipmentRelations = relations(equipment, ({ many }) => ({
+  userEquipment: many(userEquipment),
+  checklistItems: many(checklistItems)
+}))
+
+export const userEquipmentRelations = relations(userEquipment, ({ one }) => ({
+  user: one(users, {
+    fields: [userEquipment.userId],
+    references: [users.id]
+  }),
+
+  equipment: one(equipment, {
+    fields: [userEquipment.equipmentId],
+    references: [equipment.id]
+  })
+}))
+
+export const checklistsRelations = relations(checklists, ({ many, one }) => ({
+  checklistItems: many(checklistItems),
+
+  user: one(users, {
+    fields: [checklists.userId],
+    references: [users.id]
+  })
+}))
+
+export const checklistItemsRelations = relations(checklistItems, ({ one }) => ({
+  checklists: one(checklists, {
+    fields: [checklistItems.checklistId],
+    references: [checklists.id]
+  }),
+
+  equipment: one(equipment, {
+    fields: [checklistItems.equipmentId],
+    references: [equipment.id]
+  })
+}))