Added new reducer for tracker

2023-03-22 21:48:06 +03:00 · 2023-03-22 21:48:06 +03:00 · 4d8f7e6c65
commit 4d8f7e6c65
parent 8b8dda215f
7 changed files with 342 additions and 202 deletions
--- a/src/components/UI/ModalCreate/ModalCreate.js
+++ b/src/components/UI/ModalCreate/ModalCreate.js
@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { addProject } from "../../../redux/projectsTrackerSlice";
+
+import "./ModalCreate.scss";
+
+export const ModalCreate = ({ active, setActive, title }) => {
+  const [inputValue, setInputValue] = useState("");
+
+  const projectInfo = useSelector(addProject);
+  const dispatch = useDispatch();
+
+  function createName() {
+    let newItem = {
+      name: inputValue,
+      count: 0,
+    };
+    dispatch(addProject(newItem));
+    // console.log(newItem);
+    setActive(false);
+  }
+
+  return (
+    <div
+      className={active ? "modal-project active" : "modal-project"}
+      onClick={() => setActive(false)}
+    >
+      <div
+        className="modal-project__content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="title-project">
+          <h4>{title}</h4>
+          <div className="input-container">
+            <input
+              className="name-project"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+            ></input>
+          </div>
+        </div>
+        <button className="create-project" onClick={createName}>
+          Создать
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ModalCreate;
--- a/src/components/UI/ModalCreate/ModalCreate.scss
+++ b/src/components/UI/ModalCreate/ModalCreate.scss
@ -0,0 +1,71 @@
+.modal-project {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+
+  &__content {
+    padding: 15px;
+    background: #ffffff;
+    border: 1px solid #dde2e4;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title-project {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .input-container {
+        width: 220px;
+        height: 25px;
+        border-radius: 44px;
+        border: 1px solid #d1d1d1;
+      }
+
+      h4 {
+        color: #111112;
+        margin-bottom: 10px;
+        font-size: 14px !important;
+      }
+    }
+
+    .name-project {
+      margin-left: 10px;
+      border: none;
+      outline: none;
+      height: 100%;
+      width: 90%;
+      font-size: 14px;
+    }
+
+    .create-project {
+      margin: 15px 0 0 0;
+      width: 188px;
+      height: 40px;
+      background: #52b709;
+      border-radius: 44px;
+      border: none;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 32px;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.modal-project.active {
+  transform: scale(1);
+}
--- a/src/components/UI/ModalProject/ModalProject.js
+++ b/src/components/UI/ModalProject/ModalProject.js
@ -1,27 +0,0 @@
-import React from "react";
-
-import "./ModalProject.scss";
-
-export const ModalProject = ({ active, setActive }) => {
-  return (
-    <div
-      className={active ? "modal-project active" : "modal-project"}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="modal-project__content"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="title-project">
-          <h4>Укажите название проекта: </h4>
-          <div className="input-container">
-            <input className="name-project"></input>
-          </div>
-        </div>
-        <button className="create-project">Создать</button>
-      </div>
-    </div>
-  );
-};
-
-export default ModalProject;
--- a/src/components/UI/ModalProject/ModalProject.scss
+++ b/src/components/UI/ModalProject/ModalProject.scss
@ -1,57 +0,0 @@
-.modal-project {
-  z-index: 9;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.11);
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: scale(0);
-}
-
-.modal-project.active {
-  transform: scale(1);
-}
-
-.modal-project__content {
-  padding: 15px;
-  background: #ffffff;
-  border: 1px solid #dde2e4;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .title-project {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .input-container {
-      width: 220px;
-      height: 25px;
-      border-radius: 44px;
-      border: 1px solid #d1d1d1;
-    }
-
-    h4 {
-      margin-bottom: 10px;
-    }
-  }
-
-  .name-project {
-    margin-left: 10px;
-    border: none;
-    outline: none;
-    height: 100%;
-    width: 90%;
-    font-size: 14px;
-  }
-
-  .create-project {
-    margin: 15px 0 0 0;
-  }
-}
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@ -4,7 +4,7 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { Footer } from "../../components/Footer/Footer";

 import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
-import ModalProject from "../../components/UI/ModalProject/ModalProject";
+import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";

 import project from "../../images/trackerProject.svg";
 import tasks from "../../images/trackerTasks.svg";
@ -13,9 +13,11 @@ import avatarTest from "../../images/AvatarTest .png";
 import selectArrow from "../../images/select.svg";
 import commentsBoard from "../../images/commentsBoard.svg";
 import filesBoard from "../../images/filesBoard.svg";
-import search from "../../images/search.svg"
+import search from "../../images/search.svg";

 import "./tracker.scss";
