feat: make pet food a jsonb field

simsustech · Dec 17, 2024 · d752b4d · d752b4d
1 parent e03d505
commit d752b4d
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 13 deletions.
diff --git a/packages/api/src/kysely/migrations/10_create_pets_table.ts b/packages/api/src/kysely/migrations/10_create_pets_table.ts
@@ -17,7 +17,7 @@ export async function up(db: Kysely<unknown>): Promise<void> {
     .addColumn('chemical_sterilization_date', 'date')
     .addColumn('color', 'varchar')
     .addColumn('medicines', 'varchar')
-    .addColumn('food', 'varchar')
+    .addColumn('food', 'jsonb')
     .addColumn('weight', 'varchar')
     .addColumn('deceased', 'boolean', (col) => col.defaultTo(false))
     .addColumn('particularities', 'text')

diff --git a/packages/api/src/kysely/seeds/fake/generateData.ts b/packages/api/src/kysely/seeds/fake/generateData.ts
@@ -48,7 +48,12 @@ const createPet = (customerId: number) => {
     breed: faker.animal.dog(),
     birthDate: faker.date.past({ years: 10 }).toISOString().split('T')[0],
     color: faker.color.human(),
-    food: `${getRandomInt(200)} gr`,
+    food: {
+      timesADay: 2,
+      amount: getRandomInt(300),
+      amountUnit: 'gram',
+      kind: 'Generic'
+    },
     gender: getRandomInt(2) > 1 ? 'male' : 'female',
     sterilized,
     chemicalSterilizationDate:

diff --git a/packages/api/src/kysely/types.ts b/packages/api/src/kysely/types.ts
@@ -276,7 +276,12 @@ export interface Pets {
   chemicalSterilizationDate: string | null
   color: string | null
   medicines: string | null
-  food: string | null
+  food: {
+    timesADay: number
+    amount: number
+    amountUnit: 'gram' | 'pieces'
+    kind: string
+  } | null
   weight: string | null
   deceased: Generated<boolean | null>
   insured: boolean | null

diff --git a/packages/api/src/zod/pet.ts b/packages/api/src/zod/pet.ts
@@ -23,7 +23,12 @@ export const petValidation = {
   birthDate: z.string(),
   color: z.string().nullable().optional(),
   medicines: z.string().nullable().optional(),
-  food: z.string().nullable().optional(),
+  food: z.object({
+    timesADay: z.number(),
+    amount: z.number(),
+    amountUnit: z.union([z.literal('gram'), z.literal('pieces')]),
+    kind: z.string()
+  }),
   weight: z.string().nullable().optional(),
   deceased: z.boolean().optional(),
   particularities: z.string().nullable().optional(),

diff --git a/packages/app/src/components/pet/PetCard.vue b/packages/app/src/components/pet/PetCard.vue
@@ -75,7 +75,12 @@
         />
         <form-item
           :label="lang.pet.fields.food"
-          :model-value="modelValue.food"
+          :model-value="
+            modelValue.food
+              ? `${modelValue.food?.timesADay ?? ''}x ${modelValue.food.amount || ''} 
+                    ${lang.pet.food.unit[modelValue.food?.amountUnit] ?? ''} ${modelValue.food?.kind}`
+              : undefined
+          "
         />
         <form-item
           :label="lang.pet.fields.weight"

diff --git a/packages/app/src/components/pet/PetFoodInput.vue b/packages/app/src/components/pet/PetFoodInput.vue
@@ -0,0 +1,103 @@
+<template>
+  <q-field :label="lang.pet.fields.food" stack-label>
+    <template #control>
+      <div class="row">
+        <q-input
+          :model-value="modelValue.timesADay"
+          inputmode="numeric"
+          borderless
+          class="col-1 q-mr-sm"
+          :placeholder="lang.pet.food.fields.timesADay"
+          :style="{
+            'margin-top': '-2em',
+            'margin-bottom': '-0.5em'
+          }"
+          input-class="text-right"
+          suffix="x"
+          @update:model-value="updateKey('timesADay', Number($event))"
+        >
+        </q-input>
+        <q-input
+          :model-value="modelValue.amount"
+          inputmode="numeric"
+          class="col-2 q-mr-sm"
+          :placeholder="lang.pet.food.fields.amount"
+          :style="{
+            'margin-top': '-2em',
+            'margin-bottom': '-0.5em'
+          }"
+          input-class="text-right"
+          @update:model-value="updateKey('amount', Number($event))"
+        />
+        <q-select
+          :model-value="modelValue.amountUnit"
+          :placeholder="lang.pet.food.fields.amountUnit"
+          class="col-2"
+          map-options
+          emit-value
+          :options="amountUnitOptions"
+          :style="{
+            'margin-top': '-2em',
+            'margin-bottom': '-0.5em'
+          }"
+          @update:model-value="updateKey('amountUnit', $event)"
+        />
+        <q-input
+          :model-value="modelValue.kind"
+          class="col-6"
+          :placeholder="lang.pet.food.fields.kind"
+          :style="{
+            'margin-top': '-2em',
+            'margin-bottom': '-0.5em'
+          }"
+          @update:model-value="updateKey('kind', $event)"
+        />
+      </div>
+    </template>
+  </q-field>
+</template>
+
+<script setup lang="ts">
+import { Pet } from '@petboarding/api/zod'
+import { computed, toRefs } from 'vue'
+import { useLang } from '../../lang/index.js'
+import { extend } from 'quasar'
+
+interface Props {
+  modelValue: Pet['food']
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (
+    e: 'update:model-value',
+    food: {
+      timesADay: number
+      amount: number
+      amountUnit: 'gram' | 'pieces'
+      kind: string
+    }
+  ): void
+}>()
+
+const lang = useLang()
+
+const { modelValue } = toRefs(props)
+
+const amountUnitOptions = computed(() => [
+  {
+    label: lang.value.pet.food.unit.gram,
+    value: 'gram'
+  },
+  {
+    label: lang.value.pet.food.unit.pieces,
+    value: 'pieces'
+  }
+])
+
+const updateKey = (key: string, value: unknown) =>
+  emit(
+    'update:model-value',
+    extend(true, {}, modelValue.value, { [key]: value })
+  )
+</script>
diff --git a/packages/app/src/components/pet/PetForm.vue b/packages/app/src/components/pet/PetForm.vue
@@ -104,14 +104,10 @@
         lazy-rules
         name="medicines"
       />
