Feat: Update the design and shortcut key for SearchByMultipleOptions

public/locale/en.json

@@ -532,6 +532,7 @@
   "choose_file": "Upload From Device",
   "choose_localbody": "Choose Local Body",
   "choose_location": "Choose Location",
+  "choose_other_search_type": "Choose other search types",
   "choose_state": "Choose State",
   "claim__add_item": "Add Item",
   "claim__create_claim": "Create Claim",
@@ -1734,6 +1735,7 @@
   "scribe__reviewing_field": "Reviewing field {{currentField}} / {{totalFields}}",
   "scribe_error": "Could not autofill fields",
   "search": "Search",
+  "search_by": "Search by",
   "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
   "search_by_emergency_phone_number": "Search by Emergency Phone Number",
   "search_by_patient_name": "Search by Patient Name",

src/components/Common/SearchByMultipleFields.tsx

@@ -28,20 +28,21 @@ import {
 import { FieldError } from "@/components/Form/FieldValidators";
 import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
 
+import { isAppleDevice } from "@/Utils/utils";
+
 interface SearchOption {
   key: string;
   type: "text" | "phone";
   placeholder: string;
   value: string;
-  shortcutKey: string;
   component?: React.ComponentType<HTMLDivElement>;
 }
 
 interface SearchByMultipleFieldsProps {
   id: string;
   options: SearchOption[];
   onSearch: (key: string, value: string) => void;
-  initialOptionIndex?: number;
+  initialOptionIndex: number;
   className?: string;
   inputClassName?: string;
   buttonClassName?: string;
@@ -66,21 +67,15 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
 }) => {
   const { t } = useTranslation();
   const [selectedOptionIndex, setSelectedOptionIndex] = useState(
-    initialOptionIndex || 0,
+    initialOptionIndex == -1 ? 0 : initialOptionIndex,
   );
   const selectedOption = options[selectedOptionIndex];
   const [searchValue, setSearchValue] = useState(selectedOption.value || "");
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const [focusedIndex, setFocusedIndex] = useState(0);
   const [error, setError] = useState<string | undefined | boolean>();
-
-  useEffect(() => {
-    if (!(selectedOption.type === "phone" && searchValue.length < 13)) {
-      setSearchValue(options[selectedOptionIndex].value);
-    }
-  }, [options]);
-
+  const isSingleOption = options.length == 1;
   useEffect(() => {
     if (clearSearch?.value) {
       const clearinput = options
@@ -106,43 +101,42 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     [onSearch],
   );
 
+  const unselectedOptions = useMemo(
+    () => options.filter((option) => option.key !== selectedOption.key),
+    [options, selectedOption],
+  );
+
+  useEffect(() => {
+    if (open) {
+      setFocusedIndex(0);
+    }
+  }, [open]);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (
-        e.key === "/" &&
-        !(document.activeElement instanceof HTMLInputElement)
-      ) {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         setOpen(true);
       }
+      if (e.key === "Escape") {
+        inputRef.current?.focus();
+        setOpen(false);
+      }
       if (open) {
         if (e.key === "ArrowDown") {
           setFocusedIndex((prevIndex) =>
-            prevIndex === options.length - 1 ? 0 : prevIndex + 1,
+            prevIndex === unselectedOptions.length - 1 ? 0 : prevIndex + 1,
           );
         } else if (e.key === "ArrowUp") {
           setFocusedIndex((prevIndex) =>
-            prevIndex === 0 ? options.length - 1 : prevIndex - 1,
+            prevIndex === 0 ? unselectedOptions.length - 1 : prevIndex - 1,
           );
         } else if (e.key === "Enter") {
-          handleOptionChange(focusedIndex);
-        }
-
-        if (e.key === "Escape") {
-          inputRef.current?.focus();
-          setOpen(false);
+          const selectedOptionIndex = options.findIndex(
+            (option) => option.key === unselectedOptions[focusedIndex].key,
+          );
+          handleOptionChange(selectedOptionIndex);
         }
-
-        options.forEach((option, i) => {
-          if (
-            e.key.toLocaleLowerCase() ===
-              option.shortcutKey.toLocaleLowerCase() &&
-            open
-          ) {
-            e.preventDefault();
-            handleOptionChange(i);
-          }
-        });
       }
     };
 
@@ -181,28 +175,89 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     switch (selectedOption.type) {
       case "phone":
         return (
-          <PhoneNumberFormField
-            id={id}
-            name={selectedOption.key}
-            placeholder={selectedOption.placeholder}
-            types={["mobile", "landline"]}
-            {...commonProps}
-            errorClassName="hidden"
-            hideHelp={true}
-            onError={(error: FieldError) => setError(error)}
-          />
+          <div className="relative">
+            <PhoneNumberFormField
+              id={id}
+              name={selectedOption.key}
+              placeholder={selectedOption.placeholder}
+              types={["mobile", "landline"]}
+              {...commonProps}
+              errorClassName="hidden"
+              hideHelp={true}
+              onError={(error: FieldError) => setError(error)}
+            />
+            {!isSingleOption && (
+              <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
+                {open ? (
+                  <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                    ESC
+                  </span>
+                ) : (
+                  <span>
+                    {isAppleDevice ? (
+                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                        ⌘K
+                      </span>
+                    ) : (
+                      <div className="flex gap-1 font-medium">
+                        <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                          Ctrl
+                        </span>
+                        <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                          K
+                        </span>
+                      </div>
+                    )}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
         );
       default:
         return (
-          <Input
-            id={id}
-            type="text"
-            placeholder={selectedOption.placeholder}
-            {...commonProps}
-          />
+          <div className="relative">
+            <Input
+              id={id}
+              type="text"
+              placeholder={selectedOption.placeholder}
+              {...commonProps}
+            />
+            <div className="absolute top-1/2 right-2 transform -translate-y-1/2 flex items-center space-x-2 text-xs text-gray-500">
+              {open ? (
+                <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                  ESC
+                </span>
+              ) : (
+                <span>
+                  {isAppleDevice ? (
+                    <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                      ⌘K
+                    </span>
+                  ) : (
+                    <div className="flex gap-1 font-medium">
+                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                        Ctrl
+                      </span>
+                      <span className="border border-gray-300 rounded px-1 py-0.5 bg-white text-gray-500">
+                        K
+                      </span>
+                    </div>
+                  )}
+                </span>
+              )}
+            </div>
+          </div>
         );
     }
-  }, [selectedOption, searchValue, handleSearchChange, t, inputClassName]);
+  }, [
+    selectedOption,
+    searchValue,
+    handleSearchChange,
+    t,
+    inputClassName,
+    open,
+  ]);
 
   return (
     <div
@@ -218,42 +273,93 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         aria-haspopup="listbox"
         className="flex items-center rounded-t-lg"
       >
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              className="focus:ring-0 px-2 ml-1"
-              size="sm"
-              onClick={() => setOpen(true)}
-            >
-              <CareIcon icon="l-search" className="mr-2 text-base" />/
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-[250px] p-0">
-            <Command>
-              <CommandList>
-                <CommandGroup>
-                  {options.map((option, index) => (
-                    <CommandItem
-                      key={option.key}
-                      onSelect={() => handleOptionChange(index)}
-                      className={cn({
-                        "bg-gray-100": focusedIndex === index,
-                        "hover:bg-secondary-100": true,
-                      })}
-                    >
-                      <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
-                      <span className="flex-1">{t(option.key)}</span>
-                      <kbd className="ml-auto text-xs text-gray-400">
-                        {option.shortcutKey}
-                      </kbd>
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
+        {!isSingleOption && (
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                className="focus:ring-0 px-2 ml-1"
+                size="sm"
+                onClick={() => setOpen(true)}
+              >
+                <CareIcon icon="l-search" className="mr-2 text-base" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="absolute p-0">
+              <Command>
+                <CommandList>
+                  <CommandGroup>
+                    <div className="p-4">
+                      <div className="mb-4">
+                        <p className="text-sm font-medium text-gray-600">
+                          {t("search_by")}
+                        </p>
+                        <div className="flex mt-2">
+                          <Button
+                            onClick={() => setOpen(false)}
+                            variant="outline"
+                            size="xs"
+                            className="bg-primary-100 text-primary-700 hover:bg-primary-200 border-primary-400"
+                          >
+                            <CareIcon icon="l-check" className="mr-1" />
+                            {t(options[selectedOptionIndex].key)}
+                          </Button>
+                        </div>
+                      </div>
+                      <hr className="border-gray-200 mb-3" />
+                      <div>
+                        <p className="text-xs font-semibold text-gray-500 mb-2">
+                          {t("choose_other_search_type")}
+                        </p>
+                        <div className="space-y-2">
+                          {unselectedOptions.map((option, index) => {
+                            if (selectedOption.key === option.key) return null;
+
+                            return (
+                              <CommandItem
+                                key={option.key}
+                                onSelect={() =>
+                                  handleOptionChange(
+                                    options.findIndex(
+                                      (option) =>
+                                        option.key ===
+                                        unselectedOptions[index].key,
+                                    ),
+                                  )
+                                }
+                                className={cn(
+                                  "flex items-center p-2 rounded-md cursor-pointer",
+                                  {
+                                    "bg-gray-100": focusedIndex === index,
+                                    "hover:bg-secondary-100": true,
+                                  },
+                                )}
+                                onMouseEnter={() => setFocusedIndex(index)}
+                                onMouseLeave={() => setFocusedIndex(-1)}
+                              >
+                                <span className="flex-1 text-sm">
+                                  {t(option.key)}
+                                </span>
+                                {focusedIndex === index && (
+                                  <kbd
+                                    className="ml-2 border border-gray-300 rounded px-1 bg-white text-xs text-gray-500"
+                                    title="Press Enter to select"
+                                  >
+                                    ⏎ Enter
+                                  </kbd>
+                                )}
+                              </CommandItem>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        )}
         <div className="w-full">{renderSearchInput}</div>
       </div>
       {error && (
@@ -282,6 +388,19 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
           ))}
         </div>
       )}
+      {searchValue.length !== 0 && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full flex items-center justify-center text-muted-foreground"
+          onClick={() => {
+            setSearchValue("");
+          }}
+        >
+          <CareIcon icon="l-times" className="mr-2 h-4 w-4" />
+          {t("clear_search")}
+        </Button>
+      )}
     </div>
   );
 };