@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.23

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

@@ -1,10 +1,11 @@
 import React from 'react';
+import type { SelectProps } from 'antd';
 import { ShareAccessProps } from '../ShareAccess/types';
-type categoriesProps = Array<{
-    label: string;
+export type categoriesProps = Array<{
+    label: string | React.ReactNode;
     key: string | number;
     children: Array<{
-        label: string;
+        label: string | React.ReactNode;
         key: string | number;
     }>;
 }>;
@@ -14,7 +15,7 @@ export interface TemplateValueOptions {
         id?: string | number;
         label?: string;
     };
-    templateDesc?: string;
+    description?: string;
     defaultThumbnail?: number;
     categories?: categoriesProps;
     accessInfo?: ShareAccessProps['accessInfo'];
@@ -41,12 +42,21 @@ export interface TemplateSaveAsProps {
      * Default thumbnail - order of default thumbnail in thumbnails array
      */
     categories?: categoriesProps;
+    /**
+     * Hide categories with following key
+     */
+    omitCategories?: string[];
     templateNames: Array<{
         label: string;
         id: string | number;
     }>;
+    templateNamesOptions?: {
+        isLoading?: boolean;
+        searchValue?: string;
+        onSearch?: SelectProps['onSearch'];
+        onNamePopupScroll?: SelectProps['onPopupScroll'];
+    };
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>) => void;
 }
 export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;
-export {};

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -14,24 +14,27 @@ import React, { useState } from 'react';
 import { Dropdown } from 'antd';
 import dayjs from 'dayjs';
 // Components
