Added modal in project tiket
This commit is contained in:
parent
553ac3e75d
commit
bb027d003f
@ -1,20 +1,22 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalSettings from "../UI/ModalSettings/ModalSettings";
|
||||
import { apiRequest } from "../../api/request";
|
||||
import { deleteProject, modalToggle } from "../../redux/projectsTrackerSlice";
|
||||
|
||||
import { ModalSelect } from "../UI/ModalSelect/ModalSelect";
|
||||
import ModalAdd from "../UI/ModalAdd/ModalAdd";
|
||||
|
||||
import link from "../../images/link.svg";
|
||||
import archiveSet from "../../images/archive.svg";
|
||||
import del from "../../images/delete.svg";
|
||||
import edit from "../../images/edit.svg";
|
||||
|
||||
import {apiRequest} from "../../api/request";
|
||||
import {useDispatch} from "react-redux";
|
||||
import { deleteProject } from "../../redux/projectsTrackerSlice";
|
||||
|
||||
import "./projectTiket.scss";
|
||||
|
||||
export const ProjectTiket = ({ project, index }) => {
|
||||
const [modalSettings, setModalSettings] = useState(false);
|
||||
const [modalSelect, setModalSelect] = useState(false);
|
||||
const [modalAdd, setModalAdd] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
@ -32,20 +34,20 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
event &&
|
||||
!path.find((item) => item.classList && item.classList.contains("project"))
|
||||
) {
|
||||
setModalSettings(false);
|
||||
setModalSelect(false);
|
||||
}
|
||||
}
|
||||
|
||||
function removeProject() {
|
||||
apiRequest('/project/update', {
|
||||
method: 'PUT',
|
||||
apiRequest("/project/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
project_id: project.id,
|
||||
status: 0
|
||||
}
|
||||
status: 0,
|
||||
},
|
||||
}).then((res) => {
|
||||
dispatch(deleteProject(project))
|
||||
})
|
||||
dispatch(deleteProject(project));
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
@ -53,16 +55,34 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
<Link to={`/tracker/project/${project.id}`}>{project.name}</Link>
|
||||
<div className="project__info">
|
||||
<p>Открытые задачи</p>
|
||||
<span className="count">{project.columns.reduce((accumulator, currentValue) => accumulator + currentValue.tasks.length, 0)}</span>
|
||||
<span className="count">
|
||||
{project.columns.reduce(
|
||||
(accumulator, currentValue) =>
|
||||
accumulator + currentValue.tasks.length,
|
||||
0
|
||||
)}
|
||||
</span>
|
||||
{/*<span className="add">{project.columns.length ? '+' : ''}</span>*/}
|
||||
<span className="menu-settings" onClick={() => setModalSettings(true)}>
|
||||
<span className="menu-settings" onClick={() => setModalSelect(true)}>
|
||||
...
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ModalSettings active={modalSettings}>
|
||||
<ModalAdd
|
||||
active={modalAdd}
|
||||
setActive={setModalAdd}
|
||||
defautlInput={project.name}
|
||||
></ModalAdd>
|
||||
|
||||
<ModalSelect active={modalSelect}>
|
||||
<div className="project__settings-menu">
|
||||
<div>
|
||||
<div
|
||||
onClick={() => {
|
||||
dispatch(modalToggle("editProject"));
|
||||
setModalAdd(true);
|
||||
setModalSelect(false);
|
||||
}}
|
||||
>
|
||||
<img src={edit}></img>
|
||||
<p>редактировать</p>
|
||||
</div>
|
||||
@ -74,13 +94,12 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
<img src={archiveSet}></img>
|
||||
<p>в архив</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={removeProject}>
|
||||
<div onClick={removeProject}>
|
||||
<img src={del}></img>
|
||||
<p>удалить</p>
|
||||
</div>
|
||||
</div>
|
||||
</ModalSettings>
|
||||
</ModalSelect>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -10,9 +10,7 @@ import {
|
||||
|
||||
import "./modalAdd.scss";
|
||||
|
||||
// НУЖНО ДОБАВИТЬ ВАРИАЦИИ ОТРИСОВКИ И ПЕРЕНЕТИ ЛОГИКУ В МОДАЛКУ
|
||||
|
||||
export const ModalAdd = ({ active, setActive, selectedTab }) => {
|
||||
export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
||||
const dispatch = useDispatch();
|
||||
const projectBoard = useSelector(getProjectBoard);
|
||||
|
||||
@ -142,6 +140,28 @@ export const ModalAdd = ({ active, setActive, selectedTab }) => {
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
);
|
||||
case "editProject":
|
||||
return (
|
||||
<div
|
||||
className="modal-add__content"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="title-project">
|
||||
<h4>Введите новое название</h4>
|
||||
<div className="input-container">
|
||||
<input
|
||||
className="name-project"
|
||||
value={defautlInput}
|
||||
onChange={(e) => setValueTiket(e.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
</div>
|
||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
||||
Добавить
|
||||
</button>
|
||||
<span className="exit" onClick={() => setActive(false)}></span>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
@ -48,7 +48,7 @@
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: -13px 0 16px 0;
|
||||
margin: 12px 0 16px 0;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
|
@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
|
||||
import "./modalSettings.scss";
|
||||
import "./modalSelect.scss";
|
||||
|
||||
export const ModalSettings = ({ active, children }) => {
|
||||
export const ModalSelect = ({ active, children }) => {
|
||||
return (
|
||||
<div className={active ? "project__settings active" : "project__settings "}>
|
||||
{children}
|
||||
@ -10,4 +10,4 @@ export const ModalSettings = ({ active, children }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalSettings;
|
||||
export default ModalSelect;
|
Loading…
Reference in New Issue
Block a user