-      <form-input
+      <pet-food-input
         v-if="useFood"
-        v-bind="input"
         v-model="modelValue.food"
         class="col-md-4 col-12"
-        :label="lang.pet.fields.food"
-        bottom-slots
-        lazy-rules
         name="food"
       />
     </div>
@@ -234,6 +230,7 @@ import PetCategorySelect from './PetCategorySelect.vue'
 import ImageAvatar from '../ImageAvatar.vue'
 import PetWeight from './PetWeight.vue'
 import { useConfiguration } from '../../configuration.js'
+import PetFoodInput from './PetFoodInput.vue'
 
 export interface Pet extends PetType {
   image?: string
@@ -284,7 +281,12 @@ const initialValue: Pet = {
   birthDate: '',
   color: '',
   medicines: '',
-  food: '',
+  food: {
+    timesADay: 0,
+    amount: 0,
+    amountUnit: 'gram',
+    kind: ''
+  },
   weight: '',
   particularities: '',
   insured: null
@@ -302,7 +304,7 @@ watch($q.lang, (val) => {
 const formRef = ref<QForm>()
 
 const setValue = (newValue: Pet) => {
-  modelValue.value = extend({}, initialValue, newValue)
+  modelValue.value = extend(true, {}, initialValue, newValue)
 }
 
 const submit: InstanceType<typeof ResponsiveDialog>['$props']['onSubmit'] = ({

diff --git a/packages/app/src/components/pet/PetLabel.vue b/packages/app/src/components/pet/PetLabel.vue
@@ -92,7 +92,10 @@
                   class="self-center text-subtitle2 text-truncate full-width no-outline q-ma-none"
                   tabindex="0"
                 >
-                  {{ modelValue.food }}
+                  {{
+                    `${modelValue.food?.timesADay ?? ''}x ${modelValue.food.amount || ''} 
+                    ${lang.pet.food.unit[modelValue.food?.amountUnit] ?? ''} ${modelValue.food?.kind}`
+                  }}
                 </div>
               </template>
             </q-field>

diff --git a/packages/app/src/lang/en-US.ts b/packages/app/src/lang/en-US.ts
@@ -174,6 +174,18 @@ const lang: Language = {
     },
     labels: {
       open: 'Open pet.'
+    },
+    food: {
+      fields: {
+        timesADay: 'Times a day',
+        amount: 'Amount',
+        amountUnit: 'Unit',
+        kind: 'Kind'
+      },
+      unit: {
+        gram: 'gr.',
+        pieces: 'pcs'
+      }
     }
   },
   booking: {

diff --git a/packages/app/src/lang/index.ts b/packages/app/src/lang/index.ts
@@ -169,6 +169,18 @@ export interface Language {
     labels: {
       open: string
     }
+    food: {
+      fields: {
+        timesADay: string
+        amount: string
+        amountUnit: string
+        kind: string
+      }
+      unit: {
+        gram: string
+        pieces: string
+      }
+    }
   }
   booking: {
     title: string

diff --git a/packages/app/src/lang/nl.ts b/packages/app/src/lang/nl.ts
@@ -175,6 +175,18 @@ const lang: Language = {
     },
     labels: {
       open: 'Open huisdier.'
+    },
+    food: {
+      fields: {
+        timesADay: 'Aantal keer per dag',
+        amount: 'Hoeveelheid',
+        amountUnit: 'Eenheid',
+        kind: 'Soort'
+      },
+      unit: {
+        gram: 'gr',
+        pieces: 'st.'
+      }
     }
   },
   booking: {