added projects filter by status

Author: nrjadkry

src/frontend/src/components/Projects/ProjectsHeader/index.tsx

@@ -18,6 +18,9 @@ export default function ProjectsHeader() {
   const projectsFilterByOwner = useTypedSelector(
     state => state.createproject.ProjectsFilterByOwner,
   );
+  const selectedProjectStatus = useTypedSelector(
+    state => state.createproject.selectedProjectStatus
+  );
   const [searchValue, setSearchValue] = useState('');
   const debouncedValue = useDebounceListener(searchValue || '', 300);
 
@@ -30,7 +33,7 @@ export default function ProjectsHeader() {
       <FlexRow className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-justify-between naxatw-gap-4 md:naxatw-w-[65%]">
         <h5 className="naxatw-font-bold">Projects</h5>
         <FlexRow gap={3} className="">
-          <div>
+          <div className='naxatw-flex naxatw-items-center naxatw-gap-2'>
             <Select
               placeholder="Select"
               options={[
@@ -50,6 +53,26 @@ export default function ProjectsHeader() {
                 )
               }
             />
+            <Select
+              placeholder="Filter By Project Status"
+              options={[
+                {
+                  label: 'Not Started',
+                  value: 'not-started',
+                },
+                { label: 'On Going', value: 'ongoing' },
+                { label: 'Completed', value: 'completed' },
+              ]}
+              labelKey="label"
+              valueKey="value"
+              className="!naxatw-w-[150px] "
+              selectedOption={selectedProjectStatus}
+              onChange={value =>
+                dispatch(
+                  setCreateProjectState({ selectedProjectStatus: value }),
+                )
+              }
+            />
           </div>
           <div>
             <SearchInput

src/frontend/src/store/slices/createproject.ts

@@ -25,6 +25,7 @@ export interface CreateProjectState {
   imageMergeType: string;
   ProjectsFilterByOwner: 'yes' | 'no';
   requiresApprovalFromRegulator: 'required' | 'not_required';
+  selectedProjectStatus: string;
   regulatorEmails: string[] | [];
   demType: string;
 }
@@ -53,6 +54,7 @@ const initialState: CreateProjectState = {
   requiresApprovalFromRegulator: 'not_required',
   regulatorEmails: [],
   demType: 'auto',
+  selectedProjectStatus: ''
 };
 
 const setCreateProjectState: CaseReducer<

src/frontend/src/views/Projects/index.tsx

@@ -23,6 +23,9 @@ const Projects = () => {
   const projectsFilterByOwner = useTypedSelector(
     state => state.createproject.ProjectsFilterByOwner,
   );
+  const projectFilterByStatus = useTypedSelector(
+    state => state.createproject.selectedProjectStatus,
+  );
   const projectSearchKey = useTypedSelector(
     state => state.common.projectSearchKey,
   );
@@ -35,16 +38,26 @@ const Projects = () => {
     setSetPaginationState(prev => ({ ...prev, ...value }));
   };
 
-  // fetch api for projectsList
-  const { data: projectListData, isFetching: isLoading }: Record<string, any> =
-    useGetProjectsListQuery({
-      queryKey: {
-        // @ts-ignore
+  const filterParams = projectFilterByStatus
+    ? {
         filter_by_owner: projectsFilterByOwner === 'yes',
+        status: projectFilterByStatus,
         page: paginationState?.activePage,
         results_per_page: paginationState?.selectedNumberOfRows,
         search: projectSearchKey,
-      },
+      }
+    : {
+        filter_by_owner: projectsFilterByOwner === 'yes',
+        page: paginationState?.activePage,
+        results_per_page: paginationState?.selectedNumberOfRows,
+        search: projectSearchKey,
+      };
+
+  // fetch api for projectsList
+  const { data: projectListData, isFetching: isLoading }: Record<string, any> =
+    useGetProjectsListQuery({
+      // @ts-ignore
+      queryKey: { ...filterParams },
     });
 
   // fetch project centroid
@@ -65,6 +78,7 @@ const Projects = () => {
   return (
     <section className="naxatw-px-3 naxatw-pt-2 lg:naxatw-px-16">
       <ProjectsHeader />
+
       <div className="naxatw-grid naxatw-gap-2 naxatw-pb-10 md:naxatw-flex md:naxatw-h-[calc(100vh-11rem)] md:naxatw-pb-0">
         <div
           className={`scrollbar naxatw-grid naxatw-grid-rows-[19rem] naxatw-gap-3 naxatw-overflow-y-auto naxatw-py-2 ${showMap ? 'naxatw-w-full naxatw-grid-cols-1 md:naxatw-w-1/2 md:naxatw-grid-cols-1 lg:naxatw-grid-cols-2 xl:naxatw-grid-cols-3' : 'naxatw-w-full naxatw-grid-cols-1 sm:naxatw-grid-cols-2 md:naxatw-grid-cols-3 lg:naxatw-grid-cols-6'}`}