@antscorp/antsomi-ui 1.3.5-beta.303 → 1.3.5-beta.305

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

@@ -37,6 +37,8 @@ export const StyledDrawer = styled(Drawer) `
   }
 `;
 export const Content = styled.div `
+  display: flex;
+  flex-direction: column;
   position: relative;
   overflow: auto;
   flex: 1 1 0%;
@@ -112,6 +114,7 @@ export const DrawerHeader = styled(Flex) `
   padding: 0px 20px;
   box-sizing: border-box;
   background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  flex-shrink: 0;
   z-index: 20;
 
   ${props => props.height &&

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/package.json

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