Adds support for searching for OrganizationSelector and fix scroll …

…for dropdown in sheet (#9620)

public/locale/en.json

@@ -1444,8 +1444,8 @@
   "qualification": "Qualification",
   "qualification_required": "Qualification is required",
   "quantity_approved": "Quantity Approved",
-  "quantity_required": "Quantity Required",
   "quantity_requested": "Quantity Requested",
+  "quantity_required": "Quantity Required",
   "raise_consent_request": "Raise a consent request to fetch patient records over ABDM",
   "ration_card__APL": "APL",
   "ration_card__BPL": "BPL",
@@ -1552,6 +1552,7 @@
   "schedule_calendar": "Schedule Calendar",
   "schedule_information": "Schedule Information",
   "scheduled": "Scheduled",
+  "schedules": "Schedules",
   "scribe__reviewing_field": "Reviewing field {{currentField}} / {{totalFields}}",
   "scribe_error": "Could not autofill fields",
   "search": "Search",
@@ -1565,7 +1566,6 @@
   "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
   "search_investigation_placeholder": "Search Investigation & Groups",
   "search_medication": "Search Medication",
-  "search_patient": "Search Patient",
   "search_patients": "Search Patients",
   "search_resource": "Search Resource",
   "searching": "Searching",
@@ -1676,10 +1676,10 @@
   "test_type": "Type of test done",
   "tested_on": "Tested on",
   "thank_you_for_choosing": "Thank you for choosing our care service",
-  "time": "Time",
-  "time_slot": "Time Slot",
   "the_request_for_resources_placed_by_yourself_is": "The request for resource (details below) placed by yourself is",
   "third_party_software_licenses": "Third Party Software Licenses",
+  "time": "Time",
+  "time_slot": "Time Slot",
   "title_of_request": "Title of Request",
   "titrate_dosage": "Titrate Dosage",
   "to": "to",
@@ -1871,4 +1871,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "You need at least a location to create an assest.",
   "zoom_in": "Zoom In",
   "zoom_out": "Zoom Out"
-}
+}

public/locale/hi.json

@@ -673,7 +673,7 @@
   "search_for_facility": "सुविधा खोजें",
   "search_icd11_placeholder": "ICD-11 निदान खोजें",
   "search_investigation_placeholder": "खोज जांच और समूह",
-  "search_patient": "मरीज खोजें",
+  "search_patients": "मरीज खोजें",
   "search_resource": "संसाधन खोजें",
   "select": "चुनना",
   "select_date": "तारीख़ चुनें",
@@ -808,4 +808,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "संपत्ति बनाने के लिए आपको कम से कम एक स्थान की आवश्यकता होगी।",
   "zoom_in": "ज़ूम इन",
   "zoom_out": "ज़ूम आउट"
-}
+}

public/locale/kn.json

@@ -675,7 +675,7 @@
   "search_for_facility": "ಸೌಲಭ್ಯಕ್ಕಾಗಿ ಹುಡುಕಿ",
   "search_icd11_placeholder": "ICD-11 ರೋಗನಿರ್ಣಯಗಳಿಗಾಗಿ ಹುಡುಕಿ",
   "search_investigation_placeholder": "ಹುಡುಕಾಟ ತನಿಖೆ ಮತ್ತು ಗುಂಪುಗಳು",
-  "search_patient": "ರೋಗಿಯನ್ನು ಹುಡುಕಿ",
+  "search_patients": "ರೋಗಿಯನ್ನು ಹುಡುಕಿ",
   "search_resource": "ಹುಡುಕಾಟ ಸಂಪನ್ಮೂಲ",
   "select": "ಆಯ್ಕೆ ಮಾಡಿ",
   "select_date": "ದಿನಾಂಕವನ್ನು ಆಯ್ಕೆಮಾಡಿ",
@@ -809,4 +809,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "ಆಸ್ತಿಯನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಕನಿಷ್ಠ ಸ್ಥಳದ ಅಗತ್ಯವಿದೆ.",
   "zoom_in": "ಜೂಮ್ ಇನ್",
   "zoom_out": "ಜೂಮ್ ಔಟ್"
-}
+}

public/locale/ml.json

@@ -674,7 +674,7 @@
   "search_for_facility": "സൗകര്യത്തിനായി തിരയുക",
   "search_icd11_placeholder": "ICD-11 രോഗനിർണയങ്ങൾക്കായി തിരയുക",
   "search_investigation_placeholder": "അന്വേഷണവും ഗ്രൂപ്പുകളും",
-  "search_patient": "രോഗിയെ തിരയുക",
+  "search_patients": "രോഗിയെ തിരയുക",
   "search_resource": "തിരയൽ റിസോഴ്സ്",
   "select": "തിരഞ്ഞെടുക്കുക",
   "select_date": "തീയതി തിരഞ്ഞെടുക്കുക",
@@ -809,4 +809,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "ഒരു അസസ്‌റ്റ് സൃഷ്‌ടിക്കാൻ നിങ്ങൾക്ക് ഒരു ലൊക്കേഷനെങ്കിലും ആവശ്യമാണ്.",
   "zoom_in": "സൂം ഇൻ ചെയ്യുക",
   "zoom_out": "സൂം ഔട്ട്"
-}
+}

public/locale/ta.json

@@ -673,7 +673,7 @@
   "search_for_facility": "வசதியைத் தேடுங்கள்",
   "search_icd11_placeholder": "ICD-11 நோய் கண்டறிதல்களைத் தேடவும்",
   "search_investigation_placeholder": "தேடல் விசாரணை & குழுக்கள்",
-  "search_patient": "நோயாளியைத் தேடுங்கள்",
+  "search_patients": "நோயாளியைத் தேடுங்கள்",
   "search_resource": "தேடல் ஆதாரம்",
   "select": "தேர்ந்தெடு",
   "select_date": "தேதியைத் தேர்ந்தெடுக்கவும்",
