Display all public holidays, created new modal for holiday details, a…

…dded soe enhancements to the details modals.
codescalers · Nov 5, 2023 · e8a92ea · e8a92ea
1 parent 3fd4fb7
commit e8a92ea
Show file tree

Hide file tree

Showing 14 changed files with 322 additions and 163 deletions.
diff --git a/client/src/componants/calendar/Calender.svelte b/client/src/componants/calendar/Calender.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { CalenderEventTyoe, CalenderEventEmojeTyoe } from "../../utils/enums"
+  import { CalenderEventType, CalenderEventEmojeTyoe } from "../../utils/enums"
   import {createEventDispatcher, onMount} from 'svelte';
   import type { calendarItemsType, eventNameType } from "../../utils/types";
   import { monthNames } from "../../utils/calendar";
   import CalendarBirthdayModel from '../ui/modals/CalendarBirthdayModel.svelte';
   import CalendarMeetingModel from '../ui/modals/CalendarMeetingModel.svelte';
   import CalendarEventDataModal from '../ui/modals/CalendarEventDataModal.svelte';
   import CalendarVacationDataModal from '../ui/modals/CalendarVacationDataModal.svelte';
+  import CalendarPublicHolidayModel from '../ui/modals/CalendarPublicHolidayModel.svelte';
 
   export var headers: string[] = [];
   export let days: any[] = [];
@@ -208,34 +209,39 @@
   </div>
 {/if}
 
-{#if clickedItemOnModal && clickedItemOnModal.title == CalenderEventTyoe.vacation}
+{#if clickedItemOnModal && clickedItemOnModal.title == CalenderEventType.vacation}
   <CalendarVacationDataModal 
     bind:clickedItemOnModal 
     bind:showModal 
     currentVacationActive={clickedItemOnModal.vacation[0]}
     currentVacationID={+clickedItemOnModal.vacation[0].id}
     on:reject={removeItem}
   />
-{:else if clickedItemOnModal && clickedItemOnModal.title == CalenderEventTyoe.event}
+{:else if clickedItemOnModal && clickedItemOnModal.title == CalenderEventType.event}
   <CalendarEventDataModal
     bind:clickedItemOnModal 
     bind:showModal
     currentEventActive={clickedItemOnModal.event[0]}
   />
-{:else if clickedItemOnModal && clickedItemOnModal.title == CalenderEventTyoe.birthday}
+{:else if clickedItemOnModal && clickedItemOnModal.title == CalenderEventType.birthday}
   <CalendarBirthdayModel 
     bind:clickedItemOnModal 
     bind:showModal 
     currentUserActive={clickedItemOnModal.users[0]}
     currentUserID={clickedItemOnModal.users[0].id}
     />
-{:else if clickedItemOnModal && clickedItemOnModal.title == CalenderEventTyoe.meeting}
+{:else if clickedItemOnModal && clickedItemOnModal.title == CalenderEventType.meeting}
   <CalendarMeetingModel 
     bind:showModal
     bind:clickedItemOnModal 
     currentMeetingActive={clickedItemOnModal.meeting[0]}
     currentMeetingID={clickedItemOnModal.meeting[0].id}
   />
+{:else if clickedItemOnModal && clickedItemOnModal.title == CalenderEventType.publicHoliday}
+  <CalendarPublicHolidayModel
+    bind:showModal
+    bind:clickedItemOnModal
+  />
 {/if}
 
 <style>

diff --git a/client/src/componants/register/Register.svelte b/client/src/componants/register/Register.svelte
@@ -24,7 +24,8 @@
     export let isError: boolean = false;
 
     let image: HTMLImageElement;
-    let registeration: registeringData|any = registeringDataType
+    let imageSrc: string;
+    let registeration: registeringData = registeringDataType
 
     let isErrorfName: null | boolean,
         isErrorlName: null | boolean,
@@ -65,9 +66,12 @@
     let locationSelected: SelectOptionType[] = [];
     let reportingToSelected: SelectOptionType[] = [];
 
-    // let salaryField = [false,false,false,false]
-    // let showaddbutton = true;
-    // let thisSalaryInput: number = 0;
+    const defaultDate  = new Date(2000, 1, 1)
+    const year = defaultDate.getFullYear();
+    const month = String(defaultDate.getMonth() + 1).padStart(2, '0'); // Adding 1 to month since months are zero-based
+    const day = String(defaultDate.getDate()).padStart(2, '0');
+
+    let formattedDefaultDate = `${year}-${month}-${day}`;
 </script>
 
 <div class="bg-white p-3 card">
@@ -200,7 +204,7 @@
                 <Input
                     type="date"
                     label={'Birthday date'}
-                    bind:value={registeration.birthday}
+                    bind:value={formattedDefaultDate}
                     handleInput={validateBirthday}
                     size={150}
                     errorMessage="Invalid birthdate"
@@ -388,23 +392,26 @@
                         registeration.location = locationSelected[0].value;
                         registeration.gender = genderSelected[0].value;
                         registeration.user_type = userTypeSelected[0].value;
+                        registeration.birthday = formattedDefaultDate                        
                         if (image != undefined){
-                            registeration.image = image.src
+                            imageSrc = image.src
+                            registeration.image = imageSrc
                         } else {
                             registeration.image = ""
                         }
                         try {
-                            RegisterDataService.register(registeration);
-                        } catch (error) {
-                            isError = true;
-                        } finally {
-                            isLoading = false;
+                            isError = false;
+                            await RegisterDataService.register(registeration);
                             clearUserData(registeration)
                             userTypeSelected = []
                             genderSelected = []
                             locationSelected = []
                             teamSelected = []
                             reportingToSelected = []
+                        } catch (error) {
+                            isError = true;
+                        } finally {
+                            isLoading = false;
                         }
                         return isError;
                     }}

