Merge branch 'feature/1810_Day_details_Modal-fe' of Neca/HRCenter into FE_dev

src/assets/styles/components/_candidate-card.scss

@@ -29,7 +29,6 @@
 .candidate-card-container:active {
 animation-timing-function: ease-in-out;
 animation-duration: 300ms;
-
 }
 
 .candidate-card-container:hover{

src/assets/styles/components/_day-component.scss

@@ -2,9 +2,17 @@
   display: flex;
   flex-direction: column;
   height: 143px;
-  width: 174px;
+  width: 177px;
   border: 1px solid #f4f4f4;
   padding: 17px;
+  transition: 0.5s;
+}
+
+.day-component-container:hover{
+  cursor: pointer;
+  scale: 1.03;
+  animation-timing-function: ease-in-out;
+  animation-duration: 300ms;
 }
 
 .day-component-container:hover {
@@ -24,7 +32,6 @@
 }
 
 .day-component-day-number {
-  //styleName: Bold Paragraph;
   font-family: Source Sans Pro;
   font-size: 16px;
   font-weight: 600;
@@ -36,7 +43,6 @@
 }
 
 .day-component-day-name {
-  //styleName: Small paragraph;
   font-family: Source Sans Pro;
   font-size: 12px;
   font-weight: 400;

src/assets/styles/components/_day-details-component.scss

@@ -0,0 +1,189 @@
+.day-details-sub-container {
+  padding-top: 46px;
+  padding-left: 36px;
+  padding-right: 36px;
+  padding-bottom: 36px;
+}
+
+.day-datails-title-container {
+  display: flex;
+  align-items: center;
+  height: fit-content;
+}
+
+.day-details-calendar-image {
+  width: 15.75px;
+  height: 18px;
+}
+
+.day-details-main-header {
+  font-family: Source Sans Pro;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  letter-spacing: 0.02em;
+  text-align: left;
+  margin-left: 9.25px;
+}
+
+.day-details-header {
+  font-family: Source Sans Pro;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #226cb0;
+  margin-left: 5px;
+  align-self: flex-end;
+}
+
+.day-details-close-btn {
+  margin-left: 208px;
+  cursor: pointer;
+}
+
+.day-details-time {
+  font-family: Source Sans Pro;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  border: 1px solid #f4f4f4;
+  padding: 8px;
+  border-radius: 10px;
+}
+
+.day-details-line {
+  height: 1px;
+  width: 100%;
+  background-color: #f4f4f4;
+  margin-top: 19px;
+  margin-bottom: 19px;
+}
+
+.day-details-name {
+  font-family: Source Sans Pro;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #272727;
+  margin-left: 6px;
+  width: 111px;
+}
+
+.day-details-applicant {
+  font-family: Source Sans Pro;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: #226cb0;
+  margin-left: 72px;
+  width: 110px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.day-details-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 36px;
+  width: 120px;
+  border-radius: 9px;
+  padding: 18px 36px 18px 36px;
+  color: linear-gradient(0deg, #226cb0, #226cb0),
+    linear-gradient(0deg, #ffffff, #ffffff);
+  border: 1px solid #226cb0;
+  margin-left: 28px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.day-details-link span {
+  font-family: Source Sans Pro;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 0.04em;
+  text-align: left;
+  color: #226cb0;
+  text-transform: uppercase;
+}
+
+.day-details-content-sub-container > div:first-child {
+  margin-top: 37px;
+}
+
+.day-datails-arrow-container {
+  display: flex;
+  background: #ffffff;
+  border: 1px solid #e4e4e4;
+  border-radius: 7px;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 361px) {
+  .day-details-applicant {
+    margin-left: 10px;
+  }
+  .day-details-sub-container {
+    //padding-top: 36px;
+    padding: 32px;
+  }
+  .day-details-link {
+    width: 36px;
+    height: 36px;
+    gap: 0px;
+    padding: 11px;
+    margin-left: 20px;
+  }
+  .day-details-name {
+    width: 66px;
+    //width: 86px;
+  }
+  .day-details-applicant {
+    width: 97px;
+    //width: 117px;
+  }
+  .day-details-close-btn {
+    margin-left: 12px;
+  }
+
+  .day-details-main-header {
+    font-family: Source Sans Pro;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 32px;
+    letter-spacing: 0.02em;
+    text-align: left;
+  }
+
+  .day-details-header{
+    font-family: Source Sans Pro;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    letter-spacing: 0em;
+    text-align: left;    
+  }
+  .day-details-header{
+    align-self: center;
+  }
+}
+
+.css-ypiqx9-MuiDialogContent-root{
+  padding: 0px !important;
+}
+.css-bdhsul-MuiTypography-root-MuiDialogTitle-root{
+  padding: 0px !important;
+}

src/components/Schedules/DayComponent.js

@@ -1,10 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { formatTimeSrb } from "../../util/helpers/dateHelpers";
 
-const DayComponent = ({ numberOfDay, nameOfDay, interviews }) => {
+const DayComponent = ({ numberOfDay, nameOfDay, interviews,onClick }) => {
   const interviewsToShow = interviews.slice(0, 2);
   return (
-    <div className="day-component-container">
+    <div className="day-component-container" onClick={onClick}>
       <div className="day-component-day-informations-container">
         <p className="day-component-day-number">{numberOfDay}</p>
         <p className="day-component-day-name">{nameOfDay}</p>
@@ -15,8 +16,8 @@ const DayComponent = ({ numberOfDay, nameOfDay, interviews }) => {
           className="day-component-interviews-container"
           style={{ marginTop: "4px" }}
         >
-          <p className="day-component-interviews-time">{interview.time}</p>
-          <p className="day-component-interviews-name">{interview.type}</p>
+          <p className="day-component-interviews-time">{formatTimeSrb(interview.date)}</p>
+          <p className="day-component-interviews-name">{interview.selectionLevel.name}</p>
         </div>
       ))}
       {interviews.length > 2 && (
@@ -32,6 +33,7 @@ DayComponent.propTypes = {
   numberOfDay: PropTypes.number,
   nameOfDay: PropTypes.string,
   interviews: PropTypes.array,
+  onClick:PropTypes.func
 };
 
 export default DayComponent;

src/components/Schedules/DayDetailsComponent.js

@@ -0,0 +1,110 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  //   useMediaQuery,
+  //   useTheme,
+} from "@mui/material";
+import calendar from "../../../src/assets/images/calendar2.png";
+import arrowLeft from "../../../src/assets/images/arrow_left.png";
+import arrowRight from "../../../src/assets/images/arrow_right.png";
+import x from "../../../src/assets/images/x.png";
+import meet from "../../../src/assets/images/meet.png";
+import { formatTimeSrb } from "../../util/helpers/dateHelpers";
+import { CANDIDATES_PAGE } from "../../constants/pages";
+import { Link } from "react-router-dom";
+import { useTheme } from "@emotion/react";
+import { useMediaQuery } from "@mui/material";
+
+const DayDetailsComponent = ({
+  selectedDate,
+  selectionProcesses,
+  open,
+  onClose,
+}) => {
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("361"));
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Dialog
+      onClose={handleClose}
+      open={open}
+      maxWidth={!matches ? 549 : 339}
+    >
+      <div className="day-details-sub-container">
+        <DialogTitle className="day-datails-title-container">
+          <img src={calendar} className="day-details-calendar-image" />
+          <p className="day-details-main-header">Planer aktivnosti</p>
+          <p className="day-details-header">| {selectedDate}.</p>
+          <img
+            src={x}
+            className="day-details-close-btn"
+            onClick={handleClose}
+          />
+        </DialogTitle>
+        <DialogContent
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <div className="day-details-content-sub-container">
+            {selectionProcesses.map((selectionProcess, index) => (
+              <div key={index}>
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  <p className="day-details-time">
+                    {formatTimeSrb(selectionProcess.date)}h
+                  </p>
+                  <div style={{display:'flex',alignItems:!matches ? 'center' : 'flex-start',flexDirection:!matches ? 'row' : 'column'}}>
+                    <p className="day-details-name">
+                      {selectionProcess.selectionLevel.name}
+                    </p>
+                    <Link
+                      className="day-details-applicant"
+                      to={CANDIDATES_PAGE + "/" + selectionProcess.applicant.applicantId}
+                    >
+                      {selectionProcess.applicant.firstName}{" "}
+                      {selectionProcess.applicant.lastName}
+                    </Link>
+                  </div>
+                  <Link
+                    className="day-details-link"
+                    to={selectionProcess.link}
+                    target="_blank"
+                  >
+                    <img src={meet} />
+                    {!matches && <span>Link</span>}
+                  </Link>
+                </div>
+                <div className="day-details-line" />
+              </div>
+            ))}
+          </div>
+          <div style={{ display: "flex", gap: "18px" }}>
+            <div className="day-datails-arrow-container">
+              <img src={arrowLeft} />
+            </div>
+            <div className="day-datails-arrow-container">
+              <img src={arrowRight} />
+            </div>
+          </div>
+        </DialogContent>
+      </div>
+    </Dialog>
+  );
+};
+
+DayDetailsComponent.propTypes = {
+  selectedDate: PropTypes.string,
+  selectionProcesses: PropTypes.array,
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
+export default DayDetailsComponent;

src/main.scss

@@ -27,6 +27,7 @@
 @import './assets/styles/components/nav';
 @import './assets/styles/components/ads';
 @import './assets/styles/components/day-component';
+@import './assets/styles/components/day-details-component';
 @import './assets/styles/layout';
 @import './assets/styles/overwrite';
 @import './assets/styles/utility';

src/pages/SchedulePage/SchedulePage.js

@@ -1,15 +1,55 @@
-import React from "react";
+import React, { useState } from "react";
 import DayComponent from "../../components/Schedules/DayComponent";
+import DayDetailsComponent from "../../components/Schedules/DayDetailsComponent";
 
 const SchedulePage = () => {
-  const interviews = [
-    { time: "13:30", type: "HR intervju" },
-    { time: "14:30", type: "Screening test" },
-    { time: "15:30", type: "HR intervju" },
+  const [detailDialogShown, setDetailsDialogShown] = useState(false);
+
+  const handleCloseDialog = () => {
+    setDetailsDialogShown(false);
+  };
+
+  const handleOpenDialog  = () => {
+    setDetailsDialogShown(true)
+  }
+
+  const selectionProcesses = [
+    {
+      date: "2022-11-05T14:30:00",
+      link: "some link",
+      selectionLevel: {
+        id: 3,
+        name: "Tehnicki intervju",
+      },
+      applicant: {
+        applicantId:1,
+        firstName: "Dzenis",
+        lastName: "Hadzifejzovic",
+      },
+    },
+    {
+      date: "2022-11-27T15:30:00",
+      link: "some link",
+      selectionLevel: {
+        id: 4,
+        name: "Konacna odluka",
+      },
+      applicant: {
+        applicantId:6,
+        firstName: "Safet",
+        lastName: "Purkovic",
+      },
+    },
   ];
   return (
     <div className="schedule-page-container">
-      <DayComponent numberOfDay={1} nameOfDay="sre" interviews={interviews} />
+      <DayDetailsComponent
+        onClose={handleCloseDialog}
+        open={detailDialogShown}
+        selectedDate="12.03.2022"
+        selectionProcesses={selectionProcesses}
+      />
+      <DayComponent numberOfDay={1} nameOfDay="sre" interviews={selectionProcesses} onClick={handleOpenDialog}/>
     </div>
   );
 };