From de038c11a5f5eb7e02659946a703497c2511f5ac Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 27 Aug 2024 10:23:05 +0300
Subject: [PATCH 1/2] feat: Enhance the home endpoint

---
 client/src/components/CalenderComponent.vue | 98 +++++++++++++++------
 client/src/components/CshrToolbar.vue       |  7 +-
 client/src/components/SideDrawer.vue        |  3 +-
 server/cshr/services/landing_page.py        | 70 +++++++--------
 server/cshr/services/meetings.py            |  8 +-
 server/cshr/services/vacations.py           | 18 +---
 server/cshr/views/landing_page.py           | 13 ++-
 7 files changed, 130 insertions(+), 87 deletions(-)

diff --git a/client/src/components/CalenderComponent.vue b/client/src/components/CalenderComponent.vue
index 05d34d73..a1146709 100644
--- a/client/src/components/CalenderComponent.vue
+++ b/client/src/components/CalenderComponent.vue
@@ -1,35 +1,46 @@
 <template>
-  <v-row class="justify-center py-4">
-    <v-col cols="2">
-      <v-checkbox v-model="filters.vacation" color="#fcd091" label="Vacations" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="filters.meeting" color="#efeaea" label="Meetings" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="filters.event" color="#47a2ff" label="Events" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="filters.holiday" color="#5effb4" label="Holidays" />
-    </v-col>
-    <v-col cols="2">
-      <v-checkbox v-model="filters.birthday" color="#e0adf0" label="Birthdays" />
-    </v-col>
-  </v-row>
-  <v-divider class="d-flex mx-auto" style="width: 90%"></v-divider>
+  <div v-if="!isLoading">
+    <v-row class="justify-center py-4">
+      <v-col cols="2">
+        <v-checkbox v-model="filters.vacation" color="#fcd091" label="Vacations" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.meeting" color="#efeaea" label="Meetings" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.event" color="#47a2ff" label="Events" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.holiday" color="#5effb4" label="Holidays" />
+      </v-col>
+      <v-col cols="2">
+        <v-checkbox v-model="filters.birthday" color="#e0adf0" label="Birthdays" />
+      </v-col>
+    </v-row>
+    <v-divider class="d-flex mx-auto" style="width: 90%"></v-divider>
+  </div>
   <div class="ma-7 px-7">
     <div class="loading-container d-flex align-center justify-center my-5" v-if="isLoading">
       <v-alert density="compact" class="pa-5" type="info" text="Events are loading..."></v-alert>
     </div>
-
-    <FullCalendar
-      class="fc"
-      :options="{
-        ...options,
-        events: filteredEvents as any
-      }"
-    >
-    </FullCalendar>
+    <div class="relative">
+      <div
+        v-if="isLoading"
+        class="calendar-loading"
+      >
+      <div v-for="index in 300" :key="index" class="grid-item" />
+      </div>
+      <div v-else>
+        <FullCalendar
+          class="fc"
+          :options="{
+            ...options,
+            events: filteredEvents as any
+          }"
+        >
+        </FullCalendar>
+      </div>
+    </div>
   </div>
 
   <!-- Dialogs -->
@@ -493,4 +504,37 @@ button {
     background-color: rgb(100, 99, 99) !important;
   }
 }
+
+.calendar-loading {
+  width: 95%;
+  height: 800px;
+  margin: 0 auto;
+  background-color: rgba(90, 89, 89, 0.055);
+  display: grid;
+  grid-template-columns: repeat(30, 1fr);
+  grid-template-rows: repeat(30, 1fr);
+  gap: 15px;
+  color: white;
+  overflow: hidden;
+  place-items: center;
+}
+
+.grid-item {
+  background-color: rgba(255, 255, 255, 0.068);
+  animation: pulse 1.5s infinite ease-in-out;
+  height: 120px;
+  width: 120px;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
 </style>
diff --git a/client/src/components/CshrToolbar.vue b/client/src/components/CshrToolbar.vue
index b38d9038..891ef0b4 100644
--- a/client/src/components/CshrToolbar.vue
+++ b/client/src/components/CshrToolbar.vue
@@ -112,7 +112,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ref, type Ref } from 'vue'
+import { computed, onMounted, ref, type Ref } from 'vue'
 import { useAsyncState } from '@vueuse/core'
 import { useApi } from '@/hooks'
 import { formatDate, getStatusColor } from '@/utils'
