ft : edit user role scope (openmrs#44)

jabahum · Dec 14, 2023 · 1d7a978 · 1d7a978
1 parent bfe25ca
commit 1d7a978
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 28 deletions.
diff --git a/src/stock-lookups/stock-lookups.resource.ts b/src/stock-lookups/stock-lookups.resource.ts
@@ -152,7 +152,7 @@ export function useUser(id: string) {
     Error
   >(apiUrl, openmrsFetch);
   return {
-    items: data.data ? data.data : {},
+    data: data?.data || <User>{},
     isLoading,
     isError: error,
   };

diff --git a/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.component.tsx b/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.component.tsx
@@ -19,6 +19,7 @@ import {
   useRoles,
   useStockLocations,
   useStockOperationTypes,
+  useUser,
   useUsers,
 } from "../../stock-lookups/stock-lookups.resource";
 import { ResourceRepresentation } from "../../core/api/api";
@@ -43,13 +44,21 @@ import { StockOperationType } from "../../core/api/types/stockOperation/StockOpe
 
 const MinDate: Date = today();
 
-const AddStockUserRoleScope: React.FC = () => {
+interface AddStockUserRoleScopeProps {
+  model?: UserRoleScope;
+}
+
+const AddStockUserRoleScope: React.FC<AddStockUserRoleScopeProps> = ({
+  model,
+}) => {
   const { t } = useTranslation();
 
-  const [formModel, setFormModel] = useState<UserRoleScope>();
+  const [formModel, setFormModel] = useState<UserRoleScope>({ ...model });
 
   const [roles, setRoles] = useState<Role[]>([]);
 
+  const { data: user } = useUser(model?.uuid);
+
   // operation types
   const {
     types: { results: stockOperations },
@@ -288,6 +297,11 @@ const AddStockUserRoleScope: React.FC = () => {
                     id="userName"
                     size="md"
                     labelText="User"
+                    value={
+                      formModel.userUuid
+                        ? `${formModel.userFamilyName} ${formModel.userGivenName}`
+                        : ``
+                    }
                     items={users?.results}
                     onChange={onUserChanged}
                     shouldFilterItem={(data) => true}
@@ -315,7 +329,8 @@ const AddStockUserRoleScope: React.FC = () => {
                     labelText="Role"
                     size="md"
                     onChange={onRoleChange}
-                    items={rolesData?.results}
+                    value={formModel?.role ?? ""}
+                    items={rolesData?.results ?? roles}
                     shouldFilterItem={() => true}
                     onFocus={() => rolesData?.results}
                     onToggleClick={() => rolesData?.results}
@@ -332,12 +347,14 @@ const AddStockUserRoleScope: React.FC = () => {
                 onChange={onEnabledChanged}
                 checked={formModel?.enabled}
                 labelText={`Enabled ?`}
+                value={model?.enabled}
                 id="chk-userEnabled"
               />
               <Checkbox
                 onChange={onPermanentChanged}
                 name="isPermanent"
                 checked={formModel?.permanent}
+                value={model?.permanent}
                 labelText={`Permanent ?`}
                 id="chk-userPermanent"
               />

diff --git a/...ck-user-role-scopes/edit-stock-user-scope/edit-stock-user-scope-action-menu.component.tsx b/...ck-user-role-scopes/edit-stock-user-scope/edit-stock-user-scope-action-menu.component.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@carbon/react";
+import { Edit } from "@carbon/react/icons";
+
+import React, { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { launchOverlay } from "../../core/components/overlay/hook";
+import AddStockUserRoleScope from "../add-stock-user-scope/add-stock-user-role-scope.component";
+import { UserRoleScope } from "../../core/api/types/identity/UserRoleScope";
+
+interface EditStockUserRoleActionsMenuProps {
+  data: UserRoleScope;
+}
+
+const EditStockUserRoleActionsMenu: React.FC<
+  EditStockUserRoleActionsMenuProps
+> = ({ data }) => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    launchOverlay(
+      "Edit Stock User Role",
+      <AddStockUserRoleScope model={data} />
+    );
+  }, [data]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={handleClick}
+      iconDescription={t("editUserScope", "Edit UserScope")}
+      renderIcon={(props) => <Edit size={16} {...props} />}
+    />
+  );
+};
+export default EditStockUserRoleActionsMenu;
diff --git a/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx b/src/stock-user-role-scopes/stock-user-role-scopes-items-table.component.tsx
@@ -21,13 +21,21 @@ import {
   Button,
 } from "@carbon/react";
 import styles from "./stock-user-role-scopes.scss";
-import { Logout, Dashboard, ChooseItem, Edit } from "@carbon/react/icons";
+import {
+  Logout,
+  Dashboard,
+  ChooseItem,
+  Edit,
+  ArrowDownLeft,
+  ArrowLeft,
+} from "@carbon/react/icons";
 import { isDesktop } from "@openmrs/esm-framework";
 import { ResourceRepresentation } from "../core/api/api";
 import useStockUserRoleScopesPage from "./stock-user-role-scopes-items-table.resource";
 import { URL_USER_ROLE_SCOPE } from "../stock-items/stock-items-table.component";
 import AddStockUserRoleScopeActionButton from "./add-stock-user-role-scope-button.component";
 import { formatDisplayDate } from "../core/utils/datetimeUtils";
+import EditStockUserRoleActionsMenu from "./edit-stock-user-scope/edit-stock-user-scope-action-menu.component";
 
 function StockUserRoleScopesItems() {
   const { t } = useTranslation();
@@ -49,7 +57,7 @@ function StockUserRoleScopesItems() {
   });
 
   const tableRows = useMemo(() => {
-    return items?.map((userRoleScope) => {
+    return items?.map((userRoleScope, index) => {
       return {
         ...userRoleScope,
         id: userRoleScope?.uuid,
@@ -61,12 +69,19 @@ function StockUserRoleScopesItems() {
           >{`${userRoleScope?.userFamilyName} ${userRoleScope.userGivenName}`}</Link>
         ),
         roleName: userRoleScope?.role,
-        locations: userRoleScope?.locations
-          ?.map((location) => {
-            return location?.locationName;
-            //return
-          })
-          ?.join(", "),
+        locations: userRoleScope?.locations?.map((location) => {
+          const key = `loc-${userRoleScope?.uuid}-${location.locationUuid}`;
+          return (
+            <span key={key}>
+              {location?.locationName}
+              {location?.enableDescendants ? (
+                <ArrowDownLeft key={`${key}-${index}-0`} />
+              ) : (
+                <ArrowLeft key={`${key}-${index}-1`} />
+              )}{" "}
+            </span>
+          ); //return
+        }),
         stockOperations: userRoleScope?.operationTypes
           ?.map((operation) => {
             return operation?.operationTypeName;
@@ -75,21 +90,12 @@ function StockUserRoleScopesItems() {
         permanent: userRoleScope?.permanent
           ? t("stockmanagement.yes", "Yes")
           : t("stockmanagement.no", "No"),
-        activeFrom: formatDisplayDate(userRoleScope?.activeFrom),
-        activeTo: formatDisplayDate(userRoleScope?.activeTo),
+        activeFrom: formatDisplayDate(userRoleScope?.activeFrom) ?? "Not Set",
+        activeTo: formatDisplayDate(userRoleScope?.activeTo) ?? "Not Set",
         enabled: userRoleScope?.enabled
           ? t("stockmanagement.yes", "Yes")
           : t("stockmanagement.no", "No"),
-        // actions: (
-        //   <Button
-        //     type="button"
-        //     size="sm"
-        //     className="submitButton clear-padding-margin"
-        //     iconDescription={"View"}
-        //     kind="ghost"
-        //     renderIcon={(props) => <Edit size={16} {...props} />}
-        //   />
-        // ),
+        actions: <EditStockUserRoleActionsMenu data={items[index]} />,
       };
     });
   }, [items, t]);

diff --git a/src/stock-user-role-scopes/stock-user-role-scopes-items-table.resource.ts b/src/stock-user-role-scopes/stock-user-role-scopes-items-table.resource.ts
@@ -59,10 +59,11 @@ export default function useStockUserRoleScopesPage(
         header: "Enabled ?",
         key: "enabled",
       },
-      // {
-      //   id: 8,
-      //   header: "actions",
-      // },
+      {
+        id: 8,
+        header: "Actions",
+        key: "actions",
+      },
     ],
     []
   );