@antscorp/antsomi-ui 1.3.5-beta.500 → 1.3.5-beta.501

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { PopoverAddFieldProps } from '../../types';
-import './styles.scss';
 export declare const PopoverAddField: (props: PopoverAddFieldProps) => React.JSX.Element;

package/es/components/molecules/SearchPopover/components/PopoverAddField/PopoverAddField.js

@@ -9,110 +9,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useEffect, useMemo, useState } from 'react';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { SearchPopover } from '../../SearchPopover';
-import { Button, Checkbox, Menu } from 'antd';
+import React, { useMemo } from 'react';
+import { clsx } from 'clsx';
 import { renderIconField } from '../../utils';
-import './styles.scss';
-import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
-import { Icon } from '../../../../atoms';
-import Scrollbars from 'react-custom-scrollbars';
+import { PopoverSelect } from '../PopoverSelect';
 export const PopoverAddField = (props) => {
-    var _a, _b;
-    const { open: openProp, selected, fields = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all' } = props, rest = __rest(props, ["open", "selected", "fields", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel"]);
-    const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
-    const [open, setOpen] = useState(openProp);
-    const [selectedKeys, setSelectedKeys] = useState(new Set());
-    const [search, setSearch] = useState('');
-    const [showSelected, setShowSelected] = useState(false);
-    const applyDisabled = selectedKeys.size === 0;
-    useEffect(() => {
-        if (openProp !== undefined) {
-            setOpen(openProp);
-        }
-    }, [openProp]);
-    useEffect(() => {
-        if (searchValue !== undefined) {
-            setSearch(searchValue.toString());
-        }
-    }, [searchValue]);
-    useEffect(() => {
-        if (selected !== undefined) {
-            setSelectedKeys(new Set(selected));
-        }
-    }, [selected]);
-    const filteredField = useMemo(() => {
-        let result = fields.filter(field => {
-            const labelIncluded = searchStringQuery(field.label, search);
-            const keyIncluded = searchStringQuery(field.key, search);
-            return labelIncluded || keyIncluded;
-        });
-        if (showSelected) {
-            result = result.filter(field => selectedKeys.has(field.key));
-        }
-        return result;
-    }, [fields, search, showSelected, selectedKeys]);
-    const handleToggleField = (field, checked) => {
-        const newSelectedKeys = new Set(selectedKeys);
-        if (checked) {
-            newSelectedKeys.add(field.key);
-        }
-        else {
-            newSelectedKeys.delete(field.key);
-        }
-        setSelectedKeys(newSelectedKeys);
-    };
-    const handleCancel = () => {
-        setOpen(false);
-        if (onCancel)
-            onCancel();
-    };
-    const handleApply = () => {
-        if (onApply)
-            onApply(Array.from(selectedKeys));
-        setOpen(false);
-    };
-    const handleOnSearch = (searchValue) => {
-        setSearch(searchValue);
-        if (inputSearchProps.onAfterChange) {
-            inputSearchProps.onAfterChange(searchValue);
-        }
-    };
-    const handleSelectAll = () => {
-        setSelectedKeys(new Set(fields.map(field => field.key)));
-    };
-    const handleDeselectAll = () => {
-        setSelectedKeys(new Set());
-    };
-    const handleAfterOpenChange = (visible) => {
-        if (!visible) {
-            setSearch(searchValue ? searchValue.toString() : '');
-            setSelectedKeys(selected ? new Set(selected) : new Set());
-        }
-        if (rest.afterOpenChange) {
-            rest.afterOpenChange(visible);
-        }
-    };
-    const handleOpenChange = (visible) => {
-        setOpen(visible);
-    };
-    return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
-            !!fields.length && (React.createElement("div", { className: "actions" },
-                React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
-                selectedKeys.size === fields.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
-            !!filteredField.length && (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 260 },
-                React.createElement(Menu, { className: "list-fields", selectable: false, items: filteredField.map(field => ({
-                        key: field.key,
-                        label: (React.createElement(Checkbox, { onChange: e => handleToggleField(field, e.target.checked), checked: selectedKeys.has(field.key) },
-                            field.dataType && renderIconField(field.dataType),
-                            field.label)),
-                    })) }))),
-            React.createElement("div", { className: "footer" },
-                React.createElement(Button, { onClick: handleCancel }, "Cancel"),
-                React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {
-            '--item-padding': `${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemPaddingInline) || 10}px`,
-        }, trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: Object.assign(Object.assign({}, restInputSearchProps), { value: search, onAfterChange: handleOnSearch }), afterOpenChange: handleAfterOpenChange, onOpenChange: handleOpenChange }), children || (React.createElement(Button, { type: "text" },
-        React.createElement(Icon, { type: "icon-ants-plus-slim", size: 14 }),
-        "Add fields"))));
+    const { fields, onSearchPredicate, className } = props, rest = __rest(props, ["fields", "onSearchPredicate", "className"]);
+    const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
+    const options = useMemo(() => fields.map(field => (Object.assign(Object.assign({}, field), { label: (React.createElement(React.Fragment, null,
+            field.dataType && renderIconField(field.dataType),
+            field.label)) }))), [fields]);
+    const handleOnSearchPredicate = (field) => {
+        const originalField = originalFieldByKey.get(field.key);
+        if (!originalField)
+            return true;
+        if (onSearchPredicate && originalField) {
+            return onSearchPredicate(originalField);
+        }
+        return true;
+    };
+    return (React.createElement(PopoverSelect, Object.assign({}, rest, { options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields') })));
 };

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Option, PopoverSelectProps } from '../../types';
+import './styles.scss';
+export declare const PopoverSelect: <TOption extends Option>(props: PopoverSelectProps<TOption>) => React.JSX.Element;

package/es/components/molecules/SearchPopover/components/PopoverSelect/PopoverSelect.js

@@ -0,0 +1,132 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { SearchPopover } from '../../SearchPopover';
+import { Button, Checkbox, Menu } from 'antd';
+import './styles.scss';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { Icon } from '../../../../atoms';
+import Scrollbars from 'react-custom-scrollbars';
+export const PopoverSelect = (props) => {
+    var _a, _b;
+    const { open: openProp, selected, options = [], onCancel, onApply, inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', onSearchPredicate } = props, rest = __rest(props, ["open", "selected", "options", "onCancel", "onApply", "inputSearchProps", "children", "showAllLabel", "showSelectedLabel", "selectAllLabel", "deselectAllLabel", "onSearchPredicate"]);
+    const { value: searchValue } = inputSearchProps, restInputSearchProps = __rest(inputSearchProps, ["value"]);
+    const refOnSearchPredicate = useRef(onSearchPredicate);
+    useEffect(() => {
+        refOnSearchPredicate.current = onSearchPredicate;
+    }, [onSearchPredicate]);
+    const [open, setOpen] = useState(openProp);
+    const [selectedKeys, setSelectedKeys] = useState(new Set());
+    const [search, setSearch] = useState('');
+    const [showSelected, setShowSelected] = useState(false);
+    const applyDisabled = selectedKeys.size === 0;
+    useEffect(() => {
+        if (openProp !== undefined) {
+            setOpen(openProp);
+        }
+    }, [openProp]);
+    useEffect(() => {
+        if (searchValue !== undefined) {
+            setSearch(searchValue.toString());
+        }
+    }, [searchValue]);
+    useEffect(() => {
+        if (selected !== undefined) {
+            setSelectedKeys(new Set(selected));
+        }
+    }, [selected]);
+    const filteredField = useMemo(() => {
+        let result = options.filter(field => {
+            if (refOnSearchPredicate.current) {
+                const isFilteredOption = refOnSearchPredicate.current(field);
+                return isFilteredOption;
+            }
+            let labelIncluded = false;
+            if (typeof field.label === 'string') {
+                labelIncluded = searchStringQuery(field.label, search);
+            }
+            const keyIncluded = searchStringQuery(field.key, search);
+            return keyIncluded || labelIncluded;
+        });
+        if (showSelected) {
+            result = result.filter(field => selectedKeys.has(field.key));
+        }
+        return result;
+    }, [options, search, showSelected, selectedKeys]);
+    const handleToggleField = (field, checked) => {
+        const newSelectedKeys = new Set(selectedKeys);
+        if (checked) {
+            newSelectedKeys.add(field.key);
+        }
+        else {
+            newSelectedKeys.delete(field.key);
+        }
+        setSelectedKeys(newSelectedKeys);
+    };
+    const handleCancel = () => {
+        setOpen(false);
+        if (onCancel)
+            onCancel();
+    };
+    const handleApply = () => {
+        if (onApply)
+            onApply(Array.from(selectedKeys));
+        setOpen(false);
+    };
+    const handleOnSearch = (searchValue) => {
+        setSearch(searchValue);
+        if (inputSearchProps.onAfterChange) {
+            inputSearchProps.onAfterChange(searchValue);
+        }
+    };
+    const handleSelectAll = () => {
+        setSelectedKeys(new Set(options.map(field => field.key)));
+    };
+    const handleDeselectAll = () => {
+        setSelectedKeys(new Set());
+    };
+    const handleAfterOpenChange = (visible) => {
+        if (!visible) {
+            setSearch(searchValue ? searchValue.toString() : '');
+            setSelectedKeys(selected ? new Set(selected) : new Set());
+        }
+        if (rest.afterOpenChange) {
+            rest.afterOpenChange(visible);
+        }
+    };
+    const handleOpenChange = (visible) => {
+        setOpen(visible);
+    };
+    const renderCheckBoxLabel = (option) => {
+        if (typeof option.label === 'function') {
+            return option.label({ selected: selectedKeys.has(option.key) });
+        }
+        return option.label;
+    };
+    return (React.createElement(SearchPopover, Object.assign({}, rest, { content: React.createElement(React.Fragment, null,
+            !!options.length && (React.createElement("div", { className: "actions" },
+                React.createElement(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current) }, showSelected ? showAllLabel : showSelectedLabel),
+                selectedKeys.size === options.length ? (React.createElement(Button, { type: "link", onClick: handleDeselectAll }, deselectAllLabel)) : (React.createElement(Button, { type: "link", onClick: handleSelectAll }, selectAllLabel)))),
+            !!filteredField.length && (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 260 },
+                React.createElement(Menu, { className: "list-fields", selectable: false, items: filteredField.map(option => ({
+                        key: option.key,
+                        label: (React.createElement(Checkbox, { onChange: e => handleToggleField(option, e.target.checked), checked: selectedKeys.has(option.key) }, renderCheckBoxLabel(option))),
+                    })) }))),
+            React.createElement("div", { className: "footer" },
+                React.createElement(Button, { onClick: handleCancel }, "Cancel"),
+                React.createElement(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary" }, "Apply"))), overlayInnerStyle: {
+            '--item-padding': `${((_b = (_a = THEME.components) === null || _a === void 0 ? void 0 : _a.Menu) === null || _b === void 0 ? void 0 : _b.itemPaddingInline) || 10}px`,
+        }, trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: Object.assign(Object.assign({}, restInputSearchProps), { value: search, onAfterChange: handleOnSearch }), afterOpenChange: handleAfterOpenChange, onOpenChange: handleOpenChange }), children || (React.createElement(Button, { type: "text" },
+        React.createElement(Icon, { type: "icon-ants-plus-slim", size: 14 }),
+        "Add fields"))));
+};

package/es/components/molecules/SearchPopover/components/PopoverSelect/index.d.ts

@@ -0,0 +1 @@
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/components/PopoverSelect/index.js

@@ -0,0 +1 @@
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/components/index.d.ts

@@ -1 +1,2 @@
 export { PopoverAddField } from './PopoverAddField';
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/components/index.js

@@ -1 +1,2 @@
 export { PopoverAddField } from './PopoverAddField';
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/index.d.ts

@@ -1,3 +1,3 @@
-export { PopoverAddField } from './components';
+export { PopoverAddField, PopoverSelect } from './components';
 export { SearchPopover } from './SearchPopover';
 export type { SearchPopoverProps, PopoverAddFieldProps } from './types';

package/es/components/molecules/SearchPopover/index.js

@@ -1,2 +1,2 @@
-export { PopoverAddField } from './components';
+export { PopoverAddField, PopoverSelect } from './components';
 export { SearchPopover } from './SearchPopover';

package/es/components/molecules/SearchPopover/types.d.ts

@@ -1,16 +1,20 @@
 import { PopoverProps } from 'antd';
 import { InputProps } from '../../atoms/Input';
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 export type SearchPopoverProps = PropsWithChildren<{
     inputSearchProps?: InputProps;
 } & PopoverProps>;
-export type Field = {
+export type Option = {
     key: string;
-    label: string;
+    label: React.ReactNode | ((info: {
+        selected: boolean;
+    }) => React.ReactNode);
+};
+export type Field = Option & {
     dataType?: string | number;
 };
-export type PopoverAddFieldProps = SearchPopoverProps & Partial<{
-    fields: Field[];
+export type PopoverSelectProps<TOption extends Option = Option> = SearchPopoverProps & Partial<{
+    options: TOption[];
     selected: string[];
     onCancel: () => void;
     onApply: (selected: string[]) => void;
@@ -19,4 +23,8 @@ export type PopoverAddFieldProps = SearchPopoverProps & Partial<{
     showSelectedLabel: string;
     deselectAllLabel: string;
     selectAllLabel: string;
+    onSearchPredicate: (option: TOption) => boolean;
 }>;
+export type PopoverAddFieldProps = Omit<PopoverSelectProps, 'options'> & {
+    fields: Field[];
+};

package/es/components/molecules/index.d.ts

@@ -47,7 +47,7 @@ export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
-export { SearchPopover, PopoverAddField } from './SearchPopover';
+export { SearchPopover, PopoverAddField, PopoverSelect } from './SearchPopover';
 export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
 export * from './EmptyData';
 export * from './PreviewModal';

package/es/components/molecules/index.js

@@ -47,7 +47,7 @@ export * from './DatePickerV2';
 export { ModalSelect } from './ModalSelect';
 export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
-export { SearchPopover, PopoverAddField } from './SearchPopover';
+export { SearchPopover, PopoverAddField, PopoverSelect } from './SearchPopover';
 export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
 export * from './EmptyData';
 export * from './PreviewModal';

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -56,12 +56,11 @@ export const useHomeMenu = (props) => {
     }, [auth, navigate, replace, urlParams]);
     const customChildren = useMemo(() => appMenuChildren === null || appMenuChildren === void 0 ? void 0 : appMenuChildren.map(appMenuItem => {
         var _a;
-        return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
+        return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), ((item === null || item === void 0 ? void 0 : item.dashboardEditable)
+                ? { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }
+                : {})))) }));
     }), [appMenuChildren, onOptionCallback]);
