diff --git a/src/components/ReportForm/ReportForm.jsx b/src/components/ReportForm/ReportForm.jsx index fa27d27e..fb591858 100644 --- a/src/components/ReportForm/ReportForm.jsx +++ b/src/components/ReportForm/ReportForm.jsx @@ -18,6 +18,7 @@ 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"; @@ -42,6 +43,7 @@ const ReportForm = () => { useEffect(() => { initListeners(); + getProjectList(); }, []); const [isFetching, setIsFetching] = useState(false); @@ -51,6 +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 [datePickerOpen, setDatePickerOpen] = useState(false); const [inputs, setInputs] = useState( @@ -85,10 +91,12 @@ const ReportForm = () => { (div) => div.classList && (div.classList.contains("report-form__block-img") || - div.classList.contains("react-datepicker-popper")) + div.classList.contains("react-datepicker-popper") || + div.classList.contains("report-form__project")) ) ) { setDatePickerOpen(false); + setOpenSelectProject(false); } }; @@ -98,6 +106,17 @@ const ReportForm = () => { setInputs((prev) => prev.filter((el, index) => index !== indexRemove)); }; + const getProjectList = () => { + setProjectLoader(true); + apiRequest( + `/project/project-list?user_id=${localStorage.getItem( + "id" + )}&expand=columns` + ).then((el) => { + setProjectLoader(false); + setProjectList(el?.projects); + }); + }; const handler = () => { setIsFetching(true); for (let input of inputs) { @@ -113,6 +132,7 @@ const ReportForm = () => { data: { user_id: localStorage.getItem("id"), tasks: inputs, + project_id: selectedProject.id ? selectedProject.id : "", difficulties: troublesInputValue, tomorrow: scheduledInputValue, created_at: getCreatedDate(startDate), @@ -144,6 +164,7 @@ const ReportForm = () => { data: { tasks: inputs, difficulties: troublesInputValue, + project_id: selectedProject.id ? selectedProject.id : "", tomorrow: scheduledInputValue, created_at: getCreatedDate(startDate), status: 1 @@ -220,6 +241,58 @@ const ReportForm = () => { setStartDate(date); }} /> + {projectLoader ? ( +
+ +
+ ) : ( + <> +
+ + Выберите проект +
+
+
setOpenSelectProject(!openSelectProject)} + > +

+ {selectedProject.name + ? selectedProject.name + : selectedProject} +

+ arrow +
+ {openSelectProject && ( +
+ {Boolean(projectList.length) ? ( + projectList.map((project) => { + return ( + { + setSelectedProject(project); + setOpenSelectProject(false); + }} + key={project.id} + > + {project.name} + + ); + }) + ) : ( + Проектов нет + )} +
+ )} +
+ + )}
Какие задачи выполнены? diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss index a056498a..6a333334 100644 --- a/src/components/ReportForm/reportForm.scss +++ b/src/components/ReportForm/reportForm.scss @@ -104,6 +104,62 @@ } } + .loader__wrapper { + max-width: 200px; + } + + &__project { + position: relative; + max-width: 200px; + margin-top: 10px; + + .project { + &__selected { + display: flex; + border-radius: 8px; + border: 1px solid gray; + cursor: pointer; + font-size: 18px; + padding: 5px; + justify-content: space-between; + align-items: center; + font-weight: 500; + + img { + width: 16px; + height: 16px; + transition: all 0.3s ease; + } + + &--open { + transform: rotate(180deg); + } + } + + &__dropDown { + position: absolute; + border-radius: 8px; + display: flex; + flex-direction: column; + width: 100%; + background: white; + border: 1px solid #c2c2c2; + padding: 5px; + z-index: 100; + row-gap: 3px; + + span { + cursor: pointer; + font-size: 16px; + + &:hover { + font-weight: 600; + } + } + } + } + } + &__task { &-number { color: #282828;