choose project

src/components/ReportForm/ReportForm.jsx

@@ -21,6 +21,7 @@ import arrow from "assets/icons/arrows/left-arrow.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,
@@ -40,8 +41,10 @@ const ReportForm = () => {
   const editReport = useSelector(getEditReport);
   const dispatch = useDispatch();
 
+
   useEffect(() => {
     initListeners();
+    getProjectList();
   }, []);
 
   const [isFetching, setIsFetching] = useState(false);
@@ -51,6 +54,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 +92,14 @@ 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 +109,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 +135,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 +167,7 @@ const ReportForm = () => {
       data: {
         tasks: inputs,
         difficulties: troublesInputValue,
+        project_id: selectedProject.id ? selectedProject.id : '',
         tomorrow: scheduledInputValue,
         created_at: getCreatedDate(startDate),
         status: 1
@@ -220,6 +244,30 @@ const ReportForm = () => {
                 setStartDate(date);
               }}
             />
+            {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>
+              </>
+            }
             <div className="report-form__task-list">
               <img src={ellipse} alt="" />
               <span>Какие задачи выполнены?</span>

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;