@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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

@@ -1,17 +1,22 @@
+var _a, _b, _c, _d, _e, _f;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components';
 // Assets
-import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/background/skeleton-background.png';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const backgroundImage = css `
-  ${props => props.$skeleton
-    ? css `
-          background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
-          background-size: contain;
-        `
-    : css `
-          background: #e5e5e5;
-        `}
+  ${() => css `
+    &::after {
+      content: '';
+      position: absolute;
+      width: 90%;
+      height: 90%;
+      background: url(${SkeletonBg}) no-repeat center center;
+      background-size: contain;
+      z-index: 0;
+    }
+  `}
 `;
 const setWidthHeight = ({ w, h }) => `
   width: ${w};
@@ -25,6 +30,70 @@ const centerBlock = css `
 export const ImageSliderStyled = styled(Flex) `
   /* NOTE: Style for prev and next button in thumbnail slider */
   position: relative;
+  margin-top: 6px;
+
+  .edit-thumbnail-container {
+    position: relative;
+  }
+
+  .image-resize-action {
+    margin-top: 20px;
+    margin-bottom: 40px;
+  }
+
+  .image-resize-wrapper {
+    background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+
+    background-size: 90% 90%;
+  }
+
+  .image-resize-wrapper.visibility-hidden {
+    visibility: hidden;
+  }
+
+  .image-resize-wrapper,
+  .image-upload-zone {
+    border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1_1};
+    border-radius: 5px;
+    margin-top: 0;
+    overflow: hidden;
+  }
+
+  &:has(.image-upload-zone) #image-editor {
+    display: none;
+  }
+
+  .image-upload-zone {
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${props => `${props.$imageWidth}px`};
+    height: ${props => `${props.$imageHeight}px`};
+    background: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorBgSkeleton};
+
+    & > i {
+      color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw8};
+    }
+
+    & > div > span:last-child {
+      color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw7};
+    }
+
+    &:not(.hide-skeleton) {
+      background: ${props => {
+    var _a;
+    return props.$skeleton
+        ? `url(${SkeletonBg}) no-repeat center center`
+        : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorBgSkeleton;
+}};
+
+      background-size: 90% 90%;
+    }
+  }
 
   .change-preview-button {
     ${centerBlock}
@@ -68,8 +137,31 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .slider-button {
+    display: none;
+  }
+
+  .thumbnail-preview-container:has(.antsomi-spin),
+  .thumbnail-slider-container:has(.antsomi-spin) {
+    box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
+  }
+
+  .thumbnail-preview-container .antsomi-spin,
+  .thumbnail-slider-container .antsomi-spin {
+    width: 100%;
+    ${centerBlock}
+    background-color: #fcfcfc;
+  }
+
+  &:has(.thumbnail-slider-container:hover),
+  &:has(.slider-button:hover) {
+    .slider-button {
+      display: flex;
+    }
+  }
+
   .thumbnail-preview-container {
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
 
@@ -79,22 +171,59 @@ export const ImageSliderStyled = styled(Flex) `
     & > div {
       overflow: hidden;
     }
+
+    .antsomi-spin {
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
+    }
   }
 
   .thumbnail-slider-container {
     position: relative;
-    width: 330px;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
     overflow-x: scroll;
     scrollbar-width: none;
+
+    .antsomi-spin {
+      height: 72px;
+    }
+  }
+
+  &:has(> .thumbnail-preview-container) {
+    .image-container--big::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      z-index: 2;
+      transition: background-color 150ms ease-in-out;
+    }
+
+    .image-container--big:hover::before {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
   }
 
   .image-container {
     &--big,
     &--small {
+      position: relative;
+      box-sizing: border-box;
+      background: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorBgSkeleton};
+      border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue1_1};
+      border-radius: 5px;
+
       ${centerBlock}
-      ${backgroundImage}
+      &:not(.hide-skeleton) {
+        ${backgroundImage}
+      }
+
       img {
+        position: relative;
         object-fit: contain;
+        z-index: 1;
       }
 
       div:has(> img) {
@@ -104,32 +233,23 @@ export const ImageSliderStyled = styled(Flex) `
     }
 
     &--big {
-      ${setWidthHeight({ w: '100%', h: '230px' })}
-      /* ${setWidthHeight({ w: '330px', h: '230px' })} */
+      width: 100%;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
       flex-shrink: 0;
 
       position: relative;
-      /* border-radius: 5px; */
       overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-        z-index: 1;
-      }
     }
 
     &--small {
-      width: ${props => `calc(100% / ${props.$slidesPerView || 3} - 10px)`};
+      box-sizing: border-box;
+      width: ${props => `${props.$smallImageWidth}px`};
+
       height: 72px;
       flex-shrink: 0;
 
-      border: 2px solid #e5e5e5;
+      /* border: 2px solid #e5e5e5; */
+      border-width: 2px;
       border-radius: 2px;
       user-select: none;
       cursor: pointer;
@@ -139,37 +259,29 @@ export const ImageSliderStyled = styled(Flex) `
     }
   }
 
+  .default-checkbox {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    opacity: 0;
+    z-index: 3;
+    transition: opacity 150ms ease-in-out;
+  }
+
   .set-default-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
   }
 
-  /* .swiper-button-prev,
-  .swiper-button-next {
-    background: #fff;
-    width: 24px;
-    height: 24px;
-    border-radius: 999px;
-    &:after {
-      font-size: 14px;
-      font-weight: bold;
-      color: #000;
-    }
-    &.swiper-button-disabled {
+  .image-container--big:hover {
+    .set-default-button,
+    .default-checkbox {
       opacity: 1;
-      cursor: pointer;
     }
-  } */
-
-  /* .swiper-button-prev.swiper-button-disabled {
-    opacity: 1;
-    cursor: pointer;
-  } */
-
-  /* .swiper-button-lock {
-    display: flex;
-  } */
+  }
 `;

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

@@ -1 +1,4 @@
 export { ImageSlider } from './ImageSlider';
+export type { ImageSliderProps } from './ImageSlider';
+export { Category } from './Category';
+export type { EditCategory } from './Category';

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

@@ -1 +1,2 @@
 export { ImageSlider } from './ImageSlider';
+export { Category } from './Category';

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

@@ -1,13 +1,18 @@
+/// <reference types="react" />
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
-import { TCategoryItem, TCheckedCategories, TTemplateItem } from '../../../template';
+import { TGetTemplateCategoryList, TGetObjectTEmplateList } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
 import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
 import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
+import { FormValue, TemplateValueOptions, categoriesProps } from '../TemplateSaveAs';
+import { RuleObject } from 'antd/es/form';
 interface TemplateListingOptions {
     service: PayloadInfo;
-    config: TTemplateListingConfig & {
-        filter?: any;
+    config: TTemplateListingConfig;
+    queriesOptions?: {
+        categoryList?: TGetTemplateCategoryList['options'];
+        templateList?: TGetObjectTEmplateList['options'];
     };
-    checkedCategoriesDefault?: TCheckedCategories;
+    defaultValue?: Partial<TemplateValueOptions>;
 }
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
@@ -16,33 +21,53 @@ interface TemplateListingOptions {
  * @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 {Array<{ id: string | number; label: string; thumbnail?: string }>} templateItems - An array of template items representing the templates available for the specified configuration.
  * @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;
+    categoryItems: {
+        label: string | React.ReactNode;
+        key: string | number;
+        children: Array<{
+            key: string | number;
+            label: string | React.ReactNode;
+        }>;
+    }[];
+    templateItems: {
+        [key: string]: any;
+        id: string | number;
+        label: string;
+        thumbnail?: string | undefined;
+    }[];
+    value: Partial<TemplateValueOptions>;
+    setValue: import("react").Dispatch<import("react").SetStateAction<Partial<TemplateValueOptions>>>;
+    reset: () => void;
+    formattedCategoriesValue: {
+        camelCase: Record<string, any>;
+        snakeCase: Record<string, any>;
+    };
+    handleFormatCategories: (categories: categoriesProps | undefined) => {
+        camelCase: Record<string, any>;
+        snakeCase: Record<string, any>;
+    };
     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;
+    searchName: string;
+    onSearchName: import("react").Dispatch<import("react").SetStateAction<string>>;
+    searchNameProps: {
+        onSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+        onScrollToBottom: () => void;
+        isLoading: boolean;
+        validateName: (rule: RuleObject, value: any) => Promise<void>;
+    };
+    form: import("antd").FormInstance<FormValue>;
+    errors: any[] | undefined;
+    refetchCategoryList: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TemplateCategory[], any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
     onLoadMore: () => void;
+    onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };
 export {};

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

@@ -1,10 +1,23 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 // Libraries
 import { useCallback, useMemo, useState } from 'react';
-import { useGetTemplateCategoryList, useGetObjectTemplateList, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+import { useQueryClient } from '@tanstack/react-query';
+import { useGetTemplateCategoryList, useGetObjectTemplateList, useValidateTemplateName, } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
+// Services
+import { templateListingServices } from '@antscorp/antsomi-ui/es/services/TemplateListing';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
-// Constants
-import { CATEGORY_SPLIT_KEY } from '@antscorp/antsomi-ui/es/constants';
+import { Form } from 'antd';
+import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
+import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants';
 /**
  * Custom React Hook for managing state and data fetching logic related to a template listing.
  *
@@ -12,121 +25,184 @@ import { CATEGORY_SPLIT_KEY } from '@antscorp/antsomi-ui/es/constants';
  * @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 {Array<{ id: string | number; label: string; thumbnail?: string }>} templateItems - An array of template items representing the templates available for the specified configuration.
  * @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;
+    var _a;
+    const queryClient = useQueryClient();
+    const { service, config, queriesOptions, defaultValue: valueArg } = options;
+    const { objectType, categoryCodes, publicLevel, limitListPerPage = 10, getListType, channel, } = config;
+    const { categoryList: categoryListOptions, templateList: templateListOptions } = queriesOptions || {};
+    const [searchName, setSearchName] = useState('');
+    const [value, setValue] = useState(valueArg || {});
+    const [errors, setErrors] = useState();
+    const [templateItems, setTemplateItems] = useState([]);
+    const handleFormatCategories = (categories) => {
+        const snakeCase = camelCaseToSnakeCase(categories || {});
+        const camelCase = snakeCaseToCamelCase(categories || {});
+        return { camelCase, snakeCase };
+    };
+    const formattedCategoriesValue = useMemo(() => handleFormatCategories(value.categories), [value.categories]);
+    // const form = Form.useFormInstance<FormValue>();
+    const [form] = Form.useForm();
+    // console.log('form instance in hook:: ', form.getFieldsValue());
     const { data: categoryList, isLoading: isLoadingCategoryList, refetch: refetchCategoryList, } = useGetTemplateCategoryList({
         args: {
             auth: service,
             params: {
                 objectTypes: [objectType],
                 categoryCodes,
+                channel,
                 publicLevel,
+                getListType,
             },
         },
+        options: categoryListOptions,
     });
+    // Memo
+    const templateListFilter = useDeepCompareMemo(() => {
+        const filter = [];
+        if (searchName) {
+            filter.push({
+                TEMPLATE_NAME: { contain: searchName },
+            });
+        }
+        if (channel) {
+            filter.push({
+                CHANNEL: {
+                    matches_any: [channel],
+                },
+            });
+        }
+        return filter;
+    }, [searchName, channel]);
     // 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 } : {})),
+            params: {
+                get_list_type: getListType,
+                object_type: objectType,
+                public_level: publicLevel,
+                limit: limitListPerPage,
+                filter: JSON.stringify(templateListFilter),
+            },
         },
+        options: templateListOptions,
     });
+    const { mutateAsync: validateTemplateName } = useValidateTemplateName({});
     // 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),
-            };
+        const recursiveCategory = (categories = []) => categories.map(category => {
+            const { categoryCode, categoryId, categoryName, children } = category;
+            const key = Array.isArray(children) && children.length ? categoryCode : categoryId;
+            return Object.assign({ key, label: categoryName }, ((children === null || children === void 0 ? void 0 : children.length) > 0 ? { children: recursiveCategory(children) } : {}));
         });
         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 })));
-    }, []);
+        // Self-executing asynchronous function to handle template items
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            // Check if infiniteObjectTemplate is available
+            if (infiniteObjectTemplate) {
+                const { pages } = infiniteObjectTemplate;
+                const selectedTemplateId = +(((_a = value.templateName) === null || _a === void 0 ? void 0 : _a.id) || -1);
+                // Generate new template items by flattening entities from pages and adding label and description properties
+                const newTemplateItems = pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
+                // If the selected template ID is not found in the new template items, fetch its details
+                if (!newTemplateItems.find(item => +item.id === selectedTemplateId)) {
+                    const objectTemplate = yield queryClient.fetchQuery({
+                        queryKey: [QUERY_KEYS.GET_OBJECT_TEMPLATE_DETAIL, selectedTemplateId],
+                        queryFn: () => templateListingServices.objectTemplate.getDetail({
+                            auth: service,
+                            params: {
+                                object_type: objectType,
+                                public_level: publicLevel,
+                                template_id: selectedTemplateId,
+                            },
+                        }),
+                    });
+                    // If the object template is found, add it to the beginning of the new template items
+                    if (objectTemplate && objectTemplate.name) {
+                        newTemplateItems.unshift(Object.assign(Object.assign({}, objectTemplate.toJson()), { label: objectTemplate.name, description: objectTemplate.description || '' }));
+                    }
+                }
+                // Update state with the new template items
+                setTemplateItems(newTemplateItems);
+            }
+        }))();
+        // Dependencies for the effect: update if any of these change
+    }, [infiniteObjectTemplate, objectType, publicLevel, (_a = value.templateName) === null || _a === void 0 ? void 0 : _a.id]);
     const onLoadMore = useCallback(() => {
         if (!isFetchingNextPage && hasNextPage) {
             fetchNextPage();
         }
     }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+    const onChange = (newValue) => {
+        var _a, _b;
+        setErrors((_b = (_a = form === null || form === void 0 ? void 0 : form.getFieldsError()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errors);
+        setValue(newValue);
+    };
+    const reset = () => {
+        setValue(valueArg || {});
+    };
+    /* Validate Template Name */
+    const validateName = useCallback((rule, value) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!value)
+            return;
+        const response = yield validateTemplateName({
+            auth: service,
+            params: {
+                object_type: objectType,
+                public_level: publicLevel,
+                template_name: value.trim(),
+            },
+        });
+        if (response.existed) {
+            return Promise.reject(new Error('This name has already existed'));
+        }
+        return Promise.resolve();
+    }), [objectType, publicLevel, service, validateTemplateName]);
     return {
         // MapKeys
         categoryItems,
         templateItems,
-        openCategoryKeys,
+        // State value
+        value,
+        setValue,
+        reset,
+        // formattedValue
+        formattedCategoriesValue,
+        handleFormatCategories,
         // Values
-        checkedCategories,
         isLoadingCategoryList,
         isLoadingTemplateList,
+        // Handle Search template name
+        searchName,
+        onSearchName: setSearchName,
+        // implement props for search name on scroll to bottom
+        // usage: templateNamesOptions={{...searchNameProps}}
+        searchNameProps: {
+            onSearch: setSearchName,
+            onScrollToBottom: onLoadMore,
+            isLoading: isLoadingTemplateList,
+            validateName,
+        },
+        // Form handler
+        form,
+        errors,
         // Functions
         refetchCategoryList,
         refetchTemplateList,
-        onChangeCheckedCategories,
-        onChangeOpenCategoryKeys,
         onLoadMore,
+        onChange,
     };
 };