From 83f0c670176a0cb62ae54f75fe82574a6ef54da5 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Wed, 10 May 2023 12:23:35 +0300
Subject: [PATCH] added store modal tracker

---
 .../UI/TrackerModal/TrackerModal.jsx          | 18 ++++++++++++--
 src/pages/ProjectTracker/ProjectTracker.js    | 14 ++++++-----
 src/redux/projectsTrackerSlice.js             | 24 ++++++++++++-------
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/UI/TrackerModal/TrackerModal.jsx b/src/components/UI/TrackerModal/TrackerModal.jsx
index 1bc6535c..75a96866 100644
--- a/src/components/UI/TrackerModal/TrackerModal.jsx
+++ b/src/components/UI/TrackerModal/TrackerModal.jsx
@@ -8,6 +8,7 @@ import {
   setProject,
   setProjectBoardFetch,
   editProjectName,
+  getColumnTitle,
 } from "../../../redux/projectsTrackerSlice";
 
 import "./trackerModal.scss";
@@ -19,16 +20,18 @@ export const TrackerModal = ({
   defautlInput,
   titleProject,
   projectId,
-  titleColumn,
 }) => {
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
 
   const modalType = useSelector(getValueModalType);
 
+  const titleColumn = useSelector(getColumnTitle);
+
   const [emailWorker, setEmailWorker] = useState("");
   const [projectName, setProjectName] = useState(defautlInput);
-  const [editTitleColumn, setEditTitleColumn] = useState(titleColumn);
+  const [editTitleColumn, setEditTitleColumn] = useState("");
+
   const [valueColumn, setValueColumn] = useState("");
   const [nameProject, setNameProject] = useState("");
 
@@ -239,8 +242,19 @@ export const TrackerModal = ({
             <div className="title-project">
               <h4>Введите новое название</h4>
               <div className="input-container">
+                {/* {Boolean(projectBoard?.columns) &&
+                  Boolean(projectBoard.columns.length) &&
+                  projectBoard.columns.map((column) => {
+                    // console.log(column.title);
+                    // console.log("Lol" + titleColumn.title);
+                    if (column.title === titleColumn) {
+                      console.log(column.title);
+                      
+                    }
+                  })} */}
                 <input
                   className="name-project"
+                  placeholder={titleColumn}
                   value={editTitleColumn}
                   onChange={(e) => setEditTitleColumn(e.target.value)}
                 />
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js
index 47a402ee..6c78f0c9 100644
--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@@ -16,6 +16,7 @@ import {
   setProjectBoardFetch,
   setToggleTab,
   activeLoader,
+  setColumnTitle,
 } from "../../redux/projectsTrackerSlice";
 
 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@@ -191,6 +192,12 @@ export const ProjectTracker = () => {
           </Link>
         </div>
         <div className="tracker__tabs__content">
+          <TrackerModal
+            active={modalAdd}
+            setActive={setModalAdd}
+            selectedTab={selectedTab}
+          />
+
           {loader && <Loader style="green" />}
           {!loader && (
             <div className="tracker__tabs__content__tasks tasks active__content">
@@ -263,12 +270,6 @@ export const ProjectTracker = () => {
                           wrapperHover[column.id] ? "tasks__board__hover" : ""
                         }`}
                       >
-                        <TrackerModal
-                            active={modalAdd}
-                            setActive={setModalAdd}
-                            selectedTab={selectedTab}
-                            titleColumn={column.title}
-                        />
                         <div className="board__head">
                           {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
                           <span>{column.title}</span>
@@ -302,6 +303,7 @@ export const ProjectTracker = () => {
                                   [column.id]: false,
                                 }));
                                 dispatch(modalToggle("editColumn"));
+                                dispatch(setColumnTitle(column.title));
                                 setModalAdd(true);
                               }}
                             >
diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js
index 754adcc1..0ee4459e 100644
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@@ -6,7 +6,8 @@ const initialState = {
   projectBoard: {},
   toggleTab: 1,
   modalType: "",
-  boardLoader: false
+  titleColumn: "",
+  boardLoader: false,
 };
 
 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@@ -29,12 +30,12 @@ export const projectsTrackerSlice = createSlice({
     deleteProject: (state, action) => {
       state.projects.forEach((project) => {
         if (project.id === action.payload.id) {
-          project.status = 10
+          project.status = 10;
         }
-      })
+      });
     },
     activeLoader: (state) => {
-      state.boardLoader = true
+      state.boardLoader = true;
     },
     moveProjectTask: (state, action) => {
       state.projectBoard.columns.forEach((column, index) => {
@@ -58,18 +59,21 @@ export const projectsTrackerSlice = createSlice({
     editProjectName: (state, action) => {
       state.projects.forEach((project) => {
         if (project.id === action.payload.id) {
-          project.name = action.payload.name
+          project.name = action.payload.name;
         }
-      })
+      });
     },
     modalToggle: (state, action) => {
       state.modalType = action.payload;
     },
+    setColumnTitle: (state, action) => {
+      state.titleColumn = action.payload;
+    },
   },
   extraReducers: {
     [setProjectBoardFetch.fulfilled]: (state, action) => {
       state.projectBoard = action.payload;
-      state.boardLoader = false
+      state.boardLoader = false;
     },
   },
 });
@@ -82,13 +86,15 @@ export const {
   setToggleTab,
   modalToggle,
   activeLoader,
-  editProjectName
+  editProjectName,
+  setColumnTitle,
 } = 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 const getColumnTitle = (state) => state.tracker.titleColumn;
+export const getBoarderLoader = (state) => state.tracker.boardLoader;
 
 export default projectsTrackerSlice.reducer;