Added Public holidays featrue, re-aligned the home-page calender.

codescalers · Nov 4, 2023 · 9c8dbfb · 9c8dbfb
1 parent ed42d38
commit 9c8dbfb
Show file tree

Hide file tree

Showing 23 changed files with 415 additions and 141 deletions.
diff --git a/client/public/global.css b/client/public/global.css
@@ -339,3 +339,40 @@ h1, h2, h3, h4, h5, h6 {
 .stop-scroll{
     overflow: hidden!important;
 }
+
+.event__public_holiday{
+    text-align: center;
+    color: white;
+    margin-top: 15px;
+}
+.event__meeting{
+    text-align: center;
+    color: white;
+    margin-top: 67px;
+}
+.event__vacation{
+    text-align: center;
+    color: white;
+    margin-top: 39px !important;
+}
+.event__event{
+    text-align: center;
+    color: white;
+    margin-top: 20px !important;
+}
+.event__birthday{
+    text-align: center;
+    color: white;
+    margin-top: -95px !important;
+    width: 30px;
+    border-radius: 50%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 125px;
+    /* padding: 20px; */
+}
+.p-relative{
+    position: relative;
+}
diff --git a/client/src/componants/calendar/CalendarDatePicker.svelte b/client/src/componants/calendar/CalendarDatePicker.svelte
@@ -63,7 +63,7 @@
     style={` opacity: ${isLoading ? '0.1' : '1'}`}
   >
     {#if errorMessage}
-      <div>
+      <div class="mt-3">
         <DatePicker
           bind:startDate
           bind:endDate

diff --git a/client/src/componants/calendar/CalendarEventsFilter.svelte b/client/src/componants/calendar/CalendarEventsFilter.svelte
@@ -1,72 +1,94 @@
 <script lang="ts">
-    import type { eventNameType } from '../../utils/types';
-    export let eventNames: Set<eventNameType>;
-  
-    function eventChanger(event: eventNameType) {
-      if (eventNames.has(event)) {
-        eventNames.delete(event);
-        eventNames = new Set([...eventNames]);
-        
-      } else {
-        eventNames.add(event);
-        eventNames = new Set([...eventNames]);
-      }
+  import type { eventNameType } from '../../utils/types';
+  import { CalenderEventEmojeTyoe } from "../../utils/enums"
+  export let eventNames: Set<eventNameType>;
+
+  function eventChanger(event: eventNameType) {      
+    if (eventNames.has(event)) {
+      eventNames.delete(event);
+      eventNames = new Set([...eventNames]);
+      
+    } else {
+      eventNames.add(event);
+      eventNames = new Set([...eventNames]);
     }
+  }
 </script>
-
-<div class="row align-items-center mt-4">
-    <div class="col-6 d-flex justify-content-center mb-2">
+
+<div class="card filter mt-4">
+  <div class="card-title mt-4" style="margin-left: 15px;">
+    <strong>Calendar Filters</strong>
+    <br />
+    <small>Click on any filter to hide the value of it from the calendar</small>
+  </div>
+  <div class="row align-items-center p-4">
+    <div class="col-6 d-flex justify-content-start">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="task--danger hint-labels d-flex flex-row justify-content-between"
         on:click={() => {eventChanger('meeting');}}
       >
-        <span> 💼 Meeting </span>
+        <span>Meetings {CalenderEventEmojeTyoe.meeting}</span>
         <span> {eventNames.has('meeting') ? '✔️' : '❌'} </span>
       </div>
     </div>
-    <div class="col-6 d-flex justify-content-start mb-2">
+    <div class="col-6 d-flex justify-content-end">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
-        class="task--info hint-labels  d-flex flex-row justify-content-between"
+        class="task--info hint-labels d-flex flex-row justify-content-between"
         on:click={() => {
           eventChanger('event');
         }}
       >
-        <span> 🎉 Event </span>
+        <span>Events {CalenderEventEmojeTyoe.event}</span>
         <span> {eventNames.has('event') ? '✔️' : '❌'} </span>
       </div>
     </div>
-    <div class="col-6 d-flex mb-4 justify-content-center">
+    <div class="col-6 d-flex mt-2 justify-content-start">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="task--warning hint-labels d-flex flex-row justify-content-between"
         on:click={() => {
           eventChanger('vacation');
         }}
       >
-        <span> 🌴 Vacation </span>
+        <span>Vacations {CalenderEventEmojeTyoe.vacation}</span>
         <span> {eventNames.has('vacation') ? '✔️' : '❌'} </span>
       </div>
     </div>
-    <div class="col-6 d-flex mb-4 justify-content-start">
+    <div class="col-6 d-flex mt-2 justify-content-end">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div
+        class="task--success hint-labels d-flex flex-row justify-content-between"
+        on:click={() => {
+          eventChanger('public_holiday');
+        }}
+      >
+        <span>Public-Holidays {CalenderEventEmojeTyoe.publicHoliday}</span>
+        <span> {eventNames.has('public_holiday') ? '✔️' : '❌'} </span>
+      </div>
+    </div>
+    <div class="col-6 d-flex mt-2 justify-content-center">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
         class="task--primary hint-labels d-flex flex-row justify-content-between"
         on:click={() => {
           eventChanger('birthday');
         }}
       >
-        <span> 🎂 Birthday </span>
+        <span>Birthday {CalenderEventEmojeTyoe.birthday}</span>
         <span> {eventNames.has('birthday') ? '✔️' : '❌'} </span>
       </div>
     </div>
+  </div>
 </div>
-
-<style>
-    .hint-labels {
-        cursor: pointer;
-        border-radius: 0.5rem;
-        padding: 0.5rem;
-        width: 10rem;
-    }
+
+<style scoped>
+  .hint-labels {
+    cursor: pointer;
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    width: 100%;
+    text-align: center !important;
+    font-weight: 600;
+  }
 </style>
diff --git a/client/src/componants/calendar/CalendarForm.svelte b/client/src/componants/calendar/CalendarForm.svelte
@@ -22,7 +22,7 @@
   let datePickerDisabled = false;
   let VacationCalculator: number;
 
-  const handleVacationCalculator = (event: { detail: { text: number; }; }) => {
+  const handleVacationCalculator = (event: { detail: { text: number; }; }) => {    
     VacationCalculator = event.detail.text;
   };
 
@@ -32,7 +32,7 @@
   
   </script>
 
-  <div class="container">
+  <div class="card mt-4">
     <CalendarDatePicker
       onlyStart={formToggle === 1}
       bind:startDate

diff --git a/client/src/componants/calendar/Calender.svelte b/client/src/componants/calendar/Calender.svelte
@@ -20,8 +20,14 @@
   let showModal: boolean = false;
   
   let dispatch = createEventDispatcher();
-  
-  const clickedItem = (item: calendarItemsType) => {
+ 
+  const capitalize = (name: string) => {
+    if(name.includes("_")){
+      name = name.replace("_", " ")
+    }
+    return name[0].toLocaleUpperCase()+name.slice(1)
+  }
+  const clickedItem = (item: calendarItemsType) => {    
     clickedItemOnModal = item
     showModal = true
   }
@@ -68,7 +74,7 @@
 </script>
 
 {#if isLoading}
-  <div class="loading-calender">
+  <div class="loading-calender mt-4">
     {#each [1,2,3,4,5,6,7] as row}
       <div class="">
         {#each [1,2,3,4,5] as col }
@@ -78,7 +84,7 @@
     {/each}
   </div>
 {:else}
-  <div class="calendar-container mx-3 my-0">
+  <div class="calendar-container mx-3 my-0 mt-4">
     <div class="calendar-header">
       <h1>
         <button class="icon-btn" on:click={() => prev()}>&lt;</button>
@@ -105,33 +111,96 @@
 
       {#if items.length > 0}
         {#each items as item}
-          {#if eventNames.has(item.eventName)}
+          {#if eventNames.has(item.eventName) && item.eventName === 'public_holiday'}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <section
+              on:click={()=>dispatch('itemClick',item)}
+              class="task event__public_holiday {item.className}"
+              style="grid-column: {item.startCol} / span {item.len};      
+                grid-row: {item.startRow};  
+                align-self: {item.isBottom?'end':'center'};"
+                >
+                <button
+                  type="button"
+                  class="modal-btn m-0 pl-0 {item.className}"
+                  on:click={() => {clickedItem(item)}}
+                >
+                  {capitalize(item.title)} {CalenderEventEmojeTyoe.publicHoliday}
+                </button>
+            </section>
+          {:else if eventNames.has(item.eventName) && item.eventName === 'meeting'}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <section
+              title="Click to see all meetings today!"
+              on:click={()=>dispatch('itemClick',item)}
+              class="task event__meeting {item.className}"
+              style="grid-column: {item.startCol} / span {item.len};      
+                grid-row: {item.startRow};  
+                align-self: {item.isBottom?'end':'center'};"
+                >
+                <strong>
+
+                  <button
+                    type="button"
+                    class="modal-btn m-0 pl-0 {item.className}"
+                    on:click={() => {clickedItem(item)}}
+                  >
+                    {capitalize(item.title)} {CalenderEventEmojeTyoe.meeting}
+                  </button>
+
+                </strong>
+            </section>
+          {:else if eventNames.has(item.eventName) && item.eventName === "vacation"}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <section
-              on:click={()=>dispatch('itemClick',item)} 
-              class="task {item.className}"
+              on:click={()=>dispatch('itemClick',item)}
+              class="task event__vacation {item.className}"
               style="grid-column: {item.startCol} / span {item.len};      
-              grid-row: {item.startRow};  
-              align-self: {item.isBottom?'end':'center'};"
-              >
-              <button
-                type="button"
-                class="modal-btn m-0 pl-0 "
-                style="text-align: left;"
-                on:click={() => {clickedItem(item)}}
+                grid-row: {item.startRow};  
+                align-self: {item.isBottom?'end':'center'};"
+                >
+                <button
+                  type="button"
+                  class="modal-btn m-0 pl-0 {item.className}"
+                  on:click={() => {clickedItem(item)}}
                 >
-                {#if item.title == CalenderEventTyoe.vacation}
-                  {CalenderEventEmojeTyoe.vacation} {item.title.toUpperCase()}
-                {:else if item.title == CalenderEventTyoe.event}
-                  {CalenderEventEmojeTyoe.event} {item.title.toUpperCase()}
-                {:else if item.title == CalenderEventTyoe.birthday}
-                  {CalenderEventEmojeTyoe.birthday} {item.title.toUpperCase()}
-                {:else if item.title == CalenderEventTyoe.meeting}
-                  {CalenderEventEmojeTyoe.meeting} {item.title.toUpperCase()}
-                {/if}
-              </button>
+                  {capitalize(item.title)} {CalenderEventEmojeTyoe.vacation}
+                </button>
+            </section>
+          {:else if eventNames.has(item.eventName) && item.eventName === "event"}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <section
+              on:click={()=>dispatch('itemClick',item)}
+              class="task event__event {item.className}"
+              style="grid-column: {item.startCol} / span {item.len};      
+                grid-row: {item.startRow};  
+                align-self: {item.isBottom?'end':'center'};"
+                >
+                <button
+                  type="button"
+                  class="modal-btn m-0 pl-0 {item.className}"
+                  on:click={() => {clickedItem(item)}}
+                >
+                  {capitalize(item.title)} {CalenderEventEmojeTyoe.event}
+                </button>
+            </section>
+            {:else if eventNames.has(item.eventName) && item.eventName === "birthday"}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <section
+              on:click={()=>dispatch('itemClick',item)}
+              class="task event__birthday {item.className}"
+              style="grid-column: {item.startCol} / span {item.len};      
+                grid-row: {item.startRow};  
+                align-self: {item.isBottom?'end':'center'};"
+                >
+                <button
+                  type="button"
+                  class="modal-btn m-0 pl-0 {item.className}"
+                  on:click={() => {clickedItem(item)}}
+                >
+                  {CalenderEventEmojeTyoe.birthday}
+                </button>
             </section>
-            <!--  -->
           {/if}
         {/each}
       {/if}
@@ -287,16 +356,7 @@
   }
 
   .task {
-    border-left-width: 3px;
-    padding: 8px 12px;
-    margin: 10px;
-    border-left-style: solid;
-    font-size: 14px;
-    position: relative;
-    align-self: center;
     z-index: 2;
-    border-radius: 15px;
-    text-align: left;
     cursor: pointer;
   }
   .task:hover {
@@ -316,9 +376,15 @@
   :global(.task--warning) {
     border-left-color: #fdb44d;
     background: #fef0db;
-    color: #fc9b10;
+    color: #fc9b10 !important;
     align-self: flex-start!important;
-    margin-top: 5px!important;
+  }
+  :global(.task--success) {
+    border-left-color: #fef0db;
+    background: #5f84d0;
+    color: white !important;
+    /* align-self: flex-start!important; */
+    /* margin-top: 55px; */
   }
   :global(.task--danger) {
     border-left-color: #fa607e;

diff --git a/client/src/componants/compensations/CompensationForm.svelte b/client/src/componants/compensations/CompensationForm.svelte
@@ -82,9 +82,7 @@
                     try {
                         CompensationData.from_date = startDate;
                         CompensationData.end_date = endDate;
-                        const axios = await CompensationsDataService.post(CompensationData);
-                        console.log(axios.data.results);
-
+                        const axios = await CompensationsDataService.post(CompensationData);                        
                         dispatch('message', {
                             postedCompensation: axios.data.results
                         });