Merge pull request #1209 from NSUWAL123/fix-minor-project-issues

Fix minor project issues

src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx

@@ -1,9 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import UploadArea from '../../common/UploadArea';
-import { CustomSelect } from '../../common/Select';
 import Button from '../../common/Button';
 import CoreModules from '@/shared/CoreModules';
-import { diffObject } from '@/utilfunctions/compareUtils.js';
 import { PostFormUpdate } from '@/api/CreateProjectService';
 
 type FileType = {
@@ -17,19 +15,10 @@ const FormUpdateTab = ({ projectId }) => {
   const dispatch = CoreModules.useAppDispatch();
 
   const [uploadForm, setUploadForm] = useState<FileType[] | null>(null);
-  const [selectedFormCategory, setSelectedFormCategory] = useState<string | null>(null);
-  const formCategoryList = CoreModules.useAppSelector((state) => state.createproject.formCategoryList);
-  const previousXform_title = CoreModules.useAppSelector((state) => state.project.projectInfo.xform_title);
-
-  useEffect(() => {
-    setSelectedFormCategory(previousXform_title);
-  }, [previousXform_title]);
 
   const onSave = () => {
-    const diffPayload = diffObject({ category: previousXform_title }, { category: selectedFormCategory });
     dispatch(
       PostFormUpdate(`${import.meta.env.VITE_API_URL}/projects/update_category`, {
-        ...(Object.keys(diffPayload).length > 0 ? diffPayload : { category: selectedFormCategory }),
         project_id: projectId,
         upload: uploadForm && uploadForm?.[0]?.url,
       }),
@@ -38,17 +27,6 @@ const FormUpdateTab = ({ projectId }) => {
 
   return (
     <div className="fmtm-flex fmtm-flex-col fmtm-gap-10">
-      <CustomSelect
-        title="Form Category"
-        placeholder="Choose"
-        data={formCategoryList}
-        dataKey="title"
-        value={selectedFormCategory}
-        valueKey="title"
-        label="title"
-        onValueChange={(value) => value && setSelectedFormCategory(value?.toString())}
-        className="fmtm-bg-white"
-      />
       <UploadArea
         title="Upload Form"
         label="Please upload .xls, .slxs, .xml file"

src/frontend/src/components/ManageProject/EditTab/index.tsx

@@ -1,20 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import environment from '@/environment';
 import ProjectDescriptionTab from './ProjectDescriptionTab';
 import FormUpdateTab from './FormUpdateTab';
-import { FormCategoryService, GetIndividualProjectDetails } from '@/api/CreateProjectService';
-import CoreModules from '@/shared/CoreModules';
 
 const tabList: ['Project Description', 'Form Update'] = ['Project Description', 'Form Update'];
 
 const EditTab = ({ projectId }) => {
-  const dispatch = CoreModules.useAppDispatch();
   const [tabView, setTabView] = useState<'Project Description' | 'Form Update'>('Project Description');
 
-  useEffect(() => {
-    dispatch(FormCategoryService(`${import.meta.env.VITE_API_URL}/central/list-forms`));
-  }, []);
-
   return (
     <div>
       <div className="fmtm-flex fmtm-gap-3 fmtm-mb-5">

src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx

@@ -1,21 +1,43 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import TaskSubmissionsMap from '@/components/ProjectSubmissions/TaskSubmissionsMap';
 import InputTextField from '@/components/common/InputTextField';
 import Button from '@/components/common/Button';
 import AssetModules from '@/shared/AssetModules.js';
 import CoreModules from '@/shared/CoreModules.js';
 import { TaskCardSkeletonLoader } from '@/components/ProjectSubmissions/ProjectSubmissionsSkeletonLoader';
+import { taskInfoType } from '@/models/submission/submissionModel';
 
 const TaskSubmissions = () => {
   const dispatch = CoreModules.useAppDispatch();
-  const taskInfo = CoreModules.useAppSelector((state) => state.task.taskInfo);
+  const taskInfo: taskInfoType[] = CoreModules.useAppSelector((state) => state.task.taskInfo);
   const taskLoading = CoreModules.useAppSelector((state) => state.task.taskLoading);
+  const [searchedTaskId, setSearchedTaskId] = useState<string>('');
+  const [debouncedSearchedTaskId, setDebouncedSearchedTaskId] = useState<string>('');
+  const [filteredTaskInfo, setFilteredTaskInfo] = useState<taskInfoType[]>([]);
 
   const zoomToTask = (taskId) => {
     dispatch(CoreModules.TaskActions.SetSelectedTask(+taskId));
   };
 
-  const TaskCard = ({ task }) => (
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedSearchedTaskId(searchedTaskId);
+    }, 500);
+    return () => clearTimeout(timeoutId);
+  }, [searchedTaskId, 1000]);
+
+  useEffect(() => {
+    if (debouncedSearchedTaskId) {
+      const searchedTaskInfoList = taskInfo?.filter((task): boolean => {
+        return task.task_id.includes(debouncedSearchedTaskId);
+      });
+      setFilteredTaskInfo(searchedTaskInfoList);
+    } else {
+      setFilteredTaskInfo(taskInfo);
+    }
+  }, [debouncedSearchedTaskId, taskInfo]);
+
+  const TaskCard = ({ task }: { task: taskInfoType }) => (
     <div className="fmtm-bg-red-50 fmtm-px-5 fmtm-pb-5 fmtm-pt-2 fmtm-rounded-lg">
       <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-1">
@@ -45,17 +67,29 @@ const TaskSubmissions = () => {
   return (
     <div className="md:fmtm-h-[70vh] fmtm-flex fmtm-gap-10 fmtm-flex-col md:fmtm-flex-row">
       <div className="fmtm-w-full md:fmtm-w-[39rem] fmtm-bg-white fmtm-rounded-xl fmtm-p-5">
-        <InputTextField fieldType="string" label="" onChange={() => {}} value="" placeholder="Search by task id" />
+        <InputTextField
+          fieldType="number"
+          label=""
+          onChange={(e) => {
+            setSearchedTaskId(e.target.value);
+          }}
+          value={searchedTaskId}
+          placeholder="Search by task id"
+        />
         <div className="fmtm-mt-5 fmtm-h-[58vh] fmtm-overflow-y-scroll scrollbar">
           {taskLoading ? (
             <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
-              {Array.from({ length: 10 }).map((i) => (
+              {Array.from({ length: 10 }).map((_, i) => (
                 <TaskCardSkeletonLoader key={i} />
               ))}
             </div>
-          ) : (
+          ) : filteredTaskInfo?.length > 0 ? (
             <div className="fmtm-flex fmtm-flex-col fmtm-gap-4">
-              {taskInfo?.map((task) => <TaskCard key={task.task_id} task={task} />)}
+              {filteredTaskInfo?.map((task: taskInfoType) => <TaskCard key={task.task_id} task={task} />)}
+            </div>
+          ) : (
+            <div className="fmtm-w-full fmtm-h-full fmtm-flex fmtm-justify-center fmtm-mt-10">
+              <p className="fmtm-text-gray-400 fmtm-text-xl">No tasks found!</p>
             </div>
           )}
         </div>

src/frontend/src/models/submission/submissionModel.ts

@@ -0,0 +1,6 @@
+export type taskInfoType = {
+  task_id: string;
+  submission_count: number;
+  last_submission: string | null;
+  feature_count: number;
+};