@abpjs/permission-management 0.7.6

package/dist/index.js

@@ -0,0 +1,454 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PermissionManagementModal: () => PermissionManagementModal,
+  PermissionManagementService: () => PermissionManagementService,
+  usePermissionManagement: () => usePermissionManagement
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/services/permission-management.service.ts
+var PermissionManagementService = class {
+  constructor(rest) {
+    this.rest = rest;
+  }
+  /**
+   * Get permissions for a provider
+   * @param params Provider key and name
+   * @returns Promise with permission response
+   */
+  getPermissions(params) {
+    return this.rest.request({
+      method: "GET",
+      url: "/api/permission-management/permissions",
+      params
+    });
+  }
+  /**
+   * Update permissions for a provider
+   * @param request Update request with permissions, providerKey and providerName
+   * @returns Promise that resolves when update completes
+   */
+  updatePermissions(request) {
+    const { permissions, providerKey, providerName } = request;
+    return this.rest.request({
+      method: "PUT",
+      url: "/api/permission-management/permissions",
+      body: { permissions },
+      params: { providerKey, providerName }
+    });
+  }
+};
+
+// src/hooks/usePermissionManagement.ts
+var import_react = require("react");
+var import_core = require("@abpjs/core");
+function findMargin(permissions, permission) {
+  const parentPermission = permissions.find((per) => per.name === permission.parentName);
+  if (parentPermission && parentPermission.parentName) {
+    let margin = 20;
+    return margin += findMargin(permissions, parentPermission);
+  }
+  return parentPermission ? 20 : 0;
+}
+function getPermissionsFromGroups(groups) {
+  return groups.reduce(
+    (acc, group) => [
+      ...acc,
+      ...group.permissions.map((p) => ({ name: p.name, isGranted: p.isGranted }))
+    ],
+    []
+  );
+}
+function usePermissionManagement() {
+  const restService = (0, import_core.useRestService)();
+  const service = (0, import_react.useMemo)(() => new PermissionManagementService(restService), [restService]);
+  const [groups, setGroups] = (0, import_react.useState)([]);
+  const [entityDisplayName, setEntityDisplayName] = (0, import_react.useState)("");
+  const [selectedGroup, setSelectedGroup] = (0, import_react.useState)(null);
+  const [permissions, setPermissions] = (0, import_react.useState)([]);
+  const [originalPermissions, setOriginalPermissions] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [selectThisTab, setSelectThisTab] = (0, import_react.useState)(false);
+  const [selectAllTab, setSelectAllTab] = (0, import_react.useState)(false);
+  const isGranted = (0, import_react.useCallback)(
+    (permissionName) => {
+      const permission = permissions.find((p) => p.name === permissionName);
+      return permission?.isGranted ?? false;
+    },
+    [permissions]
+  );
+  const getSelectedGroupPermissions = (0, import_react.useCallback)(() => {
+    if (!selectedGroup) return [];
+    const groupPermissions = groups.find((g) => g.name === selectedGroup.name)?.permissions ?? [];
+    return groupPermissions.map((permission) => ({
+      ...permission,
+      margin: findMargin(groupPermissions, permission),
+      isGranted: isGranted(permission.name)
+    }));
+  }, [selectedGroup, groups, isGranted]);
+  const updateCheckboxStates = (0, import_react.useCallback)(() => {
+    if (selectedGroup) {
+      const groupPermissions = groups.find((g) => g.name === selectedGroup.name)?.permissions ?? [];
+      const grantedCount = groupPermissions.filter((p) => isGranted(p.name)).length;
+      if (grantedCount === groupPermissions.length) {
+        setSelectThisTab(true);
+      } else if (grantedCount === 0) {
+        setSelectThisTab(false);
+      }
+    }
+    const allGrantedCount = permissions.filter((p) => p.isGranted).length;
+    if (allGrantedCount === permissions.length) {
+      setSelectAllTab(true);
+    } else if (allGrantedCount === 0) {
+      setSelectAllTab(false);
+    }
+  }, [selectedGroup, groups, permissions, isGranted]);
+  const fetchPermissions = (0, import_react.useCallback)(
+    async (providerKey, providerName) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await service.getPermissions({
+          providerKey,
+          providerName
+        });
+        setGroups(response.groups);
+        setEntityDisplayName(response.entityDisplayName);
+        if (response.groups.length > 0) {
+          setSelectedGroup(response.groups[0]);
+        }
+        const perms = getPermissionsFromGroups(response.groups);
+        setPermissions(perms);
+        setOriginalPermissions(perms);
+        setIsLoading(false);
+        return { success: true };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to fetch permissions";
+        setError(errorMessage);
+        setIsLoading(false);
+        return { success: false, error: errorMessage };
+      }
+    },
+    [service]
+  );
+  const savePermissions = (0, import_react.useCallback)(
+    async (providerKey, providerName) => {
+      const changedPermissions = permissions.filter((perm) => {
+        const original = originalPermissions.find((o) => o.name === perm.name);
+        return original && original.isGranted !== perm.isGranted;
+      });
+      if (changedPermissions.length === 0) {
+        return { success: true };
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        await service.updatePermissions({
+          providerKey,
+          providerName,
+          permissions: changedPermissions.map(({ name, isGranted: isGranted2 }) => ({
+            name,
+            isGranted: isGranted2
+          }))
+        });
+        setIsLoading(false);
+        return { success: true };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to update permissions";
+        setError(errorMessage);
+        setIsLoading(false);
+        return { success: false, error: errorMessage };
+      }
+    },
+    [service, permissions, originalPermissions]
+  );
+  const togglePermission = (0, import_react.useCallback)(
+    (clickedPermission) => {
+      setPermissions((currentPermissions) => {
+        const clickedPerm = currentPermissions.find((p) => p.name === clickedPermission.name);
+        const wasGranted = clickedPerm?.isGranted ?? false;
+        return currentPermissions.map((perm) => {
+          if (clickedPermission.name === perm.name) {
+            return { ...perm, isGranted: !perm.isGranted };
+          }
+          if (clickedPermission.name === clickedPermission.parentName && wasGranted) {
+          }
+          const allPerms = groups.flatMap((g) => g.permissions);
+          const thisPerm = allPerms.find((p) => p.name === perm.name);
+          if (thisPerm?.parentName === clickedPermission.name && wasGranted) {
+            return { ...perm, isGranted: false };
+          }
+          if (clickedPermission.parentName === perm.name && !wasGranted) {
+            return { ...perm, isGranted: true };
+          }
+          return perm;
+        });
+      });
+      setTimeout(updateCheckboxStates, 0);
+    },
+    [groups, updateCheckboxStates]
+  );
+  const toggleSelectThisTab = (0, import_react.useCallback)(() => {
+    if (!selectedGroup) return;
+    const groupPermissionNames = new Set(
+      groups.find((g) => g.name === selectedGroup.name)?.permissions.map((p) => p.name) ?? []
+    );
+    const newGrantedState = !selectThisTab;
+    setPermissions(
+      (currentPermissions) => currentPermissions.map(
+        (perm) => groupPermissionNames.has(perm.name) ? { ...perm, isGranted: newGrantedState } : perm
+      )
+    );
+    setSelectThisTab(newGrantedState);
+    setTimeout(updateCheckboxStates, 0);
+  }, [selectedGroup, groups, selectThisTab, updateCheckboxStates]);
+  const toggleSelectAll = (0, import_react.useCallback)(() => {
+    const newGrantedState = !selectAllTab;
+    setPermissions(
+      (currentPermissions) => currentPermissions.map((perm) => ({ ...perm, isGranted: newGrantedState }))
+    );
+    setSelectAllTab(newGrantedState);
+    setSelectThisTab(newGrantedState);
+  }, [selectAllTab]);
+  const handleSetSelectedGroup = (0, import_react.useCallback)(
+    (group) => {
+      setSelectedGroup(group);
+      setTimeout(updateCheckboxStates, 0);
+    },
+    [updateCheckboxStates]
+  );
+  const reset = (0, import_react.useCallback)(() => {
+    setGroups([]);
+    setEntityDisplayName("");
+    setSelectedGroup(null);
+    setPermissions([]);
+    setOriginalPermissions([]);
+    setIsLoading(false);
+    setError(null);
+    setSelectThisTab(false);
+    setSelectAllTab(false);
+  }, []);
+  return {
+    groups,
+    entityDisplayName,
+    selectedGroup,
+    permissions,
+    isLoading,
+    error,
+    selectThisTab,
+    selectAllTab,
+    fetchPermissions,
+    savePermissions,
+    setSelectedGroup: handleSetSelectedGroup,
+    togglePermission,
+    toggleSelectThisTab,
+    toggleSelectAll,
+    getSelectedGroupPermissions,
+    isGranted,
+    reset
+  };
+}
+
+// src/components/PermissionManagementModal/PermissionManagementModal.tsx
+var import_react2 = require("react");
+var import_core2 = require("@abpjs/core");
+var import_theme_shared = require("@abpjs/theme-shared");
+var import_react3 = require("@chakra-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PermissionManagementModal({
+  providerName,
+  providerKey,
+  visible,
+  onVisibleChange,
+  onSave
+}) {
+  const { t } = (0, import_core2.useLocalization)();
+  const {
+    groups,
+    entityDisplayName,
+    selectedGroup,
+    isLoading,
+    error,
+    selectThisTab,
+    selectAllTab,
+    fetchPermissions,
+    savePermissions,
+    setSelectedGroup,
+    togglePermission,
+    toggleSelectThisTab,
+    toggleSelectAll,
+    getSelectedGroupPermissions,
+    isGranted,
+    reset
+  } = usePermissionManagement();
+  const selectAllCheckboxRef = (0, import_react2.useRef)(null);
+  const selectThisTabCheckboxRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (visible && providerKey && providerName) {
+      fetchPermissions(providerKey, providerName);
+    }
+    if (!visible) {
+      reset();
+    }
+  }, [visible, providerKey, providerName, fetchPermissions, reset]);
+  (0, import_react2.useEffect)(() => {
+    if (!selectAllCheckboxRef.current) return;
+    const allPermissions = groups.flatMap((g) => g.permissions);
+    const grantedCount = allPermissions.filter((p) => isGranted(p.name)).length;
+    if (grantedCount === 0) {
+      selectAllCheckboxRef.current.indeterminate = false;
+    } else if (grantedCount === allPermissions.length) {
+      selectAllCheckboxRef.current.indeterminate = false;
+    } else {
+      selectAllCheckboxRef.current.indeterminate = true;
+    }
+  }, [groups, isGranted]);
+  (0, import_react2.useEffect)(() => {
+    if (!selectThisTabCheckboxRef.current || !selectedGroup) return;
+    const groupPermissions = groups.find((g) => g.name === selectedGroup.name)?.permissions ?? [];
+    const grantedCount = groupPermissions.filter((p) => isGranted(p.name)).length;
+    if (grantedCount === 0) {
+      selectThisTabCheckboxRef.current.indeterminate = false;
+    } else if (grantedCount === groupPermissions.length) {
+      selectThisTabCheckboxRef.current.indeterminate = false;
+    } else {
+      selectThisTabCheckboxRef.current.indeterminate = true;
+    }
+  }, [selectedGroup, groups, isGranted]);
+  const handleSubmit = (0, import_react2.useCallback)(async () => {
+    const result = await savePermissions(providerKey, providerName);
+    if (result.success) {
+      onSave?.();
+      onVisibleChange?.(false);
+    }
+  }, [savePermissions, providerKey, providerName, onSave, onVisibleChange]);
+  const handleClose = (0, import_react2.useCallback)(() => {
+    onVisibleChange?.(false);
+  }, [onVisibleChange]);
+  const handlePermissionClick = (0, import_react2.useCallback)(
+    (permission) => {
+      togglePermission(permission);
+    },
+    [togglePermission]
+  );
+  const handleGroupClick = (0, import_react2.useCallback)(
+    (group) => {
+      setSelectedGroup(group);
+    },
+    [setSelectedGroup]
+  );
+  const selectedGroupPermissions = getSelectedGroupPermissions();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_theme_shared.Modal,
+    {
+      visible,
+      onVisibleChange,
+      size: "xl",
+      header: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        t("AbpPermissionManagement::Permissions"),
+        entityDisplayName && ` - ${entityDisplayName}`
+      ] }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme_shared.Button, { variant: "outline", onClick: handleClose, disabled: isLoading, children: t("AbpIdentity::Cancel") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_theme_shared.Button,
+          {
+            colorPalette: "blue",
+            onClick: handleSubmit,
+            loading: isLoading,
+            children: t("AbpIdentity::Save")
+          }
+        )
+      ] }),
+      children: [
+        isLoading && groups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Flex, { justify: "center", align: "center", py: 8, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Spinner, { size: "lg" }) }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme_shared.Alert, { status: "error", mb: 4, children: error }),
+        groups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react3.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_theme_shared.Checkbox,
+            {
+              ref: selectAllCheckboxRef,
+              id: "select-all-in-all-tabs",
+              checked: selectAllTab,
+              onChange: toggleSelectAll,
+              children: t("AbpPermissionManagement::SelectAllInAllTabs")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Box, { borderBottomWidth: "1px", borderColor: "gray.200", my: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react3.Flex, { gap: 4, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Box, { w: "35%", maxH: "70vh", overflowY: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.VStack, { gap: 0, align: "stretch", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react3.Box,
+              {
+                px: 3,
+                py: 2,
+                cursor: "pointer",
+                bg: selectedGroup?.name === group.name ? "blue.500" : "transparent",
+                color: selectedGroup?.name === group.name ? "white" : "inherit",
+                borderRadius: "md",
+                _hover: {
+                  bg: selectedGroup?.name === group.name ? "blue.600" : "gray.100"
+                },
+                onClick: () => handleGroupClick(group),
+                children: group.displayName
+              },
+              group.name
+            )) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Box, { w: "65%", children: selectedGroup && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Heading, { as: "h4", size: "md", mb: 2, children: selectedGroup.displayName }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Box, { borderBottomWidth: "1px", borderColor: "gray.200", my: 2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react3.Box, { pl: 1, pt: 1, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_theme_shared.Checkbox,
+                  {
+                    ref: selectThisTabCheckboxRef,
+                    id: "select-all-in-this-tabs",
+                    checked: selectThisTab,
+                    onChange: toggleSelectThisTab,
+                    children: t("AbpPermissionManagement::SelectAllInThisTab")
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Box, { borderBottomWidth: "1px", borderColor: "gray.200", my: 3 }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Box, { maxH: "60vh", overflowY: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.VStack, { align: "stretch", gap: 2, children: selectedGroupPermissions.map((permission) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.Box, { ml: `${permission.margin}px`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_theme_shared.Checkbox,
+                  {
+                    id: permission.name,
+                    checked: isGranted(permission.name),
+                    onChange: () => handlePermissionClick(permission),
+                    children: permission.displayName
+                  }
+                ) }, permission.name)) }) })
+              ] })
+            ] }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PermissionManagementModal,
+  PermissionManagementService,
+  usePermissionManagement
+});