@antscorp/antsomi-ui 1.3.5-beta.304 → 1.3.5-beta.306

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

@@ -65,8 +65,8 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
     };
     form: import("antd").FormInstance<FormValue>;
     errors: any[] | undefined;
-    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("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
+    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;
 };

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

@@ -9,11 +9,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 // Libraries
 import { useCallback, useMemo, useState } from 'react';
+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 { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 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.
  *
@@ -28,12 +32,15 @@ import { camelCaseToSnakeCase, snakeCaseToCamelCase } from '@antscorp/antsomi-ui
  * @property {Function} onLoadMore - A function to load more template data when scrolling in the template listing.
  */
 export const useTemplateSave = (options) => {
+    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 || {});
@@ -99,13 +106,34 @@ export const useTemplateSave = (options) => {
         });
         return recursiveCategory(categoryList || []);
     }, [categoryList]);
-    const templateItems = useMemo(() => {
-        if (infiniteObjectTemplate) {
-            const { pages } = infiniteObjectTemplate;
-            return pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
-        }
-        return [];
-    }, [infiniteObjectTemplate]);
+    // Effects
+    useDeepCompareEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (infiniteObjectTemplate) {
+                const { pages } = infiniteObjectTemplate;
+                const selectedTemplateId = +(((_a = value.templateName) === null || _a === void 0 ? void 0 : _a.id) || -1);
+                const newTemplateItems = pages.flatMap(({ entities }) => entities.flatMap(entity => (Object.assign(Object.assign({}, entity.toJson()), { label: entity.name, description: entity.description || '' }))));
+                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 (objectTemplate) {
+                        newTemplateItems.unshift(Object.assign(Object.assign({}, objectTemplate.toJson()), { label: objectTemplate.name, description: objectTemplate.description || '' }));
+                    }
+                }
+                setTemplateItems(newTemplateItems);
+            }
+        }))();
+    }, [infiniteObjectTemplate, objectType, publicLevel, (_a = value.templateName) === null || _a === void 0 ? void 0 : _a.id]);
     const onLoadMore = useCallback(() => {
         if (!isFetchingNextPage && hasNextPage) {
             fetchNextPage();

package/es/components/organism/FilterSetting/components/common/InputArray/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Atoms
-import { Tag } from '@antscorp/antsomi-ui/es/components/atoms';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
 import { StyledSelect } from './styled';
 // Translations
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';

package/es/components/organism/FilterSetting/components/common/InputOrSelect/index.js

@@ -29,9 +29,10 @@ import get from 'lodash/get';
 // Icons
 import Icon from '@antscorp/icons';
 // Atoms
-import { Button, Text, Tag } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
 import { Modal, SelectV2 as Select, RadioGroup, TreeSelect, } from '@antscorp/antsomi-ui/es/components/molecules';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
 // Translations
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Queries
@@ -485,6 +486,10 @@ export const StyledDropdown = styled.div `
   }
 `;
 export const StyledSelect = styled(Select) `
+  .antsomi-select-selection-search {
+    width: fit-content !important;
+  }
+
   .antsomi-select-selection-placeholder {
     ${props => {
     var _a;

package/es/components/organism/FilterSetting/components/common/InputSelectMulti/index.js

@@ -28,9 +28,10 @@ import styled from 'styled-components';
 import { Popover, Input } from 'antd';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Atoms
-import { Button, Divider, Icon, Text, Tag } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button, Divider, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
 import { ModalSelect, StyledTreeSelect } from '../InputOrSelect';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
 // Components
 import { TreeContentWrapper } from './Tree';
 import { ColumnSuggestion } from './ColumnSuggestion';

package/package.json

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