@@ -135,11 +135,12 @@ export default {
 
     const notifications = computed(() => notificationStore.notifications)
 
-    setTimeout(() => {
+    onMounted(async () => {
+      await user.execute();
       if (!user.state.value) {
         window.location.href = '/login'
       }
-    }, 1000)
+    })
 
     const loadNotifications = async () => {
       const notificationData = await $api.notifications.list()
diff --git a/client/src/components/SideDrawer.vue b/client/src/components/SideDrawer.vue
index fa1a5f56..d5ea86ee 100644
--- a/client/src/components/SideDrawer.vue
+++ b/client/src/components/SideDrawer.vue
@@ -102,12 +102,13 @@ export default {
     const filteredItems = computed(() =>
       navItems.filter((item: any) => {
         return (
-          user.value?.fullUser.user_type.toLowerCase() === 'admin' || item.path !== '/dashboard'
+          user.value?.fullUser && user.value?.fullUser.user_type.toLowerCase() === 'admin' || item.path !== '/dashboard'
         )
       })
     )
 
     function logout() {
+      console.log("Logged out..")
       $api.auth.logout()
       $router.push('/login')
     }
diff --git a/server/cshr/services/landing_page.py b/server/cshr/services/landing_page.py
index a987f383..f755f1c7 100644
--- a/server/cshr/services/landing_page.py
+++ b/server/cshr/services/landing_page.py
@@ -18,42 +18,42 @@
     wrap_vacation_request,
 )
 
+from concurrent.futures import ThreadPoolExecutor
+
 
 def landing_page_calendar_functionality(user: User, month: str, year: str) -> List[Any]:
     response: List[Any] = []
 
-    # Fetch vacations
-    vacations = filter_vacations_by_month_and_year(month, year).order_by("-created_at")
-    for vacation in vacations:
-        vacation_data = wrap_vacation_request(vacation)
-        response.append(vacation_data)
-
-    # Fetch meetings
-    meetings = filter_meetings_by_month_and_year(user, month, year).order_by(
-        "-created_at"
-    )
-    for meeting in meetings:
-        meeting_data = wrap_meeting_request(meeting)
-        response.append(meeting_data)
-
-    # Fetch events
-    events = filter_events_by_month_and_year(user, month, year).order_by("-created_at")
-    for event in events:
-        event_data = wrap_event_request(event)
-        response.append(event_data)
-
-    # Fetch users' birthdays
-    users_birthdates = filter_users_by_birth_month(month).order_by("-created_at")
-    for birthday_user in users_birthdates:
-        birthday_data = wrap_birthday_event(birthday_user)
-        response.append(birthday_data)
-
-    # Fetch public holidays
-    public_holidays = filter_public_holidays_by_month_and_year(year, month).order_by(
-        "-created_at"
-    )
-    for holiday in public_holidays:
-        holiday_data = wrap_holiday_request(holiday)
-        response.append(holiday_data)
-
-    return response
+    with ThreadPoolExecutor() as executor:
+        future_vacations = executor.submit(filter_vacations_by_month_and_year, month, year)
+        future_meetings = executor.submit(filter_meetings_by_month_and_year, user, month, year)
+        future_events = executor.submit(filter_events_by_month_and_year, user, month, year)
+        future_birthdays = executor.submit(filter_users_by_birth_month, month)
+        future_holidays = executor.submit(filter_public_holidays_by_month_and_year, year, month)
+
+        # Add vacations to response
+        for vacation in future_vacations.result():
+            vacation_data = wrap_vacation_request(vacation)
+            response.append(vacation_data)
+
+        # Add meetings to response
+        for meeting in future_meetings.result():
+            meeting_data = wrap_meeting_request(meeting)
+            response.append(meeting_data)
+
+        # Add events to response
+        for event in future_events.result():
+            event_data = wrap_event_request(event)
+            response.append(event_data)
+
+        # Add birthdays to response
+        for birthday_user in future_birthdays.result():
+            birthday_data = wrap_birthday_event(birthday_user)
+            response.append(birthday_data)
+
+        # Add public holidays to response
+        for holiday in future_holidays.result():
+            holiday_data = wrap_holiday_request(holiday)
+            response.append(holiday_data)
+
+    return response
\ No newline at end of file
diff --git a/server/cshr/services/meetings.py b/server/cshr/services/meetings.py
index 4ff8c1b4..8db65f92 100644
--- a/server/cshr/services/meetings.py
+++ b/server/cshr/services/meetings.py
@@ -4,6 +4,8 @@
 from typing import List
 
 from cshr.models.users import User
+from django.db.models import Prefetch
+
 
 
 def get_meeting_by_id(id: str) -> Meetings:
@@ -20,15 +22,13 @@ def get_all_meetings() -> Meetings:
 
 
 def filter_meetings_by_month_and_year(user: User, month: str, year: str) -> Meetings:
-    """
-    This function will filter all of meetings based on its yesr, month.
-    """
     meetings: List[Meetings] = Meetings.objects.filter(
         date__month=month, date__year=year
+    ).prefetch_related(
+        Prefetch('participants', queryset=User.objects.only('id', 'full_name'))
     )
     return meetings
 
-
 def filter_meetings_by_day(year: int, month: int, day: int) -> List[Meetings]:
     """Filter all users by birthdates"""
     return Meetings.objects.filter(date__year=year, date__month=month, date__day=day)
diff --git a/server/cshr/services/vacations.py b/server/cshr/services/vacations.py
index 4907dae3..446690c0 100644
--- a/server/cshr/services/vacations.py
+++ b/server/cshr/services/vacations.py
@@ -9,22 +9,10 @@
 
 
 def filter_vacations_by_month_and_year(month: str, year: str) -> Vacation:
-    """
-    This function will filter all of vacations based on its yesr, month.
-    """
     vacations: QuerySet[Vacation] = Vacation.objects.filter(
-        Q(
-            from_date__month=month,
-            from_date__year=year,
-        )
-        | Q(
-            end_date__month=month,
-            end_date__year=year,
-        )
-    )
-    vacations = vacations.exclude(status=STATUS_CHOICES.REJECTED).exclude(
-        status=STATUS_CHOICES.CANCELED
-    )
+        Q(from_date__month=month, from_date__year=year) |
+        Q(end_date__month=month, end_date__year=year)
+    ).exclude(status__in=[STATUS_CHOICES.REJECTED, STATUS_CHOICES.CANCELED]).select_related('applying_user')
     return vacations
 
 
diff --git a/server/cshr/views/landing_page.py b/server/cshr/views/landing_page.py
index c5d436e6..da1236da 100644
--- a/server/cshr/views/landing_page.py
+++ b/server/cshr/views/landing_page.py
@@ -6,6 +6,7 @@
 from typing import Any
 
 from cshr.services.landing_page import landing_page_calendar_functionality
+from django.core.cache import cache
 
 
 class LandingPageApiView(GenericAPIView):
@@ -14,5 +15,13 @@ class LandingPageApiView(GenericAPIView):
     def get(self, request):
         month: str = request.query_params.get("month")
         year: str = request.query_params.get("year")
-        events: Any = landing_page_calendar_functionality(request.user, month, year)
-        return CustomResponse.success(data=events)
+        
+        # Use cache to store results if the same request is made frequently
+        cache_key = f"landing_page_{request.user.id}_{month}_{year}"
+        events = cache.get(cache_key)
+        
+        if not events:
+            events: Any = landing_page_calendar_functionality(request.user, month, year)
+            cache.set(cache_key, events, timeout=60*10)  # Cache for 10 minutes
+
+        return CustomResponse.success(data=events)
\ No newline at end of file

From afb3e2444431c0d8932c00c485e7d67835e07394 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 27 Aug 2024 12:40:14 +0300
Subject: [PATCH 2/2] style: Remove the calendar loading component

---
 client/public/config.js                     |  4 +-
 client/src/components/CalenderComponent.vue | 61 ++++-----------------
 server/cshr/services/meetings.py            |  2 +-
 server/cshr/utils/wrappers.py               |  6 +-
 4 files changed, 16 insertions(+), 57 deletions(-)

diff --git a/client/public/config.js b/client/public/config.js
index b1a3eb9e..f146c20e 100644
--- a/client/public/config.js
+++ b/client/public/config.js
@@ -1,6 +1,6 @@
 window.env = {
-  // SERVER_DOMAIN_NAME_API: 'https://cshrserver.gent01.qa.grid.tf/api', // Added for testing, this is a staging API
-  // SERVER_DOMAIN_NAME_WS: 'wss://cshrserver.gent01.qa.grid.tf/ws/notification', // Added for testing, this is a staging API
+  // SERVER_DOMAIN_NAME_API: 'https://bknd2.hr.threefold.tech/api', // Added for testing, this is a staging API
+  // SERVER_DOMAIN_NAME_WS: 'wss://bknd2.hr.threefold.tech/ws/notification', // Added for testing, this is a staging API
   SERVER_DOMAIN_NAME_API: 'http://127.0.0.1:8000/api', // Added for testing, this is the local server API
   SERVER_DOMAIN_NAME_WS: 'ws://127.0.0.1:8000/ws/notification', // Added for testing, this is the local server API
 };
\ No newline at end of file
diff --git a/client/src/components/CalenderComponent.vue b/client/src/components/CalenderComponent.vue
index a1146709..c4f52aac 100644
--- a/client/src/components/CalenderComponent.vue
+++ b/client/src/components/CalenderComponent.vue
@@ -23,24 +23,16 @@
     <div class="loading-container d-flex align-center justify-center my-5" v-if="isLoading">
       <v-alert density="compact" class="pa-5" type="info" text="Events are loading..."></v-alert>
     </div>
-    <div class="relative">
-      <div
-        v-if="isLoading"
-        class="calendar-loading"
-      >
-      <div v-for="index in 300" :key="index" class="grid-item" />
-      </div>
-      <div v-else>
-        <FullCalendar
-          class="fc"
-          :options="{
-            ...options,
-            events: filteredEvents as any
-          }"
-        >
-        </FullCalendar>
-      </div>
-    </div>
+
+  <FullCalendar
+    class="fc"
+    :options="{
+      ...options,
+      events: filteredEvents as any
+    }"
+  >
+  </FullCalendar>
+
   </div>
 
   <!-- Dialogs -->
