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

View File

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

View File

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