+import { useDispatch, useSelector } from "react-redux";
+import { addProject } from "../../redux/projectsTrackerSlice";

 export const Tracker = () => {
  const [toggleTab, setToggleTab] = useState(1);
@ -45,7 +47,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 1
+          id: 1,
        },
        {
          task: "PR - 2245",
@ -54,7 +56,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 2
+          id: 2,
        },
      ],
    },
@ -69,7 +71,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 3
+          id: 3,
        },
      ],
    },
@ -84,7 +86,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 4
+          id: 4,
        },
        {
          task: "PR - 2245",
@ -93,7 +95,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 5
+          id: 5,
        },
        {
          task: "PR - 2245",
@ -102,7 +104,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 6
+          id: 6,
        },
        {
          task: "PR - 2245",
@ -111,7 +113,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 9
+          id: 9,
        },
      ],
    },
@ -126,7 +128,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 7
+          id: 7,
        },
        {
          task: "PR - 2245",
@ -135,7 +137,7 @@ export const Tracker = () => {
          files: 0,
          avatarCreated: avatarTest,
          avatarDo: avatarTest,
-          id: 8
+          id: 8,
        },
      ],
    },
@ -145,184 +147,217 @@ export const Tracker = () => {
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PR - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PK - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PE - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PA - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PB - 2245",
      description: "Верстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PC - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PD - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
    {
      name: "PA - 2245",
      description: "Сверстать часть таблицы. Сверстать часть таблицы",
-      dateComplete: '07/мар/23',
+      dateComplete: "07/мар/23",
      avatarDo: avatarTest,
    },
-  ])
+  ]);

-  const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks)
+  const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);

  const [modalActiveTicket, setModalActiveTicket] = useState(false);
-  const [modalActiveProject, setModalActiveProject] = useState(false);
-  const [startWrapperIndex, setStartWrapperIndex] = useState(null)
-  const [wrapperHover, setWrapperHover] = useState([false, false, false, false])
+  const [modalCreateProject, setModalCreateProject] = useState(false);
+  const [modalCreateColl, setModalCreateColl] = useState(false);
+
+  const [startWrapperIndex, setStartWrapperIndex] = useState(null);
+  const [wrapperHover, setWrapperHover] = useState([
+    false,
+    false,
+    false,
+    false,
+  ]);
+
+  // const projectInfo = useSelector(addProject);
+  // const dispatch = useDispatch();

  const toggleTabs = (index) => {
    setToggleTab(index);
  };

