diff --git a/src/components/UI/ModalTicket/ModalTicket.jsx b/src/components/UI/ModalTicket/ModalTicket.jsx index cee567d2..290ff0bd 100644 --- a/src/components/UI/ModalTicket/ModalTicket.jsx +++ b/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 (
Задача -
{task.title}
+ {editOpen ? { + setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) + }} /> :
{inputsValue.title}
}
-

{task.description}

+ {editOpen ? { + setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) + }}/> :

{inputsValue.description}

} -

{task.description}

@@ -138,15 +156,22 @@ export const ModalTiсket = ({

-
+
{ + if(editOpen) { + setEditOpen(!editOpen) + editTask() + } else { + setEditOpen(!editOpen) + } + }}> -

редактировать

+

{editOpen ? 'сохранить' : 'редактировать'}

ссылка на проект

-
+

в архив

diff --git a/src/components/UI/ModalTicket/ModalTicket.scss b/src/components/UI/ModalTicket/ModalTicket.scss index 727f8f5b..fdd19c48 100644 --- a/src/components/UI/ModalTicket/ModalTicket.scss +++ b/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; + } + } } } } diff --git a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx b/src/components/UI/TicketFullScreen/TicketFullScreen.jsx index 008b16a9..46f1c769 100644 --- a/src/components/UI/TicketFullScreen/TicketFullScreen.jsx +++ b/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 = ({}) => {

Архив

+ {loader ? : + <>
@@ -153,11 +173,14 @@ export const TicketFullScreen = ({}) => {
Задача -
{taskInfo.title}
+ {editOpen ? { + setInputsValue((prevValue) => ({...prevValue, title: e.target.value})) + }} /> :
{inputsValue.title}
}
-

{taskInfo.description}

+ {editOpen ? { + setInputsValue((prevValue) => ({...prevValue, description: e.target.value})) + }}/> :

{inputsValue.description}

} -

{taskInfo.description}

@@ -229,9 +252,16 @@ export const TicketFullScreen = ({}) => {

-
+
{ + if(editOpen) { + setEditOpen(!editOpen) + editTask() + } else { + setEditOpen(!editOpen) + } + }}> -

редактировать

+

{editOpen ? 'сохранить' : 'редактировать'}

@@ -248,6 +278,8 @@ export const TicketFullScreen = ({}) => {
+ + }
diff --git a/src/components/UI/TrackerModal/TrackerModal.jsx b/src/components/UI/TrackerModal/TrackerModal.jsx index 9951b10b..b0d3c77a 100644 --- a/src/components/UI/TrackerModal/TrackerModal.jsx +++ b/src/components/UI/TrackerModal/TrackerModal.jsx @@ -3,12 +3,15 @@ import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { apiRequest } from "../../../api/request"; import { + setColumnName, getProjectBoard, getValueModalType, setProject, setProjectBoardFetch, editProjectName, - getColumnTitle, + editColumnName, + getColumnName, + getColumnId } from "../../../redux/projectsTrackerSlice"; import "./trackerModal.scss"; @@ -20,16 +23,16 @@ export const TrackerModal = ({ defautlInput, titleProject, projectId, - titleColumn }) => { 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(""); @@ -92,6 +95,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; @@ -243,12 +259,12 @@ export const TrackerModal = ({
setEditTitleColumn(e.target.value)} + value={columnName} + onChange={(e) => dispatch(setColumnName(e.target.value))} />
-
diff --git a/src/pages/ProjectTracker/ProjectTracker.js b/src/pages/ProjectTracker/ProjectTracker.js index 842f85a0..12cbf8e5 100644 --- a/src/pages/ProjectTracker/ProjectTracker.js +++ b/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"; @@ -217,9 +218,9 @@ export const ProjectTracker = () => {

добавить колонку

- avatar - avatar - +9 + {/*avatar*/} + {/*avatar*/} + {projectBoard.projectUsers?.length} { @@ -246,13 +247,13 @@ export const ProjectTracker = () => {
- + {Boolean(modalActiveTicket) && }
{Boolean(projectBoard?.columns) && @@ -270,12 +271,6 @@ export const ProjectTracker = () => { wrapperHover[column.id] ? "tasks__board__hover" : "" }`} > -
{/**/} {column.title} @@ -309,6 +304,8 @@ export const ProjectTracker = () => { [column.id]: false, })); dispatch(modalToggle("editColumn")); + dispatch(setColumnName(column.title)) + dispatch(setColumnId(column.id)) setModalAdd(true); }} > diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index 36b87681..f6291b7b 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -290,6 +290,8 @@ export const Tracker = () => {
+ {loader && } + {!loader && <> {Boolean(filterCompleteTasks.length) ? ( filterCompleteTasks.map((task, index) => { return ( @@ -313,6 +315,8 @@ export const Tracker = () => {

В архиве задач нет

)} + + }
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index 34a51fd0..725d3178 100644 --- a/src/pages/Tracker/tracker.scss +++ b/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 { diff --git a/src/redux/projectsTrackerSlice.js b/src/redux/projectsTrackerSlice.js index 9efb3268..3e7333aa 100644 --- a/src/redux/projectsTrackerSlice.js +++ b/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;