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

Tracker connect back

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
 import TrackerModal from "../TrackerModal/TrackerModal";
 import { apiRequest } from "../../../api/request";
@@ -32,6 +32,8 @@ export const ModalTiсket = ({
 }) => {
   const dispatch = useDispatch();
   const [addSubtask, setAddSubtask] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [inputsValue, setInputsValue] = useState({title: task.title, description: task.description})
 
   function deleteTask() {
     apiRequest("/task/update-task", {
@@ -46,6 +48,19 @@ export const ModalTiсket = ({
     });
   }
 
+  function editTask() {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: task.id,
+        title: inputsValue.title,
+        description: inputsValue.description
+      },
+    }).then((res) => {
+      dispatch(setProjectBoardFetch(projectId));
+    });
+  }
+
   return (
     <div
       className={active ? "modal-tiket active" : "modal-tiket"}
@@ -69,11 +84,14 @@ export const ModalTiсket = ({
 
           <div className="content__task">
             <span>Задача</span>
-            <h5>{task.title}</h5>
+            {editOpen ? <input value={inputsValue.title} onChange={(e) => {
+              setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
+            }} /> :<h5>{inputsValue.title}</h5>}
             <div className="content__description">
-              <p>{task.description}</p>
+              {editOpen ? <input value={inputsValue.description} onChange={(e) => {
+                setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
+              }}/> :<p>{inputsValue.description}</p>}
               <img src={taskImg} className="image-task"></img>
-              <p>{task.description}</p>
             </div>
             <div className="content__communication">
               <p className="tasks">
@@ -138,15 +156,22 @@ export const ModalTiсket = ({
           </div>
 
           <div className="workers_box-bottom">
-            <div>
+            <div className={editOpen ? 'edit' : ''} onClick={() => {
+              if(editOpen) {
+                setEditOpen(!editOpen)
+                editTask()
+              } else {
+                setEditOpen(!editOpen)
+              }
+            }}>
               <img src={edit}></img>
-              <p>редактировать</p>
+              <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
             </div>
             <div>
               <img src={link}></img>
               <p>ссылка на проект</p>
             </div>
-            <div>
+            <div onClick={deleteTask}>
               <img src={archive}></img>
               <p>в архив</p>
             </div>

src/components/UI/ModalTicket/ModalTicket.scss

@@ -6,14 +6,13 @@
   position: fixed;
   top: 0;
   left: 0;
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
-  transform: scale(0);
 }
 
 .modal-tiket.active {
-  transform: scale(1);
+  display: flex;
 }
 
 .modal-tiket__content {
@@ -50,6 +49,16 @@
     &__task {
       margin-top: -5px;
       padding: 18px;
+      display: flex;
+      flex-direction: column;
+
+      input {
+        font-style: normal;
+        font-size: 16px;
+        line-height: 24px;
+        max-width: 340px;
+        outline: none;
+      }
 
       button {
         img {
@@ -64,10 +73,14 @@
         font-size: 16px;
         line-height: 24px;
         color: #1a1919;
+        margin-bottom: 0;
       }
     }
 
     &__description {
+      display: flex;
+      flex-direction: column;
+      margin-top: 10px;
       p {
         font-weight: 400;
         font-size: 14px;
@@ -77,7 +90,8 @@
       }
 
       .image-task {
-        margin: 0 0 20px 0;
+        margin: 10px 0 20px 0;
+        max-width: 330px;
       }
     }
 
@@ -313,11 +327,21 @@
           display: flex;
           cursor: pointer;
           align-items: center;
+          padding-left: 10px;
 
           p {
             margin: 0 0 0 12px;
           }
         }
+
+        .edit {
+          background: #52b709;
+          border-radius: 50px;
+
+          p {
+            font-weight: 700;
+          }
+        }
       }
     }
   }

src/components/UI/TicketFullScreen/TicketFullScreen.jsx

@@ -6,9 +6,10 @@ import { Footer } from "../../Footer/Footer";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import TrackerModal from "../TrackerModal/TrackerModal";
 import { Navigation } from "../../Navigation/Navigation";
+import {Loader} from "../../Loader/Loader";
 
 import { useDispatch } from "react-redux";
-import { modalToggle, setToggleTab } from "../../../redux/projectsTrackerSlice";
+import {modalToggle, setToggleTab} from "../../../redux/projectsTrackerSlice";
 import { apiRequest } from "../../../api/request";
 
 import project from "../../../images/trackerProject.svg";
@@ -37,13 +38,18 @@ export const TicketFullScreen = ({}) => {
   const navigate = useNavigate();
   const [projectInfo, setProjectInfo] = useState({});
   const [taskInfo, setTaskInfo] = useState({});
+  const [editOpen, setEditOpen] = useState(false);
+  const [inputsValue, setInputsValue] = useState({})
+  const [loader, setLoader] = useState(true)
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
       setTaskInfo(taskInfo);
+      setInputsValue({title: taskInfo.title, description: taskInfo.description})
       apiRequest(`/project/get-project?project_id=${taskInfo.project_id}`).then(
         (project) => {
           setProjectInfo(project);
+          setLoader(false)
         }
       );
     });
@@ -61,6 +67,18 @@ export const TicketFullScreen = ({}) => {
     });
   }
 
