Adding birthday and public holiday cards

client/src/components/calender.vue

@@ -1,18 +1,21 @@
 <!-- eslint-disable vue/no-async-in-computed-properties -->
 <template>
   <v-row>
-    <v-col cols="3">
+    <v-col cols="2">
       <v-checkbox v-model="selected.meetings" label="Meetings" />
     </v-col>
-    <v-col cols="3">
+    <v-col cols="2">
       <v-checkbox v-model="selected.events" label="Events" />
     </v-col>
-    <v-col cols="3">
+    <v-col cols="2">
       <v-checkbox v-model="selected.vacations" label="Vacations" />
     </v-col>
-    <v-col cols="3">
+    <v-col cols="2">
       <v-checkbox v-model="selected.holidays" label="Holidays" />
     </v-col>
+    <v-col cols="2">
+      <v-checkbox v-model="selected.birthdays" label="Birthdays" />
+    </v-col>
   </v-row>
   <div class="ma-7 pa-7">
     <div class="loading-container d-flex align-center justify-center" v-if="homes.isLoading.value">
@@ -38,6 +41,18 @@
     </v-card>
   </VDialog>
 
+  <VDialog v-if="isViewRequest && isHoliday && holiday" :routeQuery="holiday.id" :modelValue="showDialog[holiday.id]">
+    <v-card>
+      <holidayCard :holiday="holiday" @close-dialog="closeDialog(holiday.id)" />
+    </v-card>
+  </VDialog>
+
+  <VDialog v-if="isViewRequest && isBirthday && birthday" :routeQuery="birthday.id" :modelValue="showDialog[birthday.id]">
+    <v-card>
+      <birthdayCard :birthday="birthday" @close-dialog="closeDialog(birthday.id)" />
+    </v-card>
+  </VDialog>
+
   <VDialog v-if="isViewRequest && isEvent && event" :routeQuery="event.name" :modelValue="showDialog[event.name]">
     <v-card>
       <eventCard :event="event" @close-dialog="closeDialog(event.name)" />
@@ -62,15 +77,15 @@ import calenderRequest from '@/components/calenderRequest.vue'
 import meetingCard from '@/components/cards/meetingCard.vue'
 import eventCard from '@/components/cards/eventCard.vue'
 import vacationCard from '@/components/cards/vacationCard.vue'
+import holidayCard from '@/components/cards/holidayCard.vue'
+import birthdayCard from '@/components/cards/birthdayCard.vue'
 
 import { ref, computed } from 'vue'
 import type { Api } from '@/types'
 import { useApi } from '@/hooks'
 import type { EventClickArg, CalendarApi, DayCellMountArg } from '@fullcalendar/core/index.js'
 import { useAsyncState } from '@vueuse/core'
