fix conflict

client/src/components/CshrToolbar.vue

@@ -3,7 +3,7 @@
     <VSpacer />
     <VMenu>
       <template #activator="{ props }">
-        <VBtn icon="mdi-bell-outline" v-bind="props" />
+        <VBtn icon="mdi-bell-outline" size="small" v-bind="props" />
       </template>
 
       <VList max-width="600" min-width="100%">
@@ -48,7 +48,7 @@
           <VProgressCircular indeterminate v-if="user.isLoading.value" />
           <profileImage
             v-else-if="user.state.value"
-            :with-link="true"
+            :with-link="false"
             :user="user.state.value"
             v-bind="props"
           />

client/src/components/NotificationDetailsDialog.vue

@@ -69,9 +69,13 @@ export default {
       }
     )
 
-    watch(selected, (value) => {
-      notification.execute(undefined, value)
-    })
+    watch(
+      selected,
+      (value) => {
+        notification.execute(undefined, value)
+      },
+      { immediate: true }
+    )
 
     function getSections(data: any) {
       if (data.type === 'vacations')

client/src/components/SideDrawer.vue

@@ -2,7 +2,10 @@
   <v-card>
     <v-layout>
       <v-navigation-drawer v-if="$route.path != '/login'" theme="dark" permanent>
-        <v-img :src="logo" max-width="150" class="ml-3 mt-10 mb-4"></v-img>
+        <router-link to="/">
+          <v-img :src="logo" max-width="110" class="ml-3 mt-5 mb-4"></v-img>
+        </router-link>
+        <v-divider></v-divider>
         <v-list color="transparent">
           <template v-for="item in filteredItems" :key="item.title">
             <v-list-item
@@ -119,7 +122,8 @@ export default {
 <style scoped>
 .router-link {
   text-decoration: none;
-  font-weight: bold;
+  font-weight: 400;
+  font-size: 0.875rem;
   color: var(--link-color);
   cursor: pointer;
 }

client/src/components/calender.vue

@@ -1,69 +1,108 @@
 <!-- eslint-disable vue/no-async-in-computed-properties -->
 <template>
-  <v-row>
+  <v-row class="justify-center py-4">
     <v-col cols="2">
-      <v-checkbox v-model="selected.meetings" label="Meetings" />
+      <v-checkbox v-model="selected.meetings" color="#efeaea" label="Meetings" />
     </v-col>
     <v-col cols="2">
-      <v-checkbox v-model="selected.events" label="Events" />
+      <v-checkbox v-model="selected.events" color="#47a2ff" label="Events" />
     </v-col>
     <v-col cols="2">
-      <v-checkbox v-model="selected.vacations" label="Vacations" />
+      <v-checkbox v-model="selected.vacations" color="#fcd091" label="Vacations" />
     </v-col>
     <v-col cols="2">
-      <v-checkbox v-model="selected.holidays" label="Holidays" />
+      <v-checkbox v-model="selected.holidays" color="#5effb4" label="Holidays" />
     </v-col>
     <v-col cols="2">
-      <v-checkbox v-model="selected.birthdays" label="Birthdays" />
+      <v-checkbox v-model="selected.birthdays" color="#e0adf0" label="Birthdays" />
     </v-col>
   </v-row>
-  <div class="ma-7 pa-7">
-    <div class="loading-container d-flex align-center justify-center  my-5" v-if="homes.isLoading.value">
+  <v-divider class="d-flex mx-auto" style="width: 90%"></v-divider>
+  <div class="ma-7 px-7">
+    <div
+      class="loading-container d-flex align-center justify-center my-5"
+      v-if="homes.isLoading.value"
+    >
       <v-alert density="compact" class="pa-5" type="info" text="Events are loading..."></v-alert>
     </div>
-    <FullCalendar class="fc" :options="{
-      ...options,
-      events: eventsOption,
-      dayCellDidMount
-    }" />
+    <FullCalendar
+      class="fc"
+      :options="{
+        ...options,
+        events: eventsOption,
+        dayCellDidMount
+      }"
+    />
   </div>