+  function editTask() {
+    apiRequest("/task/update-task", {
+      method: "PUT",
+      data: {
+        task_id: taskInfo.id,
+        title: inputsValue.title,
+        description: inputsValue.description
+      },
+    }).then((res) => {
+    });
+  }
+
   const toggleTabs = (index) => {
     dispatch(setToggleTab(index));
   };
@@ -107,6 +125,8 @@ export const TicketFullScreen = ({}) => {
             <p>Архив</p>
           </Link>
         </div>
+        {loader ? <Loader /> :
+        <>
         <div className="tracker__tabs__content content-tabs">
           <div className="tasks__head">
             <div className="tasks__head__wrapper">
@@ -153,11 +173,14 @@ export const TicketFullScreen = ({}) => {
           <div className="content ticket-whith">
             <div className="content__task">
               <span>Задача</span>
-              <h5>{taskInfo.title}</h5>
+              {editOpen ? <input value={inputsValue.title} onChange={(e) => {
+                setInputsValue((prevValue) => ({...prevValue, title: e.target.value}))
+              }} /> :<h5>{inputsValue.title}</h5>}
               <div className="content__description">
-                <p>{taskInfo.description}</p>
+                {editOpen ? <input value={inputsValue.description} onChange={(e) => {
+                  setInputsValue((prevValue) => ({...prevValue, description: e.target.value}))
+                }}/> :<p>{inputsValue.description}</p>}
                 <img src={task} className="image-task"></img>
-                <p>{taskInfo.description}</p>
               </div>
               <div className="content__communication">
                 <p className="tasks">
@@ -229,9 +252,16 @@ export const TicketFullScreen = ({}) => {
             </div>
 
             <div className="workers_box-bottom">
-              <div>
+              <div className={editOpen ? 'edit' : ''} onClick={() => {
+                if(editOpen) {
+                  setEditOpen(!editOpen)
+                  editTask()
+                } else {
+                  setEditOpen(!editOpen)
+                }
+              }}>
                 <img src={edit}></img>
-                <p>редактировать</p>
+                <p>{editOpen ? 'сохранить' : 'редактировать'}</p>
               </div>
               <div>
                 <img src={link}></img>
@@ -248,6 +278,8 @@ export const TicketFullScreen = ({}) => {
             </div>
           </div>
         </div>
+        </>
+        }
       </div>
       <Footer />
     </section>

src/components/UI/TrackerModal/TrackerModal.jsx

@@ -1,16 +1,22 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 import { apiRequest } from "../../../api/request";
+import { urlForLocal } from '../../../helper'
 import {
+  setColumnName,
   getProjectBoard,
   getValueModalType,
   setProject,
   setProjectBoardFetch,
   editProjectName,
-  getColumnTitle,
+  editColumnName,
+  getColumnName,
+  getColumnId
 } from "../../../redux/projectsTrackerSlice";
 
+import arrowDown from "../../../images/selectArrow.png"
+
 import "./trackerModal.scss";
 
 export const TrackerModal = ({
@@ -20,22 +26,22 @@ export const TrackerModal = ({
   defautlInput,
   titleProject,
   projectId,
-  titleColumn
+  priorityTask
 }) => {
   const dispatch = useDispatch();
   const projectBoard = useSelector(getProjectBoard);
+  const columnName = useSelector(getColumnName);
+  const columnId = useSelector(getColumnId)
 
   const modalType = useSelector(getValueModalType);
-
-  const [emailWorker, setEmailWorker] = useState("");
   const [projectName, setProjectName] = useState(defautlInput);
-  const [editTitleColumn, setEditTitleColumn] = useState(titleColumn);
-
   const [valueColumn, setValueColumn] = useState("");
   const [nameProject, setNameProject] = useState("");
-
   const [valueTiket, setValueTiket] = useState("");
   const [descriptionTicket, setDescriptionTicket] = useState("");
+  const [workers, setWorkers] = useState([])
+  const [selectWorkersOpen, setSelectWorkersOpen] = useState(false)
+  const [selectedWorker, setSelectedWorker] = useState(null)
 
   function createTab() {
     if (!valueColumn) {
@@ -69,6 +75,7 @@ export const TrackerModal = ({
         status: 1,
         user_id: localStorage.getItem("id"),
         column_id: selectedTab,
+        priority: priorityTask
       },
     }).then((res) => {
       dispatch(setProjectBoardFetch(projectBoard.id));
@@ -92,6 +99,19 @@ export const TrackerModal = ({
     });
   }
 
+  function changeColumnName() {
+    apiRequest("/project-column/update-column", {
+      method: "PUT",
+      data: {
+        column_id: columnId,
+        title: columnName
+      }
+    }).then((res) => {
+      setActive(false);
+      dispatch(editColumnName({id: columnId, title: columnName}))
+    })
+  }
+
   function createProject() {
     if (nameProject === "") {
       return;
@@ -112,6 +132,23 @@ export const TrackerModal = ({
     }
   }
 
+  function addUserToProject() {
+    apiRequest("/project/add-user", {
+      method: "POST",
+      data: {
+        user_id: selectedWorker.id,
+        project_id: projectBoard.id
+      }
+    }).then((el) => {
+      setActive(false);
+      selectedWorker(null)
+    })
+  }
+
+  useEffect(() => {
+    modalType === "addWorker" ? apiRequest('/project/my-employee').then((el) => setWorkers(el.managerEmployees)) : ''
+  }, [modalType])
+
   return (
     <div
       className={active ? "modal-add active" : "modal-add"}
@@ -122,21 +159,35 @@ export const TrackerModal = ({
           <div>
             <div className="title-project">
               <h4>Добавьте участника</h4>
-              <p className="title-project__decs">Введите имя или e-mail </p>
+              {/*<div className="input-container">*/}
-              <div className="input-container">
+              {/*  <input*/}
-                <input
+              {/*    className="name-project"*/}
-                  className="name-project"
+              {/*    value={emailWorker}*/}
-                  value={emailWorker}
+              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-                  onChange={(e) => setEmailWorker(e.target.value)}
+              {/*  />*/}
-                />
+              {/*</div>*/}
+              <div className={selectWorkersOpen ? 'select__worker open' : 'select__worker'} onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}>
+                <p>{selectedWorker ? selectedWorker.employee.fio : 'Выберите пользователя'}</p>
+                <img className='arrow' src={arrowDown} alt='arrow' />
+                {Boolean(selectWorkersOpen) &&
+                <div className='select__worker__dropDown'>
+                  {workers.map((worker) => {
+                    if (worker === selectedWorker) {
+                      return
+                    }
+                    return <div className='worker' key={worker.id} onClick={() => setSelectedWorker(worker)}>
+                      <p>{worker.employee.fio}</p>
+                      <img src={urlForLocal(worker.employee.avatar)} alt='avatar'/>
+                    </div>
+                  })
+                  }
+                </div>
+                }
               </div>
             </div>
             <button
               className="button-add"
-              onClick={(e) => {
+              onClick={addUserToProject}
-                e.preventDefault();
-                setActive(false);
-              }}
             >
               Добавить
             </button>
@@ -243,12 +294,12 @@ export const TrackerModal = ({
               <div className="input-container">
                 <input
                   className="name-project"
-                  value={editTitleColumn}
+                  value={columnName}
-                  onChange={(e) => setEditTitleColumn(e.target.value)}
+                  onChange={(e) => dispatch(setColumnName(e.target.value))}
                 />
               </div>
             </div>
-            <button className="button-add" onClick={(e) => e.preventDefault()}>
+            <button className="button-add" onClick={changeColumnName}>
               Сохранить
             </button>
           </div>

src/components/UI/TrackerModal/trackerModal.scss

@@ -61,6 +61,56 @@
       font-size: 15px;
       line-height: 18px;
     }
+
+    .select__worker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 5px;
+      background: white;
+      border-radius: 5px;
+      cursor: pointer;
+      width: 100%;
+      position: relative;
+
+      p {
+        max-width: 150px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+      }
+
+      img {
+        transition: all 0.3s ease;
+        width: 16px;
+        height: 16px;
+      }
+
+      &__dropDown {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        width: 100%;
+        padding: 5px;
+        top: 35px;
+        left: 0;
+        background: white;
+        border-radius: 5px;
+        row-gap: 5px;
+
+        .worker {
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+
+    .open {
+      .arrow {
+        transform: rotate(180deg);
+      }
+    }
   }
 
   .name-project {

src/pages/ProjectTracker/ProjectTracker.js

@@ -16,7 +16,8 @@ import {
   setProjectBoardFetch,
   setToggleTab,
   activeLoader,
-  setColumnTitle,
+  setColumnName,
+  setColumnId,
 } from "../../redux/projectsTrackerSlice";
 
 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@@ -25,7 +26,6 @@ import TrackerModal from "../../components/UI/TrackerModal/TrackerModal";
 import project from "../../images/trackerProject.svg";
 import tasks from "../../images/trackerTasks.svg";
 import archive from "../../images/archiveTracker.svg";
-import avatarTest from "../../images/AvatarTest .png";
 import selectArrow from "../../images/select.svg";
 import commentsBoard from "../../images/commentsBoard.svg";
 import filesBoard from "../../images/filesBoard.svg";
@@ -39,6 +39,7 @@ export const ProjectTracker = () => {
 
   const [openColumnSelect, setOpenColumnSelect] = useState({});
   const [selectedTab, setSelectedTab] = useState(0);
+  const [priorityTask, setPriorityTask] = useState(0);
   const [wrapperHover, setWrapperHover] = useState({});
   const [modalAdd, setModalAdd] = useState(false);
   const [modalActiveTicket, setModalActiveTicket] = useState(false);
@@ -125,10 +126,11 @@ export const ProjectTracker = () => {
     }
   }
 
-  function selectedTabTask(columnId) {
+  function selectedTabTask(columnId, length) {
     setSelectedTab(columnId);
     dispatch(modalToggle("createTiketProject"));
     setModalAdd(true);
+    setPriorityTask(length + 1)
   }
 
   function openTicket(e, task) {
@@ -196,6 +198,7 @@ export const ProjectTracker = () => {
             active={modalAdd}
             setActive={setModalAdd}
             selectedTab={selectedTab}
+            priorityTask={priorityTask}
           />
 
           {loader && <Loader style="green" />}
@@ -217,9 +220,9 @@ export const ProjectTracker = () => {
                     <p>добавить колонку</p>
                   </div>
                   <div className="tasks__head__persons">
-                    <img src={avatarTest} alt="avatar" />
+                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    <img src={avatarTest} alt="avatar" />
+                    {/*<img src={avatarTest} alt="avatar" />*/}
-                    <span className="countPersons">+9</span>
+                    <span className="countPersons">{projectBoard.projectUsers?.length}</span>
                     <span
                       className="addPerson"
                       onClick={() => {
@@ -246,13 +249,13 @@ export const ProjectTracker = () => {
                 </div>
               </div>
 
-              <ModalTicket
+              {Boolean(modalActiveTicket) && <ModalTicket
-                active={modalActiveTicket}
+                  active={modalActiveTicket}
-                setActive={setModalActiveTicket}
+                  setActive={setModalActiveTicket}
-                task={selectedTicket}
+                  task={selectedTicket}
-                projectId={projectBoard.id}
+                  projectId={projectBoard.id}
-                projectName={projectBoard.name}
+                  projectName={projectBoard.name}
-              />
+              />}
 
               <div className="tasks__container">
                 {Boolean(projectBoard?.columns) &&
@@ -270,19 +273,13 @@ 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>
                           <div>
                             <span
                               className="add"
-                              onClick={() => selectedTabTask(column.id)}
+                              onClick={() => selectedTabTask(column.id, column.tasks.length)}
                             >
                               +
                             </span>
@@ -309,6 +306,8 @@ export const ProjectTracker = () => {
                                   [column.id]: false,
                                 }));
                                 dispatch(modalToggle("editColumn"));
+                                dispatch(setColumnName(column.title))
+                                dispatch(setColumnId(column.id))
                                 setModalAdd(true);
                               }}
                             >
@@ -325,11 +324,11 @@ export const ProjectTracker = () => {
                           </div>
                         )}
                         {column.tasks.map((task, index) => {
-                          if (index > 2) {
+                          // if (index > 2) {
-                            if (!column.open) {
+                          //   if (!column.open) {
-                              return;
+                          //     return;
-                            }
+                          //   }
-                          }
+                          // }
                           return (
                             <div
                               key={task.id}
@@ -350,7 +349,7 @@ export const ProjectTracker = () => {
                               <div className="tasks__board__item__info">
                                 <div className="tasks__board__item__info__more">
                                   <img src={commentsBoard} alt="commentsImg" />
-                                  <span>{task.comments} коментариев</span>
+                                  <span>{task.comment_count} коментариев</span>
                                 </div>
                                 <div className="tasks__board__item__info__more">
                                   <img src={filesBoard} alt="filesImg" />
@@ -364,18 +363,18 @@ export const ProjectTracker = () => {
                             </div>
                           );
                         })}
-                        {column.tasks.length > 3 && (
+                        {/*{column.tasks.length > 3 && (*/}
-                          <span
+                        {/*  <span*/}
-                            className={
+                        {/*    className={*/}
-                              column.open
+                        {/*      column.open*/}
-                                ? "lessItems openItems"
+                        {/*        ? "lessItems openItems"*/}
-                                : "moreItems openItems"
+                        {/*        : "moreItems openItems"*/}
-                            }
+                        {/*    }*/}
-                            // onClick={() => toggleMoreTasks(column.id)}
+                        {/*    // onClick={() => toggleMoreTasks(column.id)}*/}
-                          >
+                        {/*  >*/}
-                            {column.open ? "-" : "+"}
+                        {/*    {column.open ? "-" : "+"}*/}
-                          </span>
+                        {/*  </span>*/}
-                        )}
+                        {/*)}*/}
                       </div>
                     );
                   })}

src/pages/Tracker/Tracker.js

@@ -39,7 +39,7 @@ export const Tracker = () => {
   const [filteredAllTasks, setFilteredAllTasks] = useState([]);
   const [loader, setLoader] = useState(false);
   const [filterCompleteTasks, setFilterCompleteTasks] = useState([]);
-  // const [allCompletedTasks, setAllCompletedTasks] = useState([])
+  const [allCompletedTasks, setAllCompletedTasks] = useState([])
 
   const [modalCreateProject, setModalCreateProject] = useState(false);
 
@@ -56,13 +56,22 @@ export const Tracker = () => {
       //   if (project.status === 10 && project.columns.length) {
       //     return project
       //   }
-      // }).map((project) => { return project.columns}))
+      // }).map((project) => { return project.columns}).reduce((acu, curr) => {
+      //   curr.forEach((item) => {
+      //     acu.push(...item.tasks)
+      //   })
+      //   return acu
+      // }, []))
     });
     apiRequest(
       `/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
     ).then((el) => {
-      setAllTasks(el);
+      const allTasks = el.filter((item) => item.status !== 0)
-      setFilteredAllTasks(el);
+      const completedTasks = el.filter((item) => item.status === 0)
+      setAllTasks(allTasks);
+      setFilteredAllTasks(allTasks);
+      setAllCompletedTasks(completedTasks)
+      setFilterCompleteTasks(completedTasks)
     });
   }, []);
 
@@ -89,21 +98,21 @@ export const Tracker = () => {
   }
 
   function filterArchiveTasks(e) {
-    // setFilterCompleteTasks(
+    setFilterCompleteTasks(
-    //   completeTasks.filter((item) => {
+        allCompletedTasks.filter((item) => {
-    //     if (!e.target.value) {
+        if (!e.target.value) {
-    //       return item;
+          return item;
-    //     }
+        }
-    //     if (
+        if (
-    //       item.name.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
+          item.title.toLowerCase().startsWith(e.target.value.toLowerCase()) ||
-    //       item.description
+          item.description
-    //         .toLowerCase()
+            .toLowerCase()
-    //         .startsWith(e.target.value.toLowerCase())
+            .startsWith(e.target.value.toLowerCase())
-    //     ) {
+        ) {
-    //       return item;
+          return item;
-    //     }
+        }
-    //   })
+      })
-    // );
+    );
   }
 
   return (
@@ -281,19 +290,21 @@ export const Tracker = () => {
                 </div>
               </div>
               <div className="archive__tasksWrapper">
+                {loader && <Loader style="green" />}
+                {!loader && <>
                 {Boolean(filterCompleteTasks.length) ? (
                   filterCompleteTasks.map((task, index) => {
                     return (
                       <div className="archive__completeTask" key={index}>
                         <div className="archive__completeTask__description">
-                          <p>{task.description}</p>
+                          <p>{task.title}</p>
-                          <p className="date">{task.dateComplete}</p>
+                          <p className="date">{task.description}</p>
                         </div>
                         <div className="archive__completeTask__info">
-                          <img src={task.avatarDo} alt="avatar" />
+                          <img src={urlForLocal(task.user.avatar)} alt="avatar" />
                           <div className="archive__completeTask__info__project">
-                            <span>Проект</span>
+                            {/*<span>Проект</span>*/}
-                            <p>{task.project}</p>
+                            <p>{getCorrectDate(task.updated_at)}</p>
                           </div>
                         </div>
                       </div>
@@ -304,6 +315,8 @@ export const Tracker = () => {
                     <p>В архиве задач нет</p>
                   </div>
                 )}
+                </>
+                }
               </div>
             </div>
             <div className="archive__projects">

src/pages/Tracker/tracker.scss

@@ -289,7 +289,7 @@
               color: #252c32;
               border: 1px solid #dde2e4;
               background: white;
-              left: -25px;
+              left: -18px;
               z-index: 2;
             }
 
@@ -298,7 +298,7 @@
               color: white;
               font-size: 14px;
               left: -30px;
-              z-index: 1;
+              z-index: 2;
             }
 
             p {
@@ -453,6 +453,8 @@
 
               &__more {
                 cursor: pointer;
+                display: flex;
+                align-items: center;
                 span {
                   font-weight: 500;
                   font-size: 12px;

src/redux/projectsTrackerSlice.js

@@ -7,6 +7,8 @@ const initialState = {
   toggleTab: 1,
   modalType: "",
   boardLoader: false,
+  columnName: "",
+  columnId: 0
 };
 
 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@@ -55,6 +57,12 @@ export const projectsTrackerSlice = createSlice({
         }
       });
     },
+    setColumnName: (state, action) => {
+      state.columnName = action.payload
+    },
+    setColumnId: (state, action) => {
+      state.columnId = action.payload
+    },
     editProjectName: (state, action) => {
       state.projects.forEach((project) => {
         if (project.id === action.payload.id) {
@@ -62,6 +70,13 @@ export const projectsTrackerSlice = createSlice({
         }
       });
     },
+    editColumnName: (state, action) => {
+      state.projectBoard.columns.forEach((column) => {
+        if (column.id === action.payload.id) {
+          column.title = action.payload.title
+        }
+      })
+    },
     modalToggle: (state, action) => {
       state.modalType = action.payload;
     },
@@ -76,6 +91,7 @@ export const projectsTrackerSlice = createSlice({
 
 export const {
   setProject,
+  setColumnName,
   deleteProject,
   setAllProjects,
   moveProjectTask,
@@ -83,7 +99,8 @@ export const {
   modalToggle,
   activeLoader,
   editProjectName,
-  setColumnTitle,
+  editColumnName,
+  setColumnId
 } = projectsTrackerSlice.actions;
 
 export const getProjects = (state) => state.tracker.projects;
@@ -91,5 +108,7 @@ 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 getColumnName = (state) => state.tracker.columnName;
+export const getColumnId = (state) => state.tracker.columnId;
 
 export default projectsTrackerSlice.reducer;