apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

delete modal create, and fixed modal add

Browse Source
This commit is contained in:
MaxOvs19 2023-05-05 14:48:45 +03:00
parent 5256159e2b
commit f32a8f64e5
6 changed files with 262 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/components/UI/ModalAdd/ModalAdd.jsx
View File

@ -5,23 +5,34 @@ import { apiRequest } from "../../../api/request";
import {
getProjectBoard,
getValueModalType,
setProject,
setProjectBoardFetch,
} from "../../../redux/projectsTrackerSlice";
import "./modalAdd.scss";
export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
export const ModalAdd = ({
active,
setActive,
selectedTab,
defautlInput,
titleProject,
}) => {
const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard);
const modalType = useSelector(getValueModalType);
const [emailWorker, setEmailWorker] = useState("");
const [ProjectName, setProjectName] = useState(defautlInput);
const [valueColumn, setValueColumn] = useState("");
const [nameProject, setNameProject] = useState("");
const [valueTiket, setValueTiket] = useState("");
const [valueColl, setValueColl] = useState("");
const [descriptionTicket, setDescriptionTicket] = useState("");
function createTab() {
if (!valueColl) {
if (!valueColumn) {
return;
}
@ -29,12 +40,12 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
method: "POST",
data: {
project_id: projectBoard.id,
title: valueColl,
title: valueColumn,
},
}).then((res) => {
dispatch(setProjectBoardFetch(projectBoard.id));
});
setValueColl("");
setValueColumn("");
setActive(false);
}
@ -62,62 +73,64 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
setDescriptionTicket("");
}
function editProject() {
function editProject() {}
function editProjectName(value) {
setProjectName(value);
}
function createProject() {
if (nameProject === "") {
return;
} else {
apiRequest("/project/create", {
method: "POST",
data: {
user_id: localStorage.getItem("id"),
name: nameProject,
status: 1,
},
}).then((res) => {
const result = { ...res, columns: [] };
dispatch(setProject(result));
setActive(false);
setNameProject("");
});
}
}
function getModal() {
switch (modalType) {
case "createColumn":
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={valueColl}
onChange={(e) => setValueColl(e.target.value)}
></input>
</div>
</div>
<button className="button-add" onClick={createTab}>
Создать
</button>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
);
case "addWorker":
return (
<div
className="modal-add__content"
onClick={(e) => e.stopPropagation()}
className={active ? "modal-add active" : "modal-add"}
onClick={() => setActive(false)}
>
<div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
{modalType === "addWorker" && (
<div>
<div className="title-project">
<h4>Добавьте участника</h4>
<p className="title-project__decs">Введите имя или e-mail </p>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
value={emailWorker}
onChange={(e) => setEmailWorker(e.target.value)}
></input>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
<button
className="button-add"
onClick={(e) => {
e.preventDefault();
setActive(false);
}}
>
Добавить
</button>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
);
case "createTiketProject":
return (
<div
className="modal-add__content"
onClick={(e) => e.stopPropagation()}
>
)}
{modalType === "createTiketProject" && (
<div>
<div className="title-project">
<h4>Введите название и описание задачи</h4>
<div className="input-container">
@ -140,37 +153,79 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
<button className="button-add" onClick={createTiket}>
Создать
</button>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
);
case "editProject":
return (
<div
className="modal-add__content"
onClick={(e) => e.stopPropagation()}
>
)}
{modalType === "editProject" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
<input
className="name-project"
value={defautlInput}
onChange={(e) => setValueTiket(e.target.value)}
value={ProjectName}
onChange={(e) => editProjectName(e.target.value)}
></input>
</div>
</div>
<button className="button-add" onClick={editProject}>
Сохранить
</button>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
);
case "editColumn":
return (
<div
className="modal-add__content"
onClick={(e) => e.stopPropagation()}
>
)}
{modalType === "createProject" && (
<div>
<div className="title-project">
<h4>{titleProject}</h4>
<div className="input-container">
<input
className="name-project"
value={nameProject}
onChange={(e) => setNameProject(e.target.value)}
/>
</div>
<button className="button-add" onClick={createProject}>
Создать
</button>
</div>
</div>
)}
{modalType === "addSubtask" && (
<div>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу{" "}
<p>в колонку(id) задачи "{defautlInput}"</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
Добавить
</button>
</div>
)}
{modalType === "createColumn" && (
<div>
<div className="title-project">
<h4>Введите название колонки</h4>
<div className="input-container">
<input
className="name-project"
value={valueColumn}
onChange={(e) => setValueColumn(e.target.value)}
></input>
</div>
</div>
<button className="button-add" onClick={createTab}>
Создать
</button>
</div>
)}
{/* TODO: fix state */}
{modalType === "editColumn" && (
<div>
<div className="title-project">
<h4>Введите новое название</h4>
<div className="input-container">
@ -184,20 +239,11 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
<button className="button-add" onClick={(e) => e.preventDefault()}>
Сохранить
</button>
</div>
)}
<span className="exit" onClick={() => setActive(false)}></span>
</div>
);
default:
return null;
}
}
return (
<div
className={active ? "modal-add active" : "modal-add"}
onClick={() => setActive(false)}
>
{getModal()}
</div>
);
};

