View holidays calendar (#1488)

* view holidays calendar * fixed edit date bug not working on holidays * fixed the date format on holidays * fixed holidays date format and refactored * fixied compnau props on user context * updated holidays header title * chnage the holidays year to view holidays of that particular year * Fixed the date blnk issue when date format is not in dd.mm.yy format * commented out the leaves, holidays and integrations from the dashboard --------- Co-authored-by: Apoorv Tiwari <[email protected]>
saeloun · Oct 20, 2023 · 021ecb5 · 021ecb5
1 parent b30ffdb
commit 021ecb5
Show file tree

Hide file tree

Showing 13 changed files with 193 additions and 144 deletions.
diff --git a/app/controllers/internal_api/v1/companies_controller.rb b/app/controllers/internal_api/v1/companies_controller.rb
@@ -27,7 +27,7 @@ def update
     authorize current_company
 
     if current_company.update!(company_params)
-      render json: { notice: I18n.t("companies.update.success") }
+      render json: { notice: I18n.t("companies.update.success"), company: current_company }
     end
   end
 

diff --git a/app/javascript/src/common/CustomYearPicker/index.tsx b/app/javascript/src/common/CustomYearPicker/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 
 import classNames from "classnames";
-import { getYear } from "date-fns";
 import { CaretCircleLeftIcon, CaretCircleRightIcon } from "miruIcons";
 
 type customYearPickerProps = {
@@ -31,7 +30,7 @@ const CustomYearPicker = ({
     return ans;
   };
 
-  const years = range(1920, getYear(new Date()) + 1);
+  const years = range(1920, currentYear + 1);
 
   const handleOnChange = selected => {
     const current = parseInt(selected);
@@ -54,14 +53,9 @@ const CustomYearPicker = ({
       {currentYear && (
         <select
           className={classNames(defaultYearClassName, yearClassName)}
+          value={currentYear}
           onChange={e => handleOnChange(e.target.value)}
         >
-          <option
-            className="text-base font-medium text-white"
-            value={currentYear}
-          >
-            {currentYear}
-          </option>
           {years.map((year, index) => (
             <option
               className="text-base font-medium text-white"

diff --git a/app/javascript/src/components/App.tsx b/app/javascript/src/components/App.tsx
@@ -17,7 +17,6 @@ const App = props => {
     confirmedUser,
     googleOauthSuccess,
     avatarUrl,
-    company,
     calendarEnabled,
     calendarConnected,
   } = props;
@@ -26,6 +25,7 @@ const App = props => {
   const [isDesktop, setIsDesktop] = useState<boolean>(window.innerWidth > 1023);
   const [selectedTab, setSelectedTab] = useState(null);
   const [currentAvatarUrl, setCurrentAvatarUrl] = useState(avatarUrl);
+  const [company, setCompany] = useState(props.company);
 
   const handleOverlayVisibility = (isOverlayVisible: boolean) => {
     const overlayEl = document.getElementById("overlay");
@@ -62,6 +62,7 @@ const App = props => {
         selectedTab,
         setSelectedTab,
         company,
+        setCompany,
       }}
     >
       <AuthProvider>

diff --git a/app/javascript/src/components/Profile/Organization/Edit/index.tsx b/app/javascript/src/components/Profile/Organization/Edit/index.tsx
@@ -10,6 +10,7 @@ import companiesApi from "apis/companies";
 import companyProfileApi from "apis/companyProfile";
 import Loader from "common/Loader/index";
 import { currencyList } from "constants/currencyList";
+import { useUserContext } from "context/UserContext";
 import { sendGAPageView } from "utils/googleAnalytics";
 
 import { StaticPage } from "./StaticPage";
@@ -113,6 +114,7 @@ const errorState = {
 
 const OrgEdit = () => {
   const navigate = useNavigate();
+  const { setCompany } = useUserContext();
   const [orgDetails, setOrgDetails] = useState(initialState);
 
   const [errDetails, setErrDetails] = useState(errorState);
@@ -546,7 +548,8 @@ const OrgEdit = () => {
       if (orgDetails.logo) {
         formD.append("company[logo]", orgDetails.logo);
       }
-      await companiesApi.update(orgDetails.id, formD);
+      const res = await companiesApi.update(orgDetails.id, formD);
+      setCompany(res.data.company);
       setIsDetailUpdated(false);
       setIsLoading(false);
     } catch {

diff --git a/app/javascript/src/components/Profile/Organization/Holidays/Details/TableRow.tsx b/app/javascript/src/components/Profile/Organization/Holidays/Details/TableRow.tsx
@@ -1,18 +1,15 @@
 import React from "react";
 
-import dayjs from "dayjs";
-
 const TableRow = ({ holiday, key }) => {
   const { date, name } = holiday;
-  const dateFormat = "DD.MM.YYYY";
 
   return (
     <tr className="flex w-full" key={key}>
       <td
         className="flex w-6/12 items-center border-b border-miru-gray-400 py-6 pr-2 text-left text-sm font-medium text-miru-dark-purple-1000 last:border-0"
         scope="col"
       >
-        {dayjs(date).format(dateFormat)}
+        {date}
       </td>
       <td
         className="flex w-6/12 items-center border-b border-miru-gray-400 py-6 pr-2 text-left text-sm font-medium text-miru-dark-purple-1000 last:border-0"

diff --git a/app/javascript/src/components/Profile/Organization/Holidays/Details/index.tsx b/app/javascript/src/components/Profile/Organization/Holidays/Details/index.tsx
@@ -9,13 +9,14 @@ import TableRow from "./TableRow";
 import HolidayModal from "../HolidaysModal";
 
 const Details = ({
-  toggleCalendarModal,
-  optionalHolidayList,
-  holidaysList,
-  showCalendar,
-  editAction,
   currentYear,
   setCurrentYear,
+  dateFormat,
+  editAction,
+  holidaysList,
+  optionalHolidayList,
+  showCalendar,
+  toggleCalendarModal,
 }) => {
   const CalendarButton = ({ result, date, className }) => (
     <button
@@ -29,13 +30,23 @@ const Details = ({
   );
 
   const tileContent = ({ date }) => {
-    let result;
-    if (
-      (result = holidaysList?.find(
-        o => o.date === dayjs(date).format("DD-MM-YYYY")
-      ))
-    ) {
-      return <CalendarButton className="holiday" date={date} result={result} />;
+    const presentDate = dayjs(date).format(dateFormat);
+    const isHoliday = holidaysList?.find(
+      holiday => holiday.date === presentDate
+    );
+
+    const isOptionalHoliday = optionalHolidayList?.find(
+      holiday => holiday.date === presentDate
+    );
+
+    if (isHoliday || isOptionalHoliday) {
+      return (
+        <CalendarButton
+          className={isHoliday ? "holiday" : "optional-holiday"}
+          date={date}
+          result={isHoliday || isOptionalHoliday}
+        />
+      );
     }
 
     return <button>{date.getDate()}</button>;
@@ -104,6 +115,8 @@ const Details = ({
       </div>
       {showCalendar && (
         <HolidayModal
+          currentYear={currentYear}
+          setCurrentYear={setCurrentYear}
           showCalendar={showCalendar}
           tileContent={tileContent}
           toggleCalendarModal={toggleCalendarModal}

diff --git a/app/javascript/src/components/Profile/Organization/Holidays/EditHolidays/index.tsx b/app/javascript/src/components/Profile/Organization/Holidays/EditHolidays/index.tsx
@@ -15,31 +15,32 @@ import Header from "./Header";
 import { customStyles } from "./utils";
 
 const EditHolidays = ({
-  setShowDatePicker,
-  holidayList,
-  showDatePicker,
-  handleDatePicker,
-  handleHolidateNameChange,
-  handleDeleteHoliday,
-  handleCheckboxClick,
+  isDesktop,
+  dateFormat,
+  currentYear,
+  setCurrentYear,
   enableOptionalHolidays,
+  setEnableOptionalHolidays,
+  holidayList,
+  optionalHolidaysList,
   totalOptionalHolidays,
-  handleChangeTotalOpHoliday,
-  handleAddHoliday,
+  isDisableUpdateBtn,
   optionalRepetitionType,
-  optionalHolidaysList,
+  wrapperRef,
   optionalWrapperRef,
-  handleChangeRepetitionOpHoliday,
-  setShowOptionalDatePicker,
+  showDatePicker,
+  setShowDatePicker,
   showOptionalDatePicker,
-  wrapperRef,
-  setEnableOptionalHolidays,
-  isDesktop,
+  setShowOptionalDatePicker,
+  handleAddHoliday,
   handleCancelAction,
+  handleChangeRepetitionOpHoliday,
+  handleChangeTotalOpHoliday,
+  handleCheckboxClick,
+  handleDatePicker,
+  handleDeleteHoliday,
+  handleHolidateNameChange,
   updateHolidayDetails,
-  currentYear,
-  setCurrentYear,
-  isDisableUpdateBtn,
 }) => (
   <>
     <Header
@@ -61,7 +62,7 @@ const EditHolidays = ({
               holidayList.map((holiday, index) => (
                 <div className="mb-4 flex flex-row" key={index}>
                   <div className="flex w-11/12 flex-row py-2">
-                    <div className="relative w-1/2" ref={wrapperRef}>
+                    <div className="relative w-1/2">
                       <div
                         onClick={() => {
                           setShowDatePicker({
@@ -78,10 +79,7 @@ const EditHolidays = ({
                           labelClassName="cursor-pointer"
                           name={`Date_${index}`}
                           type="text"
-                          value={
-                            holiday.date &&
-                            dayjs(holiday.date).format("DD.MM.YYYY")
-                          }
+                          value={holiday.date}
                         />
                         <CalendarIcon
                           className="absolute top-2 right-2 m-2"
@@ -92,6 +90,7 @@ const EditHolidays = ({
                       {index == showDatePicker.index &&
                         showDatePicker.visibility && (
                           <SingleYearDatePicker
+                            dateFormat={dateFormat}
                             selectedYear={currentYear}
                             setVisibility={showDatePicker.visibility}
                             wrapperRef={wrapperRef}
@@ -207,10 +206,7 @@ const EditHolidays = ({
                   optionalHolidaysList.map((optionalHoliday, index) => (
                     <div className="flex flex-row" key={index}>
                       <div className="flex w-11/12 flex-row py-3">
-                        <div
-                          className="relative w-1/2"
-                          ref={optionalWrapperRef}
-                        >
+                        <div className="relative w-1/2">
                           <div
                             onClick={() =>
                               setShowOptionalDatePicker({
@@ -227,10 +223,7 @@ const EditHolidays = ({
                               labelClassName="cursor-pointer"
                               name={`op_holiday_date_picker_${index}`}
                               type="text"
-                              value={
-                                optionalHoliday.date &&
-                                dayjs(optionalHoliday.date).format("DD.MM.YYYY")
-                              }
+                              value={optionalHoliday.date}
                             />
                             <CalendarIcon
                               className="absolute top-2 right-2 m-2"
@@ -241,11 +234,12 @@ const EditHolidays = ({
                           {index == showOptionalDatePicker.index &&
                             showOptionalDatePicker.visibility && (
                               <SingleYearDatePicker
+                                dateFormat={dateFormat}
                                 selectedYear={currentYear}
                                 wrapperRef={optionalWrapperRef}
                                 date={
                                   optionalHoliday.date ||
-                                  dayjs(`${currentYear}-01-01`).toDate()
+                                  dayjs().set("year", currentYear)
                                 }
                                 handleChange={e =>
                                   handleDatePicker(e, index, true)