-import { normalizeEvent, normalizeVacation, normalizeMeeting, normalizeHoliday } from '@/utils'
-
-
+import { normalizeEvent, normalizeVacation, normalizeMeeting, normalizeHoliday, normalizedBirthday } from '@/utils'
 
 
 export default {
@@ -80,7 +95,9 @@ export default {
     calenderRequest,
     meetingCard,
     eventCard,
-    vacationCard
+    vacationCard,
+    holidayCard,
+    birthdayCard,
   },
 
   setup() {
@@ -90,16 +107,22 @@ export default {
     const isEvent = ref<Boolean>(false)
     const isMeeting = ref<Boolean>(false)
     const isLeave = ref<Boolean>(false)
+    const isHoliday = ref<Boolean>(false)
+    const isBirthday = ref<Boolean>(false)
     const event = ref<Api.Inputs.Event>()
+    const birthday = ref<Api.User>()
     const vacation = ref<Api.Vacation>()
+    const holiday = ref<Api.Holiday>()
     const calendar = ref<CalendarApi>()
     const dates = ref<any>()
-    const selected = ref({ events: true, vacations: true, meetings: true, holidays: true })
+    const selected = ref({ events: true, vacations: true, meetings: true, holidays: true, birthdays: true })
     const showDialog = ref<{ [key: string]: boolean }>({})
     const meetings = ref<Api.Meetings[]>([])
     const vacations = ref<Api.Vacation[]>([])
     const holidays = ref<Api.Holiday[]>([])
     const events = ref<Api.Inputs.Event[]>([])
+    const birthdays = ref<Api.User[]>([])
+
 
     function filteHome(data: any) {
 
@@ -109,6 +132,14 @@ export default {
             meetings.value.push(meeting)
           })
         }
+        if (home.title === "birthday") {
+          home.users.forEach((birthday: Api.User) => {
+            let u: Api.User;
+            u = birthday
+            u.birthday = home.date
+            birthdays.value.push(u)
+          })
+        }
         if (home.title === "public_holiday") {
           home.holidays.forEach((holiday: Api.Holiday) => {
             holidays.value.push(holiday)
@@ -162,13 +193,22 @@ export default {
         event.value = events.value.filter((event) => event.name === arg.event.id)[0]
         isEvent.value = true
         openDialog(event.value.name)
+      } else if (arg.event.title === 'Birthday') {
+        birthday.value = birthdays.value.filter((birthday) => birthday.id === Number(arg.event.id))[0]
+        isBirthday.value = true
+        openDialog(birthday.value.id)
       } else if (arg.event.title.includes('Vacation')) {
         vacation.value = vacations.value.filter(
           (vacation) => vacation.id === Number(arg.event.id)
         )[0]
         isLeave.value = true
         openDialog(vacation.value.id)
       }
+      else if (arg.event.title === 'Public Holiday') {
+        holiday.value = holidays.value.filter((holiday) => holiday.id === Number(arg.event.id))[0]
+        isHoliday.value = true
+        openDialog(holiday.value.id)
+      }
       isViewRequest.value = true
     }
 
@@ -178,13 +218,14 @@ export default {
         ? meetings.value.map(normalizeMeeting)
         : []
       const normalizedEvents = selected.value.events ? events.value.map(normalizeEvent) : []
+      const normalizedBirthdays = selected.value.birthdays ? birthdays.value.map(normalizedBirthday) : []
       const normalizedHolidays = selected.value.holidays ? holidays.value.map(normalizeHoliday) : []
 
       const normalizedVacations = selected.value.vacations
         ? vacations.value.map(normalizeVacation)
         : []
 
-      return [...normalizedMeetings, ...normalizedEvents, ...normalizedVacations, ...normalizedHolidays]
+      return [...normalizedMeetings, ...normalizedEvents, ...normalizedVacations, ...normalizedHolidays, ...normalizedBirthdays]
     })
 
     function dayCellDidMount({ el, date }: DayCellMountArg) {
@@ -296,6 +337,10 @@ export default {
       eventsOption,
       dates,
       vacation,
+      holiday,
+      isHoliday,
+      isBirthday,
+      birthday,
       selected,
       homes,
       updateVacation,
@@ -313,6 +358,8 @@ export default {
       meetingCard,
       eventCard,
       vacationCard,
+      holidayCard,
+      birthdayCard,
 
     }
   }

client/src/components/cards/birthdayCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-card elevation="0" variant="outlined" color="white" class="pa-4">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+    <v-card-title class="text-center my-2">
+      <h1>Wish a happy birthday to</h1>
+    </v-card-title>
+
+    <profileImage v-show="birthday" :user="birthday"  class=" my-2"/>
+
+    <v-card elevation="0" variant="outlined" class="pa-4 mt-2">
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Name</b>
+        </v-col>
+        <v-col cols="6">
+          {{ birthday.full_name }}
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Team</b>
+        </v-col>
+        <v-col cols="6">
+          {{ birthday.team ? birthday.team : "--" }}
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col cols="6">
+          <b>Email</b>
+        </v-col>
+        <v-col cols="6">
+          {{ birthday.email }}
+        </v-col>
+      </v-row>
+
+    </v-card>
+  </v-card>
+</template>
+<script lang="ts">
+import profileImage from "@/components/profileImage.vue";
+
+
+export default {
+  name: "birthdayCard",
+  props: ["birthday"],
+  emits: {
+    'close-dialog': (item: Boolean) => item
+  },
+
+  components: {
+    profileImage,
+  },
+
+  setup(props) {
+    return {
+
+      profileImage,
+    };
+  },
+};
+</script>

client/src/components/cards/holidayCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-card elevation="0" variant="outlined" color="white" class="pa-4">
+    <div class="d-flex flex-row-reverse">
+      <v-icon class="me-2" @click.stop="$emit('close-dialog', false)"> mdi-close </v-icon>
+    </div>
+    <v-card-title class="text-center my-2">
+      <h1>{{ holiday.location.country }}</h1>
+    </v-card-title>
+    <v-card elevation="0" variant="outlined" class="pa-4 mt-2">
+      <v-row class="pa-2 ">
+        <p>
+          <b>{{ holiday.holiday_date }}</b> is a public holiday in <b>{{ holiday.location.country }}</b>, We hope you and
+          your family have a peaceful and enjoyable holiday. Please be aware that our office in <b>{{
+            holiday.location.country }}</b>, will be closed on
+          this date. Thank you!
+        </p>
+      </v-row>
+
+    </v-card>
+  </v-card>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+
+
+export default {
+  name: "holidayCard",
+  props: ["holiday"],
+  emits: {
+    'close-dialog': (item: Boolean) => item
+  },
+
+
+  setup(props) {
+    return {
+    };
+  },
+};
+</script>

client/src/components/requests/leaveRequest.vue

@@ -107,7 +107,6 @@ export default {
           },
         ), undefined, {
           onSuccess(data) {
-            console.log(data)
             ctx.emit("create-event", data)
           }
         })

client/src/types/api.ts

@@ -262,6 +262,7 @@ export module Api {
     meeting? :any
     event?: any
     holidays?: any
+    users?:any
     date: any
     len?: number
   }

client/src/utils/helpers.ts

@@ -95,7 +95,7 @@ export function normalizeHoliday(h: Api.Holiday) {
   const dates = handelDates(h.holiday_date, h.holiday_date)
 
   return {
-    title: `PublicVacation`,
+    title: `Public Holiday`,
     color: 'primary',
     start: dates.start,
     end: dates.end,
@@ -104,6 +104,19 @@ export function normalizeHoliday(h: Api.Holiday) {
     allDay: true
   }
 }
+export function normalizedBirthday(u: Api.User) {
+  const dates = handelDates(u.birthday, u.birthday)
+
+  return {
+    title: `Birthday`,
+    color: 'primary',
+    start: dates.start,
+    end: dates.end,
+    backgroundColor: 'gray',
+    id: u.id.toString(),
+    allDay: true
+  }
+}
 
 
 export function normalizeMeeting(m: Api.Meetings): any {