2
src/components/UI/ModalAdd/modalAdd.scss
View File

@ -39,7 +39,7 @@
h4 {
font-weight: 500;
font-size: 17px;
font-size: 22px;
line-height: 26px;
color: #263238 !important;
}

60
src/components/UI/ModalCreate/ModalCreate.jsx
View File

@ -1,60 +0,0 @@
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { setProject } from "../../../redux/projectsTrackerSlice";
import {apiRequest} from "../../../api/request";
import "./ModalCreate.scss";
export const ModalCreate = ({ active, setActive, title }) => {
const [inputValue, setInputValue] = useState("");
const dispatch = useDispatch();
function createName() {
if (inputValue === "") {
return;
} else {
apiRequest('/project/create', {
method: 'POST',
data: {
user_id: localStorage.getItem('id'),
name: inputValue,
status: 1,
}
}).then((res) => {
const result = {...res, columns: []}
dispatch(setProject(result));
setActive(false);
setInputValue("");
})
}
}
return (
<div
className={active ? "modal-project active" : "modal-project"}
onClick={() => setActive(false)}
>
<div
className="modal-project__content"
onClick={(e) => e.stopPropagation()}
>
<div className="title-project">
<h4>{title}</h4>
<div className="input-container">
<input
className="name-project"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
</div>
<button className="create-project" onClick={createName}>
Создать
</button>
</div>
<span className="exit" onClick={() => setActive(false)}></span>
</div>
</div>
);
};
export default ModalCreate;

77
src/components/UI/ModalCreate/ModalCreate.scss
View File

