From d8a7eb55f5bcf41840c9739885eabb90ccffc602 Mon Sep 17 00:00:00 2001
From: M1kola <gigablock3030@yandex.ru>
Date: Fri, 5 May 2023 00:50:48 +0300
Subject: [PATCH] tracker-connect

---
 src/components/Loader/Loader.js               |   4 +-
 src/components/ProjectTiket/ProjectTiket.jsx  |   2 +-
 src/components/UI/ModalAdd/ModalAdd.jsx       |   5 +-
 src/components/UI/ModalCreate/ModalCreate.jsx |   5 +-
 src/pages/ProjectTracker/ProjectTracker.js    | 212 ++++++++++--------
 src/pages/Tracker/Tracker.js                  |  63 ++++--
 src/pages/Tracker/tracker.scss                |   8 +-
 src/redux/projectsTrackerSlice.js             |   7 +
 8 files changed, 177 insertions(+), 129 deletions(-)

diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
index c0e56f31..b95eb504 100644
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@@ -3,10 +3,10 @@ import './loader.scss'
 import React from "react";
 
 
-export const Loader = ({width = 50, height = 50}) => {
+export const Loader = ({width = 50, height = 50, style}) => {
   return (
       <div className='loader'>
-        <SVGLoader type='Circles' color='#fff' height={height} width={width}/>
+        <SVGLoader type='Circles' color={style ? style : `#fff`} height={height} width={width}/>
       </div>
   )
 };
diff --git a/src/components/ProjectTiket/ProjectTiket.jsx b/src/components/ProjectTiket/ProjectTiket.jsx
index 9c237928..07a963f7 100644
--- a/src/components/ProjectTiket/ProjectTiket.jsx
+++ b/src/components/ProjectTiket/ProjectTiket.jsx
@@ -43,7 +43,7 @@ export const ProjectTiket = ({ project, index }) => {
       method: "PUT",
       data: {
         project_id: project.id,
-        status: 0,
+        status: 10,
       },
     }).then((res) => {
       dispatch(deleteProject(project));
diff --git a/src/components/UI/ModalAdd/ModalAdd.jsx b/src/components/UI/ModalAdd/ModalAdd.jsx
index 9f1e192f..3f0fce74 100644
--- a/src/components/UI/ModalAdd/ModalAdd.jsx
+++ b/src/components/UI/ModalAdd/ModalAdd.jsx
@@ -62,6 +62,9 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
     setDescriptionTicket("");
   }
 
+  function editProject() {
+  }
+
   function getModal() {
     switch (modalType) {
       case "createColumn":
@@ -156,7 +159,7 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
                 ></input>
               </div>
             </div>
-            <button className="button-add" onClick={(e) => e.preventDefault()}>
+            <button className="button-add" onClick={editProject}>
               Сохранить
             </button>
             <span className="exit" onClick={() => setActive(false)}></span>
diff --git a/src/components/UI/ModalCreate/ModalCreate.jsx b/src/components/UI/ModalCreate/ModalCreate.jsx
index 8813a132..b2a3fa27 100644
--- a/src/components/UI/ModalCreate/ModalCreate.jsx
+++ b/src/components/UI/ModalCreate/ModalCreate.jsx
@@ -21,7 +21,8 @@ export const ModalCreate = ({ active, setActive, title }) => {
           status: 1,
         }
       }).then((res) => {
-        dispatch(setProject(res));
+        const result = {...res, columns: []}
+        dispatch(setProject(result));
         setActive(false);
         setInputValue("");
       })
@@ -44,7 +45,7 @@ export const ModalCreate = ({ active, setActive, title }) => {
               className="name-project"
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
-            ></input>
+            />
           </div>
           <button className="create-project" onClick={createName}>
             Создать
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index de272f97..b886ab3e 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -4,15 +4,18 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
 import { Navigation } from "../../components/Navigation/Navigation";
+import { Loader } from "../../components/Loader/Loader";
 
 import { useDispatch, useSelector } from "react-redux";
 import { apiRequest } from "../../api/request";
 import {
   getProjectBoard,
+  getBoarderLoader,
   modalToggle,
   moveProjectTask,
   setProjectBoardFetch,
   setToggleTab,
+  activeLoader
 } from "../../redux/projectsTrackerSlice";
 
 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@@ -42,8 +45,10 @@ export const ProjectTracker = () => {
 
   const startWrapperIndexTest = useRef({});
   const projectBoard = useSelector(getProjectBoard);
+  const loader = useSelector(getBoarderLoader)
 
   useEffect(() => {
+    dispatch(activeLoader())
     dispatch(setProjectBoardFetch(projectId.id));
   }, []);
 
@@ -186,23 +191,27 @@ export const ProjectTracker = () => {
           </Link>
         </div>
         <div className="tracker__tabs__content">
+          {loader &&
+            <Loader style='green' />
+          }
+          {!loader &&
           <div className="tracker__tabs__content__tasks tasks active__content">
             <div className="tasks__head">
               <div className="tasks__head__wrapper">
                 <h4>Проект : {projectBoard.name}</h4>
 
                 <ModalAdd
-                  active={modalAdd}
-                  setActive={setModalAdd}
-                  selectedTab={selectedTab}
+                    active={modalAdd}
+                    setActive={setModalAdd}
+                    selectedTab={selectedTab}
                 ></ModalAdd>
 
                 <div className="tasks__head__add">
                   <span
-                    onClick={() => {
-                      dispatch(modalToggle("createColumn"));
-                      setModalAdd(true);
-                    }}
+                      onClick={() => {
+                        dispatch(modalToggle("createColumn"));
+                        setModalAdd(true);
+                      }}
                   >
                     +
                   </span>
@@ -213,11 +222,11 @@ export const ProjectTracker = () => {
                   <img src={avatarTest} alt="avatar" />
                   <span className="countPersons">+9</span>
                   <span
-                    className="addPerson"
-                    onClick={() => {
-                      dispatch(modalToggle("addWorker"));
-                      setModalAdd(true);
-                    }}
+                      className="addPerson"
+                      onClick={() => {
+                        dispatch(modalToggle("addWorker"));
+                        setModalAdd(true);
+                      }}
                   >
                     +
                   </span>
@@ -239,76 +248,76 @@ export const ProjectTracker = () => {
             </div>
 
             <ModalTicket
-              active={modalActiveTicket}
-              setActive={setModalActiveTicket}
-              task={selectedTicket}
-              projectId={projectBoard.id}
-              projectName={projectBoard.name}
+                active={modalActiveTicket}
+                setActive={setModalActiveTicket}
+                task={selectedTicket}
+                projectId={projectBoard.id}
+                projectName={projectBoard.name}
             />
 
             <div className="tasks__container">
               {Boolean(projectBoard?.columns) &&
-                Boolean(projectBoard.columns.length) &&
-                projectBoard.columns.map((column) => {
-                  return (
+              Boolean(projectBoard.columns.length) &&
+              projectBoard.columns.map((column) => {
+                return (
                     <div
-                      key={column.id}
-                      onDragOver={(e) => dragOverHandler(e)}
-                      onDragEnter={(e) => dragEnterHandler(column.id)}
-                      onDrop={(e) => dragDropHandler(e, column.id)}
-                      className={`tasks__board ${
-                        column.tasks.length >= 3 ? "tasks__board__more" : ""
-                      } ${
-                        wrapperHover[column.id] ? "tasks__board__hover" : ""
-                      }`}
+                        key={column.id}
+                        onDragOver={(e) => dragOverHandler(e)}
+                        onDragEnter={(e) => dragEnterHandler(column.id)}
+                        onDrop={(e) => dragDropHandler(e, column.id)}
+                        className={`tasks__board ${
+                            column.tasks.length >= 3 ? "tasks__board__more" : ""
+                        } ${
+                            wrapperHover[column.id] ? "tasks__board__hover" : ""
+                        }`}
                     >
                       <div className="board__head">
                         {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
                         <span>{column.title}</span>
                         <div>
                           <span
-                            className="add"
-                            onClick={() => selectedTabTask(column.id)}
+                              className="add"
+                              onClick={() => selectedTabTask(column.id)}
                           >
                             +
                           </span>
                           <span
-                            onClick={() => {
-                              setOpenColumnSelect((prevState) => ({
-                                ...prevState,
-                                [column.id]: true,
-                              }));
-                            }}
-                            className="more"
+                              onClick={() => {
+                                setOpenColumnSelect((prevState) => ({
+                                  ...prevState,
+                                  [column.id]: true,
+                                }));
+                              }}
+                              className="more"
                           >
                             ...
                           </span>
                         </div>
                       </div>
                       {openColumnSelect[column.id] && (
-                        <div className="column__select">
-                          <div
-                            className="column__select__item"
-                            onClick={() => {
-                              setOpenColumnSelect((prevState) => ({
-                                ...prevState,
-                                [column.id]: false,
-                              }));
-                              dispatch(modalToggle("editColumn"));
-                              setModalAdd(true);
-                            }}
-                          >
-                            <img src={edit} alt="edit" />
-                            <span>Изменить</span>
+                          <div className="column__select">
+                            <div
+                                className="column__select__item"
+                                onClick={() => {
+                                  setOpenColumnSelect((prevState) => ({
+                                    ...prevState,
+                                    [column.id]: false,
+                                  }));
+                                  dispatch(modalToggle("editColumn"));
+                                  setModalAdd(true);
+                                }}
+                            >
+                              <img src={edit} alt="edit" />
+                              <span>Изменить</span>
+                            </div>
+                            <div
+                                className="column__select__item"
+                                onClick={() => deleteColumn(column.id)}
+                            >
+                              <img src={del} alt="delete" />
+                              <span>Удалить</span>
+                            </div>
                           </div>
-                          <div
-                            className="column__select__item"
-                            onClick={() => deleteColumn(column.id)}
-                          >
-                            <img src={del} alt="delete" />
-                            <span>Удалить</span>
-                          </div>
-                        </div>
                       )}
                       {column.tasks.map((task, index) => {
                         if (index > 2) {
@@ -317,56 +326,63 @@ export const ProjectTracker = () => {
                           }
                         }
                         return (
-                          <div
-                            key={task.id}
-                            className="tasks__board__item"
-                            draggable={true}
-                            onDragStart={(e) =>
-                              dragStartHandler(e, task, column.id)
-                            }
-                            onDragEnd={(e) => dragEndHandler(e)}
-                            onClick={(e) => openTicket(e, task)}
-                          >
-                            <div className="tasks__board__item__title">
-                              <p>{task.title}</p>
-                            </div>
-                            <p className="tasks__board__item__description">
-                              {task.description}
-                            </p>
-                            <div className="tasks__board__item__info">
-                              <div className="tasks__board__item__info__more">
-                                <img src={commentsBoard} alt="commentsImg" />
-                                <span>{task.comments} коментариев</span>
+                            <div
+                                key={task.id}
+                                className="tasks__board__item"
+                                draggable={true}
+                                onDragStart={(e) =>
+                                    dragStartHandler(e, task, column.id)
+                                }
+                                onDragEnd={(e) => dragEndHandler(e)}
+                                onClick={(e) => openTicket(e, task)}
+                            >
+                              <div className="tasks__board__item__title">
+                                <p>{task.title}</p>
                               </div>
-                              <div className="tasks__board__item__info__more">
-                                <img src={filesBoard} alt="filesImg" />
-                                <span>{task.files} файлов</span>
+                              <p className="tasks__board__item__description">
+                                {task.description}
+                              </p>
+                              <div className="tasks__board__item__info">
+                                <div className="tasks__board__item__info__more">
+                                  <img src={commentsBoard} alt="commentsImg" />
+                                  <span>{task.comments} коментариев</span>
+                                </div>
+                                <div className="tasks__board__item__info__more">
+                                  <img src={filesBoard} alt="filesImg" />
+                                  <span>{task.files} файлов</span>
+                                </div>
+                                {/*<div className="tasks__board__item__info__avatars">*/}
+                                {/*  <img src={task.avatarCreated} alt="avatar" />*/}
+                                {/*  <img src={task.avatarDo} alt="avatar" />*/}
+                                {/*</div>*/}
                               </div>
-                              {/*<div className="tasks__board__item__info__avatars">*/}
-                              {/*  <img src={task.avatarCreated} alt="avatar" />*/}
-                              {/*  <img src={task.avatarDo} alt="avatar" />*/}
-                              {/*</div>*/}
                             </div>
-                          </div>
                         );
                       })}
                       {column.tasks.length > 3 && (
-                        <span
-                          className={
-                            column.open
-                              ? "lessItems openItems"
-                              : "moreItems openItems"
-                          }
-                          // onClick={() => toggleMoreTasks(column.id)}
-                        >
+                          <span
+                              className={
+                                column.open
+                                    ? "lessItems openItems"
+                                    : "moreItems openItems"
+                              }
+                              // onClick={() => toggleMoreTasks(column.id)}
+                          >
                           {column.open ? "-" : "+"}
                         </span>
                       )}
                     </div>
-                  );
-                })}
+                );
+              })}
+              {Boolean(projectBoard?.columns) &&
+              !Boolean(projectBoard.columns.length) &&
+              <div className='tasks__board__noItems'>
+                В проекте нет задач.
+              </div>
+              }
             </div>
           </div>
+          }
         </div>
       </div>
       <Footer />
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 268d06fb..0654e51c 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -13,6 +13,7 @@ import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
 import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
 import { urlForLocal } from '../../helper'
 import { getCorrectDate} from "../../components/Calendar/calendarHelper";
+import { Loader } from "../../components/Loader/Loader";
 
 import project from "../../images/trackerProject.svg";
 import tasks from "../../images/trackerTasks.svg";
@@ -29,6 +30,7 @@ export const Tracker = () => {
   const tab = useSelector(getToggleTab)
   const [allTasks, setAllTasks] = useState([])
   const [filteredAllTasks, setFilteredAllTasks] = useState([]);
+  const [loader, setLoader] = useState(false)
 
   const [archiveProjects] = useState([
     {
@@ -71,8 +73,10 @@ export const Tracker = () => {
   const [modalCreateProject, setModalCreateProject] = useState(false);
 
   useEffect(() => {
+    setLoader(true)
     apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
       dispatch(setAllProjects(el.projects))
+      setLoader(false)
     })
     apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
       setAllTasks(el)
@@ -173,16 +177,22 @@ export const Tracker = () => {
               title={"Укажите название проекта:"}
             />
 
-            {Boolean(projects.length) &&
+            {loader &&
+              <Loader style='green'/>
+            }
+
+            {Boolean(projects.length) && !loader &&
               projects.map((project, index) => {
                 return (
-                  <ProjectTiket
-                    key={index}
-                    project={project}
-                  ></ProjectTiket>
+                    project.status !== 10 ?
+                      <ProjectTiket
+                        key={index}
+                        project={project}
+                      ></ProjectTiket>
+                        : ''
                 );
               })}
-            {!Boolean(projects.length) && (
+            {(!Boolean(projects.length) || !Boolean(projects.filter((project) => project.status !== 10).length)) && !loader && (
               <div className="no-projects">
                 <div className="no-projects__createNew">
                   <div>
@@ -202,7 +212,7 @@ export const Tracker = () => {
                 </p>
               </div>
             )}
-            {Boolean(projects.length) && (
+            {Boolean(projects.length) && !loader && (
               <div className="create-newProject">
                 <button
                   className="createProjectBtn"
@@ -235,25 +245,30 @@ export const Tracker = () => {
                 />
               </div>
             </div>
-            <div className="taskList__wrapper">
-              {Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
-                return (
-                  <div className="task" key={task.id}>
-                    <div className="task__info">
-                      <h5>{task.title}</h5>
-                      <p>{task.description}</p>
-                    </div>
-                    <div className="task__person">
-                      <img src={urlForLocal(task.user.avatar)} alt="avatar" />
-                      <div className="task__project">
-                        <p>{task.user.fio}</p>
-                        <span>{getCorrectDate(task.created_at)}</span>
+            {loader &&
+              <Loader style='green' />
+            }
+            {!loader &&
+              <div className="taskList__wrapper">
+                {Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
+                  return (
+                    <div className="task" key={task.id}>
+                      <div className="task__info">
+                        <h5>{task.title}</h5>
+                        <p>{task.description}</p>
+                      </div>
+                      <div className="task__person">
+                        <img src={urlForLocal(task.user.avatar)} alt="avatar" />
+                        <div className="task__project">
+                          <p>{task.user.fio}</p>
+                          <span>{getCorrectDate(task.created_at)}</span>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                );
-              })}
-            </div>
+                  );
+                })}
+              </div>
+            }
           </div>
           <div
             className={
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index adc0027d..34a51fd0 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -507,7 +507,8 @@
             padding: 15px;
             background: #e1fccf;
             border-radius: 12px;
-            right: -75px;
+            right: -20px;
+            top: 5px;
             z-index: 7;
             row-gap: 10px;
             display: flex;
@@ -526,6 +527,11 @@
               }
             }
           }
+
+          &__noItems {
+            font-weight: 500;
+            font-size: 25px;
+          }
         }
 
         .board {
diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js
index 71145e03..dbd62b2c 100644
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@@ -6,6 +6,7 @@ const initialState = {
   projectBoard: {},
   toggleTab: 1,
   modalType: "",
+  boardLoader: false
 };
 
 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@@ -30,6 +31,9 @@ export const projectsTrackerSlice = createSlice({
         (project) => project.id !== action.payload.id
       );
     },
+    activeLoader: (state) => {
+      state.boardLoader = true
+    },
     moveProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
         if (column.id === action.payload.columnId) {
@@ -56,6 +60,7 @@ export const projectsTrackerSlice = createSlice({
   extraReducers: {
     [setProjectBoardFetch.fulfilled]: (state, action) => {
       state.projectBoard = action.payload;
+      state.boardLoader = false
     },
   },
 });
@@ -67,11 +72,13 @@ export const {
   moveProjectTask,
   setToggleTab,
   modalToggle,
+  activeLoader
 } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
 export const getProjectBoard = (state) => state.tracker.projectBoard;
 export const getToggleTab = (state) => state.tracker.toggleTab;
 export const getValueModalType = (state) => state.tracker.modalType;
+export const getBoarderLoader = (state) => state.tracker.boardLoader
 
 export default projectsTrackerSlice.reducer;