@@ -808,4 +808,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "ஒரு அசெஸ்ட்டை உருவாக்க குறைந்தபட்சம் ஒரு இருப்பிடமாவது தேவை.",
   "zoom_in": "பெரிதாக்கவும்",
   "zoom_out": "பெரிதாக்கவும்"
-}
+}

src/components/ui/autocomplete.tsx

@@ -27,6 +27,7 @@ interface AutocompleteProps {
   options: AutoCompleteOption[];
   value: string;
   onChange: (value: string) => void;
+  onSearch?: (value: string) => void;
   placeholder?: string;
   noOptionsMessage?: string;
   disabled?: boolean;
@@ -36,14 +37,15 @@ export default function Autocomplete({
   options,
   value,
   onChange,
+  onSearch,
   placeholder = "Select...",
   noOptionsMessage = "No options found",
   disabled,
 }: AutocompleteProps) {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
       <PopoverTrigger asChild>
         <Button
           title={
@@ -70,6 +72,7 @@ export default function Autocomplete({
           <CommandInput
             placeholder="Search option..."
             disabled={disabled}
+            onValueChange={onSearch}
             className="outline-none border-none ring-0 shadow-none"
           />
           <CommandList>

src/components/ui/calendar.tsx

@@ -62,8 +62,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+        PreviousMonthButton: () => <ChevronLeftIcon className="h-4 w-4" />,
+        NextMonthButton: () => <ChevronRightIcon className="h-4 w-4" />,
       }}
       {...props}
     />

src/components/ui/sidebar/app-sidebar.tsx

@@ -41,19 +41,21 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 function generateFacilityLinks(
   selectedFacility: UserFacilityModel | null,
   t: TFunction,
-): NavigationLink[] {
+  // TODO: switch to UserBase once getcurrentuser serializer is updated
+  user?: UserModel,
+) {
   if (!selectedFacility) return [];
 
   const baseUrl = `/facility/${selectedFacility.id}`;
-  return [
+  const links: NavigationLink[] = [
     { name: t("facility"), url: baseUrl, icon: "d-hospital" },
     {
       name: t("appointments"),
       url: `${baseUrl}/appointments`,
       icon: "d-calendar",
     },
     {
-      name: t("Search Patients"),
+      name: t("search_patients"),
       url: `${baseUrl}/patients`,
       icon: "d-patient",
     },
@@ -64,11 +66,21 @@ function generateFacilityLinks(
     { name: t("users"), url: `${baseUrl}/users`, icon: "d-people" },
     // { name: t("All users"), url: "/users", icon: "d-people" },
     {
-      name: t("Organization"),
+      name: t("organization"),
       url: `${baseUrl}/organization`,
       icon: "d-book-open",
     },
   ];
+
+  if (user) {
+    links.push({
+      name: t("schedules"),
+      url: `${baseUrl}/users/${user.username}/availability`,
+      icon: "d-calendar",
+    });
+  }
+
+  return links;
 }
 
 function generateOrganizationLinks(
@@ -171,7 +183,7 @@ export function AppSidebar({
 
       <SidebarContent>
         {facilitySidebar && !selectedOrganization && (
-          <NavMain links={generateFacilityLinks(selectedFacility, t)} />
+          <NavMain links={generateFacilityLinks(selectedFacility, t, user)} />
         )}
         {selectedOrganization && (
           <NavMain

src/hooks/useSlug.ts

@@ -2,6 +2,8 @@ import { usePath } from "raviger";
 
 /**
  * Returns the slug from the current path.
+ *
+ * @deprecated use `usePathParams` instead
  * @param prefix The prefix of the slug.
  * @returns The slug.
  * @example
@@ -15,6 +17,7 @@ export default function useSlug(prefix: string, fallback?: string) {
 
 /**
  * Returns the slugs from the current path.
+ * * @deprecated use `usePathParams` instead
  * @param prefix The prefixes of the slug.
  * @returns The slugs
  * @example

src/pages/Organization/components/OrganizationSelector.tsx

@@ -7,6 +7,8 @@ import Autocomplete from "@/components/ui/autocomplete";
 import { Button } from "@/components/ui/button";
 import InputWithError from "@/components/ui/input-with-error";
 
+import useDebouncedState from "@/hooks/useDebouncedState";
+
 import { ORGANIZATION_LEVELS } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
@@ -32,6 +34,7 @@ interface AutoCompleteOption {
 export default function OrganizationSelector(props: OrganizationSelectorProps) {
   const { onChange, required } = props;
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const [searchQuery, setSearchQuery] = useDebouncedState("", 500);
 
   const headers = props.authToken
     ? {
@@ -42,11 +45,12 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
     : {};
 
   const { data: getAllOrganizations } = useQuery<OrganizationResponse>({
-    queryKey: ["organizations-root"],
+    queryKey: ["organizations-root", searchQuery],
     queryFn: query(routes.organization.list, {
       queryParams: {
         org_type: "govt",
         parent: "",
+        name: searchQuery || undefined,
       },
       ...headers,
     }),
@@ -58,11 +62,13 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
     queryKey: [
       "organizations-current",
       selectedLevels[selectedLevels.length - 1]?.id,
+      searchQuery,
     ],
     queryFn: query(routes.organization.list, {
       queryParams: {
         parent: selectedLevels[selectedLevels.length - 1]?.id,
         org_type: "govt",
+        name: searchQuery || undefined,
       },
       ...headers,
     }),
@@ -153,6 +159,7 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
               onChange={(value: string) =>
                 handleLevelChange(value, selectedLevels.length)
               }
+              onSearch={setSearchQuery}
             />
           </InputWithError>
         </div>