Make the search bar auto complete

epictrack-api/src/api/models/project.py

@@ -69,6 +69,12 @@ class Project(BaseModelVersioned):
     proponent = relationship("Proponent", foreign_keys=[proponent_id], lazy="select")
     region_env = relationship("Region", foreign_keys=[region_id_env], lazy="select")
     region_flnro = relationship("Region", foreign_keys=[region_id_flnro], lazy="select")
+    works = relationship('Work', lazy='dynamic')
+
+    @classmethod
+    def find_all_with_works(cls):
+        """Return all projects with works."""
+        return cls.query.filter(cls.works.any()).filter(cls.is_deleted.is_(False)).all()
 
     @classmethod
     def check_existence(cls, name, project_id=None):

epictrack-api/src/api/models/work.py

@@ -165,7 +165,8 @@ def _filter_by_staff_id(cls, query, staff_id):
     @classmethod
     def _filter_by_search_text(cls, query, search_text):
         if search_text:
-            query = query.filter(Work.title.ilike(f'%{search_text}%'))
+            subquery = exists().where(and_(Work.project_id == Project.id, Project.name == search_text))
+            query = query.filter(subquery)
         return query
 
     @classmethod

epictrack-api/src/api/resources/project.py

@@ -39,7 +39,12 @@ class Projects(Resource):
     @profiletime
     def get():
         """Return all projects."""
-        projects = ProjectService.find_all()
+        with_works = request.args.get(
+            'with_works',
+            default=False,
+            type=lambda v: v.lower() == 'true'
+        )
+        projects = ProjectService.find_all(with_works)
         return_type = request.args.get("return_type", None)
         if return_type == "list_type":
             schema = res.ListTypeResponseSchema(many=True)

epictrack-api/src/api/services/project.py

@@ -46,10 +46,17 @@ def find(cls, project_id):
         return project
 
     @classmethod
-    def find_all(cls):
+    def find_all(cls, with_works=False):
         """Find all projects"""
+        if with_works:
+            return Project.find_all_with_works()
         return Project.find_all(default_filters=False)
 
+    @classmethod
+    def find_all_with_works(cls):
+        """Find all projects"""
+        return Project.find_all_with_works()
+
     @classmethod
     def create_project(cls, payload: dict):
         """Create a new project."""

epictrack-web/src/components/myWorkplans/Filters/NameFilter.tsx

@@ -1,15 +1,23 @@
-import React, { useRef } from "react";
-import { TextField } from "@mui/material";
-import debounce from "lodash/debounce";
+import React, { useState, useEffect, useContext } from "react";
+import { Autocomplete, Box, InputAdornment, TextField } from "@mui/material";
 import {
   MyWorkplansContext,
   WorkPlanSearchOptions,
 } from "../MyWorkPlanContext";
+import projectService from "../../../services/projectService/projectService";
+import { PROJECT_RETURN_TYPE } from "../../../services/projectService/constants";
+import { ListType } from "../../../models/code";
+import SearchIcon from "../../../assets/images/search.svg";
+import { highlightText } from "../../../utils/MatchingTextHighlight";
 
+const SEARCH_TEXT_THRESHOLD = 1;
 export const NameFilter = () => {
-  const [searchText, setSearchText] = React.useState<string>("");
+  const [loading, setLoading] = useState(true);
+  const [options, setOptions] = useState<string[]>([]);
+  const [searchText, setSearchText] = useState<string>("");
+
+  const { setSearchOptions } = useContext(MyWorkplansContext);
 
-  const { setSearchOptions } = React.useContext(MyWorkplansContext);
   const handleSearchOptions = (searchText: string) => {
     setSearchOptions(
       (prev: WorkPlanSearchOptions) =>
@@ -20,25 +28,64 @@ export const NameFilter = () => {
     );
   };
 
-  const debouncedSetSearchOptions = useRef(
-    debounce((searchText: string) => {
-      handleSearchOptions(searchText);
-    }, 1000)
-  ).current;
+  // Fetch project names from the backend when searchText changes
+  useEffect(() => {
+    const fetchProjectNames = async () => {
+      // Replace this with your actual backend API call
+      try {
+        const with_works = true;
+        const response = (await projectService.getAll(
+          PROJECT_RETURN_TYPE.LIST_TYPE,
+          with_works
+        )) as { data: ListType[] };
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(event.target.value);
-    debouncedSetSearchOptions(event.target.value);
-  };
+        const projectNames = response.data.map((project) => project.name);
+        setOptions(projectNames);
+        setLoading(false);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    fetchProjectNames();
+  }, []);
 
   return (
-    <TextField
-      name="searchText"
-      placeholder="Search for a Project"
-      variant="outlined"
+    <Autocomplete
+      options={searchText.length >= SEARCH_TEXT_THRESHOLD ? options : []}
+      onInputChange={(_, newValue) => {
+        setSearchText(newValue ?? "");
+      }}
+      onChange={(_, newValue) => {
+        handleSearchOptions(newValue ?? "");
+      }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="outlined"
+          placeholder="Search for a Project"
+          InputProps={{
+            ...params.InputProps,
+            startAdornment: (
+              <InputAdornment position="start">
+                <Box
+                  component="img"
+                  src={SearchIcon}
+                  alt="Search"
+                  width="16px"
+                />
+              </InputAdornment>
+            ),
+          }}
+        />
+      )}
       fullWidth
-      value={searchText}
-      onChange={handleChange}
+      clearOnBlur
+      noOptionsText=""
+      renderOption={(props, option, state) => (
+        <li {...props}>{highlightText(option, state.inputValue)}</li>
+      )}
+      disabled={loading}
     />
   );
 };

epictrack-web/src/components/myWorkplans/Filters/index.tsx

@@ -15,7 +15,7 @@ const Filters = () => {
       justifyContent={"space-between"}
       direction="row"
     >
-      <Grid item>
+      <Grid item xs={3}>
         <NameFilter />
       </Grid>
       <Grid item xs container spacing={2} justifyContent="flex-end">

epictrack-web/src/services/projectService/constants.ts

@@ -0,0 +1,3 @@
+export const PROJECT_RETURN_TYPE = {
+  LIST_TYPE: "LIST_TYPE",
+};

epictrack-web/src/services/projectService/projectService.ts

@@ -5,8 +5,11 @@ import { MasterBase } from "../../models/type";
 import { ListType } from "../../models/code";
 
 class ProjectService implements ServiceBase {
-  async getAll(return_type?: string) {
-    return await http.GetRequest(Endpoints.Projects.PROJECTS, { return_type });
+  async getAll(return_type?: string, with_works?: boolean) {
+    return await http.GetRequest(Endpoints.Projects.PROJECTS, {
+      return_type,
+      with_works,
+    });
   }
 
   async getById(id: string) {

epictrack-web/src/utils/MatchingTextHighlight.tsx

@@ -0,0 +1,15 @@
+export const highlightText = (text: string, query: string) => {
+  const index = text.toLowerCase().indexOf(query.toLowerCase());
+  if (index !== -1) {
+    return (
+      <>
+        {text.substring(0, index)}
+        <span style={{ backgroundColor: "rgb(255, 203, 127)" }}>
+          {text.substring(index, index + query.length)}
+        </span>
+        {text.substring(index + query.length)}
+      </>
+    );
+  }
+  return text;
+};