diff --git a/client/src/componants/settings/UpdateProfile.svelte b/client/src/componants/settings/UpdateProfile.svelte
@@ -36,6 +36,7 @@
                     bind:selected={userSelected}
                     isTop={true}
                     multiple={false}
+                    usersInAdminOffice={true}
                 />
                 <div class="col-12">
                     <div class="form-outline mt-4  d-flex justify-content-center">

diff --git a/client/src/componants/ui/modals/CalendarBirthdayModel.svelte b/client/src/componants/ui/modals/CalendarBirthdayModel.svelte
@@ -17,9 +17,9 @@
 </script>
 
 <CalendarModal bind:showModal>
-    <header slot="header">
+    <header slot="header" class="text-center w-100">
         <h6 class="modal-title" id="exampleModalLongTitle">
-            {CalenderEventEmojeTyoe.birthday} {clickedItemOnModal.title.toUpperCase()}
+            <strong>{clickedItemOnModal.date} Birthdays {CalenderEventEmojeTyoe.birthday}</strong>
         </h6>
     </header>
     <div slot="body" class="bg-confetti-animated">
@@ -81,9 +81,11 @@
     </div>
     <div slot="modal-footer">
         <button type="button" class="abtn btn-secondary" on:click={() => {
-            document.getElementById("body-pd").style.overflow = "auto";
-            showModal = false;
-        }}>Close</button>
+          document.getElementById("body-pd").style.overflow = "auto";
+          showModal = false;
+        }}>
+          Close
+        </button>
     </div>
 </CalendarModal>
 

