@antscorp/antsomi-ui 1.3.5-beta.569 → 1.3.5-beta.570

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -127,12 +127,12 @@ export const ChildMenu = memo(props => {
         pathname,
         activeAppCode,
         menuItems,
-        setLeftMenuState,
         isCustomized,
         customActiveCurrentKey,
         customItems,
         isRecommendation,
         env,
+        setLeftMenuState,
     ]);
     const onClick = e => {
         if (isRecommendation) {
@@ -173,7 +173,7 @@ export const ChildMenu = memo(props => {
         var _a;
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, disabled, style, optionCallback, } = item;
-            const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD.menu_item_code;
+            const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD;
             const renderLabel = () => (React.createElement(LabelWrapper, { gap: 10, align: "center", justify: "space-between", style: style },
                 React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
                 (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, { align: "center" },

package/es/components/organism/LeftMenu/constants/variables.d.ts

@@ -1,4 +1,3 @@
-import { TMenuFeatureItem } from '../types';
 export declare const APP_KEYS: {
     HOME: string;
     MARKETING: string;
@@ -22,7 +21,10 @@ export declare const HOME_REPORT_ROUTES: {
     CONFIGURE: string;
     CREATE: string;
 };
-export declare const HOME_MENU_ITEMS: Record<string, TMenuFeatureItem>;
+export declare const HOME_MENU_ITEMS: {
+    RECOMMENDATION: string;
+    DASHBOARD: string;
+};
 export declare const MARKETING_ROUTES: {
     CHANNEL: string;
 };

package/es/components/organism/LeftMenu/constants/variables.js

@@ -23,20 +23,8 @@ export const HOME_REPORT_ROUTES = {
     CREATE: `create`,
 };
 export const HOME_MENU_ITEMS = {
-    RECOMMENDATION: {
-        menu_item_name: 'Recommendation',
-        menu_item_code: 'recommendation',
-        icon_name: 'icon-ants-tips',
-        menu_item_path: `${HOME_ROUTE}/recommendation`,
-        page_title: '_recommendation',
-    },
-    DASHBOARD: {
-        menu_item_name: 'Dashboard',
-        menu_item_code: 'ownedDashboard',
-        icon_name: 'icon-ants-dashboard',
-        menu_item_path: HOME_ROUTE,
-        page_title: '_dashboard',
-    },
+    RECOMMENDATION: 'RECOMMENDATION',
+    DASHBOARD: 'DASHBOARD',
 };
 /* MARKETING APP */
 export const MARKETING_ROUTES = {

package/es/components/organism/LeftMenu/utils/index.d.ts

@@ -1,8 +1,8 @@
 import { FeatureMenuPermission, TDashboard, TDestinationChannel, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 import { TMenuFeatureItem, TMenuItem } from '../types';
-import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 import { TAccountPermission } from '@antscorp/antsomi-ui/es/models/AccountListing';
+import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 /**
  * Converts a feature menu item to a menu item suitable for rendering in the UI.
  * @param {TMenuFeatureItem} featureMenu - The feature menu item to convert.
@@ -62,6 +62,13 @@ export declare const recursiveGetInitialFeatureMenuItem: (featureMenuItem: Parti
     children?: TFeatureMenu[] | undefined;
     dashboardEditable?: boolean | undefined;
 };
+/**
+ * Recursively converts a feature menu item to a menu item, including children,
+ * based on permissions.
+ *
+ * @param {TFeatureMenu} featureMenuItem - The feature menu item to convert.
+ * @returns {TMenuItem} - The converted menu item with permissions.
+ */
 export declare const recursiveGetMenuItemByPermission: (featureMenuItem: TFeatureMenu) => TMenuItem;
 /** Map children to each App Item */
 export declare const getMappingAppChildren: (args: {
@@ -87,12 +94,30 @@ export declare const findActiveAppCodeByUrl: (args: {
     auth?: Partial<PayloadInfo>;
     env?: string;
 }) => string | undefined;
+/**
+ * Finds the last matched menu item based on the provided URL.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu items.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search through.
+ * @param {Partial<PayloadInfo>} [args.auth] - Optional authorization information for generating paths.
+ * @param {TEnv} [args.env='development'] - Optional environment parameter to adjust path comparison.
+ * @returns {TFeatureMenu | undefined} - The last matched menu item, or undefined if not found.
+ */
 export declare const findLastMatchedItemByUrl: (args: {
     url: string;
     menuItems: TFeatureMenu[];
     auth?: Partial<PayloadInfo>;
     env?: TEnv;
 }) => TFeatureMenu | undefined;
+/**
+ * Finds the path of the active menu item in a nested menu structure.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {TFeatureMenu} args.activeMenuItem - The active menu item to find the path for.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search through.
+ * @returns {TFeatureMenu[]} - An array representing the path of the active menu item.
+ */
 export declare const findPathOfActiveItem: (args: {
     activeMenuItem: TFeatureMenu;
     menuItems: TFeatureMenu[];
@@ -110,6 +135,14 @@ export declare const findActiveAppCodeByChild: (args: {
     menuItems: TMenuItem[];
     isRecommendation?: boolean;
 }) => string | undefined;
+/**
+ * Retrieves the custom active application code based on the active key and menu items.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.activeKey - The active key to search for.
+ * @param {TMenuItem[]} args.menuItems - The array of menu items to search through.
+ * @returns {string | undefined} - The active application code if found, otherwise undefined.
+ */
 export declare const getCustomActiveAppCode: (args: {
     activeKey: string;
     menuItems: TMenuItem[];

package/es/components/organism/LeftMenu/utils/index.js

@@ -14,9 +14,10 @@ import { cloneDeep, isArray, isEmpty, sortBy } from 'lodash';
 // Constants
 import { APP_KEYS, MARKETING_CHANNEL_KEY, HOME_MENU_ITEMS, MARKETING_ROUTES, MENU_ITEM_TYPE, RENDER_OPTION, HOME_REPORT_ROUTES, SETTING_APP, APP_EXCLUDED_KEYS, MAP_MENU_TO_PARENT_APP_CODE, } from '../constants';
 import { MARKETING_CHANNEL_CODE, KEEP_HASH_PATH_DEV } from '../../../template/Layout/constants';
+import { ENV } from '@antscorp/antsomi-ui/es/config';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
-import { ENV } from '@antscorp/antsomi-ui/es/config';
+import { USER_PERMISSIONS } from '@antscorp/antsomi-ui/es/constants';
 const PATH = 'src/components/organism/LeftMenu/utils/index.ts';
 /**
  * Converts a feature menu item to a menu item suitable for rendering in the UI.
@@ -128,6 +129,13 @@ export const getComparePath = (path, env) => {
  */
 export const getInitialFeatureMenuItem = (featureMenuItem) => (Object.assign({ menu_item: '', network_id: -1, menu_item_name: '', level_position: 0, icon_name: null, menu_item_path: null, menu_item_code: '', permission_code: null, menu_item_type: 3, menu_item_parent: 0, render_option: null, menu_item_domain: null, total_row: 0, ctime: null, utime: null }, featureMenuItem));
 export const recursiveGetInitialFeatureMenuItem = (featureMenuItem) => (Object.assign({ menu_item: '', network_id: -1, menu_item_name: '', level_position: 0, icon_name: null, menu_item_path: null, menu_item_code: '', permission_code: null, menu_item_type: 3, menu_item_parent: 0, render_option: null, menu_item_domain: null, total_row: 0, ctime: null, utime: null }, featureMenuItem));
+/**
+ * Recursively converts a feature menu item to a menu item, including children,
+ * based on permissions.
+ *
+ * @param {TFeatureMenu} featureMenuItem - The feature menu item to convert.
+ * @returns {TMenuItem} - The converted menu item with permissions.
+ */
 export const recursiveGetMenuItemByPermission = (featureMenuItem) => {
     var _a;
     return ({
@@ -197,41 +205,32 @@ export const getMappingAppChildren = (args) => {
         var _a, _b;
         switch (appItem.menu_item_code) {
             case APP_KEYS.HOME: {
-                const dashboardObject = {
-                    sharedDashboard: [],
-                    ownedDashboard: dashboardList,
-                    recentDashboard: [],
-                };
-                appItem.children = (_a = Object.values(HOME_MENU_ITEMS)) === null || _a === void 0 ? void 0 : _a.map(childMenuItem => {
+                appItem.children = (_a = appItem.children) === null || _a === void 0 ? void 0 : _a.map(childMenuItem => {
                     var _a;
-                    return (Object.assign(Object.assign({}, getInitialFeatureMenuItem({
-                        menu_item_domain: appItem.menu_item_domain,
-                        menu_item: childMenuItem.menu_item_code,
-                        menu_item_code: childMenuItem.menu_item_code,
-                        menu_item_name: childMenuItem.menu_item_name,
-                        menu_item_parent: appItem.menu_item,
-                        menu_item_path: childMenuItem.menu_item_path,
-                        icon_name: childMenuItem.icon_name,
-                    })), { children: (_a = dashboardObject === null || dashboardObject === void 0 ? void 0 : dashboardObject[childMenuItem.menu_item_code]) === null || _a === void 0 ? void 0 : _a.map(item => {
+                    return (Object.assign(Object.assign({}, childMenuItem), { children: (_a = (childMenuItem.menu_item_code === HOME_MENU_ITEMS.DASHBOARD
+                            ? dashboardList
+                            : undefined)) === null || _a === void 0 ? void 0 : _a.map(item => {
                             const { shareAccess } = item || {};
                             const dashboardEditable = (() => {
                                 var _a, _b, _c;
                                 switch ((_a = userPermission === null || userPermission === void 0 ? void 0 : userPermission.permissions) === null || _a === void 0 ? void 0 : _a.edit) {
-                                    case 'EVERYTHING':
+                                    case USER_PERMISSIONS.EVERYTHING:
                                         return true;
-                                    case 'NONE':
+                                    case USER_PERMISSIONS.NONE:
                                         return false;
-                                    default:
+                                    default: {
                                         if (isEmpty(shareAccess))
                                             return true;
-                                        return !!((_c = (_b = shareAccess === null || shareAccess === void 0 ? void 0 : shareAccess.list_access) === null || _b === void 0 ? void 0 : _b.find(item => item.user_id === (auth === null || auth === void 0 ? void 0 : auth.userId))) === null || _c === void 0 ? void 0 : _c.allow_edit);
+                                        const allowEdit = ((_c = (_b = shareAccess === null || shareAccess === void 0 ? void 0 : shareAccess.list_access) === null || _b === void 0 ? void 0 : _b.find(item => item.user_id === (auth === null || auth === void 0 ? void 0 : auth.userId))) === null || _c === void 0 ? void 0 : _c.allow_edit) || '0';
+                                        return Boolean(Number(allowEdit));
+                                    }
                                 }
                             })();
                             return Object.assign({}, getInitialFeatureMenuItem({
                                 menu_item: String(item.dashboardId),
                                 menu_item_code: String(item.dashboardId),
                                 menu_item_name: item.dashboardName,
-                                menu_item_parent: childMenuItem.menu_item_code,
+                                menu_item_parent: childMenuItem.menu_item,
                                 menu_item_path: getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(item.dashboardId) })),
                                 dashboardEditable,
                             }));
@@ -319,6 +318,16 @@ export const findActiveAppCodeByUrl = (args) => {
         });
     }
 };
+/**
+ * Finds the last matched menu item based on the provided URL.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.url - The URL to match against menu items.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search through.
+ * @param {Partial<PayloadInfo>} [args.auth] - Optional authorization information for generating paths.
+ * @param {TEnv} [args.env='development'] - Optional environment parameter to adjust path comparison.
+ * @returns {TFeatureMenu | undefined} - The last matched menu item, or undefined if not found.
+ */
 export const findLastMatchedItemByUrl = (args) => {
     try {
         const { url, menuItems, auth, env = 'development' } = args;
@@ -339,7 +348,7 @@ export const findLastMatchedItemByUrl = (args) => {
             }
         };
         recursiveFindActiveItem(menuItems || []);
-        const recommendationItem = matchedItems.find(item => item.menu_item_code === HOME_MENU_ITEMS.RECOMMENDATION.menu_item_code);
+        const recommendationItem = matchedItems.find(item => item.menu_item_code === HOME_MENU_ITEMS.RECOMMENDATION);
         if (recommendationItem) {
             return recommendationItem;
         }
@@ -353,6 +362,14 @@ export const findLastMatchedItemByUrl = (args) => {
         });
     }
 };
+/**
+ * Finds the path of the active menu item in a nested menu structure.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {TFeatureMenu} args.activeMenuItem - The active menu item to find the path for.
+ * @param {TFeatureMenu[]} args.menuItems - The array of menu items to search through.
+ * @returns {TFeatureMenu[]} - An array representing the path of the active menu item.
+ */
 export const findPathOfActiveItem = (args) => {
     try {
         const { activeMenuItem, menuItems } = args;
@@ -441,6 +458,14 @@ export const findActiveAppCodeByChild = (args) => {
         });
     }
 };
+/**
+ * Retrieves the custom active application code based on the active key and menu items.
+ *
+ * @param {Object} args - The arguments object.
+ * @param {string} args.activeKey - The active key to search for.
+ * @param {TMenuItem[]} args.menuItems - The array of menu items to search through.
+ * @returns {string | undefined} - The active application code if found, otherwise undefined.
+ */
 export const getCustomActiveAppCode = (args) => {
     const { activeKey, menuItems } = args;
     let activeAppCode;

package/es/components/template/Layout/Layout.js

@@ -187,6 +187,12 @@ export const Layout = memo(props => {
             replace(`${location.pathname.replace(userIdParam, `${userId}`)}${location.search}`);
         }
     }, [params, location, userId, navigate, replace]);
+    /** If left menu props has customization then set layout loading to false, because we don't need check permission here */
+    useDeepCompareEffect(() => {
+        if (mergeLeftMenuProps.customization) {
+            setLoadingLayout(false);
+        }
+    }, [mergeLeftMenuProps.customization]);
     // Handle access denied
     const onClickSwitchAccount = useCallback(() => {
         // Remove cookie when switch account
@@ -275,7 +281,7 @@ export const Layout = memo(props => {
             showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { customization: Object.assign(Object.assign({}, mergeLeftMenuProps.customization), { 
                     // If user has access denied, disable expandable
                     isExpandable: !isAccessDenied && ((_a = mergeLeftMenuProps.customization) === null || _a === void 0 ? void 0 : _a.isExpandable) }), appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange }))),
-            React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_code) === HOME_MENU_ITEMS.RECOMMENDATION.menu_item_code ? (React.createElement("div", { className: "layout-body__content" },
+            React.createElement(ContentWrapper, Object.assign({ "$noPadding": noPadding, "$noSpaceTopContent": noSpaceTopContent }, mergeContentWrapperProps), (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.menu_item_code) === HOME_MENU_ITEMS.RECOMMENDATION ? (React.createElement("div", { className: "layout-body__content" },
                 React.createElement(RecommendationWorkspace, null))) : (React.createElement("div", Object.assign({ className: `layout-body__content ${(workspaceProps === null || workspaceProps === void 0 ? void 0 : workspaceProps.className) || ''}` }, mergeWorkSpaceProps), isLoadingLayout ? (React.createElement(LayoutLoading, { spinning: true })) : (React.createElement(React.Fragment, null,
                 React.createElement(NotificationWrapper, { className: "process-notification", ref: notificationWrapperRef }, showNotification && (React.createElement(AntsProcessingNotification, Object.assign({}, antsProcessingNotificationConfig, { callback: handleCallbackNotify })))),
                 React.createElement(ChildrenWrapper, Object.assign({}, workspaceContentProps), isAccessDenied ? (React.createElement(AccessDenied, { onClickRequestAccess: onClickRequestAccess, onClickSwitchAccount: onClickSwitchAccount })) : (React.createElement("div", null, children)))))))))));

package/es/components/template/Layout/constants/permission.d.ts

@@ -11,7 +11,7 @@ export declare const MARKETING_CHANNEL_CODE: {
 };
 /**
  * Check permissions for showing account selection
- * Nếu PERMISSION_CODE không được tìm thấy trong api get permissions và trong @constant MENU_PERMISSIONS thì sẽ ẩn account selection
+ * If PERMISSION_CODE is not found in get permissions api and in @constant MENU_PERMISSIONS then account selection will be hidden
  */
 export declare const MENU_PERMISSIONS: {
     DF_DATA_SOURCE: string;
@@ -19,5 +19,9 @@ export declare const MENU_PERMISSIONS: {
     REPORT: string;
     WEB_PERSONALIZE: string;
 };
+/**
+ * In the dev environment, menu items will be removed the hash from menu_item_path,
+ * However, menu items with this menu codes will not be removed the hash because they have the same path name.
+ */
 export declare const KEEP_HASH_PATH_DEV: string[];
 export declare const DUPLICATE_PERMISSION_MENU_CODES: string[];

package/es/components/template/Layout/constants/permission.js

@@ -11,7 +11,7 @@ export const MARKETING_CHANNEL_CODE = {
 };
 /**
  * Check permissions for showing account selection
- * Nếu PERMISSION_CODE không được tìm thấy trong api get permissions và trong @constant MENU_PERMISSIONS thì sẽ ẩn account selection
+ * If PERMISSION_CODE is not found in get permissions api and in @constant MENU_PERMISSIONS then account selection will be hidden
  */
 export const MENU_PERMISSIONS = {
     DF_DATA_SOURCE: 'DF_DATA_SOURCE',
@@ -19,5 +19,9 @@ export const MENU_PERMISSIONS = {
     REPORT: 'REPORT',
     WEB_PERSONALIZE: 'WEB_PERSONALIZE',
 };
+/**
+ * In the dev environment, menu items will be removed the hash from menu_item_path,
+ * However, menu items with this menu codes will not be removed the hash because they have the same path name.
+ */
 export const KEEP_HASH_PATH_DEV = ['DF_DATA_SOURCE', 'DATA_SOURCE'];
 export const DUPLICATE_PERMISSION_MENU_CODES = ['DF_DATA_SOURCE', 'DATA_SOURCE'];

package/es/constants/permissions.d.ts

@@ -4,3 +4,9 @@ export declare const FEATURE_PERMISSIONS: {
     MANAGEMENT_BY_USER: number;
     EVERYTHING: number;
 };
+export declare const USER_PERMISSIONS: {
+    CREATED_BY_USER: string;
+    NONE: string;
+    EVERYTHING: string;
+    MANAGEMENT_BY_USER: string;
+};

package/es/constants/permissions.js

@@ -4,3 +4,9 @@ export const FEATURE_PERMISSIONS = {
     MANAGEMENT_BY_USER: 3,
     EVERYTHING: 4,
 };
+export const USER_PERMISSIONS = {
+    CREATED_BY_USER: 'CREATED_BY_USER',
+    NONE: 'NONE',
+    EVERYTHING: 'EVERYTHING',
+    MANAGEMENT_BY_USER: 'MANAGEMENT_BY_USER',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.569",
+  "version": "1.3.5-beta.570",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",