-  function toggleMoreTasks (wrapperIndex) {
-    setTabTaskMok(prevArray => prevArray.map((elem, index) => {
-      if (wrapperIndex === index) {
-        return {...elem, open: !elem.open}
-      } else {
-        return elem
-      }
-    }))
+  function toggleMoreTasks(wrapperIndex) {
+    setTabTaskMok((prevArray) =>
+      prevArray.map((elem, index) => {
+        if (wrapperIndex === index) {
+          return { ...elem, open: !elem.open };
+        } else {
+          return elem;
+        }
+      })
+    );
  }

  function dragStartHandler(e, task, wrapperIndex) {
-    setStartWrapperIndex({task: task, index: wrapperIndex})
+    setStartWrapperIndex({ task: task, index: wrapperIndex });
    setTimeout(() => {
-      e.target.classList.add('tasks__board__item__hide')
-    },0)
+      e.target.classList.add("tasks__board__item__hide");
+    }, 0);
  }

  function dragEndHandler(e) {
-    setWrapperHover(prevArray => prevArray.map((elem) => {
-      return false
-    }))
-    e.target.classList.remove('tasks__board__item__hide')
+    setWrapperHover((prevArray) =>
+      prevArray.map((elem) => {
+        return false;
+      })
+    );
+    e.target.classList.remove("tasks__board__item__hide");
  }

  function dragOverHandler(e) {
-    e.preventDefault()
+    e.preventDefault();
  }

  function dragEnterHandler(wrapperIndex) {
    if (wrapperIndex === startWrapperIndex.index) {
-      return
+      return;
    }
-    setWrapperHover(prevArray => prevArray.map((elem, index) => {
-      if (index === wrapperIndex) {
-        return true
-      } else {
-        return false
-      }
-    }))
+    setWrapperHover((prevArray) =>
+      prevArray.map((elem, index) => {
+        if (index === wrapperIndex) {
+          return true;
+        } else {
+          return false;
+        }
+      })
+    );
  }

  function dragDropHandler(e, wrapperIndex) {
-    e.preventDefault()
+    e.preventDefault();
    if (startWrapperIndex.index === wrapperIndex) {
-      return
+      return;
    }
-    setWrapperHover(prevArray => prevArray.map((elem) => {
-      return false
-    }))
-    setTabTaskMok(prevArray  => prevArray.map((elem, index) => {
-      if (index === wrapperIndex) {
-        return {...elem, tasks: [...elem.tasks, startWrapperIndex.task]}
-      } else if (index === startWrapperIndex.index) {
-        return {...elem, tasks: elem.tasks.filter((item) => {
-          return item.id !== startWrapperIndex.task.id
-            }
-          )}
-      } else {
-        return elem
-      }
-    }))
+    setWrapperHover((prevArray) =>
+      prevArray.map((elem) => {
+        return false;
+      })
+    );
+    setTabTaskMok((prevArray) =>
+      prevArray.map((elem, index) => {
+        if (index === wrapperIndex) {
+          return { ...elem, tasks: [...elem.tasks, startWrapperIndex.task] };
+        } else if (index === startWrapperIndex.index) {
+          return {
+            ...elem,
+            tasks: elem.tasks.filter((item) => {
+              return item.id !== startWrapperIndex.task.id;
+            }),
+          };
+        } else {
+          return elem;
+        }
+      })
+    );
  }

  function filterArchiveTasks(e) {
-    setFilterCompleteTasks(completeTasks.filter((item) => {
-      if (!e.target.value) {
-        return item
-      }
-      if (item.name.toLowerCase().startsWith(e.target.value.toLowerCase()) || item.description.toLowerCase().startsWith(e.target.value.toLowerCase())) {
-        return item
-      }
-    }))
+    setFilterCompleteTasks(
+      completeTasks.filter((item) => {
+        if (!e.target.value) {
+          return item;
+        }
+        if (
+          item.name.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
+          item.description
+            .toLowerCase()
+            .startsWith(e.target.value.toLowerCase())
+        ) {
+          return item;
+        }
+      })
+    );
+  }
+
+  function createProject() {
+    setModalCreateProject(true);
  }

  return (
@ -375,11 +410,12 @@ export const Tracker = () => {
                    </div>
                  );
                })}
-                <ModalProject
-                  active={modalActiveProject}
-                  setActive={setModalActiveProject}
+                <ModalCreate
+                  active={modalCreateProject}
+                  setActive={setModalCreateProject}
+                  title={"Укажите название проекта:"}
                />
-                <button onClick={() => setModalActiveProject(true)}>
+                <button onClick={createProject}>
                  <span>+</span>Создать проект
                </button>
              </div>
@ -391,8 +427,18 @@ export const Tracker = () => {
                }
              >
                <div className="tasks__head">
+                  <ModalCreate
+                    active={modalCreateColl}
+                    setActive={setModalCreateColl}
+                    title={"Добавить колонку: "}
+                  />
                  <h4>Проект : Разработка трекера</h4>
-                  <span className="tasks__head__add">+</span>
+                  <span
+                    className="tasks__head__add"
+                    onClick={() => setModalCreateColl(true)}
+                  >
+                    +
+                  </span>
                  <div className="tasks__head__persons">
                    <img src={avatarTest} alt="avatar" />
                    <img src={avatarTest} alt="avatar" />
