feat(PetChip): add badges for food and medicines

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

Hide file tree

Showing 7 changed files with 91 additions and 13 deletions.
diff --git a/packages/api/src/repositories/booking.ts b/packages/api/src/repositories/booking.ts
@@ -372,6 +372,8 @@ function withPets(eb: ExpressionBuilder<Database, 'bookings'>) {
         'pets.breed',
         'pets.sterilized',
         'pets.gender',
+        'pets.medicines',
+        'pets.food',
         withValidVaccinations,
         jsonObjectFrom(
           ceb

diff --git a/packages/api/src/repositories/kennel.ts b/packages/api/src/repositories/kennel.ts
@@ -153,6 +153,8 @@ export async function getBookingPetKennels(date: string) {
     .select((seb) => [
       'pets.id as id',
       'pets.name as name',
+      'pets.medicines as medicines',
+      'pets.food as food',
       convertImageSql.as('image'),
       'bookingPetKennel.kennelId as kennelId',
       'bookingPetKennel.bookingId as bookingId',
@@ -180,6 +182,8 @@ export async function getDaycareDatePetKennels(date: string) {
     .select((seb) => [
       'pets.id as id',
       'pets.name as name',
+      'pets.medicines as medicines',
+      'pets.food as food',
       convertImageSql.as('image'),
       'daycareDatePetKennel.kennelId as kennelId',
       'daycareDatePetKennel.daycareDateId as daycareDateId',

diff --git a/packages/app/src/components/AgendaChip.vue b/packages/app/src/components/AgendaChip.vue
@@ -13,22 +13,32 @@
           modelValue.status === 'canceled'
       }"
       dense
+      show-badge
       :icon="icons[type]"
       :color="colors[type]"
       @click="emit('click', { data: pet.id!, done: () => {} })"
       @open-pet="emit('openPets', petIds)"
     >
-      <template #badge>
+      <template
+        v-if="
+          modelValue.isDoubleBooked ||
+          (modelValue.services?.some(
+            (service) => service.service.type === 'appointment'
+          ) &&
+            index === 0)
+        "
+        #bottom-badge
+      >
         <q-badge
           v-if="
             modelValue.services?.some(
               (service) => service.service.type === 'appointment'
             ) && index === 0
           "
           :color="BOOKING_SERVICE_COLORS.appointment"
-          text-color="black"
           rounded
         >
+          <q-icon class="q-ma-none q-pa-none" name="event" size="0.8em" />
         </q-badge>
         <q-badge v-if="modelValue.isDoubleBooked" color="orange" rounded />
       </template>

diff --git a/packages/app/src/components/AgendaComponent.vue b/packages/app/src/components/AgendaComponent.vue
@@ -38,11 +38,12 @@
   </div>
   <div class="row">
     <div class="col-12 col-sm">
-      <q-badge
-        rounded
-        text-color="black"
-        :color="BOOKING_SERVICE_COLORS.appointment"
-      ></q-badge
+      <q-badge rounded :color="BOOKING_SERVICE_COLORS.appointment">
+        <q-icon
+          class="q-ma-none q-pa-none"
+          name="event"
+          size="0.8em"
+        /> </q-badge
       ><a>{{ lang.service.type.appointment }}</a>
 
       <q-badge
@@ -53,7 +54,12 @@
       ></q-badge
       ><a>{{ lang.booking.messages.isDoubleBooked }}</a>
 
-      <q-badge class="q-ml-lg" rounded text-color="black" color="red"></q-badge
+      <q-badge class="q-ml-lg" rounded color="red">
+        <q-icon
+          class="q-ma-none q-pa-none"
+          name="vaccines"
+          size="0.8em"
+        /> </q-badge
       ><a>{{ lang.pet.vaccination.missingVaccinations }}</a>
     </div>
   </div>

diff --git a/packages/app/src/components/pet/PetChip.vue b/packages/app/src/components/pet/PetChip.vue
@@ -1,5 +1,9 @@
 <template>
-  <q-chip>
+  <q-chip
+    :class="{
+      'q-mb-md': $slots['bottom-badge']
+    }"
+  >
     {{
       `${modelValue.name} ${showLastName ? truncateLastName(modelValue.customer?.lastName || '') : ''}`
     }}
@@ -37,17 +41,61 @@
 
     <q-badge
       v-if="showBadge || $slots['badge']"
-      style="top: -8px"
+      style="top: -10px"
       floating
       color="transparent"
     >
+      <q-badge
+        v-if="modelValue.food?.timesADay > 2"
+        :style="{
+          padding: '0px',
+          'padding-left': '3px',
+          'padding-right': '3px'
+        }"
+        color="yellow"
+        rounded
+      >
+        <q-icon class="q-ma-none q-pa-none" name="restaurant" size="0.8em" />
+      </q-badge>
+      <q-badge
+        v-if="modelValue.medicines"
+        :style="{
+          padding: '0px',
+          'padding-left': '3px',
+          'padding-right': '3px'
+        }"
+        color="yellow"
+        rounded
+      >
+        <q-icon
+          class="q-ma-none q-pa-none"
+          name="medical_services"
+          size="0.8em"
+        />
+      </q-badge>
       <q-badge
         v-if="!modelValue.hasMandatoryVaccinations"
+        :style="{
+          padding: '0px',
+          'padding-left': '3px',
+          'padding-right': '3px'
+        }"
         color="red"
         rounded
-      />
+      >
+        <q-icon class="q-ma-none q-pa-none" name="vaccines" size="0.8em" />
+      </q-badge>
       <slot name="badge"></slot>
     </q-badge>
+
+    <q-badge
+      v-if="$slots['bottom-badge']"
+      style="top: 14px"
+      floating
+      color="transparent"
+    >
+      <slot name="bottom-badge"></slot>
+    </q-badge>
   </q-chip>
 </template>
 
@@ -58,15 +106,21 @@ import Base64Image from '../Base64Image.vue'
 
 type Pet = Pick<
   PetType,
-  'id' | 'name' | 'image' | 'hasMandatoryVaccinations'
+  'id' | 'name' | 'image' | 'hasMandatoryVaccinations' | 'medicines' | 'food'
 > & {
   customer?: Pick<CustomerType, 'lastName'>
 }
 
 interface Props {
   modelValue: Pick<
     Pet,
-    'id' | 'name' | 'customer' | 'image' | 'hasMandatoryVaccinations'
+    | 'id'
+    | 'name'
+    | 'customer'
+    | 'image'
+    | 'hasMandatoryVaccinations'
+    | 'medicines'
+    | 'food'
   >
   showImage?: boolean
   showLastName?: boolean

diff --git a/packages/app/src/pages/employee/KennelLayout.vue b/packages/app/src/pages/employee/KennelLayout.vue
@@ -105,6 +105,7 @@
                     'bg-yellow-2': pet.daycareDateId
                   }"
                   :draggable="true"
+                  show-badge
                   show-image
                   @dragstart="onDragStart"
                   @open-pet="openPet"

diff --git a/packages/app/src/pages/print/KennelLayout.vue b/packages/app/src/pages/print/KennelLayout.vue
@@ -58,6 +58,7 @@
                     'bg-yellow-2': pet.daycareDateId
                   }"
                   :model-value="pet"
+                  show-badge
                   draggable="true"
                   @dragstart="onDragStart"
                 >