feat: ✨ added config method filter toggle

WasiqB · Oct 18, 2024 · a7c0e28 · a7c0e28
1 parent 71a1798
commit a7c0e28
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 128 deletions.
diff --git a/app/(app)/results/page.tsx b/app/(app)/results/page.tsx
@@ -94,7 +94,7 @@ const ResultsPage = (): JSX.Element => {
       <main className='flex-grow pt-16'>
         <section className='container mx-auto space-y-6 p-4'>
           <Card className='bg-card text-card-foreground'>
-            <CardHeader>
+            <CardHeader className='items-center pb-5'>
               <CardTitle className='text-xl'>Test Statistics</CardTitle>
               <CardDescription>
                 Overall Test execution statistics
@@ -201,7 +201,7 @@ const ResultsPage = (): JSX.Element => {
             )}
           </div>
           <Card>
-            <CardHeader>
+            <CardHeader className='items-center pb-5'>
               <CardTitle className='text-xl'>Test Details</CardTitle>
               <CardDescription>
                 List of all the executed test cases

diff --git a/components/charts/area-chart.tsx b/components/charts/area-chart.tsx
@@ -37,7 +37,7 @@ export function AreaChartComponent({
 }: AreaChartProps): JSX.Element {
   return (
     <Card>
-      <CardHeader className='items-center pb-0'>
+      <CardHeader className='items-center pb-5'>
         <CardTitle className='text-xl'>{title}</CardTitle>
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>

diff --git a/components/charts/dough-nut-chart.tsx b/components/charts/dough-nut-chart.tsx
@@ -38,7 +38,7 @@ const DoughNutComponent = ({
 }: DoughNutProps): JSX.Element => {
   return (
     <Card>
-      <CardHeader className='items-center pb-0'>
+      <CardHeader className='items-center pb-5'>
         <CardTitle className='text-xl'>{title}</CardTitle>
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>

diff --git a/components/charts/pie-chart.tsx b/components/charts/pie-chart.tsx
@@ -37,7 +37,7 @@ export function PieComponent({
 }: PieProps): JSX.Element {
   return (
     <Card className='flex flex-col'>
-      <CardHeader className='items-center pb-0'>
+      <CardHeader className='items-center pb-5'>
         <CardTitle className='text-xl'>{title}</CardTitle>
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>

diff --git a/components/data-table/data-table-toolbar.tsx b/components/data-table/data-table-toolbar.tsx
@@ -5,6 +5,8 @@ import { statuses } from './data';
 import { Button } from '@/components/ui/button';
 import { Cross2Icon } from '@radix-ui/react-icons';
 import { DataTableViewOptions } from './data-table-view-options';
+import { Switch } from '../ui/switch';
+import { useState } from 'react';
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>;
@@ -16,6 +18,22 @@ export function DataTableToolbar<TData>({
   filterColumn,
 }: DataTableToolbarProps<TData>): JSX.Element {
   const isFiltered = table.getState().columnFilters.length > 0;
+  const [showConfigMethods, setShowConfigMethods] = useState(true);
+
+  const handleShowConfig = (): void => {
+    setShowConfigMethods(!showConfigMethods);
+    if (showConfigMethods) {
+      table.getColumn('is_config')?.setFilterValue(false);
+    } else {
+      table.getColumn('is_config')?.setFilterValue(null);
+    }
+  };
+
+  const handleResetFilters = (): void => {
+    table.resetColumnFilters();
+    setShowConfigMethods(true);
+  };
+
   return (
     <div className='flex items-center py-4'>
       <Input
@@ -35,10 +53,18 @@ export function DataTableToolbar<TData>({
           options={statuses}
         />
       )}
+      <div className='ml-5 flex items-center space-x-2'>
+        <Switch
+          id='show-config-methods'
+          checked={showConfigMethods}
+          onCheckedChange={handleShowConfig}
+        />
+        <label htmlFor='show-config-methods'>Show Config Methods</label>
+      </div>
       {isFiltered && (
         <Button
           variant='ghost'
-          onClick={() => table.resetColumnFilters()}
+          onClick={handleResetFilters}
           className='h-8 px-2 lg:px-3'
         >
           Reset

diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "@stylistic/eslint-plugin-js": "^2.9.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.7.6",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18",
     "@types/xml2js": "^0.4.14",
@@ -77,11 +77,11 @@
     "postcss": "^8",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "release-it": "^17.9.0",
+    "release-it": "^17.10.0",
     "release-it-pnpm": "^4.6.3",
     "tailwindcss": "^3.4.14",
     "typescript": "^5",
-    "typescript-eslint": "^8.9.0"
+    "typescript-eslint": "^8.10.0"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [