npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-beta.332 → 1.3.5-beta.334 - Mend

@antscorp/antsomi-ui 1.3.5-beta.332 → 1.3.5-beta.334

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/es/components/atoms/Switch/Switch.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const Switch: import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>;
+export type { SwitchProps } from 'antd';

package/es/components/atoms/Switch/Switch.js CHANGED Viewed

@@ -1,2 +1,3 @@
 import { Switch as AntdSwitch } from 'antd';
 export const Switch = AntdSwitch;
+Switch.defaultProps = {};

package/es/components/atoms/Switch/index.d.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export { Switch } from './Switch';
2	+ export type { SwitchProps } from 'antd';

package/es/components/atoms/index.d.ts CHANGED Viewed

@@ -24,7 +24,6 @@ export { Icon } from './Icon';
 export { Text } from './Text';
 export { Popover } from './Popover';
 export { RequiredLabel } from './RequiredLabel';
-export { Switch } from './Switch';
 export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
@@ -41,6 +40,7 @@ export * from './MobileFrameV2';
 export * from './SlideBar';
 export * from './ReactIframe';
 export * from './Scrollbars';
+export * from './Switch';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js CHANGED Viewed

@@ -24,7 +24,6 @@ export { Icon } from './Icon';
 export { Text } from './Text';
 export { Popover } from './Popover';
 export { RequiredLabel } from './RequiredLabel';
-export { Switch } from './Switch';
 export { Slider } from './Slider';
 export { Spin } from './Spin';
 export { Alert } from './Alert';
@@ -41,3 +40,4 @@ export * from './MobileFrameV2';
 export * from './SlideBar';
 export * from './ReactIframe';
 export * from './Scrollbars';
+export * from './Switch';

package/es/components/molecules/EditableName/EditableName.d.ts CHANGED Viewed

@@ -9,6 +9,8 @@ interface EditableNameProps {
     required?: boolean;
     error?: string;
     value?: string;
+    style?: React.CSSProperties;
+    readonly?: boolean;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: (value: string) => void;
 }

package/es/components/molecules/EditableName/EditableName.js CHANGED Viewed

@@ -6,7 +6,7 @@ import Icon from '@antscorp/icons';
 import { Spin } from '../../atoms';
 export const EditableName = React.forwardRef((props, ref) => {
     var _a;
-    const { className, isLoading, defaultValue, required, error, value, onBlur, onChange } = props;
+    const { className, isLoading, defaultValue, required, error, value, style, readonly, onBlur, onChange, } = props;
     const [inputWidth, setInputWidth] = useState(1);
     const [internalValue, setInternalValue] = useState(value || defaultValue || '');
     const requiredError = useMemo(() => {
@@ -36,9 +36,9 @@ export const EditableName = React.forwardRef((props, ref) => {
         // NOTE: the defaultValue props should need use only one time and don't change in component life circle
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    return (React.createElement(InputWrapperStyled, { className: className || '' },
+    return (React.createElement(InputWrapperStyled, { className: className || '', style: style },
         React.createElement(Tooltip, { title: value || internalValue },
-            React.createElement(Input, { ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {
+            React.createElement(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {
                     var _a;
                     const newValue = event.target.value;
                     if (spanRef.current)
@@ -50,7 +50,7 @@ export const EditableName = React.forwardRef((props, ref) => {
         isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px' } })) : null,
         (error || requiredError) && !isLoading ? (React.createElement("div", { className: "suffix-icon-error" },
             React.createElement(Tooltip, { title: error || requiredError },
-                React.createElement(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } })))) : (React.createElement("div", { className: "suffix-icon" },
+                React.createElement(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } })))) : readonly ? null : (React.createElement("div", { className: "suffix-icon" },
             React.createElement(Icon, { type: "icon-ants-pencil", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7, fontSize: '24px' } }))),
         React.createElement("span", { ref: spanRef, className: "hidden-span" })));
 });

package/es/components/molecules/EditableName/styled.js CHANGED Viewed

@@ -15,6 +15,9 @@ export const InputWrapperStyled = styled.div `
   &:has(input:focus) {
     border-bottom: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1};
   }
+  &:has(input[readonly]:focus) {
+    border-bottom: none;
+  }
   input {
     font-size: 20px !important;

package/es/components/molecules/HeaderV2/HeaderV2.js CHANGED Viewed

@@ -30,7 +30,7 @@ export const HeaderV2 = memo(props => {
     const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
     // const history = useHistory();
-    const { navigate } = useCustomRouter();
+    const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
     const { className, style, breadcrumbs, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
@@ -91,13 +91,13 @@ export const HeaderV2 = memo(props => {
         setSelectedAccount(userId);
         if (useURLParam) {
             if (userId === 'all') {
-                urlParams.set('oid', userId);
+                urlParams.delete('oid');
             }
             else {
-                urlParams.delete('oid');
+                urlParams.set('oid', userId);
             }
             // history.replace({ search: urlParams.toString() });
-            navigate({ search: urlParams.toString() });
+            replace({ search: urlParams.toString() });
         }
         onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
     };

package/es/components/organism/LeftMenu/hooks/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export { useLeftMenu } from './useLeftMenu';
 export { useNavigatePath } from './useNavigatePath';
+export { usePermission } from './usePermission';

package/es/components/organism/LeftMenu/hooks/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { useLeftMenu } from './useLeftMenu';
 export { useNavigatePath } from './useNavigatePath';
+export { usePermission } from './usePermission';

package/es/components/organism/LeftMenu/hooks/useLeftMenu.js CHANGED Viewed

@@ -1,16 +1,14 @@
 // Libraries
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { isArray, sortBy } from 'lodash';
-// Queries
-import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+import { useCallback, useEffect, useState } from 'react';
+import { isArray } from 'lodash';
 // Utils
-import { findActiveAppCodeByChild, findActiveAppCodeByUrl, findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+import { findActiveAppCodeByChild, findActiveAppCodeByUrl } from '../utils';
 // Store
 import { useLeftMenuStore } from '../stores';
-import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
 // Constants
-import { CDP_API, PERMISSION_API } from '@antscorp/antsomi-ui/es/constants';
 import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
+// Hooks
+import { usePermission } from './usePermission';
 const initialState = {
     hoverItem: '',
     isExpandMenu: true,
@@ -23,96 +21,9 @@ export const useLeftMenu = (props) => {
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
     const customActiveAppKey = useLeftMenuStore(store => store.state.customActiveAppKey);
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
-    const { auth, languageCode = 'en', env = 'development' } = appConfig || {};
+    const { auth } = appConfig || {};
     const [state, setState] = useState(initialState);
-    const { data: menuList } = useGetListMenu({
-        args: {
-            auth: {
-                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
-                url: 'https://sandbox-permission.ants.vn',
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-                accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
-            },
-            params: {
-                type: 'menu-item-permission',
-            },
-        },
-    });
-    const { data: menuListPermission } = useGetListMenuPermission({
-        args: {
-            auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: PERMISSION_API,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-                accountId: auth === null || auth === void 0 ? void 0 : auth.userId,
-            },
-            params: {
-                type: 'list-app',
-                from: 'side',
-                hasChild: true,
-                languageCode,
-            },
-        },
-    });
-    const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
-        args: {
-            auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub`,
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-            },
-            params: {
-                objectType,
-                objectId,
-                isGrouped,
-                languageCode,
-            },
-        },
-    });
-    const { data: destinationChannel } = useGetDestinationChannel({
-        args: {
-            auth: {
-                token: auth === null || auth === void 0 ? void 0 : auth.token,
-                url: env ? `${CDP_API[env]}/hub` : '',
-                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
-                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
-            },
-            params: {
-                objectType: 'DESTINATIONS',
-                languageCode,
-            },
-        },
-    });
-    const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
-    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], ['level_position']), flattenMenuPermission), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
-    const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
-        menuList: permissionMenu,
-        auth,
-        dashboardData,
-        destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
-    }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
-    const receivePostMessage = (event) => {
-        const { data } = event;
-        const { type } = data || {};
-        switch (type) {
-            case POST_MESSAGE_TYPES.REFETCH_DASHBOARD_LIST: {
-                refetchDashboard();
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    // Receive Post Message
-    useEffect(() => {
-        if (!isCustomized) {
-            window.addEventListener('message', receivePostMessage);
-            return () => window.removeEventListener('message', receivePostMessage);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    const { mappingChildrenMenu, flattenMenuPermission, permissionMenu, activeItemPath } = usePermission();
     useEffect(() => {
         setLeftMenuState({
             appConfig,
@@ -171,30 +82,10 @@ export const useLeftMenu = (props) => {
     }, [activeAppCode, auth, hash, isCustomized, mappingChildrenMenu, pathname, setLeftMenuState]);
     useEffect(() => {
         if (!isCustomized) {
-            const url = `${pathname}${hash}`;
             // Callback function using at Layout when url change
-            const matchedCode = findLastMatchedItemByUrl({
-                url,
-                menuItems: mappingChildrenMenu,
-                auth,
-            });
-            const activeItemPath = matchedCode
-                ? findPathOfActiveItem({
-                    activeMenuItem: matchedCode,
-                    menuItems: mappingChildrenMenu,
-                })
-                : [];
             onActiveMenuCodeChange === null || onActiveMenuCodeChange === void 0 ? void 0 : onActiveMenuCodeChange(activeItemPath, flattenMenuPermission);
         }
-    }, [
-        auth,
-        flattenMenuPermission,
-        hash,
-        isCustomized,
-        mappingChildrenMenu,
-        pathname,
-        onActiveMenuCodeChange,
-    ]);
+    }, [activeItemPath, flattenMenuPermission, isCustomized, onActiveMenuCodeChange]);
     const onToggleChildMenu = useCallback(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { isExpandMenu: !prev.isExpandMenu })));
     }, []);

package/es/components/organism/LeftMenu/hooks/useNavigatePath.js CHANGED Viewed

@@ -1,21 +1,26 @@
 // Libraries
 import { useContextSelector } from 'use-context-selector';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { isNil } from 'lodash';
+import { useLocation } from 'react-router-dom';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Utils
 import { getGeneratePath } from '../utils';
+import { hasSelectAccountPermission } from '../../../template/Layout/utils';
 // Constants
 import { ENV } from '@antscorp/antsomi-ui/es/config';
-import { useLocation } from 'react-router-dom';
+// Hooks
+import { usePermission } from './usePermission';
 export const useNavigatePath = () => {
-    // Contexts
     const { auth, env } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
-    const searchParams = search === '?' || !search ? '' : search;
     const isDev = env === ENV.DEV;
-    // Callbacks
+    const { activeItemPath, flattenMenuPermission } = usePermission();
+    const hasRole = useMemo(() => hasSelectAccountPermission(activeItemPath, flattenMenuPermission), [activeItemPath, flattenMenuPermission]);
+    const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    const oidParam = hasRole ? urlParams.get('oid') : null;
+    const searchParams = oidParam ? `?oid=${oidParam}` : '';
     const isPushDifferentDomain = useCallback((domain, path) => {
         var _a, _b, _c, _d, _e, _f;
         if (isDev)

package/es/components/organism/LeftMenu/hooks/usePermission.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare const usePermission: () => {
+    mappingChildrenMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    permissionMenu: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    activeItemPath: import("@antscorp/antsomi-ui/es/models/LeftMenu").TFeatureMenu[];
+    flattenMenuPermission: import("@antscorp/antsomi-ui/es/models/LeftMenu").FeatureMenuPermission[];
+};

package/es/components/organism/LeftMenu/hooks/usePermission.js ADDED Viewed

@@ -0,0 +1,120 @@
+// Libraries
+import { useEffect, useMemo } from 'react';
+import { sortBy } from 'lodash';
+// Queries
+import { useGetDashboard, useGetDestinationChannel, useGetListMenu, useGetListMenuPermission, } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
+// Stores
+import { useLeftMenuStore } from '../stores';
+// Constants
+import { CDP_API, PERMISSION_API, POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { findLastMatchedItemByUrl, findPathOfActiveItem, flattenMenuArray, getMappingAppChildren, recursivePermissionMenu, } from '../utils';
+export const usePermission = () => {
+    const appConfig = useLeftMenuStore(store => store.state.appConfig);
+    const isCustomized = useLeftMenuStore(store => store.state.isCustomized);
+    const { isGrouped, objectId, objectType } = useLeftMenuStore(store => store.state.dashboardParams);
+    const { auth, languageCode = 'en', env = 'development' } = appConfig || {};
+    const { pathname, hash } = window.location;
+    const { data: menuList } = useGetListMenu({
+        args: {
+            auth: {
+                token: '5474r2x214r2b4b4v2d4y444u2v5q2p5o4d4c4f424e4' || (auth === null || auth === void 0 ? void 0 : auth.token),
+                url: 'https://sandbox-permission.ants.vn',
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                accountId: auth === null || auth === void 0 ? void 0 : auth.accountId,
+            },
+            params: {
+                type: 'menu-item-permission',
+            },
+        },
+    });
+    const { data: dashboardData, refetch: refetchDashboard } = useGetDashboard({
+        args: {
+            auth: {
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub`,
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+            },
+            params: {
+                objectType,
+                objectId,
+                isGrouped,
+                languageCode,
+            },
+        },
+    });
+    const { data: destinationChannel } = useGetDestinationChannel({
+        args: {
+            auth: {
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: env ? `${CDP_API[env]}/hub` : '',
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                portalId: auth === null || auth === void 0 ? void 0 : auth.portalId,
+            },
+            params: {
+                objectType: 'DESTINATIONS',
+                languageCode,
+            },
+        },
+    });
+    const { data: menuListPermission } = useGetListMenuPermission({
+        args: {
+            auth: {
+                token: auth === null || auth === void 0 ? void 0 : auth.token,
+                url: PERMISSION_API,
+                userId: auth === null || auth === void 0 ? void 0 : auth.userId,
+                accountId: auth === null || auth === void 0 ? void 0 : auth.userId,
+            },
+            params: {
+                type: 'list-app',
+                from: 'side',
+                hasChild: true,
+                languageCode,
+            },
+        },
+    });
+    const flattenMenuPermission = flattenMenuArray(menuListPermission || [], 'childs');
+    const permissionMenu = useMemo(() => recursivePermissionMenu(sortBy((menuList === null || menuList === void 0 ? void 0 : menuList.rows) || [], ['level_position']), flattenMenuPermission), [menuList === null || menuList === void 0 ? void 0 : menuList.rows, flattenMenuPermission]);
+    const mappingChildrenMenu = useMemo(() => getMappingAppChildren({
+        menuList: permissionMenu,
+        auth,
+        dashboardData,
+        destinationChannelEntries: destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries,
+    }), [auth, dashboardData, destinationChannel === null || destinationChannel === void 0 ? void 0 : destinationChannel.entries, permissionMenu]);
+    const activeItemPath = useMemo(() => {
+        const url = `${pathname}${hash}`;
+        const matchedCode = findLastMatchedItemByUrl({
+            url,
+            menuItems: mappingChildrenMenu,
+            auth,
+        });
+        return matchedCode
+            ? findPathOfActiveItem({
+                activeMenuItem: matchedCode,
+                menuItems: mappingChildrenMenu,
+            })
+            : [];
+    }, [auth, hash, mappingChildrenMenu, pathname]);
+    useEffect(() => {
+        if (!isCustomized) {
+            const receivePostMessage = (event) => {
+                const { data } = event;
+                const { type } = data || {};
+                switch (type) {
+                    case POST_MESSAGE_TYPES.REFETCH_DASHBOARD_LIST: {
+                        refetchDashboard();
+                        break;
+                    }
+                    default:
+                        break;
+                }
+            };
+            window.addEventListener('message', receivePostMessage);
+            return () => window.removeEventListener('message', receivePostMessage);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return { mappingChildrenMenu, permissionMenu, activeItemPath, flattenMenuPermission };
+};

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

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import AntsProcessingNotification from '@antscorp/processing-notification';
-import { isEmpty, merge } from 'lodash';
+import { merge } from 'lodash';
 // Styled
 import { ChildrenWrapper, ContentWrapper, LayoutWrapper, NotificationWrapper } from './styled';
 // Components
@@ -23,13 +23,12 @@ import { HeaderV2 } from '../../molecules';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
-import { APP_ROLE_SCOPE, MENU_PERMISSIONS } from './constants';
 import { APP_CODES, APP_IAM_DOMAIN, APP_PERMISSION_DOMAIN, IAM_API, PERMISSION_API, PORTALS_IDS, SOCKET_API, } from '../../../constants';
 // Css
 import '@antscorp/processing-notification/dist/index.css';
 import { useLayoutStore } from './stores';
 // Utils
-import { checkingRoleScope } from './utils';
+import { hasSelectAccountPermission } from './utils';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
     const { leftMenuProps, headerProps = {}, workspaceProps, processingNotificationProps, children, onActiveMenuChange, } = props;
@@ -89,51 +88,8 @@ export const Layout = memo(props => {
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList) => {
         var _a;
         onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange((_a = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1]) === null || _a === void 0 ? void 0 : _a.menu_item_code);
-        if (isEmpty(activeItemPath)) {
-            setShowAccountSelection(false);
-            return;
-        }
-        let roleScope = false;
-        for (const activeItem of activeItemPath) {
-            let permissionCode;
-            /** Dùng để check xem Permission Code có được lấy từ @constant MENU_PERMISSIONS hay không */
-            let isExternalPermissionCode = false;
-            /**
-             * Kiểm tra nếu MENU_CODE có trong @constant MENU_PERMISSIONS thì lấy Permission từ constant
-             * Không thì lấy từ api Permission
-             * Nếu ở cả 2 nơi đều không có permission thì không hiện account selection
-             */
-            if (Object.keys(MENU_PERMISSIONS).includes(activeItem.menu_item_code)) {
-                permissionCode = MENU_PERMISSIONS[activeItem.menu_item_code];
-                isExternalPermissionCode = true;
-            }
-            else {
-                permissionCode = activeItem.permission_code;
-            }
-            const menuPermission = flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
-            if (menuPermission) {
-                const checkRoleScope = menuPermission
-                    ? checkingRoleScope({
-                        menuCode: menuPermission.menu_code || '',
-                        menuPermission,
-                        scope: APP_ROLE_SCOPE.EVERYTHING,
-                    })
-                    : false;
-                if (checkRoleScope) {
-                    roleScope = true;
-                    break;
-                }
-            }
-            /**
-             * Nếu trong Api Permission không có những có trong @constant MENU_PERMISSIONS
-             * thì vẫn trả về True vì có những MENU_CODE mà BA chưa define permission
-             * */
-            if (isExternalPermissionCode) {
-                roleScope = true;
-                break;
-            }
-        }
-        setShowAccountSelection(roleScope);
+        const hasRole = hasSelectAccountPermission(activeItemPath, flattenPermissionList);
+        setShowAccountSelection(hasRole);
     }, [onActiveMenuChange]);
     return (React.createElement(LayoutWrapper, null,
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps)),

package/es/components/template/Layout/utils/permission.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FeatureMenuPermission } from '@antscorp/antsomi-ui/es/models/LeftMenu';
+import { FeatureMenuPermission, TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 /**
  *
  * @param {*} menuCode MENU_CODE
@@ -14,3 +14,4 @@ export declare const checkingRoleScope: (args: {
     scope?: number;
     isExactly?: boolean;
 }) => boolean;
+export declare const hasSelectAccountPermission: (activeItemPath: TFeatureMenu[], flattenPermissionList?: FeatureMenuPermission[]) => boolean;

package/es/components/template/Layout/utils/permission.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { MENU_CODE, APP_ROLE_SCOPE } from '../constants';
+import { MENU_CODE, APP_ROLE_SCOPE, MENU_PERMISSIONS } from '../constants';
+import { isEmpty } from 'lodash';
 const EDIT_ROLE = new Set(['CREATE', 'UPDATE', 'DELETE']);
 /**
  *
@@ -46,3 +47,48 @@ export const checkingRoleScope = (args) => {
     }
     return isOK;
 };
+export const hasSelectAccountPermission = (activeItemPath, flattenPermissionList) => {
+    if (isEmpty(activeItemPath))
+        return false;
+    let roleScope = false;
+    for (const activeItem of activeItemPath) {
+        let permissionCode;
+        /** Dùng để check xem Permission Code có được lấy từ @constant MENU_PERMISSIONS hay không */
+        let isExternalPermissionCode = false;
+        /**
+         * Kiểm tra nếu MENU_CODE có trong @constant MENU_PERMISSIONS thì lấy Permission từ constant
+         * Không thì lấy từ api Permission
+         * Nếu ở cả 2 nơi đều không có permission thì không hiện account selection
+         */
+        if (Object.keys(MENU_PERMISSIONS).includes(activeItem.menu_item_code)) {
+            permissionCode = MENU_PERMISSIONS[activeItem.menu_item_code];
+            isExternalPermissionCode = true;
+        }
+        else {
+            permissionCode = activeItem.permission_code;
+        }
+        const menuPermission = flattenPermissionList === null || flattenPermissionList === void 0 ? void 0 : flattenPermissionList.find(item => permissionCode === item.menu_code);
+        if (menuPermission) {
+            const checkRoleScope = menuPermission
+                ? checkingRoleScope({
+                    menuCode: menuPermission.menu_code || '',
+                    menuPermission,
+                    scope: APP_ROLE_SCOPE.EVERYTHING,
+                })
+                : false;
+            if (checkRoleScope) {
+                roleScope = true;
+                break;
+            }
+        }
+        /**
+         * Nếu trong Api Permission không có những có trong @constant MENU_PERMISSIONS
+         * thì vẫn trả về True vì có những MENU_CODE mà BA chưa define permission
+         * */
+        if (isExternalPermissionCode) {
+            roleScope = true;
+            break;
+        }
+    }
+    return roleScope;
+};

package/es/constants/theme.js CHANGED Viewed

@@ -191,9 +191,10 @@ THEME.components = {
     Switch: {
         colorTextQuaternary: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw0,
         colorTextTertiary: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.bw0,
-        handleSize: 12,
+        handleSize: 8,
         handleSizeSM: 7,
-        trackMinWidth: 30,
+        trackMinWidth: 27,
+        trackHeight: 16,
         handleBg: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.colorPrimary,
     },
     Popover: {

package/es/providers/ConfigProvider/GlobalStyle.js CHANGED Viewed

@@ -856,6 +856,11 @@ export const GlobalStyle = () => {
             }
           }
         }
+        .antsomi-switch-inner {
+          padding-inline-start: 4px !important;
+          padding-inline-end: 18px !important;
+        }
       }
       /* Tabs */

package/package.json CHANGED Viewed

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