-  <VDialog v-if="dates?.startStr" :routeQuery="dates?.startStr" :modelValue="showDialog[dates?.startStr]">
+  <VDialog
+    v-if="dates?.startStr"
+    :routeQuery="dates?.startStr"
+    :modelValue="showDialog[dates?.startStr]"
+  >
     <v-card>
-      <calenderRequest :dates="dates" @close-dialog="closeDialog(dates?.startStr)"
+      <calenderRequest
+        :dates="dates"
+        @close-dialog="closeDialog(dates?.startStr)"
         @create-vacation="createVacation(dates?.startStr, $event)"
-        @create-meeting="createMeeting(dates?.startStr, $event)" @create-event="createEvent(dates?.startStr, $event)" />
+        @create-meeting="createMeeting(dates?.startStr, $event)"
+        @create-event="createEvent(dates?.startStr, $event)"
+      />
     </v-card>
   </VDialog>
 
-  <VDialog v-if="isViewRequest && isMeeting && meeting" :routeQuery="meeting.id" :modelValue="showDialog[meeting.id]">
+  <VDialog
+    v-if="isViewRequest && isMeeting && meeting"
+    :routeQuery="meeting.id"
+    :modelValue="showDialog[meeting.id]"
+  >
     <v-card>
       <meetingCard :meeting="meeting" @close-dialog="closeDialog(meeting.id)" />
     </v-card>
   </VDialog>
 
-  <VDialog v-if="isViewRequest && isHoliday && holiday" :routeQuery="holiday.id" :modelValue="showDialog[holiday.id]">
+  <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]">
+  <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]">
+  <VDialog
+    v-if="isViewRequest && isEvent && event"
+    :routeQuery="event.name"
+    :modelValue="showDialog[event.name]"
+  >
     <v-card>
       <eventCard :event="event" @close-dialog="closeDialog(event.name)" />
     </v-card>
   </VDialog>
 
-  <VDialog v-if="isViewRequest && isLeave && vacation" :routeQuery="vacation.id" :modelValue="showDialog[vacation.id]">
+  <VDialog
+    v-if="isViewRequest && isLeave && vacation"
+    :routeQuery="vacation.id"
+    :modelValue="showDialog[vacation.id]"
+  >
     <v-card>
-      <vacationCard :vacation="vacation" @close-dialog="closeDialog(vacation.id)"
+      <vacationCard
+        :vacation="vacation"
+        @close-dialog="closeDialog(vacation.id)"
         @status-vacation="updateVacationStatus(vacation.id, $event)"
-        @update-vacation="updateVacation(vacation.id, $event)" @delete-vacation="deleteVacation(vacation.id)" />
+        @update-vacation="updateVacation(vacation.id, $event)"
+        @delete-vacation="deleteVacation(vacation.id)"
+      />
     </v-card>
   </VDialog>
 </template>
@@ -83,12 +122,7 @@ import birthdayCard from '@/components/cards/birthdayCard.vue'
 import { ref, computed, reactive, watch } from 'vue'
 import type { Api } from '@/types'
 import { useApi } from '@/hooks'
