Merge pull request #2027 from OneCommunityGlobal/revert-2021-revert-2…

…009-Abdel_update_bleu_square_scheduler Revert "Revert "Abdel update bleu square scheduler""
OneCommunityGlobal · Mar 5, 2024 · fab2ac8 · fab2ac8
2 parents ea5ab79 + ee82f65
commit fab2ac8
Show file tree

Hide file tree

Showing 17 changed files with 1,096 additions and 797 deletions.
diff --git a/src/actions/reasonsActions.js b/src/actions/reasonsActions.js
diff --git a/src/actions/timeOffRequestAction.js b/src/actions/timeOffRequestAction.js
@@ -129,7 +129,7 @@ const isTimeOffRequestIncludeCurrentWeek = request => {
   const requestEndingDate = moment(endingDate);
 
   const currentWeekStart = moment().startOf('week').add(1, 'second');
-  const currentWeekEnd = moment().endOf('week').subtract(1, 'second');
+  const currentWeekEnd = moment().endOf('week').subtract(1, 'day').subtract(1, 'second');
 
   // Check if the current week falls within the date range of the request
   if (

diff --git a/src/components/Dashboard/TimeOffRequestDetailModal.jsx b/src/components/Dashboard/TimeOffRequestDetailModal.jsx
@@ -1,4 +1,4 @@
-import { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, Row, Col, Container } from 'reactstrap';
 import moment from 'moment';
 import 'moment-timezone';
 import { useSelector, useDispatch } from 'react-redux';
@@ -11,54 +11,73 @@ const TimeOffRequestDetailModal = () => {
     dispatch(hideTimeOffRequestModal());
   };
 
+  const getWeekIntervals = data => {
+    const dateOfLeaveStr = moment(data.startingDate)
+      .tz('America/Los_Angeles')
+      .format()
+      .split('T')[0];
+    const intervals = [];
+    let startDate = moment(dateOfLeaveStr);
+    for (let i = 0; i < data.duration; i++) {
+      const endDate = startDate.clone().endOf('week');
+      intervals.push([startDate.format('MM-DD-YYYY'), endDate.format('MM-DD-YYYY')]);
+      startDate = startDate.add(1, 'week').startOf('week');
+    }
+    return [intervals, startDate];
+  };
+
   return (
     <div>
       <Modal isOpen={isOpen} toggle={() => detailModalClose()} returnFocusAfterClose={true}>
         <ModalHeader toggle={() => detailModalClose()}>Time Off Details</ModalHeader>
         <ModalBody className="time-off-detail-modal">
-          <Row>
-            <Col>
-              <p className="time-off-detail-modal-title">
+          <Container>
+            <Row>
+              <Col className="mb-1">
                 {data?.onVacation
                   ? `${data?.name} Is Not Available this Week`
                   : `${data?.name} Is Not Available Next Week`}
-              </p>
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <p>
-                {data?.onVacation
-                  ? `${data?.name} Is on vacation:`
-                  : `${data?.name} Is going on vacation:`}
-              </p>
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <p className="time-off-detail-modal-sub-heading">From:</p>
-              <p className="time-off-detail-modal-sub-section">
-                {moment(data?.startingDate).format('YYYY-MM-DD')}
-              </p>
-            </Col>
-          </Row>
-          {/* <div className="time-off-detail-modal-section">
-            
-          </div> */}
-          <Row>
-            <Col>
-              <p className="time-off-detail-modal-sub-heading">To:</p>
-              <p className="time-off-detail-modal-sub-section">
-                {moment(data?.endingDate).format('YYYY-MM-DD')}
-              </p>
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <p className="time-off-detail-modal-sub-heading">For The Following reason:</p>
-              <p className="time-off-detail-modal-sub-section">{data?.reason}</p>
-            </Col>
-          </Row>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                {' '}
+                {`${data?.name} is going to be absent for the following`}
+                {getWeekIntervals(data)[0]?.length > 1 ? ` weeks:` : ` week:`}
+              </Col>
+            </Row>
+            <Row className="pl-2">
+              <Col className="mb-2 font-italic">
+                {getWeekIntervals(data)[0].map((week, index) => (
+                  <li key={index}>
+                    <b>{`From `}</b>
+                    {week[0]}
+                    <b>{` To `}</b>
+                    {week[1]}
+                  </li>
+                ))}
+              </Col>
+            </Row>
+            <Row>
+              <Col>Due to the reason of:</Col>
+            </Row>
+            <Row className="pl-2">
+              <Col className="mb-2 font-italic">
+                <li>{data?.reason}</li>
+              </Col>
+            </Row>
+            <Row>
+              <Col>The return day is:</Col>
+            </Row>
+            <Row className="pl-2">
+              <Col className="mb-2 font-italic">
+                <li>
+                  <b>{`On `}</b>
+                  {getWeekIntervals(data)[1].format('MM-DD-YYYY')}
+                </li>
+              </Col>
+            </Row>
+          </Container>
         </ModalBody>
       </Modal>
     </div>

diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx
@@ -340,6 +340,7 @@ function LeaderBoard({
                     (userOnTimeOff[item.personId] || userGoingOnTimeOff[item.personId]) && (
                       <div>
                         <button
+                          style={{ width: '35px', height: 'auto' }}
                           type="button"
                           onClick={() => {
                             const request = userOnTimeOff[item.personId]

diff --git a/src/components/TeamMemberTasks/TeamMemberTask.jsx b/src/components/TeamMemberTasks/TeamMemberTask.jsx
@@ -1,6 +1,13 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBell, faCircle, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
+import {
+  faBell,
+  faCircle,
+  faCheck,
+  faTimes,
+  faExpandArrowsAlt,
+  faCompressArrowsAlt,
+} from '@fortawesome/free-solid-svg-icons';
 import CopyToClipboard from 'components/common/Clipboard/CopyToClipboard';
 import { Table, Progress, Modal, ModalHeader, ModalBody } from 'reactstrap';
 
@@ -58,7 +65,7 @@ const TeamMemberTask = React.memo(
 
     const canTruncate = activeTasks.length > NUM_TASKS_SHOW_TRUNCATE;
     const [isTruncated, setIsTruncated] = useState(canTruncate);
-    const [detailModalIsOpen, setDetailModalIsOpen] = useState(false);
+    const [expandTimeOffIndicator, setExpandTimeOffIndicator] = useState({});
 
     const thisWeekHours = user.totaltangibletime_hrs;
 
@@ -283,28 +290,48 @@ const TeamMemberTask = React.memo(
                 )}
               </tbody>
             </Table>
-            {showWhoHasTimeOff && (onTimeOff || goingOnTimeOff) && (
-              <div className="taking-time-off-content-div">
-                <span className="taking-time-off-content-text">
-                  {onTimeOff
-                    ? `${user.name} Is Not Available this Week`
-                    : `${user.name} Is Not Available Next Week`}
-                </span>
+            {showWhoHasTimeOff &&
+              (onTimeOff || goingOnTimeOff) &&
+              (expandTimeOffIndicator[user.personId] ? (
                 <button
-                  type="button"
-                  className="taking-time-off-content-btn"
-                  onClick={() => {
-                    const request = onTimeOff
-                      ? { ...onTimeOff, onVacation: true, name: user.name }
-                      : { ...goingOnTimeOff, onVacation: false, name: user.name };
-
-                    openDetailModal(request);
+                  className="expand-time-off-detail-button"
+                  onClick={e => {
+                    setExpandTimeOffIndicator(prev => ({ ...prev, [user.personId]: false }));
                   }}
                 >
-                  Details ?
+                  <FontAwesomeIcon icon={faExpandArrowsAlt} data-testid="icon" />
                 </button>
-              </div>
-            )}
+              ) : (
+                <div className="taking-time-off-content-div">
+                  <button
+                    className="compress-time-off-detail-button"
+                    onClick={e => {
+                      setExpandTimeOffIndicator(prev => ({ ...prev, [user.personId]: true }));
+                    }}
+                  >
+                    <FontAwesomeIcon icon={faCompressArrowsAlt} data-testid="icon" />
+                  </button>
+
+                  <span className="taking-time-off-content-text">
+                    {onTimeOff
+                      ? `${user.name} Is Not Available this Week`
+                      : `${user.name} Is Not Available Next Week`}
+                  </span>
+                  <button
+                    type="button"
+                    className="taking-time-off-content-btn"
+                    onClick={() => {
+                      const request = onTimeOff
+                        ? { ...onTimeOff, onVacation: true, name: user.name }
+                        : { ...goingOnTimeOff, onVacation: false, name: user.name };
+
+                      openDetailModal(request);
+                    }}
+                  >
+                    Details ?
+                  </button>
+                </div>
+              ))}
           </td>
         </tr>
       </>

diff --git a/src/components/TeamMemberTasks/style.css b/src/components/TeamMemberTasks/style.css
@@ -259,26 +259,35 @@
   margin: 10px;
 }
 
-.time-off-detail-modal-title {
-  font-size: 1.1rem;
+.time-off-detail-modal-section {
   margin-bottom: 10px;
-  font-weight: bold;
 }
 
-.time-off-detail-modal-sub-heading {
-  font-size: 1rem;
-  font-weight: bold;
+.compress-time-off-detail-button{
+  color: white;
+  position: absolute;
+  right: 1px;
+  bottom: 1px;
+  border: none;
+  background-color: transparent;
+  border-radius: 5px;
 }
 
-.time-off-detail-modal-sub-section {
-  font-size: 1rem;
-  margin-bottom: 10px;
+.compress-time-off-detail-button:hover,.expand-time-off-detail-button:hover{
+  background-color: rgba(0, 0, 25, 0.6);
+
 }
 
-.time-off-detail-modal-section {
-  margin-bottom: 10px;
+.expand-time-off-detail-button{
+  color: white;
+  position: absolute;
+  right: 1px;
+  bottom: 1px;
+  background-color: rgba(0, 0, 25, 0.7);
+  border-radius: 5px;
 }
 
+
 @media only screen and (max-width: 768px) {
   .pc-component {
     display: none;