-    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(appMenuItem => {
-        var _a;
-        return getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: (_a = appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children) === null || _a === void 0 ? void 0 : _a.map(item => (Object.assign(Object.assign({}, item), { options: Object.values(CONFIG_OPTIONS), optionCallback: onOptionCallback }))) }));
-    }), [appHoverMenuChildren, onOptionCallback]);
+    const customHoverChildren = useMemo(() => appHoverMenuChildren === null || appHoverMenuChildren === void 0 ? void 0 : appHoverMenuChildren.map(appMenuItem => getMenuItem(Object.assign(Object.assign({}, appMenuItem), { children: appMenuItem === null || appMenuItem === void 0 ? void 0 : appMenuItem.children }))), [appHoverMenuChildren]);
     const onCreateNewReport = useCallback(e => {
         if (onClickCreateDashboard) {
             onClickCreateDashboard(e);

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

@@ -59,6 +59,7 @@ export declare const recursiveGetInitialFeatureMenuItem: (featureMenuItem: Parti
     page_title?: string | undefined;
     logo_url?: string | undefined;
     children?: TFeatureMenu[] | undefined;
+    dashboardEditable?: boolean | undefined;
 };
 export declare const recursiveGetMenuItemByPermission: (featureMenuItem: TFeatureMenu) => TMenuItem;
 /** Map children to each App Item */

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

@@ -17,6 +17,7 @@ import { MARKETING_CHANNEL_CODE, KEEP_HASH_PATH_DEV } from '../../../template/La
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { ENV } from '@antscorp/antsomi-ui/es/config';
+import { FEATURE_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.
@@ -201,13 +202,23 @@ export const getMappingAppChildren = (args) => {
                         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 => (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_path: getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(item.dashboardId) })),
-                        })))) }));
+                    })), { children: (_a = dashboardObject === null || dashboardObject === void 0 ? void 0 : dashboardObject[childMenuItem.menu_item_code]) === null || _a === void 0 ? void 0 : _a.map(item => {
+                            const { shareAccess } = item || {};
+                            const dashboardEditable = (() => {
+                                var _a, _b;
+                                if (isEmpty(shareAccess))
+                                    return true;
+                                return (((_b = (_a = shareAccess === null || shareAccess === void 0 ? void 0 : shareAccess.list_access) === null || _a === void 0 ? void 0 : _a.find(item => item.user_id === (auth === null || auth === void 0 ? void 0 : auth.userId))) === null || _b === void 0 ? void 0 : _b.allow_edit) === FEATURE_PERMISSIONS.EVERYTHING);
+                            })();
+                            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_path: getGeneratePath(HOME_REPORT_ROUTES.DETAIL, Object.assign(Object.assign({}, auth), { dashboardId: String(item.dashboardId) })),
+                                dashboardEditable,
+                            }));
+                        }) }));
                 });
                 break;
             }

package/es/models/LeftMenu/FeatureMenu.d.ts

@@ -23,6 +23,7 @@ export type TFeatureMenu = {
     page_title?: string;
     logo_url?: string;
     children?: TFeatureMenu[];
+    dashboardEditable?: boolean;
 };
 export declare class FeatureMenu extends Model<TFeatureMenu> {
     get id(): string | number;

package/package.json

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