@ -422,7 +468,13 @@ export const Tracker = () => {
                        onDragOver={(e) => dragOverHandler(e)}
                        onDragEnter={(e) => dragEnterHandler(wrapperIndex)}
                        onDrop={(e) => dragDropHandler(e, wrapperIndex)}
-                        className={`tasks__board ${section.tasks.length >= 3 ? 'tasks__board__more' : ''} ${wrapperHover[wrapperIndex] ? 'tasks__board__hover' : ''}`}
+                        className={`tasks__board ${
+                          section.tasks.length >= 3 ? "tasks__board__more" : ""
+                        } ${
+                          wrapperHover[wrapperIndex]
+                            ? "tasks__board__hover"
+                            : ""
+                        }`}
                      >
                        <div className="board__head">
                          <span className={wrapperIndex === 3 ? "done" : ""}>
@ -436,7 +488,7 @@ export const Tracker = () => {
                        {section.tasks.map((task, index) => {
                          if (index > 2) {
                            if (!section.open) {
-                              return
+                              return;
                            }
                          }
                          return (
@ -444,7 +496,9 @@ export const Tracker = () => {
                              key={index}
                              className="tasks__board__item"
                              draggable={true}
-                              onDragStart={(e) => dragStartHandler(e, task, wrapperIndex)}
+                              onDragStart={(e) =>
+                                dragStartHandler(e, task, wrapperIndex)
+                              }
                              onDragEnd={(e) => dragEndHandler(e)}
                              onClick={() => setModalActiveTicket(true)}
                            >
@ -473,7 +527,16 @@ export const Tracker = () => {
                          );
                        })}
                        {section.tasks.length > 3 && (
-                          <span className={section.open ? 'lessItems openItems' : 'moreItems openItems'} onClick={() => toggleMoreTasks(wrapperIndex)}>{section.open ? '-' : '+'}</span>
+                          <span
+                            className={
+                              section.open
+                                ? "lessItems openItems"
+                                : "moreItems openItems"
+                            }
+                            onClick={() => toggleMoreTasks(wrapperIndex)}
+                          >
+                            {section.open ? "-" : "+"}
+                          </span>
                        )}
                      </div>
                    );
@ -483,30 +546,35 @@ export const Tracker = () => {
              <div
                className={
                  toggleTab === 3
-                      ? "tracker__tabs__content__archive tasks active__content"
-                      : "tracker__tabs__content__projects"
+                    ? "tracker__tabs__content__archive tasks active__content"
+                    : "tracker__tabs__content__projects"
                }
              >
-                <div className='archive__title'>
+                <div className="archive__title">
                  <h3>Архив:</h3>
                  <p>{filterCompleteTasks.length} задач(а)</p>
-                  <div className='archive__search'>
-                    <input type='text' onChange={(event) => filterArchiveTasks(event)} />
-                    <img src={search} alt='search' />
+                  <div className="archive__search">
+                    <input
+                      type="text"
+                      onChange={(event) => filterArchiveTasks(event)}
+                    />
+                    <img src={search} alt="search" />
                  </div>
                </div>
-                <div className='archive__tasksWrapper'>
+                <div className="archive__tasksWrapper">
                  {filterCompleteTasks.map((task, index) => {
-                    return <div className='archive__completeTask' key={index}>
-                              <div className='archive__completeTask__description'>
-                                <p>{task.description}</p>
-                                <p className='date'>{task.dateComplete}</p>
-                              </div>
-                              <div className='archive__completeTask__info'>
-                                <img src={task.avatarDo} alt='avatar' />
-                                <p>{task.name}</p>
-                              </div>
-                           </div>
+                    return (
+                      <div className="archive__completeTask" key={index}>
+                        <div className="archive__completeTask__description">
+                          <p>{task.description}</p>
+                          <p className="date">{task.dateComplete}</p>
+                        </div>
+                        <div className="archive__completeTask__info">
+                          <img src={task.avatarDo} alt="avatar" />
+                          <p>{task.name}</p>
+                        </div>
+                      </div>
+                    );
                  })}
                </div>
              </div>
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@ -0,0 +1,34 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  project: [
+    {
+      name: "Разработка трекера",
+      count: 4,
+    },
+    {
+      name: "Кинотеатр",
+      count: 4,
+    },
+    {
+      name: "Проект страхование",
+      count: 4,
+    },
+  ],
+};
+
+export const projectsTrackerSlice = createSlice({
+  name: "projectsTracker",
+  initialState,
+  reducers: {
+    setProject(state, action) {
+      state.project.push(action.payload);
+    },
+  },
+});
+
+export const { setProject } = projectsTrackerSlice.actions;
+
+export const addProject = (state) => state.projectsTracker.setProject;
+
+export default projectsTrackerSlice.reducer;
--- a/src/store/store.js
+++ b/src/store/store.js
@ -1,10 +1,10 @@
-import { configureStore } from '@reduxjs/toolkit';
-import outstaffingReducer from '../redux/outstaffingSlice';
-import loaderReducer from '../redux/loaderSlice';
-import roleReducer from '../redux/roleSlice';
-import reportReducer from '../redux/reportSlice';
-import quizSlice from '../redux/quizSlice';
-
+import { configureStore } from "@reduxjs/toolkit";
+import outstaffingReducer from "../redux/outstaffingSlice";
+import loaderReducer from "../redux/loaderSlice";
+import roleReducer from "../redux/roleSlice";
+import reportReducer from "../redux/reportSlice";
+import quizSlice from "../redux/quizSlice";
+import projectsTrackerSlice from "../redux/projectsTrackerSlice";

 export const store = configureStore({
  reducer: {
@ -12,10 +12,11 @@ export const store = configureStore({
    loader: loaderReducer,
    role: roleReducer,
    report: reportReducer,
+    tracker: projectsTrackerSlice,
    quiz: quizSlice,
  },
-  middleware: getDefaultMiddleware =>
-      getDefaultMiddleware({
-        serializableCheck: false,
-      }),
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });