fix task modal and column priority

2023-06-09 03:19:09 +03:00 · 2023-06-09 03:19:09 +03:00 · f4b55a5d79
commit f4b55a5d79
parent 4e0a44e5a4
9 changed files with 189 additions and 46 deletions
--- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx
+++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx
@ -77,15 +77,19 @@ export const TrackerTaskComment = ({
                </div>
                <div className='comments__list__item__date'>
                    <span>{getCorrectDate(comment.created_at)}</span>
-                    <div className={commentsEditOpen ? 'edit edit__open' : 'edit'} >
-                        <img src={edit} alt='edit' onClick={() => {
-                            if (commentsEditOpen) {
-                                editComment()
-                            }
-                            setCommentsEditOpen(!commentsEditOpen)
-                        }} />
-                    </div>
-                    <img src={del} alt='delete' onClick={() => deleteComment()} />
+                    {comment.user_id === Number(localStorage.getItem('id')) &&
+                        <>
+                        <div className={commentsEditOpen ? 'edit edit__open' : 'edit'} >
+                            <img src={edit} alt='edit' onClick={() => {
+                                if (commentsEditOpen) {
+                                    editComment()
+                                }
+                                setCommentsEditOpen(!commentsEditOpen)
+                            }} />
+                        </div>
+                        <img src={del} alt='delete' onClick={() => deleteComment()} />
+                        </>
+                    }
                </div>
            </div>
            {commentsEditOpen ?
--- a/src/components/UI/ModalTicket/ModalTicket.jsx
+++ b/src/components/UI/ModalTicket/ModalTicket.jsx
@ -98,6 +98,7 @@ export const ModalTiсket = ({
  function commentDelete(comment) {
    setComments((prevValue) => prevValue.filter((item) => item.id !== comment.id))
    if (comment.subComments.length) {
+      // promiseAll
      comment.subComments.forEach((subComment) => {
        apiRequest("/comment/update", {
          method: "PUT",
@ -225,7 +226,7 @@ export const ModalTiсket = ({
    })
    apiRequest(`/timer/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
      let timerSeconds = 0
-      res.forEach((time) => {
+      res.length && res.forEach((time) => {
        timerSeconds += time.deltaSeconds
        setCurrentTimerCount({
          hours: Math.floor(timerSeconds / 60 / 60),
@ -437,7 +438,7 @@ export const ModalTiсket = ({
                Остановить
              </button>
                :
-              <button className="start" onClick={() => startTaskTimer()}>
+              <button className={task.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
                Начать делать <img src={arrow}></img>
              </button>
            }
--- a/src/components/UI/ModalTicket/ModalTicket.scss
+++ b/src/components/UI/ModalTicket/ModalTicket.scss
@ -436,6 +436,11 @@
      }
    }

+    .disable {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
    .stop {
      font-size: 12px;
      margin-top: 25px;
--- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx
@ -16,7 +16,7 @@ import {
  setProjectBoardFetch,
  setToggleTab,
  getProjectBoard,
-  getBoarderLoader
+  getBoarderLoader, filteredParticipateTasks, filterCreatedByMe
 } from "../../../redux/projectsTrackerSlice";
 import { apiRequest } from "../../../api/request";

@ -28,15 +28,15 @@ import arrow2 from "../../../images/arrowStart.png";
 import plus from "../../../images/plus.svg";
 import tasks from "../../../images/trackerTasks.svg";
 import archive from "../../../images/archiveTracker.svg";
-import selectArrow from "../../../images/select.svg";
 import arrow from "../../../images/arrowCalendar.png";
 import link from "../../../images/link.svg";
 import archive2 from "../../../images/archive.svg";
 import del from "../../../images/delete.svg";
 import edit from "../../../images/edit.svg";
+import accept from "../../../images/accept.png";
+import close from "../../../images/closeProjectPersons.svg";

 import "./ticketFullScreen.scss";
-import close from "../../../images/closeProjectPersons.svg";
 import {getCorrectRequestDate, urlForLocal} from "../../../helper";

 export const TicketFullScreen = ({}) => {
@ -295,14 +295,6 @@ export const TicketFullScreen = ({}) => {
                </div>
                }
              </div>
-              <div className="tasks__head__select">
-                <span>Учавствую</span>
-                <img src={selectArrow} alt="arrow" />
-              </div>
-              <div className="tasks__head__select">
-                <span>Мои</span>
-                <img src={selectArrow} alt="arrow" />
-              </div>
              <Link to={`/profile/tracker`} className="link">
                <div className="tasks__head__back">
                  <p>Вернуться на проекты</p>
@ -421,7 +413,7 @@ export const TicketFullScreen = ({}) => {
                    Остановить
                  </button>
                  :
-                  <button className="start" onClick={() => startTaskTimer()}>
+                  <button className={taskInfo.executor_id === Number(localStorage.getItem('id')) ? 'start' : 'start disable'} onClick={() => startTaskTimer()}>
                    Начать делать <img src={arrow2}></img>
                  </button>
              }
--- a/src/components/UI/TrackerModal/TrackerModal.jsx
+++ b/src/components/UI/TrackerModal/TrackerModal.jsx
@ -5,6 +5,7 @@ import { apiRequest } from "../../../api/request";
 import { urlForLocal } from '../../../helper'
 import {
  setColumnName,
+  setColumnPriority,
  getProjectBoard,
  getValueModalType,
  setProject,
@ -13,7 +14,7 @@ import {
  editColumnName,
  getColumnName,
  getColumnId,
-  addPersonToProject
+  addPersonToProject, getColumnPriority
 } from "../../../redux/projectsTrackerSlice";

 import arrowDown from "../../../images/selectArrow.png"
@ -33,6 +34,7 @@ export const TrackerModal = ({
  const projectBoard = useSelector(getProjectBoard);
  const columnName = useSelector(getColumnName);
  const columnId = useSelector(getColumnId)
+  const columnPriority = useSelector(getColumnPriority)

  const modalType = useSelector(getValueModalType);
  const [projectName, setProjectName] = useState(defautlInput);
@ -53,6 +55,7 @@ export const TrackerModal = ({
      method: "POST",
      data: {
        project_id: projectBoard.id,
+        priority: projectBoard.columns.length ? projectBoard.columns.at(-1).priority + 1 : 1,
        title: valueColumn,
      },
    }).then((res) => {
@ -100,7 +103,42 @@ export const TrackerModal = ({
    });
  }

-  function changeColumnName() {
+  function changeColumnParams() {
+    projectBoard.columns.forEach((column) => {
+      if (column.id === columnId && column.priority !== columnPriority) {
+        const priorityColumns = [{
+          column_id: column.id,
+          priority: Number(columnPriority)
+        }]
+        for (let i = column.priority; i < columnPriority; i++) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i].id,
+            priority: i
+          }
+          priorityColumns.push(currentColumn)
+        }
+        for (let i = column.priority; i > columnPriority; i--) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i - 2].id,
+            priority: i
+          }
+          priorityColumns.push(currentColumn)
+        }
+        apiRequest("/project-column/set-priority", {
+          method: "POST",
+          data: {
+            project_id: projectBoard.id,
+            data: JSON.stringify(priorityColumns)
+          }
+        }).then(() => {
+          dispatch(setProjectBoardFetch(projectBoard.id));
+        })
+      }
+    })
+    changeColumnTitle()
+  }
+
+  function changeColumnTitle() {
    apiRequest("/project-column/update-column", {
      method: "PUT",
      data: {
@ -318,8 +356,19 @@ export const TrackerModal = ({
                  onChange={(e) => dispatch(setColumnName(e.target.value))}
                />
              </div>
+              <h4>Приоритет колонки</h4>
+              <div className="input-container">
+                <input
+                    className="name-project"
+                    placeholder='Приоритет колонки'
+                    type='number'
+                    step='1'
+                    value={columnPriority}
+                    onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+                />
+              </div>
            </div>
-            <button className="button-add" onClick={changeColumnName}>
+            <button className="button-add" onClick={changeColumnParams}>
              Сохранить
            </button>
          </div>
--- a/src/components/UI/TrackerModal/trackerModal.scss
+++ b/src/components/UI/TrackerModal/trackerModal.scss
@ -26,7 +26,7 @@

  .title-project {
    display: flex;
-    align-items: flex-start;
+    align-items: center;
    flex-direction: column;

    .input-container {
@ -34,7 +34,11 @@
      height: 35px;
      background: #ffffff;
      border-radius: 8px;
-      margin-top: 12px;
+      margin: 12px 0;
+
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+      }
    }

    h4 {
@ -123,7 +127,6 @@
  }

  .button-add {
-    margin: 20px;
    width: 130px;
    height: 37px;
    background: #52b709;
@ -136,6 +139,7 @@
    display: flex;
    align-items: center;
    justify-content: center;
+    margin: 0 auto;
  }
 }

--- a/src/pages/ProjectTracker/ProjectTracker.js
+++ b/src/pages/ProjectTracker/ProjectTracker.js
@ -19,7 +19,10 @@ import {
  activeLoader,
  setColumnName,
  setColumnId,
-  deletePersonOnProject
+  setColumnPriority,
+  deletePersonOnProject,
+  filterCreatedByMe,
+  filteredParticipateTasks
 } from "../../redux/projectsTrackerSlice";

 import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@ -28,13 +31,13 @@ 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 selectArrow from "../../images/select.svg";
 import commentsBoard from "../../images/commentsBoard.svg";
 import filesBoard from "../../images/filesBoard.svg";
 import arrow from "../../images/arrowCalendar.png";
 import del from "../../images/delete.svg";
 import edit from "../../images/edit.svg";
 import close from "../../images/closeProjectPersons.svg"
+import accept from "../../images/accept.png";

 export const ProjectTracker = () => {
  const dispatch = useDispatch();
@ -48,7 +51,8 @@ export const ProjectTracker = () => {
  const [modalActiveTicket, setModalActiveTicket] = useState(false);
  const [selectedTicket, setSelectedTicket] = useState({});
  const [personListOpen, setPersonListOpen] = useState(false)
-
+  const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] = useState(false)
+  const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false)
  const startWrapperIndexTest = useRef({});
  const projectBoard = useSelector(getProjectBoard);
  const loader = useSelector(getBoarderLoader);
@ -142,16 +146,36 @@ export const ProjectTracker = () => {
    setModalActiveTicket(true);
  }

-  function deleteColumn(id) {
+  function deleteColumn(column) {
+    const priorityColumns = []
    apiRequest("/project-column/update-column", {
      method: "PUT",
      data: {
-        column_id: id,
+        column_id: column.id,
        project_id: projectBoard.id,
        status: 0,
      },
    }).then((res) => {
-      dispatch(setProjectBoardFetch(projectBoard.id));
+      if (column.priority < projectBoard.columns.length) {
+        for (let i = column.priority; i < projectBoard.columns.length; i++) {
+          const currentColumn = {
+            column_id: projectBoard.columns[i].id,
+            priority: i
+          }
+          priorityColumns.push(currentColumn)
+        }
+        apiRequest("/project-column/set-priority", {
+          method: "POST",
+          data: {
+            project_id: projectBoard.id,
+            data: JSON.stringify(priorityColumns)
+          }
+        }).then(() => {
+          dispatch(setProjectBoardFetch(projectBoard.id));
+        })
+      } else {
+        dispatch(setProjectBoardFetch(projectBoard.id));
+      }
    });
  }

@ -167,6 +191,28 @@ export const ProjectTracker = () => {
    });
  }

+  function filterParticipateTasks() {
+    if (!checkBoxParticipateTasks) {
+      dispatch(filteredParticipateTasks(Number(localStorage.getItem('id'))))
+    } else {
+      dispatch(setProjectBoardFetch(projectId.id))
+      setCheckBoxParticipateTasks(false)
+      setCheckBoxMyTasks(false)
+    }
+    setCheckBoxParticipateTasks(!checkBoxParticipateTasks)
+  }
+
+  function filterMyTask() {
+    if (!checkBoxMyTasks) {
+      dispatch(filterCreatedByMe(Number(localStorage.getItem('id'))))
+    } else {
+      dispatch(setProjectBoardFetch(projectId.id))
+      setCheckBoxParticipateTasks(false)
+      setCheckBoxMyTasks(false)
+    }
+    setCheckBoxMyTasks(!checkBoxMyTasks)
+  }
+
  return (
    <div className="tracker">
      <ProfileHeader />
@ -276,13 +322,21 @@ export const ProjectTracker = () => {
                    </div>
                    }
                  </div>
-                  <div className="tasks__head__select">
+                  <div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
                    <span>Участвую</span>
-                    <img src={selectArrow} alt="arrow" />
+                    <div className="tasks__head__checkBox__box">
+                      {checkBoxParticipateTasks &&
+                        <img src={accept} alt='accept' />
+                      }
+                    </div>
                  </div>
-                  <div className="tasks__head__select">
+                  <div className="tasks__head__checkBox" onClick={filterMyTask}>
                    <span>Мои</span>
-                    <img src={selectArrow} alt="arrow" />
+                    <div className="tasks__head__checkBox__box">
+                      {checkBoxMyTasks &&
+                          <img src={accept} alt='accept' />
+                      }
+                    </div>
                  </div>
                  <Link to="/profile/tracker" className="tasks__head__back">
                    <p>Вернуться на проекты</p>
@ -351,6 +405,7 @@ export const ProjectTracker = () => {
                                dispatch(modalToggle("editColumn"));
                                dispatch(setColumnName(column.title))
                                dispatch(setColumnId(column.id))
+                                dispatch(setColumnPriority(column.priority))
                                setModalAdd(true);
                              }}
                            >
@ -359,7 +414,7 @@ export const ProjectTracker = () => {
                            </div>
                            <div
                              className="column__select__item"
-                              onClick={() => deleteColumn(column.id)}
+                              onClick={() => deleteColumn(column)}
                            >
                              <img src={del} alt="delete" />
                              <span>Удалить</span>
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -423,18 +423,33 @@
            }
          }

-          &__select {
+          &__checkBox {
            cursor: pointer;
+            display: flex;
+            align-items: center;

-            img {
-              margin-left: 18px;
-            }
            span {
              color: #252c32;
              font-weight: 400;
              font-size: 14px;
              line-height: 24px;
            }
+
+            &__box {
+              width: 20px;
+              height: 20px;
+              border-radius: 6px;
+              border: solid 1px gray;
+              margin-left: 5px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              img {
+                width: 18px;
+                height: 18px;
+              }
+            }
          }

          &__back {
--- a/src/redux/projectsTrackerSlice.js
+++ b/src/redux/projectsTrackerSlice.js
@ -8,7 +8,8 @@ const initialState = {
  modalType: "",
  boardLoader: false,
  columnName: "",
-  columnId: 0
+  columnId: 0,
+  columnPriority: 0
 };

 export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@ -63,12 +64,25 @@ export const projectsTrackerSlice = createSlice({
        }
      });
    },
+    filterCreatedByMe: (state, action) => {
+      state.projectBoard.columns.forEach((column) => {
+        column.tasks = column.tasks.filter((task) => task.user_id === action.payload)
+      })
+    },
+    filteredParticipateTasks: (state, action) => {
+      state.projectBoard.columns.forEach((column) => {
+        column.tasks = column.tasks.filter((task) => task.taskUsers.some((person) => person.user_id === action.payload))
+      })
+    },
    setColumnName: (state, action) => {
      state.columnName = action.payload
    },
    setColumnId: (state, action) => {
      state.columnId = action.payload
    },
+    setColumnPriority: (state, action) => {
+      state.columnPriority = action.payload
+    },
    editProjectName: (state, action) => {
      state.projects.forEach((project) => {
        if (project.id === action.payload.id) {
@ -107,8 +121,11 @@ export const {
  editProjectName,
  editColumnName,
  setColumnId,
+  setColumnPriority,
  deletePersonOnProject,
-  addPersonToProject
+  addPersonToProject,
+  filterCreatedByMe,
+  filteredParticipateTasks
 } = projectsTrackerSlice.actions;

 export const getProjects = (state) => state.tracker.projects;
@ -118,5 +135,6 @@ 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 const getColumnPriority = (state) => state.tracker.columnPriority

 export default projectsTrackerSlice.reducer;