Add cache for filter options and fix name filter text highlight

Author: jadmsaadaot

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

@@ -13,6 +13,7 @@
 # limitations under the License.
 """Resource for project endpoints."""
 from http import HTTPStatus
+from api.utils.caching import AppCache
 
 from flask import jsonify, request
 from flask_restx import Namespace, Resource, cors
@@ -21,7 +22,7 @@
 from api.schemas import response as res
 from api.schemas.work_type import WorkTypeSchema
 from api.services import ProjectService
-from api.utils import auth, profiletime
+from api.utils import auth, constants, profiletime
 from api.utils.util import cors_preflight
 
 
@@ -223,6 +224,7 @@ class ProjectTypes(Resource):
     @cors.crossdomain(origin="*")
     @auth.require
     @profiletime
+    @AppCache.cache.cached(timeout=constants.CACHE_DAY_TIMEOUT, query_string=True)
     def get():
         """Return all project types."""
         project_types = ProjectService.find_all_project_types()

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

@@ -14,6 +14,7 @@
 """Resource for work endpoints."""
 from http import HTTPStatus
 from io import BytesIO
+from api.utils.caching import AppCache
 
 from flask import jsonify, request, send_file
 from flask_restx import Namespace, Resource, cors
@@ -24,7 +25,7 @@
 from api.schemas import response as res
 from api.services import WorkService
 from api.services.work_phase import WorkPhaseService
-from api.utils import auth, profiletime
+from api.utils import auth, constants, profiletime
 from api.utils.datetime_helper import get_start_of_day
 from api.utils.util import cors_preflight
 
@@ -470,6 +471,7 @@ class WorkTypes(Resource):
     @staticmethod
     @cors.crossdomain(origin="*")
     @auth.require
+    @AppCache.cache.cached(timeout=constants.CACHE_DAY_TIMEOUT)
     @profiletime
     def get():
         """Return all active works."""

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

@@ -1,5 +1,11 @@
 import React, { useState, useEffect, useContext } from "react";
-import { Autocomplete, Box, InputAdornment, TextField } from "@mui/material";
+import {
+  Autocomplete,
+  Box,
+  InputAdornment,
+  MenuItem,
+  TextField,
+} from "@mui/material";
 import {
   MyWorkplansContext,
   WorkPlanSearchOptions,
@@ -84,7 +90,9 @@ export const NameFilter = () => {
       clearOnBlur
       noOptionsText=""
       renderOption={(props, option, state) => (
-        <li {...props}>{highlightText(option, state.inputValue)}</li>
+        <MenuItem {...props}>
+          {highlightText(option, state.inputValue)}
+        </MenuItem>
       )}
       disabled={loading}
     />

epictrack-web/src/utils/MatchingTextHighlight.tsx

@@ -4,13 +4,13 @@ export const highlightText = (text: string, query: string) => {
   const index = text.toLowerCase().indexOf(query.toLowerCase());
   if (index !== -1) {
     return (
-      <>
+      <span style={{ whiteSpace: "pre-wrap" }}>
         {text.substring(0, index)}
         <span style={{ backgroundColor: Palette.secondary.main }}>
           {text.substring(index, index + query.length)}
         </span>
         {text.substring(index + query.length)}
-      </>
+      </span>
     );
   }
   return text;