feat(generator): update v6 listing filter

ref: MANAGER-15088 Signed-off-by: Alex Boungnaseng <[email protected]>
ovh · Dec 2, 2024 · 2f9eca4 · 2f9eca4
1 parent 4266b0b
commit 2f9eca4
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx
@@ -1,17 +1,53 @@
 import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
 import { withRouter } from 'storybook-addon-react-router-v6';
-import { applyFilters } from '@ovh-ux/manager-core-api';
+import { applyFilters, FilterCategories } from '@ovh-ux/manager-core-api';
 import { useSearchParams } from 'react-router-dom';
+import DataGridTextCell from './text-cell.component';
 import { Datagrid } from './datagrid.component';
 import { useColumnFilters } from '../filters';
-import { columsTmp, columsFilters } from './datagrid.stories';
 
 interface Item {
   label: string;
   price: number;
 }
 
+const columsTmp = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+  },
+];
+
+const columsFilters = [
+  {
+    id: 'label',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.label}</DataGridTextCell>;
+    },
+    label: 'Label',
+    comparator: FilterCategories.String,
+  },
+  {
+    id: 'price',
+    cell: (item: Item) => {
+      return <DataGridTextCell>{item.price} €</DataGridTextCell>;
+    },
+    label: 'Price',
+    comparator: FilterCategories.String,
+  },
+];
+
 const DatagridStory = ({
   items,
   isSortable,

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.component.tsx
@@ -30,7 +30,6 @@ import { FilterAdd, FilterList } from '../filters';
 import { FilterWithLabel } from '../filters/interface';
 import { DataGridTextCell } from './text-cell.component';
 import './translations';
-import { type } from 'os';
 
 export type ColumnSort = TanstackColumnSort;
 export type PaginationState = TanstackPaginationState;

diff --git a/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx b/packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx
@@ -12,7 +12,7 @@ interface Item {
   price: number;
 }
 
-export const columsTmp = [
+const columsTmp = [
   {
     id: 'label',
     cell: (item: Item) => {
@@ -29,7 +29,7 @@ export const columsTmp = [
   },
 ];
 
-export const columsFilters = [
+const columsFilters = [
   {
     id: 'label',
     cell: (item: Item) => {

diff --git a/packages/manager/core/generator/app/conditional-templates/listing/v6/index.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/listing/v6/index.tsx.hbs
@@ -52,13 +52,14 @@ export default function Listing() {
     navigate(`${path}${label}`);
   };
 
-  // Code to remove 
+  // Code to remove
   const comparatorType = {
     Number: FilterCategories.Numeric,
     Date: FilterCategories.Date,
     String: FilterCategories.String,
   };
 
+
   // Code to remove and declare definition columns in const variable
   useEffect(() => {
     if (columns.length === 0 && status === 'success' && flattenData?.length > 0) {