feat(manager-react-components): update filters in datagrid

ref: MANAGER-15088 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Nov 27, 2024 · 0c54af5 · 0c54af5
1 parent 6b15292
commit 0c54af5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 32 deletions.
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -97,6 +97,7 @@ export interface DatagridProps<T> {
 export const Datagrid = <T,>({
   columns,
   items,
+  filters,
   totalItems,
   pagination,
   sorting,
@@ -109,7 +110,6 @@ export const Datagrid = <T,>({
   manualSorting = true,
   manualPagination = true,
   noResultLabel,
-  filters,
 }: DatagridProps<T>) => {
   const { t } = useTranslation('datagrid');
   const pageCount = pagination
@@ -170,38 +170,40 @@ export const Datagrid = <T,>({
 
   return (
     <div>
-      {columnsFilters.length > 0 && (
-        <div className="flex flex-row-reverse pb-[5px]">
-          <div id="datagrid-filter-popover-trigger">
-            <OdsButton
-              slot="datagrid-filter-popover-trigger"
-              size={ODS_BUTTON_SIZE.sm}
-              variant={ODS_BUTTON_VARIANT.outline}
-              icon={ODS_ICON_NAME.filter}
-              label="Filter"
-            />
+      <>
+        {columnsFilters.length > 0 && (
+          <div className="flex flex-row-reverse pb-[5px]">
+            <div id="datagrid-filter-popover-trigger">
+              <OdsButton
+                slot="datagrid-filter-popover-trigger"
+                size={ODS_BUTTON_SIZE.sm}
+                variant={ODS_BUTTON_VARIANT.outline}
+                icon={ODS_ICON_NAME.filter}
+                label="Filter"
+              />
+            </div>
+            <OdsPopover triggerId="datagrid-filter-popover-trigger" with-arrow>
+              <FilterAdd
+                columns={columnsFilters}
+                onAddFilter={(addedFilter, column) => {
+                  filters.add({
+                    ...addedFilter,
+                    label: column.label,
+                  });
+                }}
+              />
+            </OdsPopover>
           </div>
-          <OdsPopover triggerId="datagrid-filter-popover-trigger" with-arrow>
-            <FilterAdd
-              columns={columnsFilters}
-              onAddFilter={(addedFilter, column) => {
-                filters.add({
-                  ...addedFilter,
-                  label: column.label,
-                });
-              }}
+        )}
+        {filters?.filters && (
+          <div id="datagrid-filter-list" className="my-5">
+            <FilterList
+              filters={filters.filters}
+              onRemoveFilter={filters.remove}
             />
-          </OdsPopover>
-        </div>
-      )}
-      {filters?.filters && (
-        <div id="datagrid-filter-list" className="my-5">
-          <FilterList
-            filters={filters.filters}
-            onRemoveFilter={filters.remove}
-          />
-        </div>
-      )}
+          </div>
+        )}
+      </>
 
       <div className={`contents px-[1px] ${className || ''}`}>
         <OdsTable className="overflow-x-visible">

diff --git a/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx b/packages/manager-react-components/src/hooks/datagrid/useResourcesV6.tsx
@@ -108,6 +108,15 @@ export function useResourcesV6<T = unknown>({
     }
   }, [sorting]);
 
+  useEffect(() => {
+    if (filters.length > 0 && sortData.length > 0) {
+      setPageIndex(0);
+      const dataFiltered = applyFilters(sortData, filters);
+      setFlattenData([]);
+      setSortData([...dataFiltered]);
+    }
+  }, [filters]);
+
   const onFetchNextPage = () => {
     setPageIndex(pageIndex + 1);
   };
@@ -121,7 +130,7 @@ export function useResourcesV6<T = unknown>({
     flattenData: applyFilters(flattenData, filters),
     isError,
     isLoading,
-    hasNextPage: pageIndex * pageSize + pageSize <= totalCount,
+    hasNextPage: pageIndex * pageSize + pageSize <= flattenData.length,
     fetchNextPage: onFetchNextPage,
     error,
     status,