-import { Button, Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, } from '@antscorp/antsomi-ui/es/components';
+import { Tooltip, Button, Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, Space, Spin, } from '@antscorp/antsomi-ui/es/components';
 // Styles
 import { TemplateSaveAsStyled } from './styled';
 import { ImageSlider } from './components';
 const { Text } = Typography;
 export const TemplateSaveAs = props => {
-    const { className, shareAccess, saveOptions, imageReview, categories, templateNames, value, onChange, } = props;
+    const { className, shareAccess, saveOptions, imageReview, categories, omitCategories, templateNames, templateNamesOptions, value, onChange,
+    // onNamePopupScroll,
+     } = props;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { thumbnails, skeleton, previewNavigation, slidesPerView } = imageReview;
+    const { isLoading, searchValue, onSearch, onNamePopupScroll } = templateNamesOptions || {};
     const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
-    const { saveOption = saveNewValue, templateName: defaultTemplateName, templateDesc: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
+    const { saveOption = saveNewValue, templateName: defaultTemplateName, description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
     const [templateName, setTemplateName] = useState(`Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
     const [templateNameExist, setTemplateNameExist] = useState((defaultTemplateName === null || defaultTemplateName === void 0 ? void 0 : defaultTemplateName.id) ? defaultTemplateName : templateNames === null || templateNames === void 0 ? void 0 : templateNames[0]);
     const handleChangeValue = (newValue) => {
         if (onChange) {
             onChange(Object.assign(Object.assign(Object.assign({}, value), newValue), { 
                 // TODO: return saveOption and templateName generate default value if not pass as value props
-                saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
+                defaultThumbnail: newValue.defaultThumbnail || defaultThumbnail, saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
                     ? saveOption
                     : newValue.saveOption || (value === null || value === void 0 ? void 0 : value.saveOption), templateName: !defaultTemplateName && !newValue.templateName
                     ? saveOption === saveNewValue
@@ -51,7 +54,7 @@ export const TemplateSaveAs = props => {
         const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
         handleChangeValue({ categories: newCategory });
     };
-    const handleRemoveCategory = ({ parent, item }) => {
+    const handleRemoveCategory = ({ parent, item, }) => {
         const currCategory = categoriesValue.find(category => category.label === parent);
         if (!currCategory)
             return;
@@ -80,7 +83,15 @@ export const TemplateSaveAs = props => {
                     saveOption === saveNewValue ? (React.createElement(Input, { debounce: 1000, className: "field-input", value: templateName, onAfterChange: value => {
                             handleChangeValue({ templateName: { id: undefined, label: value } });
                             setTemplateName(value);
-                        }, required: true })) : (React.createElement(Select, { className: "field-input", value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: (templateNames === null || templateNames === void 0 ? void 0 : templateNames.length) > 0
+                        }, required: true })) : (React.createElement(Select, { className: "field-input", showSearch: true, searchValue: searchValue, onSearch: onSearch, onPopupScroll: onNamePopupScroll, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
+                            isLoading && templateNames.length === 0 ? null : menu,
+                            isLoading ? (React.createElement(Space, { style: {
+                                    padding: '4px 0',
+                                    width: '100%',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                } },
+                                React.createElement(Spin, { size: "small" }))) : null)), value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: (templateNames === null || templateNames === void 0 ? void 0 : templateNames.length) > 0
                             ? templateNames.map(item => ({ value: item.id, label: item.label }))
                             : [], onChange: value => {
                             var _a, _b;
@@ -97,14 +108,14 @@ export const TemplateSaveAs = props => {
                         } }))),
                 React.createElement(Flex, { className: "field-container" },
                     React.createElement(Text, { className: "field-title field-title--middle" }, "Description"),
-                    React.createElement(Input, { placeholder: "Describe your media template", className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ templateDesc: value }) })),
+                    React.createElement(Input, { placeholder: "Describe your media template", className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ description: value }) })),
                 React.createElement(Flex, { className: "field-container" },
                     React.createElement(Text, { className: "field-title" },
                         "Thumbnail template ",
                         React.createElement("span", null, "*")),
                     React.createElement(ImageSlider, { thumbnails: thumbnails, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) })), categories === null || categories === void 0 ? void 0 :
                 categories.map(parentCategory => {
-                    var _a, _b;
+                    var _a, _b, _c;
                     const selectedChildren = (_a = categoriesValue
                         .find(item => item.label === parentCategory.label)) === null || _a === void 0 ? void 0 : _a.children.map(item => item.label);
                     const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.label)));
@@ -112,14 +123,18 @@ export const TemplateSaveAs = props => {
                         label: item.label,
                         key: idx,
                     }));
-                    return (React.createElement(Flex, { key: parentCategory.label, className: "field-container" },
+                    // NOTE: filter to remove device and template categories
+                    if ((omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.length) && omitCategories.includes(parentCategory.key.toString()))
+                        return null;
+                    return (React.createElement(Flex, { key: parentCategory.key, className: "field-container" },
                         React.createElement(Text, { className: "field-title" }, parentCategory.label),
                         React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, 
                         /* selectedCategory */
                         (_b = categoriesValue
                             .find(item => item.label === parentCategory.label)) === null || _b === void 0 ? void 0 :
-                            _b.children.map(selectedItem => (React.createElement(Flex, { key: selectedItem.label, className: "selected-category", justify: "space-between", align: "center" },
-                                React.createElement(Text, null, selectedItem.label),
+                            _b.children.map(selectedItem => (React.createElement(Flex, { key: selectedItem.key, className: "selected-category", justify: "space-between", align: "center" },
+                                React.createElement(Tooltip, { title: selectedItem.label },
+                                    React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedItem.label)),
                                 ' ',
                                 React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
                                         parent: parentCategory.label,
@@ -134,10 +149,9 @@ export const TemplateSaveAs = props => {
                                             item: remainChildren[key],
                                         });
                                     },
-                                }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] },
-                                React.createElement(Button, null,
-                                    "+ Add ",
-                                    parentCategory.label.toLowerCase())))));
+                                }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof parentCategory.label === 'string' ? (React.createElement(Button, null,
+                                "+ Add ", (_c = parentCategory.label) === null || _c === void 0 ? void 0 :
+                                _c.toLowerCase())) : (parentCategory.label)))));
                 })),
             isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
                 React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null)));

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -10,13 +10,10 @@ import clsx from 'clsx';
 export const ImageSlider = props => {
     var _a, _b;
     const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, defaultThumbnail, onSelectDefault, } = props;
-    console.log('🚀 ~ ImageSlider ~ thumbnails:', thumbnails);
     const sliderContainerRef = useRef(null);
     const thumbnailSelectedRef = useRef(null);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
-    console.log('🚀 ~ selectedThumbnail:', selectedThumbnail);
     const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
-    console.log('🚀 ~ defaultThumbnailInternal:', defaultThumbnailInternal);
     (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
         left: selectedThumbnail * 330,
         behavior: 'smooth',
@@ -49,13 +46,10 @@ export const ImageSlider = props => {
                 } },
                 defaultThumbnailInternal === index ? (React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } })) : null,
                 defaultThumbnailInternal === index ? 'Default thumbnail' : 'Set as default'))))),
-        React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => {
-            console.log('🚀 ~ ImageSlider ~ render list ~ thumbnails:', { url, index });
-            return (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
-                    'image-container--selected': index === selectedThumbnail,
-                }), onClick: () => setSelectedThumbnail(index) },
-                React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url })));
-        })),
+        React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
+                'image-container--selected': index === selectedThumbnail,
+            }), onClick: () => setSelectedThumbnail(index) },
+            React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url }))))),
         previewNavigation ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "change-preview-button change-preview-button--left", onClick: handlePrevThumbnail },
                 React.createElement(Icon, { type: "icon-ants-angle-left" })),

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts

@@ -0,0 +1,48 @@
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TCategoryItem, TCheckedCategories, TTemplateItem } from '../../../template';
+import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
+import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
+interface TemplateListingOptions {
+    service: PayloadInfo;
+    config: TTemplateListingConfig & {
+        filter?: any;
+    };
+    checkedCategoriesDefault?: TCheckedCategories;
+}
+/**
+ * Custom React Hook for managing state and data fetching logic related to a template listing.
+ *
+ * @param {Object} options - The options object for configuring the hook.
+ * @param {PayloadInfo} options.service - Payload information for making API requests.
+ * @param {TTemplateListingConfig} options.config - Configuration options for the template listing.
+ *
+ * @returns {Object} - An object containing various properties and functions for template listing management.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {TTemplateItem[]} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {string[]} openCategoryKeys - An array of keys representing the currently open category items in the template listing.
+ * @property {TCheckedCategories} checkedCategories - An object containing information about the checked categories in the template listing.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onChangeCheckedCategories - A function to update the checked categories in the template listing.
+ * @param {TCheckedCategories} checkedCategories - An object containing information about the checked categories.
+ *
+ * @property {Function} onChangeOpenCategoryKeys - A function to update the open category keys in the template listing.
+ * @param {string[]} openKeys - An array of keys representing the currently open category items.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export declare const useTemplateSave: (options: TemplateListingOptions) => {
+    categoryItems: TCategoryItem[];
+    templateItems: TTemplateItem[];
+    openCategoryKeys: string[];
+    checkedCategories: TCheckedCategories;
+    isLoadingCategoryList: boolean;
+    isLoadingTemplateList: boolean;
+    refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
+    onChangeOpenCategoryKeys: (openKeys: string[]) => void;
+    onLoadMore: () => void;
+};
+export {};

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.js

@@ -0,0 +1,132 @@
+// Libraries
+import { useCallback, useMemo, useState } from 'react';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Constants
+import { CATEGORY_SPLIT_KEY } from '@antscorp/antsomi-ui/es/constants/templateListing';
+/**
+ * Custom React Hook for managing state and data fetching logic related to a template listing.
+ *
+ * @param {Object} options - The options object for configuring the hook.
+ * @param {PayloadInfo} options.service - Payload information for making API requests.
+ * @param {TTemplateListingConfig} options.config - Configuration options for the template listing.
+ *
+ * @returns {Object} - An object containing various properties and functions for template listing management.
+ *
+ * @property {TCategoryItem[]} categoryItems - An array of category items for rendering the template listing's category structure.
+ * @property {TTemplateItem[]} templateItems - An array of template items representing the templates available for the specified configuration.
+ * @property {string[]} openCategoryKeys - An array of keys representing the currently open category items in the template listing.
+ * @property {TCheckedCategories} checkedCategories - An object containing information about the checked categories in the template listing.
+ * @property {boolean} isLoading - A boolean indicating whether data is currently being loaded.
+ *
+ * @property {Function} onChangeCheckedCategories - A function to update the checked categories in the template listing.
+ * @param {TCheckedCategories} checkedCategories - An object containing information about the checked categories.
+ *
+ * @property {Function} onChangeOpenCategoryKeys - A function to update the open category keys in the template listing.
+ * @param {string[]} openKeys - An array of keys representing the currently open category items.
+ *
+ * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
+ */
+export const useTemplateSave = (options) => {
+    const { service, config } = options;
+    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, filter } = config;
+    // const { message } = App.useApp();
+    // State
+    const [state, setState] = useState({
+        checkedCategories: {},
+        openCategoryKeys: [],
+    });
+    const { checkedCategories, openCategoryKeys } = state;
+    const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
+        args: {
+            auth: service,
+            params: {
+                objectTypes: [objectType],
+                categoryCodes,
+                publicLevel,
+            },
+        },
+    });
+    // Queries
+    const { data: infiniteObjectTemplate, isFetchingNextPage, isFetching, hasNextPage, fetchNextPage, refetch: refetchTemplateList, } = useGetObjectTemplateList({
+        args: {
+            auth: service,
+            params: Object.assign({ object_type: objectType, public_level: publicLevel, limit: limitListPerPage }, (filter ? { filter } : {})),
+        },
+    });
+    // Variables
+    const isLoadingTemplateList = isFetching || isFetchingNextPage;
+    // Memo
+    const categoryItems = useDeepCompareMemo(() => {
+        const recursiveCategory = (categories = [], parentCategoryCode = '') => categories.map(category => {
+            const { categoryCode, categoryId, categoryName, children, total } = category;
+            const key = Array.isArray(children) && children.length
+                ? categoryCode
+                : [parentCategoryCode, categoryId].join(CATEGORY_SPLIT_KEY);
+            return {
+                key,
+                label: categoryName,
+                total,
+                children: recursiveCategory(children || [], categoryCode),
+            };
+        });
+        return recursiveCategory(categoryList || []);
+    }, [categoryList]);
+    const templateItems = useMemo(() => {
+        if (infiniteObjectTemplate) {
+            const { pages } = infiniteObjectTemplate;
+            return pages.flatMap(({ entities }) => entities.flatMap(({ id, name, thumbnail }) => ({
+                id,
+                name,
+                thumbnail,
+            })));
+        }
+        return [];
+    }, [infiniteObjectTemplate]);
+    // Effects
+    useDeepCompareEffect(() => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: (categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ categoryCode }) => categoryCode)) || [] })));
+    }, [categoryList]);
+    // useDeepCompareEffect(() => {
+    //   if (!isEmpty(checkedCategoriesDefault)) {
+    //     setState(prev => ({
+    //       ...prev,
+    //       checkedCategories:
+    //         Object.entries(checkedCategoriesDefault).reduce((acc, curr) => {
+    //           const [key, value] = curr;
+    //           acc[key] = value.map(item => [key, item].join(CATEGORY_SPLIT_KEY));
+    //           return acc;
+    //         }, {}) || {},
+    //     }));
+    //   }
+    // }, [checkedCategoriesDefault]);
+    // Handles
+    const onChangeCheckedCategories = (checkedCategories) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { checkedCategories })));
+    };
+    const onChangeOpenCategoryKeys = useCallback((openKeys) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { openCategoryKeys: openKeys })));
+    }, []);
+    const onLoadMore = useCallback(() => {
+        if (!isFetchingNextPage && hasNextPage) {
+            fetchNextPage();
+        }
+    }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+    return {
+        // MapKeys
+        categoryItems,
+        templateItems,
+        openCategoryKeys,
+        // Values
+        checkedCategories,
+        isLoadingCategoryList,
+        isLoadingTemplateList,
+        // Functions
+        refetchCategoryList,
+        refetchTemplateList,
+        onChangeCheckedCategories,
+        onChangeOpenCategoryKeys,
+        onLoadMore,
+    };
+};

package/es/components/molecules/TemplateSaveAs/styled.js

@@ -51,10 +51,13 @@ export const TemplateSaveAsStyled = styled(Flex) `
 
   .category-container {
     flex: 1;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   .selected-category {
-    width: 240px;
+    /* width: 240px; */
+    overflow: hidden;
     height: 30px;
     border: 1px solid #b8cfe6;
     padding: 0 5px;

package/package.json

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