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

choose project

Browse Source
This commit is contained in:
Mikola 2024-02-15 14:56:58 +03:00
parent 66b7461266
commit 269f3fe703
1 changed files with 54 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/ReportForm/ReportForm.jsx
View File

@ -18,10 +18,10 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import arrow from "assets/icons/arrows/left-arrow.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import calendarIcon from "assets/icons/calendar.svg";
import ellipse from "assets/icons/ellipse.png";
import remove from "assets/icons/remove.svg";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import {
getCorrectDate,
@ -41,7 +41,6 @@ const ReportForm = () => {
const editReport = useSelector(getEditReport);
const dispatch = useDispatch();
useEffect(() => {
initListeners();
getProjectList();
@ -54,10 +53,10 @@ const ReportForm = () => {
? new Date(reportDate ? reportDate._d : editReport.created_at)
: new Date()
);
const [projectList, setProjectList] = useState([])
const [projectLoader, setProjectLoader] = useState(false)
const [selectedProject, setSelectedProject] = useState('Выберите проект')
const [openSelectProject, setOpenSelectProject] = useState(false)
const [projectList, setProjectList] = useState([]);
const [projectLoader, setProjectLoader] = useState(false);
const [selectedProject, setSelectedProject] = useState("Выберите проект");
const [openSelectProject, setOpenSelectProject] = useState(false);
const [datePickerOpen, setDatePickerOpen] = useState(false);
const [inputs, setInputs] = useState(
@ -93,13 +92,11 @@ const ReportForm = () => {
div.classList &&
(div.classList.contains("report-form__block-img") ||
div.classList.contains("react-datepicker-popper") ||
div.classList.contains("report-form__project")
)
div.classList.contains("report-form__project"))
)
) {
setDatePickerOpen(false);
setOpenSelectProject(false)
setOpenSelectProject(false);
}
};
@ -110,16 +107,16 @@ const ReportForm = () => {
};
const getProjectList = () => {
setProjectLoader(true)
setProjectLoader(true);
apiRequest(
`/project/project-list?user_id=${localStorage.getItem(
"id"
)}&expand=columns`
).then((el) => {
setProjectLoader(false)
setProjectList(el?.projects)
setProjectLoader(false);
setProjectList(el?.projects);
});
}
};
const handler = () => {
setIsFetching(true);
for (let input of inputs) {
@ -135,7 +132,7 @@ const ReportForm = () => {
data: {
user_id: localStorage.getItem("id"),
tasks: inputs,
project_id: selectedProject.id ? selectedProject.id : '',
project_id: selectedProject.id ? selectedProject.id : "",
difficulties: troublesInputValue,
tomorrow: scheduledInputValue,
created_at: getCreatedDate(startDate),
@ -167,7 +164,7 @@ const ReportForm = () => {
data: {
tasks: inputs,
difficulties: troublesInputValue,
project_id: selectedProject.id ? selectedProject.id : '',
project_id: selectedProject.id ? selectedProject.id : "",
tomorrow: scheduledInputValue,
created_at: getCreatedDate(startDate),
status: 1
@ -244,30 +241,58 @@ const ReportForm = () => {
setStartDate(date);
}}
/>
{projectLoader ? <div className="loader__wrapper"><Loader /></div> :
{projectLoader ? (
<div className="loader__wrapper">
<Loader />
</div>
) : (
<>
<div className="report-form__task-list">
<img src={ellipse} alt="" />
<span>Выберите проект</span>
</div>
<div className="report-form__project">
<div className="project__selected" onClick={() => setOpenSelectProject(!openSelectProject)}>
<p>{selectedProject.name ? selectedProject.name : selectedProject}</p>
<img className={openSelectProject ? "project__selected--open" : ""} src={arrowDown} alt='arrow' />
</div>
{openSelectProject &&
<div className="project__dropDown">
{Boolean(projectList.length) ? projectList.map((project) => {
return <span onClick={() => {
setSelectedProject(project)
setOpenSelectProject(false)
}} key={project.id}>{project.name}</span>
}) : <span>Проектов нет</span>}
</div>
<div
className="project__selected"
onClick={() => setOpenSelectProject(!openSelectProject)}
>
<p>
{selectedProject.name
? selectedProject.name
: selectedProject}
</p>
<img
className={
openSelectProject ? "project__selected--open" : ""
}
src={arrowDown}
alt="arrow"
/>
</div>
{openSelectProject && (
<div className="project__dropDown">
{Boolean(projectList.length) ? (
projectList.map((project) => {
return (
<span
onClick={() => {
setSelectedProject(project);
setOpenSelectProject(false);
}}
key={project.id}
>
{project.name}
</span>
);
})
) : (
<span>Проектов нет</span>
)}
</div>
)}
</div>
</>
}
)}
<div className="report-form__task-list">
<img src={ellipse} alt="" />
<span>Какие задачи выполнены?</span>