✨ progress

app/components/pen/PenCard.vue

@@ -58,8 +58,8 @@ const items = computed(() => {
 <template>
   <div class="flex">
     <u-card class="w-full">
-      <div class="flex flex-col items-center justify-center space-y-8">
-        <u-dropdown v-if="!readonly" class="self-end" :items="items">
+      <div class="flex flex-col items-center justify-center space-y-8 relative">
+        <u-dropdown v-if="!readonly" class="absolute top-0 right-0" :items="items">
           <u-button icon="i-mdi-dots-vertical" size="xs" variant="ghost" />
         </u-dropdown>
         <pen-model :color="pen.color">
@@ -76,6 +76,9 @@ const items = computed(() => {
         <div v-if="pen.cartridge && pen.cartridge.shots">
           <shot-summary :shots="pen.cartridge.shots" :cartridge="pen.cartridge" />
         </div>
+        <div v-if="pen.cartridge && pen.cartridge.shots">
+          <shot-log :shots="pen.cartridge.shots" />
+        </div>
 
         <shot-form :pen="pen" :cartridge="pen.cartridge" @created="reload" />
       </div>

app/components/pen/PenList.vue

@@ -7,7 +7,7 @@ const emit = defineEmits(['reload'])
 
 <template>
   <div>
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
       <pen-card
         v-for="pen in pens" :key="pen.id.toString()"
         :pen="pen"

app/components/shot/ShotForm.vue

@@ -4,25 +4,32 @@ import { format } from 'date-fns'
 import type { Pen } from '~/types/models'
 import type { Form } from '#ui/types/form'
 import type { MetapiResponse } from '~/types/metapi'
-
 import { shotUnits } from '~/utils/shared'
 
 const props = defineProps<{ pen: Pen }>()
-
 const emit = defineEmits(['created'])
+const route = useRoute()
+const { user } = useUserSession()
 const form = ref<Form<any>>()
 const state = reactive({
+  user: route.params.user ? route.params.user : user.id,
   cartridge: props.pen.cartridge?.id,
   units: shotUnits[1],
   date: format(new Date(), 'yyyy-MM-dd'),
 })
-const options = computed(() => {
-  return shotUnits.map(units => ({ label: `${units} units - ${((props.pen.cartridge?.mg || 0) / 200 * units)}mg`, value: units }))
-})
+const options = computed(() =>
+  shotUnits.map(units => ({
+    label: `${units} units - ${((props.pen.cartridge?.mg as any || 0) / 200 * units)}mg`,
+    value: units,
+  })),
+)
 
 const create = async () => useApi()
   .setForm(form?.value)
-  .fetch<MetapiResponse<Shot>>(`/api/cartridge/${props.pen.cartridge?.id}/shot`, { method: 'POST', body: state })
+  .fetch<MetapiResponse<Shot>>(
+    route.params.user ? `/api/user/${route.params.user}/shot` : '/api/shot',
+    { method: 'POST', body: state },
+  )
   .then(() => emit('created'))
 </script>
 

app/components/shot/ShotLog.vue

@@ -6,8 +6,8 @@ defineProps<{ shots?: Shot[] }>()
 </script>
 
 <template>
-  <div v-if="shots">
-    <div v-for="shot in shots" :key="shot.id.toString()">
+  <div v-if="shots" class="border border-gray-300 dark:border-gray-800 rounded-lg flex flex-col divide-y divide-gray-300 dark:divide-gray-800">
+    <div v-for="shot in shots" :key="shot.id.toString()" class="py-1 px-4">
       {{ shot.units }} units taken at {{ format(shot.date, 'M/d/yy') }}
     </div>
   </div>

app/pages/history.vue

@@ -1,10 +1,39 @@
 <script setup lang="ts">
+import { format } from 'date-fns'
+
 useCrumb().add('Shots')
+
+const route = useRoute()
+
+const columns = [
+  { label: 'Cartridge', key: 'cartridge' },
+  { label: 'Units', key: 'units' },
+  { label: 'Date', key: 'date' },
+  { label: 'Actions', key: 'actions' },
+]
+
+const { data: shots, refresh } = useApi().fetch('/api/shot')
+
+const remove = async (id: number) =>
+  await useApi().fetch(
+    route.params.user ? `/api/user/${route.params.user}/shot/${id}` : `/api/shot/${id}`,
+    { method: 'DELETE' },
+  ).then(refresh)
 </script>
 
 <template>
   <div>
-    Page: history
+    <u-table :columns="columns" :rows="shots?.data">
+      <template #cartridge-data="{ row }">
+        {{ row.cartridge.content }} {{ row.cartridge.mg }}mg {{ row.cartridge.ml }}ml
+      </template>
+      <template #date-data="{ row }">
+        {{ format(row.date, 'eeee - M/d/yy') }}
+      </template>
+      <template #actions-data="{ row }">
+        <u-button icon="i-mdi-trash" color="red" variant="soft" @click="remove(row.id)" />
+      </template>
+    </u-table>
   </div>
 </template>
 

app/pages/home.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Cartridge, Pen } from '@prisma/client'
+import type { UseFetchOptions } from '#app'
 import type { MetapiResponse } from '~/types/metapi'
 
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
@@ -21,6 +22,7 @@ const { data: pens, refresh: pensRefresh } = await useApi().fetch<MetapiResponse
 const { data: cartridges, refresh: cartridgesRefresh } = await useApi().fetch<MetapiResponse<Cartridge[]>>('/api/cartridge')
 
 const reload = async () => {
+  console.log('home.reload')
   await pensRefresh()
   await cartridgesRefresh()
 }
@@ -35,5 +37,5 @@ const reload = async () => {
       :actions="[{ label: 'Refresh', icon: 'i-mdi-refresh', onClick: reload, variant: 'solid' }]"
     />
   </div>
-  <pen-list v-else-if="pens && cartridges" :pens="pens?.data" :cartridges="cartridges?.data" readonly />
+  <pen-list v-else-if="pens && cartridges" :pens="pens?.data" :cartridges="cartridges?.data" readonly @reload="reload" />
 </template>

server/api/[...slug].ts

@@ -29,6 +29,6 @@ routing.apiResource('shot', router, shot)
 routing.apiResource('user', router, user)
 routing.apiResource('user/:user/pen', router, pens)
 routing.apiResource('user/:user/cartridge', router, cartridges)
-routing.apiResource('cartridge/:cartridge/shot', router, shots)
+routing.apiResource('user/:user/shot', router, shots)
 
 export default useBase('/api/', router.handler)

server/routes/pens.ts

@@ -60,10 +60,11 @@ const update = defineEventHandler(async (event) => {
     cartridgeId: Number.parseInt((await readBody(event))?.cartridgeId) || undefined,
   })
   if (!parsed.success) return metapi().error(event, parsed.error.issues, 400)
+
   const pen = await prisma.pen.update({
     where: {
       id: parsed.data.id,
-      userId: parsed.data.id,
+      userId: parsed.data.user,
     },
     data: {
       cartridgeId: parsed.data.cartridgeId ? BigInt(parsed.data.cartridgeId) : null,

server/routes/shot.ts

@@ -7,6 +7,13 @@ const index = defineEventHandler(async (event) => {
       where: {
         userId: user.id,
       },
+      include: {
+        cartridge: {
+          include: {
+            pen: true,
+          },
+        },
+      },
     }),
   )
 })
@@ -34,7 +41,7 @@ const create = defineEventHandler(async (event) => {
 
 const remove = defineEventHandler(async (event) => {
   const { user } = await requireUserSession(event)
-  const schema = z.object({ id: z.number(), user: z.number() })
+  const schema = z.object({ id: z.string() })
   const parsed = schema.safeParse({ id: event.context.params?.id })
   if (!parsed.success) return metapi().error(event, parsed.error.issues, 403)
   await prisma.shot.delete({

server/routes/shots.ts

@@ -1,21 +1,23 @@
 import { z } from 'zod'
 
 const index = defineEventHandler(async (event) => {
-  if (!middleware.requireAdmin()) return metapi().notFound(event)
+  const { user } = await requireUserSession(event)
+  if (!user.isAdmin) return metapi().notFound(event)
   const schema = z.object({ id: z.number() })
-  const parsed = schema.safeParse({ id: Number.parseInt(event.context.params?.cartridge as string) })
+  const parsed = schema.safeParse({ id: Number.parseInt(event.context.params?.user as string) })
   if (!parsed.success) return metapi().error(event, parsed.error.issues, 400)
   return metapi().render(
     await prisma.shot.findMany({
       where: {
-        cartridgeId: parsed.data.id,
+        userId: parsed.data.id,
       },
     }),
   )
 })
 
 const create = defineEventHandler(async (event) => {
-  if (!middleware.requireAdmin()) return metapi().notFound(event)
+  const { user } = await requireUserSession(event)
+  if (!user.isAdmin) return metapi().notFound(event)
   const schema = z.object({
     user: z.string(),
     cartridge: z.string(),