Merge pull request #117 from AnWhiteM/column-modals

add calendar in editCardModal

Author: AnWhiteM

src/components/EditCardModal/EditCardModal.jsx

@@ -7,10 +7,27 @@ import toast from "react-hot-toast";
 import { useDispatch } from "react-redux";
 import { updateTask } from "../../redux/tasks/operations.js";
 import { useParams } from "react-router-dom";
+import { DatePicker } from "@mui/x-date-pickers";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { useState } from "react";
+import dayjs from "dayjs";
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import ChevronLeft from '@mui/icons-material/ChevronLeft';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import SvgIcon from '@mui/material/SvgIcon';
 
 Modal.setAppElement("#root");
 
 export const EditCard = ({ isOpen, isClose, task }) => {
+  const [selectedDate, setSelectedDate] = useState(dayjs(task.deadline));
+  const changeDate = (valueDate) => {
+    setSelectedDate(valueDate)
+  }
+
   const dispatch = useDispatch();
   const { deskId } = useParams();
   const taskModalValidation = Yup.object().shape({
@@ -26,11 +43,77 @@ export const EditCard = ({ isOpen, isClose, task }) => {
 
   const taskEditNotify = () => toast.success("You edited the task");
 
+  const CustomCalendarHeaderRoot = styled('div')({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottom: '1px solid #000000',
+    backgroundColor: '#1F1F1F'
+  });
+
+  const CustomDatePicker = styled(DatePicker)({
+    '& .MuiInputBase-root': {
+      display: 'flex',
+      alignItems: 'center',
+      backgroundColor: '#151515',
+      color: '#BEDBB0',
+      fontFamily: 'Poppins, sans-serif !important',
+      fontSize: '14px',
+      fontWeight: '500',
+      lineHeight: '21px',
+      letterSpacing: '-0.02em',
+      textAlign: 'left',
+    },
+    '& .MuiInputBase-input': {
+      padding: '0',
+      width: 'auto',
+    },
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: '#FFFFFF',
+    }
+  });
+  
+
+  const calendarIcon = () => {
+    return (
+      <SvgIcon>
+        <use className={css.chevronIconDown} href={svg + "#chevron-down-icon"} />
+      </SvgIcon>
+    );
+  }
+
+  function CustomCalendarHeader(props) {
+    const { currentMonth, onMonthChange } = props;
+  
+    const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left');
+    const selectPreviousMonth = () =>
+      onMonthChange(currentMonth.subtract(1, 'month'), 'right');
+  
+    return (
+      <CustomCalendarHeaderRoot>
+        <Stack spacing={1} direction="row">
+          <IconButton onClick={selectPreviousMonth} title="Previous month">
+            <ChevronLeft className={css.chevron} />
+          </IconButton>
+        </Stack>
+        <Typography variant="body2" className={css.customTypography}>{currentMonth.format('MMMM YYYY')}</Typography>
+        <Stack spacing={1} direction="row">
+          <IconButton onClick={selectNextMonth} title="Next month">
+            <ChevronRight className={css.chevron} />
+          </IconButton>
+        </Stack>
+      </CustomCalendarHeaderRoot>
+    );
+  }
+
   const handleSubmit = (values) => {
     const updatedTask = {
       title: values.cardtitle,
       description: values.carddescription,
-      deadline: "2024-06-14T23:59:59.000+00:00",
+      deadline: selectedDate,
       priority: values.priority,
     };
     dispatch(
@@ -138,6 +221,19 @@ export const EditCard = ({ isOpen, isClose, task }) => {
                 </div>
               </label>
 
+              <div className={css.createCardModalDateContainer}>
+                <p className={css.deadlineText}>Deadline</p>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <CustomDatePicker
+                  value={selectedDate}
+                  onChange={changeDate}
+                  format={dayjs(selectedDate).format('DD/MM/YYYY') === dayjs().format('DD/MM/YYYY') ? 'Today, MMMM DD' : 'dddd, MMMM DD'}
+                  slots={{ openPickerIcon: calendarIcon, calendarHeader: CustomCalendarHeader }}
+                  minDate={dayjs()}
+                />
+              </LocalizationProvider>
+              </div>
+
               <button type="submit" className={css.editCardModalSubmit}>
                 <span className={css.editCardModalSpan}>
                   <svg

src/components/EditCardModal/EditCardModal.module.css

@@ -77,6 +77,39 @@ input[type="radio"]:checked {
   margin-bottom: 20px;
 }
 
+.createCardModalDateContainer {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 30px;
+}
+
+.deadlineText {
+  font-family: 'Poppins', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.02em;
+  color: #FFFFFF80;
+}
+
+.calendar {
+  width: 233px;
+  height: 254px;
+}
+
+.customTypography {
+  font-family: 'Poppins', sans-serif !important;
+  color: #FFFFFF;
+}
+
+.chevron {
+  fill: #FFFFFF !important;
+}
+
+.chevronIconDown {
+  stroke: #BEDBB0 !important;
+}
+
 @media print {
   input[type="radio"] {
     -webkit-appearance: auto;