-import type {
-  EventClickArg,
-  CalendarApi,
-  DayCellMountArg,
-  CalendarOptions
-} from '@fullcalendar/core/index.js'
+import type { EventClickArg, CalendarApi, DayCellMountArg } from '@fullcalendar/core/index.js'
 import { useAsyncState } from '@vueuse/core'
 import {
   normalizeEvent,
@@ -97,6 +131,9 @@ import {
   normalizeHoliday,
   normalizedBirthday
 } from '@/utils'
+import { ApiClientBase } from '@/clients/api/base'
+
+const cached_users = new Map<number, Api.User>()
 
 export default {
   name: 'calenderCshr',
@@ -111,6 +148,11 @@ export default {
   },
 
   setup() {
+    const me = ApiClientBase.user.value?.fullUser
+    if (me) {
+      cached_users.set(me.id, me)
+    }
+
     const $api = useApi()
     const meeting = ref<Api.Meetings>()
     const currentDate = ref<Date>(new Date())
@@ -140,8 +182,8 @@ export default {
     const events = ref<Api.Inputs.Event[]>([])
     const birthdays = ref<Api.User[]>([])
 
-    function filteHome(data: any) {
-      data.forEach((home: Api.Home) => {
+    async function filteHome(data: any) {
+      for (const home of data) {
         if (home.title === 'meeting') {
           home.meeting.forEach((meeting: Api.Meetings) => {
             meetings.value.push(meeting)
@@ -165,18 +207,26 @@ export default {
             events.value.push(event)
           })
         }
+
         if (home.title === 'vacation') {
-          home.vacation.forEach(async (vacation: Api.Vacation) => {
+          for (const vacation of home.vacation) {
             let v: Api.Vacation
             v = vacation
-            const user = await $api.users.getuser(vacation.applying_user.id, {
-              disableNotify: true
-            })
-            v.user = user
+
+            if (cached_users.has(vacation.applying_user.id)) {
+              v.user = cached_users.get(vacation.applying_user.id)
+            } else {
+              const user = await $api.users.getuser(vacation.applying_user.id, {
+                disableNotify: true
+              })
+              cached_users.set(vacation.applying_user.id, user)
+              v.user = user
+            }
+
             vacations.value.push(v)
-          })
+          }
         }
-      })
+      }
     }
 
     const homes = useAsyncState(
@@ -196,11 +246,14 @@ export default {
     watch(
       () => currentDate.value,
       async (newValue, oldValue) => {
-        if (newValue.getMonth() + 1 !== oldValue.getMonth() + 1 || newValue.getFullYear() !== oldValue.getFullYear()) {
-          homes.execute();
+        if (
+          newValue.getMonth() + 1 !== oldValue.getMonth() + 1 ||
+          newValue.getFullYear() !== oldValue.getFullYear()
+        ) {
+          homes.execute()
         }
-      },
-    );
+      }
+    )
 
     const onSelect = async (arg: any) => {
       calendar.value = arg.view.calendar
@@ -303,8 +356,15 @@ export default {
       data.vacation.forEach(async (vacation: Api.Vacation) => {
         let v: Api.Vacation
         v = vacation
-        const user = await $api.users.getuser(vacation.applying_user.id, { disableNotify: true })
-        v.user = user
+
+        if (cached_users.has(vacation.applying_user.id)) {
+          v.user = cached_users.get(vacation.applying_user.id)
+        } else {
+          const user = await $api.users.getuser(vacation.applying_user.id, { disableNotify: true })
+          cached_users.set(vacation.applying_user.id, user)
+          v.user = user
+        }
+
         vacations.value.push(v)
       })
       closeDialog(id)
@@ -331,8 +391,17 @@ export default {
       vacations.value = vacations.value.filter((vacation) => vacation.id !== id)
       let v: Api.Vacation
       v = data
-      const user = await $api.users.getuser(data.applying_user, { disableNotify: true })
-      v.user = user
+
+      if (cached_users.has(data.applying_user.id)) {
+        v.user = cached_users.get(data.applying_user.id)
+      } else {
+        const user = await $api.users.getuser(data.applying_user.id, {
+          disableNotify: true
+        })
+        cached_users.set(data.applying_user.id, user)
+        v.user = user
+      }
+
       v.isUpdated = true
       vacations.value.push(v)
       closeDialog(id)
@@ -398,3 +467,44 @@ export default {
   }
 }
 </script>
+<style>
+.fc {
+  font-size: 0.875rem !important;
+}
+
+.fc-theme-standard .fc-scrollgrid {
+  border: 1px solid #3c3c3c !important;
+}
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border: 1px solid #3c3c3c !important;
+}
+
+.fc .fc-button .fc-icon {
+  font-size: 1em;
+  vertical-align: baseline;
+}
+
+.fc-daygrid-block-event .fc-event-time,
+.fc-daygrid-block-event .fc-event-title {
+  padding: 1px 9px;
+}
+
+button {
+  text-transform: capitalize !important;
+}
+
+.fc-event-title {
+  color: #131313;
+  font-weight: 500;
+}
+
+.fc-popover {
+  background-color: rgb(49 47 47) !important;
+  color: #ffffff;
+
+  .fc-popover-header {
+    background-color: rgb(100, 99, 99) !important;
+  }
+}
+</style>