[feature] Auto completion field on room

package.json

@@ -23,6 +23,7 @@
     "@types/react-router-dom": "^5.3.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "i18next": "^26.0.8",
     "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^1.9.0",

src/components/form/Details.tsx

@@ -17,7 +17,7 @@ export const Details = ({ oidc, details, connectedUser, activeFilters, setActive
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const handleFilterChange = (key: keyof ActiveFilters, value: string | boolean) => {
+  const handleFilterChange = <K extends keyof ActiveFilters>(key: K, value: ActiveFilters[K]) => {
     setActiveFilters((prev) => ({ ...prev, [key]: value}));
   }
 

src/components/pages/BarcodeDetailPage.tsx

@@ -42,6 +42,15 @@ export const BarcodeDetailPage = ({ oidc, connectedUser }: { oidc: State, connec
     if (response.status === 200 && response.data) {
       setDetails(response.data);
       setShelves(response.data.shelves);
+      setActiveFilters({
+        searchTerm: response.data.roomDisplay,
+        roomType: response.data.roomType.symbol,
+        productType: response.data.productType.symbol,
+        storageType: response.data.storageType.symbol,
+        storageSubType: response.data.storageSubType.symbol,
+        allowsBoxes: true,
+        allowsShelves: true
+      })
     }
   };
 

src/components/pages/StorageTable.tsx

@@ -8,48 +8,17 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination.tsx";
 import {Link, useNavigate, useSearchParams} from "react-router";
-import {ArrowDown, ArrowUp, ArrowUpDown, ListPlus} from "lucide-react";
+import {ListPlus} from "lucide-react";
 import type {State} from "@epfl-si/react-appauth";
 import type {ActiveFilters, StorageType, UserType} from "@/lib/types.tsx";
 import {fetchStorage} from "@/lib/graphql/fetchingTools.ts";
 import {useTranslation} from "react-i18next";
 import {Filters} from "@/components/parts/filters.tsx";
+import { SortableHeader } from "@/components/parts/sortableHeader";
 import {Button} from "@/components/ui/button.tsx";
 
 type SortKey = keyof StorageType;
 
-interface SortableHeaderProps {
-  label: string;
-  sortKey: SortKey;
-  sortConfig: { key: SortKey; direction: "asc" | "desc" } | null;
-  handleSort: (key: SortKey) => void;
-}
-
-const SortableHeader = ({
-  label,
-  sortKey,
-  sortConfig,
-  handleSort,
-}: SortableHeaderProps) => (
-  <TableHead
-    onClick={() => handleSort(sortKey)}
-    className="cursor-pointer select-none hover:bg-slate-50 transition-colors"
-  >
-    <div className="flex items-center gap-2">
-      {label}
-      {sortConfig?.key === sortKey ? (
-        sortConfig.direction === "asc" ? (
-          <ArrowUp className="w-4 h-4" />
-        ) : (
-          <ArrowDown className="w-4 h-4" />
-        )
-      ) : (
-        <ArrowUpDown className="w-4 h-4 opacity-30" />
-      )}
-    </div>
-  </TableHead>
-);
-
 export const StorageTable = ({ oidc, connectedUser }: { oidc: State, connectedUser: UserType }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -93,6 +62,7 @@ export const StorageTable = ({ oidc, connectedUser }: { oidc: State, connectedUs
         productTypeSymbol: activeFilters.productType,
         storageTypeSymbol: activeFilters.storageType,
         storageSubTypeSymbol: activeFilters.storageSubType,
+        searchTerm: activeFilters.searchTerm,
       }
     );
     if (response.status === 200 && response.data) {
@@ -116,7 +86,7 @@ export const StorageTable = ({ oidc, connectedUser }: { oidc: State, connectedUs
   };
 
   // Drop down filtering handler
-  const handleFilterChange = (key: keyof ActiveFilters, value: string) => {
+  const handleFilterChange = <K extends keyof ActiveFilters>(key: K, value: ActiveFilters[K]) => {
     setActiveFilters((prev) => ({ ...prev, [key]: value}));
     setCurrentPage(1);
   }

src/components/parts/filterDebouncedInput.tsx

@@ -0,0 +1,87 @@
+import { useState, useEffect, useRef } from "react";
+import { Input } from "@/components/ui/input.tsx";
+import { Popover, PopoverContent, PopoverAnchor } from "@/components/ui/popover.tsx";
+import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command.tsx";
+
+export const FilterDebouncedInput = ({
+  placeholder,
+  value,
+  onSearch,
+  suggestions,
+  disable,
+}: {
+  placeholder: string;
+  value: string | null;
+  onSearch: (searchTerm: string) => void;
+  suggestions: string[];
+  disable?: boolean;
+}) => {
+  const [localValue, setLocalValue] = useState(value || "");
+  const [open, setOpen] = useState(false);
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    setLocalValue(value || "");
+  }, [value]);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      if (localValue !== (value || "")) {
+        onSearch(localValue);
+      }
+    }, 1000);
+
+    return () => clearTimeout(timeoutId);
+  }, [localValue]);
+
+  return (
+    <Popover open={open && suggestions.length > 0} onOpenChange={setOpen}>
+      <div className="w-1/2 m-1">
+        <PopoverAnchor asChild>
+          <Input
+            type="text"
+            value={localValue}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setLocalValue(e.target.value);
+              setOpen(true);
+            }}
+            disabled={disable}
+            className="w-full"
+            placeholder={placeholder}
+          />
+        </PopoverAnchor>
+
+        <PopoverContent
+          className="p-0 w-[var(--radix-popover-trigger-width)]"
+          align="start"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <Command shouldFilter={false}>
+            <CommandList>
+              <CommandGroup>
+                {suggestions.map((suggestion, index) => (
+                  <CommandItem
+                    key={`${suggestion}-${index}`}
+                    value={suggestion}
+                    onSelect={(currentValue) => {
+                      setLocalValue(currentValue);
+                      onSearch(currentValue);
+                      setOpen(false);
+                    }}
+                    className="cursor-pointer data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
+                  >
+                    {suggestion}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </div>
+    </Popover>
+  );
+};

src/components/parts/filterSelect.tsx

@@ -8,15 +8,15 @@ export const FilterSelect = (
     placeholder: string,
     data: Type[],
     listName: string,
-    value: string | null,
-    setValue: (value: string | null) => void
+    value: string | undefined,
+    setValue: (value: string) => void
     disable?: boolean;
   }
 ) => {
   const { t } = useTranslation();
 
   return (
-      <Select value={value || undefined}
+      <Select value={value ? value : ""}
             onValueChange={(val) => {
               setValue(val === "__all__" ? "" : val);
             }}

src/components/parts/filters.tsx

@@ -9,12 +9,14 @@ import {
 } from "@/lib/graphql/fetchingTools.ts";
 import {useEffect, useState} from "react";
 import {FilterSelect} from "@/components/parts/filterSelect.tsx";
-import type {ActiveFilters, FilterOptions} from "@/lib/types.tsx";
+import type {ActiveFilters, FilterOptions, Type} from "@/lib/types.tsx";
+import { fetchRoomApiSuggestions } from "@/lib/graphql/fetchingTools";
+import { SearchFieldAutoComplete } from "@/components/parts/searchFieldAutoComplete";
 
 interface Props {
   oidc: State;
   activeFilters: ActiveFilters;
-  onFilterChange: (key: keyof ActiveFilters, value: string | boolean) => void;
+  onFilterChange: <K extends keyof ActiveFilters>(key: K, value: ActiveFilters[K]) => void;
   isCascading?: boolean;
   disable?: boolean;
 }
@@ -32,6 +34,7 @@ export const Filters = ({ oidc, activeFilters, onFilterChange, isCascading = fal
   const token = oidc.accessToken;
 
   useEffect(() => {
+    if (disable) return;
     if (!isCascading) {
       Promise.all([
         fetchRoomType(baseUrl, token),
@@ -99,18 +102,54 @@ export const Filters = ({ oidc, activeFilters, onFilterChange, isCascading = fal
     if (val && activeFilters.roomType && activeFilters.productType && activeFilters.storageType) {
       const res = await fetchAllowedTypeValue(baseUrl, token, activeFilters.roomType, activeFilters.productType, activeFilters.storageType, val);
 
-      onFilterChange('allowsBoxes', res.data.allowsBoxes);
-      onFilterChange('allowsShelves', res.data.allowsShelves);
+      onFilterChange('allowsBoxes', res.data?.allowsBoxes ?? false);
+      onFilterChange('allowsShelves', res.data?.allowsShelves ?? false);
     }
   };
 
+  const handleFetchRoomSuggestions = async (searchTerm: string) => {
+    const res = await fetchRoomApiSuggestions(baseUrl, token, searchTerm);
+    if (res.errors) {
+      console.error("GraphQL error retrieving suggestions :", res.errors);
+      return [];
+    }
+    return res.data;
+  };
+
   return (
     <div>
+    <div className="flex gap-4">
+      {isCascading ?
+      <SearchFieldAutoComplete<{ id: number; name: string }>
+        placeholder={t("app.selectRoom")}
+        value={activeFilters.searchTerm || ""}
+        onChange={(val: string) => {
+          onFilterChange('searchTerm', val)
+          onFilterChange('selectedRoomId', undefined);
+        }}
+        isAutoComplete={true}
+        fetchData={handleFetchRoomSuggestions}
+        getDisplayValue={(room) => room.name}
+        onSelectItem={(room) => {
+          onFilterChange('selectedRoomId', room.id);
+        }}
+        disable={disable}
+      />
+        :
+      <SearchFieldAutoComplete<string>
+        placeholder={t("app.searchTerm")}
+        value={activeFilters.searchTerm || ""}
+        onChange={(val: any) => onFilterChange('searchTerm', val)}
+        isAutoComplete={false}
+        getDisplayValue={(item) => item}
+      />
+      }
+    </div>
       {activeFilters && <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-4 gap-4">
-        <FilterSelect placeholder={t('app.roomType')} data={options.roomType} value={activeFilters.roomType} setValue={handleRoomChange} listName="roomType" disable={disable}/>
-        <FilterSelect placeholder={t('app.productType')} data={options.productType} value={activeFilters.productType} setValue={handleProductChange} listName="productType" disable={disable}/>
-        <FilterSelect placeholder={t('app.storageType')} data={options.storageType} value={activeFilters.storageType} setValue={handleStorageChange} listName="storageType" disable={disable}/>
-        <FilterSelect placeholder={t('app.storageSubType')} data={options.storageSubType} value={activeFilters.storageSubType} setValue={handleSubStorageChange} listName="storageSubType" disable={disable}/>
+        <FilterSelect placeholder={t('app.roomType')} data={disable && activeFilters.roomType ? [{ symbol: activeFilters.roomType } as Type] : options.roomType} value={activeFilters.roomType} setValue={handleRoomChange} listName="roomType" disable={disable}/>
+        <FilterSelect placeholder={t('app.productType')} data={disable && activeFilters.productType ? [{ symbol: activeFilters.productType } as Type] : options.productType} value={activeFilters.productType} setValue={handleProductChange} listName="productType" disable={disable}/>
+        <FilterSelect placeholder={t('app.storageType')} data={disable && activeFilters.storageType ? [{ symbol: activeFilters.storageType } as Type] : options.storageType} value={activeFilters.storageType} setValue={handleStorageChange} listName="storageType" disable={disable}/>
+        <FilterSelect placeholder={t('app.storageSubType')} data={disable && activeFilters.storageSubType ? [{ symbol: activeFilters.storageSubType } as Type] : options.storageSubType} value={activeFilters.storageSubType} setValue={handleSubStorageChange} listName="storageSubType" disable={disable}/>
       </div>}
     </div>
   );

src/components/parts/searchFieldAutoComplete.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { FilterDebouncedInput } from "@/components/parts/filterDebouncedInput";
+
+interface SmartAutocompleteProps<T> {
+  placeholder: string;
+  value: string | null;
+  onChange: (val: string) => void;
+  fetchData?: (searchTerm: string) => Promise<T[]>;
+  getDisplayValue: (item: T) => string;
+  onSelectItem?: (item: T) => void;
+  disable?: boolean;
+  isAutoComplete?: boolean;
+}
+
+export const SearchFieldAutoComplete = <T,>({
+  placeholder,
+  value,
+  onChange,
+  fetchData,
+  getDisplayValue,
+  onSelectItem,
+  disable,
+  isAutoComplete
+}: SmartAutocompleteProps<T>) => {
+
+  const [rawSuggestions, setRawSuggestions] = useState<T[]>([]);
+
+  const handleSearch = async (searchTerm: string) => {
+    onChange(searchTerm);
+
+    const matchedItem = rawSuggestions.find(item => getDisplayValue(item) === searchTerm);
+
+    if (matchedItem && onSelectItem) {
+      onSelectItem(matchedItem);
+    }
+    if (isAutoComplete && fetchData && searchTerm.length >= 2) {
+      try {
+        const results = await fetchData(searchTerm);
+        setRawSuggestions(results);
+      } catch (error) {
+        console.error("Erreur lors de la recherche :", error);
+        setRawSuggestions([]);
+      }
+    } else {
+      setRawSuggestions([]);
+    }
+  };
+
+  return (
+    <FilterDebouncedInput
+      placeholder={placeholder}
+      value={value}
+      onSearch={handleSearch}
+      suggestions={rawSuggestions.map(getDisplayValue)}
+      disable={disable}
+    />
+  );
+};