@@ -504,37 +496,4 @@ button {
     background-color: rgb(100, 99, 99) !important;
   }
 }
-
-.calendar-loading {
-  width: 95%;
-  height: 800px;
-  margin: 0 auto;
-  background-color: rgba(90, 89, 89, 0.055);
-  display: grid;
-  grid-template-columns: repeat(30, 1fr);
-  grid-template-rows: repeat(30, 1fr);
-  gap: 15px;
-  color: white;
-  overflow: hidden;
-  place-items: center;
-}
-
-.grid-item {
-  background-color: rgba(255, 255, 255, 0.068);
-  animation: pulse 1.5s infinite ease-in-out;
-  height: 120px;
-  width: 120px;
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}
 </style>
diff --git a/server/cshr/services/meetings.py b/server/cshr/services/meetings.py
index 8db65f92..50aa5d72 100644
--- a/server/cshr/services/meetings.py
+++ b/server/cshr/services/meetings.py
@@ -25,7 +25,7 @@ def filter_meetings_by_month_and_year(user: User, month: str, year: str) -> Meet
     meetings: List[Meetings] = Meetings.objects.filter(
         date__month=month, date__year=year
     ).prefetch_related(
-        Prefetch('participants', queryset=User.objects.only('id', 'full_name'))
+        Prefetch('event_participants', queryset=User.objects.only('id', 'full_name'))
     )
     return meetings
 
diff --git a/server/cshr/utils/wrappers.py b/server/cshr/utils/wrappers.py
index e0f12c73..7510d3d9 100644
--- a/server/cshr/utils/wrappers.py
+++ b/server/cshr/utils/wrappers.py
@@ -29,9 +29,9 @@ def wrap_vacation_request(vacation: Vacation) -> LandingPageVacationsSerializer:
     vacation_data["type"] = LandingPageTypeEnum.VACATION.value
     vacation_data["applying_user_full_name"] = vacation.applying_user.full_name
     vacation_data["actual_days"] = vacation.actual_days
-    vacation_data["approvals"] = build_user_reporting_to_hierarchy(
-        vacation.applying_user
-    )
+    # vacation_data["approvals"] = build_user_reporting_to_hierarchy(
+    #     vacation.applying_user
+    # )
     return vacation_data