diff --git a/client/src/componants/ui/modals/CalendarEventDataModal.svelte b/client/src/componants/ui/modals/CalendarEventDataModal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { CalenderEventEmojeTyoe } from "../../../utils/enums";
   import type {
     calendarItemsType,
     eventItemType,
@@ -28,9 +29,14 @@
 
 
 <CalendarModal bind:showModal>
-  <header slot="header">
+  <header slot="header" class="text-center w-100">
     <h6 class="modal-title" id="exampleModalLongTitle">
-      {clickedItemOnModal.title.toUpperCase()}
+      <strong>
+        {clickedItemOnModal.event[0].from_date.year} -
+        {clickedItemOnModal.event[0].from_date.month} -
+        {clickedItemOnModal.event[0].from_date.day}
+        Events
+        {CalenderEventEmojeTyoe.event}</strong>
     </h6>
   </header>
   <div slot="body">
@@ -94,4 +100,13 @@
       {/if}
     </div>
   </div>
+
+  <div slot="modal-footer">
+    <button type="button" class="abtn btn-secondary" on:click={() => {
+      document.getElementById("body-pd").style.overflow = "auto";
+      showModal = false;
+    }}>
+      Close
+    </button>
+  </div>
 </CalendarModal>
diff --git a/client/src/componants/ui/modals/CalendarMeetingModel.svelte b/client/src/componants/ui/modals/CalendarMeetingModel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { CalenderEventEmojeTyoe } from "../../../utils/enums";
   import type {
     calendarItemsType,
     meetingItemType,
@@ -32,9 +33,15 @@
 </script>
 
 <CalendarModal bind:showModal>
-  <header slot="header">
+  <header slot="header" class="text-center w-100">
     <h6 class="modal-title" id="exampleModalLongTitle">
-      {clickedItemOnModal.title.toUpperCase()}
+      <strong>
+        {clickedItemOnModal.meeting[0].date.year} - 
+        {clickedItemOnModal.meeting[0].date.month} - 
+        {clickedItemOnModal.meeting[0].date.day} 
+        Meetings 
+        {CalenderEventEmojeTyoe.meeting}
+      </strong>
     </h6>
   </header>
   <div slot="body">
@@ -124,6 +131,14 @@
       {/if}
     </div>
   </div>
+  <div slot="modal-footer">
+    <button type="button" class="abtn btn-secondary" on:click={() => {
+      document.getElementById("body-pd").style.overflow = "auto";
+      showModal = false;
+    }}>
+      Close
+    </button>
+  </div>
 </CalendarModal>
 
 <style>

diff --git a/client/src/componants/ui/modals/CalendarPublicHolidayModel.svelte b/client/src/componants/ui/modals/CalendarPublicHolidayModel.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { calendarItemsType } from "../../../utils/types";
+  import CalendarModal from "./CalendarModal.svelte";
+  import { CalenderEventEmojeTyoe } from "../../../utils/enums"
+
+  export let showModal: boolean = false;
+  export let clickedItemOnModal: calendarItemsType;
+
+</script>
+
+<CalendarModal bind:showModal>
+  <header slot="header" class="text-center w-100">
+      <h6 class="modal-title" id="exampleModalLongTitle">
+          <strong>{clickedItemOnModal.date} Public holidays {CalenderEventEmojeTyoe.publicHoliday}</strong>
+      </h6>
+  </header>
+
+  <div slot="body" class="card bg-confetti-animated">
+    <div class="card-title title p-4 text-center">
+      {#each clickedItemOnModal.holidays as holiday, index}
+        <strong>{holiday.location.country.trimEnd()}</strong>
+          {#if clickedItemOnModal.holidays.length > 1 && index + 1 != clickedItemOnModal.holidays.length }
+        <strong><small class="--and">& </small></strong>
+        {/if}
+      {/each}
+      Public holidays
+    </div>
+    <div class="card-body body">
+      On the {#each clickedItemOnModal.holidays as holiday}<strong>{holiday.location.country + ', '}</strong>{/each} {clickedItemOnModal.holidays.length > 1 ? 'calendars' : 'calendar'},the date <strong>{clickedItemOnModal.holidays[0].holiday_date}</strong> is a public holiday in Egypt. We hope you and your family have a peaceful and enjoyable holiday.
+
+      Please be aware that our Egypt office will be closed on this date.
+
+      <strong>Thank you! :)</strong>
+    </div>
+  </div>
+
+  <div slot="modal-footer">
+      <button type="button" class="abtn btn-secondary" on:click={() => {
+          document.getElementById("body-pd").style.overflow = "auto";
+          showModal = false;
+      }}>Close</button>
+  </div>
+</CalendarModal>
+
+<style scoped>
+.--and{
+  margin-left: 3px;
+  margin-right: 3px;
+  color: coral;
+}
+
+.title{
+  background: #f5f5dce0;
+  margin: 10px;
+  font-size: 23px
+}
+
+.body{
+  margin-top: 15px;
+  margin-bottom: 15px;
+  padding: 20px;
+  border: 1px solid #e2e0e2;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-left-width: 15px;
+  border-left: inset;
+}
+
+.bg-confetti-animated {
+  background-repeat: repeat-x;
+  background-position: top -10px center;
+  background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
+}
+
+</style>