Merge pull request #84 from apuc/tracker-connect-back

Tracker connect back
2023-05-05 00:51:55 +03:00 · 2023-05-05 00:51:55 +03:00 · 5256159e2b
commit 5256159e2b
parent 353825ada3 d8a7eb55f5
8 changed files with 178 additions and 130 deletions
--- 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>
  )
 };
--- 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));
--- 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>
--- 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}>
            Создать
--- 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 />
--- 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={
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -507,8 +507,9 @@
            padding: 15px;
            background: #e1fccf;
            border-radius: 12px;
-            right: -75px;
-            z-index: 10;
+            right: -20px;
+            top: 5px;
+            z-index: 7;
            row-gap: 10px;
            display: flex;
            flex-direction: column;
@ -526,6 +527,11 @@
              }
            }
          }
+
+          &__noItems {
+            font-weight: 500;
+            font-size: 25px;
+          }
        }

        .board {
--- 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;