added store modal tracker

This commit is contained in:
MaxOvs19 2023-05-10 12:23:35 +03:00
parent e1ac3bc70e
commit 83f0c67017
3 changed files with 39 additions and 17 deletions

View File

@ -8,6 +8,7 @@ import {
setProject, setProject,
setProjectBoardFetch, setProjectBoardFetch,
editProjectName, editProjectName,
getColumnTitle,
} from "../../../redux/projectsTrackerSlice"; } from "../../../redux/projectsTrackerSlice";
import "./trackerModal.scss"; import "./trackerModal.scss";
@ -19,16 +20,18 @@ export const TrackerModal = ({
defautlInput, defautlInput,
titleProject, titleProject,
projectId, projectId,
titleColumn,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard); const projectBoard = useSelector(getProjectBoard);
const modalType = useSelector(getValueModalType); const modalType = useSelector(getValueModalType);
const titleColumn = useSelector(getColumnTitle);
const [emailWorker, setEmailWorker] = useState(""); const [emailWorker, setEmailWorker] = useState("");
const [projectName, setProjectName] = useState(defautlInput); const [projectName, setProjectName] = useState(defautlInput);
const [editTitleColumn, setEditTitleColumn] = useState(titleColumn); const [editTitleColumn, setEditTitleColumn] = useState("");
const [valueColumn, setValueColumn] = useState(""); const [valueColumn, setValueColumn] = useState("");
const [nameProject, setNameProject] = useState(""); const [nameProject, setNameProject] = useState("");
@ -239,8 +242,19 @@ export const TrackerModal = ({
<div className="title-project"> <div className="title-project">
<h4>Введите новое название</h4> <h4>Введите новое название</h4>
<div className="input-container"> <div className="input-container">
{/* {Boolean(projectBoard?.columns) &&
Boolean(projectBoard.columns.length) &&
projectBoard.columns.map((column) => {
// console.log(column.title);
// console.log("Lol" + titleColumn.title);
if (column.title === titleColumn) {
console.log(column.title);
}
})} */}
<input <input
className="name-project" className="name-project"
placeholder={titleColumn}
value={editTitleColumn} value={editTitleColumn}
onChange={(e) => setEditTitleColumn(e.target.value)} onChange={(e) => setEditTitleColumn(e.target.value)}
/> />

View File

@ -16,6 +16,7 @@ import {
setProjectBoardFetch, setProjectBoardFetch,
setToggleTab, setToggleTab,
activeLoader, activeLoader,
setColumnTitle,
} from "../../redux/projectsTrackerSlice"; } from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@ -191,6 +192,12 @@ export const ProjectTracker = () => {
</Link> </Link>
</div> </div>
<div className="tracker__tabs__content"> <div className="tracker__tabs__content">
<TrackerModal
active={modalAdd}
setActive={setModalAdd}
selectedTab={selectedTab}
/>
{loader && <Loader style="green" />} {loader && <Loader style="green" />}
{!loader && ( {!loader && (
<div className="tracker__tabs__content__tasks tasks active__content"> <div className="tracker__tabs__content__tasks tasks active__content">
@ -263,12 +270,6 @@ export const ProjectTracker = () => {
wrapperHover[column.id] ? "tasks__board__hover" : "" wrapperHover[column.id] ? "tasks__board__hover" : ""
}`} }`}
> >
<TrackerModal
active={modalAdd}
setActive={setModalAdd}
selectedTab={selectedTab}
titleColumn={column.title}
/>
<div className="board__head"> <div className="board__head">
{/*<span className={wrapperIndex === 3 ? "done" : ""}>*/} {/*<span className={wrapperIndex === 3 ? "done" : ""}>*/}
<span>{column.title}</span> <span>{column.title}</span>
@ -302,6 +303,7 @@ export const ProjectTracker = () => {
[column.id]: false, [column.id]: false,
})); }));
dispatch(modalToggle("editColumn")); dispatch(modalToggle("editColumn"));
dispatch(setColumnTitle(column.title));
setModalAdd(true); setModalAdd(true);
}} }}
> >

View File

@ -6,7 +6,8 @@ const initialState = {
projectBoard: {}, projectBoard: {},
toggleTab: 1, toggleTab: 1,
modalType: "", modalType: "",
boardLoader: false titleColumn: "",
boardLoader: false,
}; };
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) => export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@ -29,12 +30,12 @@ export const projectsTrackerSlice = createSlice({
deleteProject: (state, action) => { deleteProject: (state, action) => {
state.projects.forEach((project) => { state.projects.forEach((project) => {
if (project.id === action.payload.id) { if (project.id === action.payload.id) {
project.status = 10 project.status = 10;
} }
}) });
}, },
activeLoader: (state) => { activeLoader: (state) => {
state.boardLoader = true state.boardLoader = true;
}, },
moveProjectTask: (state, action) => { moveProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column, index) => { state.projectBoard.columns.forEach((column, index) => {
@ -58,18 +59,21 @@ export const projectsTrackerSlice = createSlice({
editProjectName: (state, action) => { editProjectName: (state, action) => {
state.projects.forEach((project) => { state.projects.forEach((project) => {
if (project.id === action.payload.id) { if (project.id === action.payload.id) {
project.name = action.payload.name project.name = action.payload.name;
} }
}) });
}, },
modalToggle: (state, action) => { modalToggle: (state, action) => {
state.modalType = action.payload; state.modalType = action.payload;
}, },
setColumnTitle: (state, action) => {
state.titleColumn = action.payload;
},
}, },
extraReducers: { extraReducers: {
[setProjectBoardFetch.fulfilled]: (state, action) => { [setProjectBoardFetch.fulfilled]: (state, action) => {
state.projectBoard = action.payload; state.projectBoard = action.payload;
state.boardLoader = false state.boardLoader = false;
}, },
}, },
}); });
@ -82,13 +86,15 @@ export const {
setToggleTab, setToggleTab,
modalToggle, modalToggle,
activeLoader, activeLoader,
editProjectName editProjectName,
setColumnTitle,
} = projectsTrackerSlice.actions; } = projectsTrackerSlice.actions;
export const getProjects = (state) => state.tracker.projects; export const getProjects = (state) => state.tracker.projects;
export const getProjectBoard = (state) => state.tracker.projectBoard; export const getProjectBoard = (state) => state.tracker.projectBoard;
export const getToggleTab = (state) => state.tracker.toggleTab; export const getToggleTab = (state) => state.tracker.toggleTab;
export const getValueModalType = (state) => state.tracker.modalType; export const getValueModalType = (state) => state.tracker.modalType;
export const getBoarderLoader = (state) => state.tracker.boardLoader export const getColumnTitle = (state) => state.tracker.titleColumn;
export const getBoarderLoader = (state) => state.tracker.boardLoader;
export default projectsTrackerSlice.reducer; export default projectsTrackerSlice.reducer;