From 6cc91682a979a5a968da23a3537edbaedf82cba7 Mon Sep 17 00:00:00 2001 From: Abhimanyu Rajeesh <63541653+abhimanyurajeesh@users.noreply.github.com> Date: Tue, 18 Feb 2025 00:26:31 +0530 Subject: [PATCH] Fix: Redesign the User view of Department/Teams (#10568) --- public/locale/en.json | 11 + .../FacilityOrganizationUsers.tsx | 221 ++++++++++-------- .../CreateFacilityOrganizationSheet.tsx | 23 +- .../Organization/components/AddUserSheet.tsx | 2 +- 4 files changed, 145 insertions(+), 112 deletions(-) diff --git a/public/locale/en.json b/public/locale/en.json index 221b300ba01..6c3c92de78c 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -291,6 +291,7 @@ "add_beds_to_configure_presets": "Add beds to this location to configure presets for them.", "add_consultation": "Add consultation", "add_consultation_update": "Add Consultation Update", + "add_department_team": "Add Department/Team", "add_details_of_patient": "Add Details of Patient", "add_exception": "Add Exception", "add_facility": "Add Facility", @@ -641,6 +642,8 @@ "create_add_more": "Create & Add More", "create_asset": "Create Asset", "create_consultation": "Create Consultation", + "create_department_team": "Create Department/Team", + "create_department_team_description": "Create a new department/team in this facility.", "create_encounter": "Create Encounter", "create_facility": "Create Facility", "create_new": "Create New", @@ -648,6 +651,7 @@ "create_new_encounter": "Create a new encounter to get started", "create_new_facility": "Create a new facility and add it to the organization.", "create_new_tag": "Create New Tag", + "create_organization": "Create Organization", "create_position_preset": "Create a new position preset", "create_position_preset_description": "Creates a new position preset in Care from the current position of the camera for the given name", "create_preset_prerequisite": "To create presets for this bed, you'll need to link the camera to the bed first.", @@ -939,6 +943,8 @@ "end_time_before_start_error": "End time cannot be before start time", "end_time_future_error": "End time cannot be in the future", "ended": "Ended", + "enter_department_team_description": "Enter department/team description (optional)", + "enter_department_team_name": "Enter department/team name", "enter_dosage_instructions": "Enter Dosage Instructions", "enter_file_name": "Enter File Name", "enter_message": "Start typing...", @@ -1523,6 +1529,7 @@ "ordering": "Ordering", "organization": "Organization", "organization_access_help": "Organizations help you manage facilities, users, and resources efficiently. Contact your administrator to get access.", + "organization_created_successfully": "Organization created successfully", "organization_for_care_support": "Organization for Care Support", "organization_forbidden": "You don't have access to any organizations yet.", "organization_not_found": "No Organizations Found", @@ -1650,6 +1657,7 @@ "please_enter_correct_birth_year": "Please enter the correct birth year to verify the patient details.", "please_enter_current_password": "Please enter your current password.", "please_enter_new_password": "Please enter your new password.", + "please_enter_organization_name": "Please enter an organization name", "please_enter_username": "Please enter the username", "please_fix_errors": "Please fix the errors in the highlighted fields and try submitting again.", "please_select_a_facility": "Please select a facility", @@ -1923,6 +1931,7 @@ "search_by_patient_no": "Search by Patient Number", "search_by_phone_number": "Search by Phone Number", "search_by_resource_title": "Search by resource title", + "search_by_user_name": "Search by user name", "search_by_username": "Search by username", "search_country": "Search country...", "search_encounters": "Search Encounters", @@ -1977,6 +1986,7 @@ "select_method": "Select method", "select_new_role": "Select New Role", "select_organization": "Select Organization", + "select_organization_type": "Select organization type", "select_patient": "Select Patient", "select_policy": "Select an Insurance Policy", "select_policy_to_add_items": "Select a Policy to Add Items", @@ -2167,6 +2177,7 @@ "true": "True", "try_again_later": "Try again later!", "try_different_abha_linking_option": "Want to try a different linking option, here are some more:", + "type": "Type", "type_any_extra_comments_here": "type any extra comments here", "type_b_cylinders": "B Type Cylinders", "type_c_cylinders": "C Type Cylinders", diff --git a/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx b/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx index 509f451a592..d0bde50e2ce 100644 --- a/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx +++ b/src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx @@ -1,19 +1,19 @@ import { useQuery } from "@tanstack/react-query"; -import { useQueryParams } from "raviger"; +import { useState } from "react"; import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; import { Avatar } from "@/components/Common/Avatar"; -import { - CardGridSkeleton, - CardListSkeleton, -} from "@/components/Common/SkeletonLoading"; +import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; import { UserStatusIndicator } from "@/components/Users/UserListAndCard"; +import useFilters from "@/hooks/useFilters"; + import routes from "@/Utils/request/api"; import query from "@/Utils/request/query"; import AddUserSheet from "@/pages/Organization/components/AddUserSheet"; @@ -29,19 +29,30 @@ interface Props { } export default function FacilityOrganizationUsers({ id, facilityId }: Props) { - const [qParams, setQueryParams] = useQueryParams<{ + const [sheetState, setSheetState] = useState<{ sheet: string; username: string; - }>(); + }>({ + sheet: "", + username: "", + }); + const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({ + limit: 12, + }); const { t } = useTranslation(); - const openAddUserSheet = qParams.sheet === "add"; - const openLinkUserSheet = qParams.sheet === "link"; + const openAddUserSheet = sheetState.sheet === "add"; + const openLinkUserSheet = sheetState.sheet === "link"; const { data: users, isLoading: isLoadingUsers } = useQuery({ - queryKey: ["facilityOrganizationUsers", facilityId, id], - queryFn: query(routes.facilityOrganization.listUsers, { + queryKey: ["facilityOrganizationUsers", facilityId, id, qParams], + queryFn: query.debounced(routes.facilityOrganization.listUsers, { pathParams: { facilityId, organizationId: id }, + queryParams: { + search_text: qParams.search || undefined, + limit: resultsPerPage, + offset: ((qParams.page || 1) - 1) * resultsPerPage, + }, }), enabled: !!id, }); @@ -50,32 +61,32 @@ export default function FacilityOrganizationUsers({ id, facilityId }: Props) { return null; } - if (isLoadingUsers) { - return ( - -
- -
- -
-
- - ); - } - return (
-
-

{t("users")}

-
+
+
+ + { + updateQuery({ search: e.target.value || undefined }); + }} + className="w-full pl-8" + /> +
+
{ - setQueryParams({ sheet: open ? "add" : "", username: "" }); + setSheetState({ sheet: open ? "add" : "", username: "" }); }} onUserCreated={(user) => { - setQueryParams({ sheet: "link", username: user.username }); + setSheetState({ sheet: "link", username: user.username }); }} /> { - setQueryParams({ sheet: open ? "link" : "", username: "" }); + setSheetState({ sheet: open ? "link" : "", username: "" }); }} - preSelectedUsername={qParams.username} + preSelectedUsername={sheetState.username} />
-
- {users?.results?.length === 0 ? ( - - - {t("no_users_found")} - - - ) : ( - users?.results?.map((userRole: OrganizationUserRole) => ( - - -
-
- - -
-
-

- {userRole.user.first_name} {userRole.user.last_name} -

- - + {isLoadingUsers ? ( +
+ +
+ ) : ( +
+
+ {!users?.results?.length ? ( + + + {t("no_users_found")} + + + ) : ( + users.results.map((userRole: OrganizationUserRole) => ( + + +
+ + +
+
+
+

+ {userRole.user.first_name}{" "} + {userRole.user.last_name} +

+ + + +
+ {userRole.user.username} - - +
+
+
+
{t("role")}
+
+ {userRole.role.name} +
+
+
+
+ {t("phone_number")} +
+
+ {userRole.user.phone_number} +
+
+
-
-
-
-
{t("role")}
-
- {userRole.role.name} -
+
+ + {t("see_details")} + + } + />
-
-
{t("phone_number")}
-
- {userRole.user.phone_number} -
-
-
- -
- - - {t("more_details")} - - } - /> -
-
- - - )) - )} -
+ + + )) + )} +
+ + {(users?.results || []).length > 0 && + users?.count && + users.count > resultsPerPage && ( +
+ +
+ )} +
+ )}
); diff --git a/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx b/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx index 0726a6d44fe..741ec7aa046 100644 --- a/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx +++ b/src/pages/Facility/settings/organizations/components/CreateFacilityOrganizationSheet.tsx @@ -1,4 +1,5 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { t } from "i18next"; import { useState } from "react"; import { toast } from "sonner"; @@ -62,7 +63,7 @@ export default function CreateFacilityOrganizationSheet({ queryClient.invalidateQueries({ queryKey: ["getCurrentUser"], }); - toast.success("Organization created successfully"); + toast.success(t("organization_created_successfully")); setOpen(false); setName(""); setDescription(""); @@ -78,7 +79,7 @@ export default function CreateFacilityOrganizationSheet({ const handleSubmit = () => { if (!name.trim()) { - toast.error("Please enter an organization name"); + toast.error(t("please_enter_organization_name")); return; } @@ -93,16 +94,16 @@ export default function CreateFacilityOrganizationSheet({ return ( - - Create Department/Team + {t("create_department_team")} - Create a new department/team in this facility. + {t("create_department_team_description")}
@@ -111,18 +112,18 @@ export default function CreateFacilityOrganizationSheet({ setName(e.target.value)} - placeholder="Enter department/team name" + placeholder={t("enter_department_team_name")} />
- +