@centreon/ui 25.6.13 → 25.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.6.13",
+  "version": "25.7.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import {
   equals,
@@ -17,7 +17,7 @@ import {
 import { CircularProgress, useTheme } from '@mui/material';
 
 import { Props as AutocompleteFieldProps } from '..';
-import { ListingModel, SelectEntry } from '../../../..';
+import { ListingModel, ListingMapModel, SelectEntry } from '../../../..';
 import {
   ConditionsSearchParameter,
   SearchParameter
@@ -30,6 +30,12 @@ import {
 } from '../../../../utils';
 import Option from '../../Option';
 
+interface OptionResult<T> {
+  result: Array<T>;
+  limit: number;
+  total: number;
+}
+
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
@@ -91,7 +97,7 @@ const ConnectedAutocompleteField = (
     const theme = useTheme();
 
     const { fetchQuery, isFetching, prefetchNextPage, data } = useFetchQuery<
-      ListingModel<TData>
+      ListingModel<TData> | ListingMapModel<TData>
     >({
       decoder,
       baseEndpoint,
@@ -116,6 +122,27 @@ const ConnectedAutocompleteField = (
       }
     });
 
+    const getOptionResult = useCallback((
+      newOptions: ListingModel<TData> | ListingMapModel<TData>
+    ): OptionResult<TData> => {
+      if ('result' in newOptions) return {
+        result: newOptions.result || [],
+        total: newOptions.meta.total || 1,
+        limit: newOptions.meta.limit || 1,
+      };
+      if ('content' in newOptions) return {
+        result: newOptions.content || [],
+        total: newOptions.totalElements || 1,
+        limit: newOptions.size || 1,
+      };
+
+      return {
+        result: [],
+        total: 1,
+        limit: 1,
+      }
+    }, []);
+
     const lastOptionRef = useIntersectionObserver({
       action: () => setPage(page + 1),
       loading: isFetching,
@@ -245,12 +272,14 @@ const ConnectedAutocompleteField = (
 
         const moreOptions = page > 1 ? options : [];
 
+        const { result, limit, total } = getOptionResult(newOptions);
+
         const formattedList = changeIdValue
-          ? newOptions.result.map((item) => ({
+          ? result.map((item) => ({
               ...item,
               id: changeIdValue(item)
             }))
-          : newOptions.result;
+          : result;
 
         if (!isEmpty(labelKey) && !isNil(labelKey)) {
           const list = formattedList.map((item) =>
@@ -264,9 +293,6 @@ const ConnectedAutocompleteField = (
 
         setOptions(moreOptions.concat(formattedList as Array<TData>));
 
-        const total = prop('total', newOptions.meta) || 1;
-        const limit = prop('limit', newOptions.meta) || 1;
-
         const newMaxPage = Math.ceil(total / limit);
 
         setMaxPage(newMaxPage);
@@ -325,7 +351,7 @@ const ConnectedAutocompleteField = (
 
     return (
       <AutocompleteField
-        total={data?.meta.total}
+        total={data?.meta?.total || data?.totalElements || 1}
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
         options={

package/src/api/models.ts

@@ -8,3 +8,12 @@ export interface Listing<TEntity> {
   meta: ListingMeta;
   result: Array<TEntity>;
 }
+
+export interface ListingMap<TEntity> {
+    content: Array<TEntity>;
+    totalPages: number;
+    totalElements: number;
+    size: number;
+    number: number;
+    numberOfElements: number;
+}

package/src/index.ts

@@ -72,6 +72,7 @@ export { default as StatusChip } from './StatusChip';
 export type { Props as StatusChipProps } from './StatusChip';
 
 export type { Listing as ListingModel } from './api/models';
+export type { ListingMap as ListingMapModel } from './api/models';
 
 export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';