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

Tracker connect back

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>
   )
 };

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));

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>

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}>
             Создать

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,6 +191,10 @@ 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">
@@ -365,8 +374,15 @@ export const ProjectTracker = () => {
                     </div>
                 );
               })}
+              {Boolean(projectBoard?.columns) &&
+              !Boolean(projectBoard.columns.length) &&
+              <div className='tasks__board__noItems'>
+                В проекте нет задач.
+              </div>
+              }
             </div>
           </div>
+          }
         </div>
       </div>
       <Footer />

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 (
+                    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,6 +245,10 @@ export const Tracker = () => {
                 />
               </div>
             </div>
+            {loader &&
+              <Loader style='green' />
+            }
+            {!loader &&
               <div className="taskList__wrapper">
                 {Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
                   return (
@@ -254,6 +268,7 @@ export const Tracker = () => {
                   );
                 })}
               </div>
+            }
           </div>
           <div
             className={

src/pages/Tracker/tracker.scss

@@ -507,8 +507,9 @@
             padding: 15px;
             background: #e1fccf;
             border-radius: 12px;
-            right: -75px;
+            right: -20px;
-            z-index: 10;
+            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 {

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;