@ -1,77 +0,0 @@
.modal-project {
z-index: 9999;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
&__content {
position: relative;
width: 424px;
height: 248px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.title-project {
display: flex;
align-items: flex-start;
flex-direction: column;
.input-container {
width: 287px;
height: 35px;
background: #ffffff;
border-radius: 8px;
}
h4 {
font-weight: 500;
font-size: 22px;
line-height: 26px;
color: #263238;
margin-bottom: 22px;
}
}
.name-project {
margin-left: 10px;
border: none;
outline: none;
height: 100%;
width: 90%;
font-size: 14px;
}
.create-project {
margin: 30px 0 0 0;
width: 130px;
height: 37px;
background: #52b709;
border-radius: 44px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.modal-project.active {
transform: scale(1);
}

40
src/components/UI/ModalTicket/ModalTicket.jsx
View File

@ -3,7 +3,10 @@ import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd";
import { apiRequest } from "../../../api/request";
import { useDispatch } from "react-redux";
import { setProjectBoardFetch } from "../../../redux/projectsTrackerSlice";
import {
modalToggle,
setProjectBoardFetch,
} from "../../../redux/projectsTrackerSlice";
import category from "../../../images/category.png";
import watch from "../../../images/watch.png";
@ -56,7 +59,10 @@ export const ModalTiсket = ({
<h3 className="title-project">
<img src={category} className="title-project__category"></img>
Проект: {projectName}
<Link to={`/tracker/task/${task.id}`} className="title-project__full">
<Link
to={`/tracker/task/${task.id}`}
className="title-project__full"
>
<img src={fullScreen}></img>
</Link>
</h3>
@ -71,7 +77,12 @@ export const ModalTiсket = ({
</div>
<div className="content__communication">
<p className="tasks">
<button onClick={() => setAddSubtask(true)}>
<button
onClick={() => {
dispatch(modalToggle("addSubtask"));
setAddSubtask(true);
}}
>
<img src={plus}></img>
Добавить под задачу
</button>
@ -97,7 +108,8 @@ export const ModalTiсket = ({
<span>{task.title}</span>
<p className="workers__creator">Создатель : {task.user?.fio}</p>
<div>
{Boolean(task.taskUsers?.length) && task.taskUsers.map((worker, index) => {
{Boolean(task.taskUsers?.length) &&
task.taskUsers.map((worker, index) => {
return (
<div className="worker" key={index}>
<img src={worker.avatar}></img>
@ -145,20 +157,12 @@ export const ModalTiсket = ({
</div>
</div>
</div>
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
Добавить
</button>
</ModalAdd>
<ModalAdd
active={addSubtask}
setActive={setAddSubtask}
defautlInput={task.column_id}
></ModalAdd>
</div>
);
};

107
src/pages/Tracker/Tracker.js
View File

@ -7,11 +7,17 @@ import {apiRequest} from "../../api/request";
import { Navigation } from "../../components/Navigation/Navigation";
import { useDispatch, useSelector } from "react-redux";
import { setAllProjects, getProjects, setToggleTab, getToggleTab } from "../../redux/projectsTrackerSlice";
import {
setAllProjects,
getProjects,
setToggleTab,
getToggleTab,
modalToggle,
} from "../../redux/projectsTrackerSlice";
import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
import { urlForLocal } from '../../helper'
import { urlForLocal } from "../../helper";
import { getCorrectDate } from "../../components/Calendar/calendarHelper";
import { Loader } from "../../components/Loader/Loader";
@ -27,10 +33,11 @@ import "./tracker.scss";
export const Tracker = () => {
const dispatch = useDispatch();
const projects = useSelector(getProjects);
const tab = useSelector(getToggleTab)
const [allTasks, setAllTasks] = useState([])
const tab = useSelector(getToggleTab);
const [allTasks, setAllTasks] = useState([]);
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
const [loader, setLoader] = useState(false)
const [loader, setLoader] = useState(false);
const [archiveProjects] = useState([
{
@ -40,7 +47,7 @@ export const Tracker = () => {
{
name: "Будущее России",
date: "7 марта 2023 г",
}
},
]);
const [completeTasks] = useState([
@ -64,7 +71,7 @@ export const Tracker = () => {
dateComplete: "7 марта 2023 г",
avatarDo: avatarTest,
project: "Будущее России",
}
},
]);
const [filterCompleteTasks, setFilterCompleteTasks] = useState(completeTasks);
@ -73,19 +80,25 @@ export const Tracker = () => {
const [modalCreateProject, setModalCreateProject] = useState(false);
useEffect(() => {
setLoader(true)
apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
dispatch(setAllProjects(el.projects))
setLoader(false)
})
apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
setAllTasks(el)
setFilteredAllTasks(el)
})
}, [])
setLoader(true);
apiRequest(
`/project/project-list?user_id=${localStorage.getItem(
"id"
)}&expand=columns`
).then((el) => {
dispatch(setAllProjects(el.projects));
setLoader(false);
});
apiRequest(
`/task/get-user-tasks?user_id=${localStorage.getItem("id")}`
).then((el) => {
setAllTasks(el);
setFilteredAllTasks(el);
});
}, []);
const toggleTabs = (index) => {
dispatch(setToggleTab(index))
dispatch(setToggleTab(index));
};
function filterAllTask(e) {
@ -171,28 +184,28 @@ export const Tracker = () => {
: "tracker__tabs__content__projects tracker__tabs__content__wrapper"
}
>
<ModalCreate
<ModalAdd
active={modalCreateProject}
setActive={setModalCreateProject}
title={"Укажите название проекта:"}
/>
titleProject={"Укажите название проекта:"}
></ModalAdd>
{loader &&
<Loader style='green'/>
}
{loader && <Loader style="green" />}
{Boolean(projects.length) && !loader &&
{Boolean(projects.length) &&
!loader &&
projects.map((project, index) => {
return (
project.status !== 10 ?
<ProjectTiket
key={index}
project={project}
></ProjectTiket>
: ''
return project.status !== 10 ? (
<ProjectTiket key={index} project={project}></ProjectTiket>
) : (
""
);
})}
{(!Boolean(projects.length) || !Boolean(projects.filter((project) => project.status !== 10).length)) && !loader && (
{(!Boolean(projects.length) ||
!Boolean(
projects.filter((project) => project.status !== 10).length
)) &&
!loader && (
<div className="no-projects">
<div className="no-projects__createNew">
<div>
@ -201,7 +214,10 @@ export const Tracker = () => {
</div>
<button
className="createProjectBtn"
onClick={() => setModalCreateProject(true)}
onClick={() => {
dispatch(modalToggle("createProject"));
setModalCreateProject(true);
}}
>
<span>+</span>Создать проект
</button>
@ -216,7 +232,10 @@ export const Tracker = () => {
<div className="create-newProject">
<button
className="createProjectBtn"
onClick={() => setModalCreateProject(true)}
onClick={() => {
dispatch(modalToggle("createProject"));
setModalCreateProject(true);
}}
>
<span>+</span>Создать проект
</button>
@ -245,12 +264,11 @@ export const Tracker = () => {
/>
</div>
</div>
{loader &&
<Loader style='green' />
}
{!loader &&
{loader && <Loader style="green" />}
{!loader && (
<div className="taskList__wrapper">
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
{Boolean(filteredAllTasks.length) &&
filteredAllTasks.map((task) => {
return (
<div className="task" key={task.id}>
<div className="task__info">
@ -258,7 +276,10 @@ export const Tracker = () => {
<p>{task.description}</p>
</div>
<div className="task__person">
<img src={urlForLocal(task.user.avatar)} alt="avatar" />
<img
src={urlForLocal(task.user.avatar)}
alt="avatar"
/>
<div className="task__project">
<p>{task.user.fio}</p>
<span>{getCorrectDate(task.created_at)}</span>
@ -268,7 +289,7 @@ export const Tracker = () => {
);
})}
</div>
}
)}
</div>
<div
className={