diff --git a/src/components/Common/BaseButton/BaseButton.jsx b/src/components/Common/BaseButton/BaseButton.jsx index 9f9c5e5a..d659b3e8 100644 --- a/src/components/Common/BaseButton/BaseButton.jsx +++ b/src/components/Common/BaseButton/BaseButton.jsx @@ -1,13 +1,10 @@ import React from "react"; -import "./basebutton.scss" +import "./basebutton.scss"; export const BaseButton = ({ children, styles, ...props }) => { return ( - ); diff --git a/src/components/Modal/TrackerModal/TrackerModal.jsx b/src/components/Modal/TrackerModal/TrackerModal.jsx index 07ac002a..da44c264 100644 --- a/src/components/Modal/TrackerModal/TrackerModal.jsx +++ b/src/components/Modal/TrackerModal/TrackerModal.jsx @@ -1,24 +1,23 @@ -import React, {useEffect, useState} from "react"; - +import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; + import { apiRequest } from "../../../api/request"; -import { urlForLocal } from '../../../utils/helper' +import arrowDown from "../../../assets/icons/arrows/selectArrow.png"; import { - setColumnName, - setColumnPriority, + addPersonToProject, + editColumnName, + editProjectName, + getColumnId, + getColumnName, + getColumnPriority, getProjectBoard, getValueModalType, + setColumnName, + setColumnPriority, setProject, setProjectBoardFetch, - editProjectName, - editColumnName, - getColumnName, - getColumnId, - addPersonToProject, getColumnPriority } from "../../../redux/projectsTrackerSlice"; - -import arrowDown from "../../../assets/icons/arrows/selectArrow.png" - +import { urlForLocal } from "../../../utils/helper"; import "./trackerModal.scss"; export const TrackerModal = ({ @@ -33,8 +32,8 @@ export const TrackerModal = ({ const dispatch = useDispatch(); const projectBoard = useSelector(getProjectBoard); const columnName = useSelector(getColumnName); - const columnId = useSelector(getColumnId) - const columnPriority = useSelector(getColumnPriority) + const columnId = useSelector(getColumnId); + const columnPriority = useSelector(getColumnPriority); const modalType = useSelector(getValueModalType); const [projectName, setProjectName] = useState(defautlInput); @@ -42,9 +41,9 @@ export const TrackerModal = ({ 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) + const [workers, setWorkers] = useState([]); + const [selectWorkersOpen, setSelectWorkersOpen] = useState(false); + const [selectedWorker, setSelectedWorker] = useState(null); function createTab() { if (!valueColumn) { @@ -55,7 +54,9 @@ export const TrackerModal = ({ method: "POST", data: { project_id: projectBoard.id, - priority: projectBoard.columns.length ? projectBoard.columns.at(-1).priority + 1 : 1, + priority: projectBoard.columns.length + ? projectBoard.columns.at(-1).priority + 1 + : 1, title: valueColumn, }, }).then(() => { @@ -106,36 +107,38 @@ export const TrackerModal = ({ function changeColumnParams() { projectBoard.columns.forEach((column) => { if (column.id === columnId && column.priority !== columnPriority) { - const priorityColumns = [{ - column_id: column.id, - priority: Number(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) + 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) + priority: i, + }; + priorityColumns.push(currentColumn); } apiRequest("/project-column/set-priority", { method: "POST", data: { project_id: projectBoard.id, - data: JSON.stringify(priorityColumns) - } + data: JSON.stringify(priorityColumns), + }, }).then(() => { dispatch(setProjectBoardFetch(projectBoard.id)); - }) + }); } - }) - changeColumnTitle() + }); + changeColumnTitle(); } function changeColumnTitle() { @@ -376,12 +379,12 @@ export const TrackerModal = ({

Приоритет колонки

dispatch(setColumnPriority(e.target.value))} + className="name-project" + placeholder="Приоритет колонки" + type="number" + step="1" + value={columnPriority} + onChange={(e) => dispatch(setColumnPriority(e.target.value))} />
diff --git a/src/components/TrackerTaskComment/TrackerTaskComment.jsx b/src/components/TrackerTaskComment/TrackerTaskComment.jsx index efdd258f..c20fb0dd 100644 --- a/src/components/TrackerTaskComment/TrackerTaskComment.jsx +++ b/src/components/TrackerTaskComment/TrackerTaskComment.jsx @@ -1,129 +1,161 @@ import React, { useState } from "react"; -import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment"; + import { apiRequest } from "../../api/request"; -import {urlForLocal} from '../../utils/helper'; -import {getCorrectDate} from "../Calendar/calendarHelper"; -import edit from "../../assets/icons/edit.svg"; import del from "../../assets/icons/delete.svg"; +import edit from "../../assets/icons/edit.svg"; import accept from "../../assets/images/accept.png"; +import { urlForLocal } from "../../utils/helper"; +import { getCorrectDate } from "../Calendar/calendarHelper"; +import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment"; export const TrackerTaskComment = ({ - taskId, - comment, - commentDelete, - addSubComment, - subCommentDelete + taskId, + comment, + commentDelete, + addSubComment, + subCommentDelete, }) => { - const [commentsEditOpen, setCommentsEditOpen] = useState(false) - const [commentsEditText, setCommentsEditText] = useState(comment.text) - const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false) - const [subCommentsCreateText, setSubCommentsCreateText] = useState('') + const [commentsEditOpen, setCommentsEditOpen] = useState(false); + const [commentsEditText, setCommentsEditText] = useState(comment.text); + const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false); + const [subCommentsCreateText, setSubCommentsCreateText] = useState(""); - function editComment() { - if (commentsEditText === comment.text) return - apiRequest("/comment/update", { - method: "PUT", - data: { - comment_id: comment.id, - text: commentsEditText - } - }).then(() => { - }) - } + function editComment() { + if (commentsEditText === comment.text) return; + apiRequest("/comment/update", { + method: "PUT", + data: { + comment_id: comment.id, + text: commentsEditText, + }, + }).then(() => {}); + } - function deleteComment() { - apiRequest("/comment/update", { - method: "PUT", - data: { - comment_id: comment.id, - status: 0 - } - }).then(() => { - if (comment.parent_id) { - subCommentDelete(comment) - } else { - commentDelete(comment) - } - }) - } + function deleteComment() { + apiRequest("/comment/update", { + method: "PUT", + data: { + comment_id: comment.id, + status: 0, + }, + }).then(() => { + if (comment.parent_id) { + subCommentDelete(comment); + } else { + commentDelete(comment); + } + }); + } - function createSubComment() { - setSubCommentsCreateOpen(false) - if(!subCommentsCreateText) return - apiRequest("/comment/create", { - method: "POST", - data: { - text: subCommentsCreateText, - entity_type: 2, - entity_id: taskId, - parent_id: comment.id - } - }).then((res) => { - let newSubComment = res - newSubComment.created_at = new Date() - setSubCommentsCreateText('') - addSubComment(comment.id, newSubComment) - }) - } + function createSubComment() { + setSubCommentsCreateOpen(false); + if (!subCommentsCreateText) return; + apiRequest("/comment/create", { + method: "POST", + data: { + text: subCommentsCreateText, + entity_type: 2, + entity_id: taskId, + parent_id: comment.id, + }, + }).then((res) => { + let newSubComment = res; + newSubComment.created_at = new Date(); + setSubCommentsCreateText(""); + addSubComment(comment.id, newSubComment); + }); + } - return ( -
-
-
- avatar -

{comment.user.fio}

-
-
- {getCorrectDate(comment.created_at)} - {comment.user_id === Number(localStorage.getItem('id')) && - <> -
- edit { - if (commentsEditOpen) { - editComment() - } - setCommentsEditOpen(!commentsEditOpen) - }} /> -
- delete deleteComment()} /> - - } -
-
- {commentsEditOpen ? - { - setCommentsEditText(e.target.value) - }} /> : -

{commentsEditText}

} - {!comment.parent_id && - <> - { - subCommentsCreateOpen ? -
- { - setSubCommentsCreateText(e.target.value) - }}/> - accept { - createSubComment() - }} - /> -
- : - { - setSubCommentsCreateOpen(true) - }} className='comments__list__item__answer'>Ответить - } - - } - {Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => { - return - }) - } + return ( +
+
+
+ avatar +

{comment.user.fio}

- ) -} +
+ {getCorrectDate(comment.created_at)} + {comment.user_id === Number(localStorage.getItem("id")) && ( + <> +
+ edit { + if (commentsEditOpen) { + editComment(); + } + setCommentsEditOpen(!commentsEditOpen); + }} + /> +
+ delete deleteComment()} /> + + )} +
+
+ {commentsEditOpen ? ( + { + setCommentsEditText(e.target.value); + }} + /> + ) : ( +

{commentsEditText}

+ )} + {!comment.parent_id && ( + <> + {subCommentsCreateOpen ? ( +
+ { + setSubCommentsCreateText(e.target.value); + }} + /> + accept { + createSubComment(); + }} + /> +
+ ) : ( + { + setSubCommentsCreateOpen(true); + }} + className="comments__list__item__answer" + > + Ответить + + )} + + )} + {Boolean(comment.subComments?.length) && + comment.subComments.map((subComment) => { + return ( + + ); + })} +
+ ); +}; -export default TrackerTaskComment +export default TrackerTaskComment; diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index 51a33625..d8a10860 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/src/redux/projectsTrackerSlice.js @@ -10,7 +10,7 @@ const initialState = { boardLoader: false, columnName: "", columnId: 0, - columnPriority: 0 + columnPriority: 0, }; export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) => @@ -51,13 +51,16 @@ export const projectsTrackerSlice = createSlice({ moveProjectTask: (state, action) => { state.projectBoard.columns.forEach((column, index) => { if (column.id === action.payload.columnId) { - column.tasks.push({...action.payload.startWrapperIndex.task, column_id: column.id}); + column.tasks.push({ + ...action.payload.startWrapperIndex.task, + column_id: column.id, + }); apiRequest(`/task/update-task`, { method: "PUT", data: { task_id: action.payload.startWrapperIndex.task.id, column_id: column.id, - priority: column.tasks.length - 1 + priority: column.tasks.length - 1, }, }).then(() => {}); } @@ -71,10 +74,15 @@ export const projectsTrackerSlice = createSlice({ movePositionProjectTask: (state, action) => { state.projectBoard.columns.forEach((column, index) => { if (column.id === action.payload.startTask.column_id) { - state.projectBoard.columns[index].tasks = column.tasks.filter((task) => task.id !== action.payload.startTask.id) + state.projectBoard.columns[index].tasks = column.tasks.filter( + (task) => task.id !== action.payload.startTask.id + ); } if (column.id === action.payload.finishTask.column_id) { - column.tasks.splice(action.payload.finishIndex, 0, {...action.payload.startTask, column_id: column.id}) + column.tasks.splice(action.payload.finishIndex, 0, { + ...action.payload.startTask, + column_id: column.id, + }); apiRequest(`/task/update-task`, { method: "PUT", data: { @@ -82,14 +90,14 @@ export const projectsTrackerSlice = createSlice({ column_id: column.id, }, }).then(() => {}); - const priorityTasks = [] + const priorityTasks = []; column.tasks.forEach((task, index) => { const curTask = { task_id: task.id, - priority: index - } - priorityTasks.push(curTask) - }) + priority: index, + }; + priorityTasks.push(curTask); + }); apiRequest(`/task/set-priority`, { method: "POST", data: { @@ -98,17 +106,21 @@ export const projectsTrackerSlice = createSlice({ }, }).then(() => {}); } - }) + }); }, filterCreatedByMe: (state, action) => { state.projectBoard.columns.forEach((column) => { - column.tasks = column.tasks.filter((task) => task.user_id === action.payload) - }) + 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)) - }) + column.tasks = column.tasks.filter((task) => + task.taskUsers.some((person) => person.user_id === action.payload) + ); + }); }, setColumnName: (state, action) => { state.columnName = action.payload; @@ -117,7 +129,7 @@ export const projectsTrackerSlice = createSlice({ state.columnId = action.payload; }, setColumnPriority: (state, action) => { - state.columnPriority = action.payload + state.columnPriority = action.payload; }, editProjectName: (state, action) => { state.projects.forEach((project) => { @@ -162,7 +174,7 @@ export const { addPersonToProject, filterCreatedByMe, filteredParticipateTasks, - movePositionProjectTask + movePositionProjectTask, } = projectsTrackerSlice.actions; export const getProjects = (state) => state.tracker.projects; @@ -172,6 +184,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 const getColumnPriority = (state) => state.tracker.columnPriority; export default projectsTrackerSlice.reducer; diff --git a/src/utils/helper.js b/src/utils/helper.js index ae8b66a1..f32e202b 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -53,12 +53,11 @@ export function scrollToForm() { } export function getCorrectRequestDate(date) { - const yyyy = String(date.getUTCFullYear()) + const yyyy = String(date.getUTCFullYear()); const mm = String(date.getUTCMonth() + 1).padStart(2, "0"); const dd = String(date.getUTCDate()).padStart(2, "0"); - const hh = String(date.getUTCHours()) - const min = String(date.getUTCMinutes()) - const sec = String(date.getUTCSeconds()) - return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}` + const hh = String(date.getUTCHours()); + const min = String(date.getUTCMinutes()); + const sec = String(date.getUTCSeconds()); + return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`; } -