prettier fixed

This commit is contained in:
MaxOvs19 2023-06-22 14:56:31 +03:00
parent 9bc60434cc
commit 5ab7e65905
5 changed files with 228 additions and 185 deletions

View File

@ -1,13 +1,10 @@
import React from "react"; import React from "react";
import "./basebutton.scss" import "./basebutton.scss";
export const BaseButton = ({ children, styles, ...props }) => { export const BaseButton = ({ children, styles, ...props }) => {
return ( return (
<button <button className={styles ? `${styles} button` : "button"} {...props}>
className={styles ? `${styles} button` : "button"}
{...props}
>
{children} {children}
</button> </button>
); );

View File

@ -1,24 +1,23 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { apiRequest } from "../../../api/request"; import { apiRequest } from "../../../api/request";
import { urlForLocal } from '../../../utils/helper' import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
import { import {
setColumnName, addPersonToProject,
setColumnPriority, editColumnName,
editProjectName,
getColumnId,
getColumnName,
getColumnPriority,
getProjectBoard, getProjectBoard,
getValueModalType, getValueModalType,
setColumnName,
setColumnPriority,
setProject, setProject,
setProjectBoardFetch, setProjectBoardFetch,
editProjectName,
editColumnName,
getColumnName,
getColumnId,
addPersonToProject, getColumnPriority
} from "../../../redux/projectsTrackerSlice"; } from "../../../redux/projectsTrackerSlice";
import { urlForLocal } from "../../../utils/helper";
import arrowDown from "../../../assets/icons/arrows/selectArrow.png"
import "./trackerModal.scss"; import "./trackerModal.scss";
export const TrackerModal = ({ export const TrackerModal = ({
@ -33,8 +32,8 @@ export const TrackerModal = ({
const dispatch = useDispatch(); const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const columnName = useSelector(getColumnName); const columnName = useSelector(getColumnName);
const columnId = useSelector(getColumnId) const columnId = useSelector(getColumnId);
const columnPriority = useSelector(getColumnPriority) const columnPriority = useSelector(getColumnPriority);
const modalType = useSelector(getValueModalType); const modalType = useSelector(getValueModalType);
const [projectName, setProjectName] = useState(defautlInput); const [projectName, setProjectName] = useState(defautlInput);
@ -42,9 +41,9 @@ export const TrackerModal = ({
const [nameProject, setNameProject] = useState(""); const [nameProject, setNameProject] = useState("");
const [valueTiket, setValueTiket] = useState(""); const [valueTiket, setValueTiket] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState(""); const [descriptionTicket, setDescriptionTicket] = useState("");
const [workers, setWorkers] = useState([]) const [workers, setWorkers] = useState([]);
const [selectWorkersOpen, setSelectWorkersOpen] = useState(false) const [selectWorkersOpen, setSelectWorkersOpen] = useState(false);
const [selectedWorker, setSelectedWorker] = useState(null) const [selectedWorker, setSelectedWorker] = useState(null);
function createTab() { function createTab() {
if (!valueColumn) { if (!valueColumn) {
@ -55,7 +54,9 @@ export const TrackerModal = ({
method: "POST", method: "POST",
data: { data: {
project_id: projectBoard.id, 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, title: valueColumn,
}, },
}).then(() => { }).then(() => {
@ -106,36 +107,38 @@ export const TrackerModal = ({
function changeColumnParams() { function changeColumnParams() {
projectBoard.columns.forEach((column) => { projectBoard.columns.forEach((column) => {
if (column.id === columnId && column.priority !== columnPriority) { if (column.id === columnId && column.priority !== columnPriority) {
const priorityColumns = [{ const priorityColumns = [
{
column_id: column.id, column_id: column.id,
priority: Number(columnPriority) priority: Number(columnPriority),
}] },
];
for (let i = column.priority; i < columnPriority; i++) { for (let i = column.priority; i < columnPriority; i++) {
const currentColumn = { const currentColumn = {
column_id: projectBoard.columns[i].id, column_id: projectBoard.columns[i].id,
priority: i priority: i,
} };
priorityColumns.push(currentColumn) priorityColumns.push(currentColumn);
} }
for (let i = column.priority; i > columnPriority; i--) { for (let i = column.priority; i > columnPriority; i--) {
const currentColumn = { const currentColumn = {
column_id: projectBoard.columns[i - 2].id, column_id: projectBoard.columns[i - 2].id,
priority: i priority: i,
} };
priorityColumns.push(currentColumn) priorityColumns.push(currentColumn);
} }
apiRequest("/project-column/set-priority", { apiRequest("/project-column/set-priority", {
method: "POST", method: "POST",
data: { data: {
project_id: projectBoard.id, project_id: projectBoard.id,
data: JSON.stringify(priorityColumns) data: JSON.stringify(priorityColumns),
} },
}).then(() => { }).then(() => {
dispatch(setProjectBoardFetch(projectBoard.id)); dispatch(setProjectBoardFetch(projectBoard.id));
}) });
} }
}) });
changeColumnTitle() changeColumnTitle();
} }
function changeColumnTitle() { function changeColumnTitle() {
@ -377,9 +380,9 @@ export const TrackerModal = ({
<div className="input-container"> <div className="input-container">
<input <input
className="name-project" className="name-project"
placeholder='Приоритет колонки' placeholder="Приоритет колонки"
type='number' type="number"
step='1' step="1"
value={columnPriority} value={columnPriority}
onChange={(e) => dispatch(setColumnPriority(e.target.value))} onChange={(e) => dispatch(setColumnPriority(e.target.value))}
/> />

View File

@ -1,34 +1,34 @@
import React, { useState } from "react"; import React, { useState } from "react";
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
import { apiRequest } from "../../api/request"; 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 del from "../../assets/icons/delete.svg";
import edit from "../../assets/icons/edit.svg";
import accept from "../../assets/images/accept.png"; 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 = ({ export const TrackerTaskComment = ({
taskId, taskId,
comment, comment,
commentDelete, commentDelete,
addSubComment, addSubComment,
subCommentDelete subCommentDelete,
}) => { }) => {
const [commentsEditOpen, setCommentsEditOpen] = useState(false) const [commentsEditOpen, setCommentsEditOpen] = useState(false);
const [commentsEditText, setCommentsEditText] = useState(comment.text) const [commentsEditText, setCommentsEditText] = useState(comment.text);
const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false) const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false);
const [subCommentsCreateText, setSubCommentsCreateText] = useState('') const [subCommentsCreateText, setSubCommentsCreateText] = useState("");
function editComment() { function editComment() {
if (commentsEditText === comment.text) return if (commentsEditText === comment.text) return;
apiRequest("/comment/update", { apiRequest("/comment/update", {
method: "PUT", method: "PUT",
data: { data: {
comment_id: comment.id, comment_id: comment.id,
text: commentsEditText text: commentsEditText,
} },
}).then(() => { }).then(() => {});
})
} }
function deleteComment() { function deleteComment() {
@ -36,94 +36,126 @@ export const TrackerTaskComment = ({
method: "PUT", method: "PUT",
data: { data: {
comment_id: comment.id, comment_id: comment.id,
status: 0 status: 0,
} },
}).then(() => { }).then(() => {
if (comment.parent_id) { if (comment.parent_id) {
subCommentDelete(comment) subCommentDelete(comment);
} else { } else {
commentDelete(comment) commentDelete(comment);
} }
}) });
} }
function createSubComment() { function createSubComment() {
setSubCommentsCreateOpen(false) setSubCommentsCreateOpen(false);
if(!subCommentsCreateText) return if (!subCommentsCreateText) return;
apiRequest("/comment/create", { apiRequest("/comment/create", {
method: "POST", method: "POST",
data: { data: {
text: subCommentsCreateText, text: subCommentsCreateText,
entity_type: 2, entity_type: 2,
entity_id: taskId, entity_id: taskId,
parent_id: comment.id parent_id: comment.id,
} },
}).then((res) => { }).then((res) => {
let newSubComment = res let newSubComment = res;
newSubComment.created_at = new Date() newSubComment.created_at = new Date();
setSubCommentsCreateText('') setSubCommentsCreateText("");
addSubComment(comment.id, newSubComment) addSubComment(comment.id, newSubComment);
}) });
} }
return ( return (
<div className={[!comment.parent_id && comment.subComments.length ? 'comments__list__item__main': '', <div
'comments__list__item', className={[
comment.parent_id ? 'comments__list__item__subComment' : ''].join(' ')}> !comment.parent_id && comment.subComments.length
<div className='comments__list__item__info'> ? "comments__list__item__main"
<div className='comments__list__item__fio'> : "",
<img src={urlForLocal(comment.user.avatar)} alt='avatar' /> "comments__list__item",
comment.parent_id ? "comments__list__item__subComment" : "",
].join(" ")}
>
<div className="comments__list__item__info">
<div className="comments__list__item__fio">
<img src={urlForLocal(comment.user.avatar)} alt="avatar" />
<p>{comment.user.fio}</p> <p>{comment.user.fio}</p>
</div> </div>
<div className='comments__list__item__date'> <div className="comments__list__item__date">
<span>{getCorrectDate(comment.created_at)}</span> <span>{getCorrectDate(comment.created_at)}</span>
{comment.user_id === Number(localStorage.getItem('id')) && {comment.user_id === Number(localStorage.getItem("id")) && (
<> <>
<div className={commentsEditOpen ? 'edit edit__open' : 'edit'} > <div className={commentsEditOpen ? "edit edit__open" : "edit"}>
<img src={edit} alt='edit' onClick={() => { <img
if (commentsEditOpen) { src={edit}
editComment() alt="edit"
}
setCommentsEditOpen(!commentsEditOpen)
}} />
</div>
<img src={del} alt='delete' onClick={() => deleteComment()} />
</>
}
</div>
</div>
{commentsEditOpen ?
<input className='comments__list__item__text' value={commentsEditText} onChange={(e) => {
setCommentsEditText(e.target.value)
}} /> :
<p className='comments__list__item__text'>{commentsEditText}</p>}
{!comment.parent_id &&
<>
{
subCommentsCreateOpen ?
<div className='comments__list__item__answer__new'>
<input value={subCommentsCreateText} onChange={(e) => {
setSubCommentsCreateText(e.target.value)
}}/>
<img src={accept} alt='accept'
onClick={() => { onClick={() => {
createSubComment() if (commentsEditOpen) {
editComment();
}
setCommentsEditOpen(!commentsEditOpen);
}} }}
/> />
</div> </div>
: <img src={del} alt="delete" onClick={() => deleteComment()} />
<span onClick={() => {
setSubCommentsCreateOpen(true)
}} className='comments__list__item__answer'>Ответить</span>
}
</> </>
} )}
{Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => {
return <TrackerTaskSubComment key={subComment.id} taskId={taskId} comment={subComment} subCommentDelete={subCommentDelete}/>
})
}
</div> </div>
) </div>
} {commentsEditOpen ? (
<input
className="comments__list__item__text"
value={commentsEditText}
onChange={(e) => {
setCommentsEditText(e.target.value);
}}
/>
) : (
<p className="comments__list__item__text">{commentsEditText}</p>
)}
{!comment.parent_id && (
<>
{subCommentsCreateOpen ? (
<div className="comments__list__item__answer__new">
<input
value={subCommentsCreateText}
onChange={(e) => {
setSubCommentsCreateText(e.target.value);
}}
/>
<img
src={accept}
alt="accept"
onClick={() => {
createSubComment();
}}
/>
</div>
) : (
<span
onClick={() => {
setSubCommentsCreateOpen(true);
}}
className="comments__list__item__answer"
>
Ответить
</span>
)}
</>
)}
{Boolean(comment.subComments?.length) &&
comment.subComments.map((subComment) => {
return (
<TrackerTaskSubComment
key={subComment.id}
taskId={taskId}
comment={subComment}
subCommentDelete={subCommentDelete}
/>
);
})}
</div>
);
};
export default TrackerTaskComment export default TrackerTaskComment;

View File

@ -10,7 +10,7 @@ const initialState = {
boardLoader: false, boardLoader: false,
columnName: "", columnName: "",
columnId: 0, columnId: 0,
columnPriority: 0 columnPriority: 0,
}; };
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) => export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@ -51,13 +51,16 @@ export const projectsTrackerSlice = createSlice({
moveProjectTask: (state, action) => { moveProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column, index) => { state.projectBoard.columns.forEach((column, index) => {
if (column.id === action.payload.columnId) { 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`, { apiRequest(`/task/update-task`, {
method: "PUT", method: "PUT",
data: { data: {
task_id: action.payload.startWrapperIndex.task.id, task_id: action.payload.startWrapperIndex.task.id,
column_id: column.id, column_id: column.id,
priority: column.tasks.length - 1 priority: column.tasks.length - 1,
}, },
}).then(() => {}); }).then(() => {});
} }
@ -71,10 +74,15 @@ export const projectsTrackerSlice = createSlice({
movePositionProjectTask: (state, action) => { movePositionProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column, index) => { state.projectBoard.columns.forEach((column, index) => {
if (column.id === action.payload.startTask.column_id) { 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) { 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`, { apiRequest(`/task/update-task`, {
method: "PUT", method: "PUT",
data: { data: {
@ -82,14 +90,14 @@ export const projectsTrackerSlice = createSlice({
column_id: column.id, column_id: column.id,
}, },
}).then(() => {}); }).then(() => {});
const priorityTasks = [] const priorityTasks = [];
column.tasks.forEach((task, index) => { column.tasks.forEach((task, index) => {
const curTask = { const curTask = {
task_id: task.id, task_id: task.id,
priority: index priority: index,
} };
priorityTasks.push(curTask) priorityTasks.push(curTask);
}) });
apiRequest(`/task/set-priority`, { apiRequest(`/task/set-priority`, {
method: "POST", method: "POST",
data: { data: {
@ -98,17 +106,21 @@ export const projectsTrackerSlice = createSlice({
}, },
}).then(() => {}); }).then(() => {});
} }
}) });
}, },
filterCreatedByMe: (state, action) => { filterCreatedByMe: (state, action) => {
state.projectBoard.columns.forEach((column) => { 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) => { filteredParticipateTasks: (state, action) => {
state.projectBoard.columns.forEach((column) => { 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) => { setColumnName: (state, action) => {
state.columnName = action.payload; state.columnName = action.payload;
@ -117,7 +129,7 @@ export const projectsTrackerSlice = createSlice({
state.columnId = action.payload; state.columnId = action.payload;
}, },
setColumnPriority: (state, action) => { setColumnPriority: (state, action) => {
state.columnPriority = action.payload state.columnPriority = action.payload;
}, },
editProjectName: (state, action) => { editProjectName: (state, action) => {
state.projects.forEach((project) => { state.projects.forEach((project) => {
@ -162,7 +174,7 @@ export const {
addPersonToProject, addPersonToProject,
filterCreatedByMe, filterCreatedByMe,
filteredParticipateTasks, filteredParticipateTasks,
movePositionProjectTask movePositionProjectTask,
} = projectsTrackerSlice.actions; } = projectsTrackerSlice.actions;
export const getProjects = (state) => state.tracker.projects; 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 getBoarderLoader = (state) => state.tracker.boardLoader;
export const getColumnName = (state) => state.tracker.columnName; export const getColumnName = (state) => state.tracker.columnName;
export const getColumnId = (state) => state.tracker.columnId; 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; export default projectsTrackerSlice.reducer;

View File

@ -53,12 +53,11 @@ export function scrollToForm() {
} }
export function getCorrectRequestDate(date) { export function getCorrectRequestDate(date) {
const yyyy = String(date.getUTCFullYear()) const yyyy = String(date.getUTCFullYear());
const mm = String(date.getUTCMonth() + 1).padStart(2, "0"); const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
const dd = String(date.getUTCDate()).padStart(2, "0"); const dd = String(date.getUTCDate()).padStart(2, "0");
const hh = String(date.getUTCHours()) const hh = String(date.getUTCHours());
const min = String(date.getUTCMinutes()) const min = String(date.getUTCMinutes());
const sec = String(date.getUTCSeconds()) const sec = String(date.getUTCSeconds());
return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}` return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
} }