feat: add items per page selector in TableInfo

kernelci · Sep 20, 2024 · 97ccf8b · 97ccf8b
1 parent 96c292c
commit 97ccf8b
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 72 deletions.
diff --git a/dashboard/src/components/Table/BootsTable.tsx b/dashboard/src/components/Table/BootsTable.tsx
@@ -21,6 +21,8 @@ import HeaderWithInfo from '@/pages/TreeDetails/Tabs/HeaderWithInfo';
 
 import { getStatusGroup } from '@/utils/status';
 
+import { ItemsPerPageValues } from '@/utils/constants/general';
+
 import TableStatusFilter from './TableStatusFilter';
 
 const headerLabelOrElement: (string | ReactElement)[] = [
@@ -39,14 +41,14 @@ const headerElements = headerLabelOrElement.map(item =>
   typeof item === 'string' ? <p key={item}>{item}</p> : item,
 );
 
-const ITEMS_PER_PAGE = 10;
-
 export interface ITestsTable {
   treeId: string;
   testHistory: TestHistory[];
 }
 
 const BootsTable = ({ treeId, testHistory }: ITestsTable): JSX.Element => {
+  const [itemsPerPage, setItemsPerPage] = useState(ItemsPerPageValues[0]);
+
   const navigate = useNavigate({ from: '/tree/$treeId' });
   const intl = useIntl();
   const { diffFilter } = useSearch({
@@ -99,7 +101,7 @@ const BootsTable = ({ treeId, testHistory }: ITestsTable): JSX.Element => {
   const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
     usePagination(
       data_len,
-      ITEMS_PER_PAGE,
+      itemsPerPage,
       tableFilter.bootsTable,
       tableFilter.testsTable,
       tableFilter.buildsTable,
@@ -140,7 +142,9 @@ const BootsTable = ({ treeId, testHistory }: ITestsTable): JSX.Element => {
         startIndex={startIndex + 1}
         endIndex={endIndex}
         totalTrees={data_len}
-        itemsPerPage={ITEMS_PER_PAGE}
+        itemsPerPageValues={ItemsPerPageValues}
+        itemsPerPageSelected={itemsPerPage}
+        onChangeItemsPerPage={setItemsPerPage}
         onClickBack={onClickGoBack}
         onClickForward={onClickGoForward}
       />

diff --git a/dashboard/src/components/Table/TableInfo.tsx b/dashboard/src/components/Table/TableInfo.tsx
@@ -1,20 +1,67 @@
-import {
-  MdExpandMore,
-  MdArrowBackIos,
-  MdArrowForwardIos,
-} from 'react-icons/md';
+import { MdArrowBackIos, MdArrowForwardIos } from 'react-icons/md';
 import { FormattedMessage } from 'react-intl';
 
+import { useCallback, useMemo } from 'react';
+
 import { MessagesKey } from '@/locales/messages';
 
+import {
+  Select,
+  SelectItem,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
 import { Button } from '../ui/button';
 
+interface IItemsPerPageSelector {
+  onValueChange: (value: number) => void;
+  values: number[];
+  selected: number;
+}
+
+const ItemsPerPageSelector = ({
+  onValueChange,
+  values,
+  selected,
+}: IItemsPerPageSelector): JSX.Element => {
+  const onChangeHandle = useCallback(
+    (v: string) => onValueChange(parseInt(v)),
+    [onValueChange],
+  );
+
+  const selectItems = useMemo(
+    () =>
+      values.map(v => (
+        <SelectItem key={v} value={v.toString()}>
+          {v}
+        </SelectItem>
+      )),
+    [values],
+  );
+
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <FormattedMessage id="table.itemsPerPage" />
+      <Select value={selected.toString()} onValueChange={onChangeHandle}>
+        <SelectTrigger className="w-16">
+          <SelectValue placeholder="" />
+        </SelectTrigger>
+        <SelectContent>{selectItems}</SelectContent>
+      </Select>
+    </div>
+  );
+};
+
 interface ITableInformation {
   itemName: MessagesKey;
   startIndex: number;
   endIndex: number;
   totalTrees: number;
-  itemsPerPage: number;
+  itemsPerPageValues: number[];
+  itemsPerPageSelected: number;
+  onChangeItemsPerPage: (value: number) => void;
   onClickForward: () => void;
   onClickBack: () => void;
 }
@@ -24,7 +71,9 @@ export const TableInfo = ({
   startIndex,
   endIndex,
   totalTrees,
-  itemsPerPage,
+  itemsPerPageValues,
+  itemsPerPageSelected,
+  onChangeItemsPerPage,
   onClickForward,
   onClickBack,
 }: ITableInformation): JSX.Element => {
@@ -41,11 +90,11 @@ export const TableInfo = ({
         <span className="font-bold">{totalTrees}</span>
         <FormattedMessage id={itemName} />
       </div>
-      <div className={groupsClassName}>
-        <FormattedMessage id="table.itemsPerPage" />
-        <span className="font-bold">{itemsPerPage}</span>
-        <MdExpandMore className={buttonsClassName} />
-      </div>
+      <ItemsPerPageSelector
+        onValueChange={onChangeItemsPerPage}
+        values={itemsPerPageValues}
+        selected={itemsPerPageSelected}
+      />
       <div className="flex flex-row items-center gap-2">
         <Button
           variant="outline"

diff --git a/dashboard/src/components/Table/TestsTable.tsx b/dashboard/src/components/Table/TestsTable.tsx
@@ -1,6 +1,6 @@
 import { useNavigate, useSearch } from '@tanstack/react-router';
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { useIntl } from 'react-intl';
 
@@ -16,17 +16,19 @@ import {
 import { getStatusGroup } from '@/utils/status';
 import { TPathTests } from '@/types/general';
 
+import { ItemsPerPageValues } from '@/utils/constants/general';
+
 import Accordion from '../Accordion/Accordion';
 
 import TableStatusFilter from './TableStatusFilter';
 
-const ITEMS_PER_PAGE = 10;
-
 export interface ITestsTable {
   testHistory: TestHistory[];
 }
 
 const TestsTable = ({ testHistory }: ITestsTable): JSX.Element => {
+  const [itemsPerPage, setItemsPerPage] = useState(ItemsPerPageValues[0]);
+
   const { tableFilter } = useSearch({
     from: '/tree/$treeId/',
   });
@@ -88,7 +90,7 @@ const TestsTable = ({ testHistory }: ITestsTable): JSX.Element => {
 
   const data_len = data?.length || 0;
   const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
-    usePagination(data_len, ITEMS_PER_PAGE);
+    usePagination(data_len, itemsPerPage);
   const intl = useIntl();
 
   const onClickFilter = useCallback(
@@ -142,7 +144,9 @@ const TestsTable = ({ testHistory }: ITestsTable): JSX.Element => {
         startIndex={startIndex + 1}
         endIndex={endIndex}
         totalTrees={data_len}
-        itemsPerPage={ITEMS_PER_PAGE}
+        itemsPerPageValues={ItemsPerPageValues}
+        itemsPerPageSelected={itemsPerPage}
+        onChangeItemsPerPage={setItemsPerPage}
         onClickBack={onClickGoBack}
         onClickForward={onClickGoForward}
       />

diff --git a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
@@ -1,6 +1,6 @@
 import { useSearch } from '@tanstack/react-router';
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -16,6 +16,7 @@ import { useTreeTable } from '@/api/Tree';
 import { TableInfo } from '@/components/Table/TableInfo';
 
 import { formattedBreakLineValue } from '@/locales/messages';
+import { ItemsPerPageValues } from '@/utils/constants/general';
 
 interface ITreeListingPage {
   inputFilter: string;
@@ -24,6 +25,7 @@ interface ITreeListingPage {
 const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
   const { origin: unsafeOrigin } = useSearch({ strict: false });
   const origin = zOrigin.parse(unsafeOrigin);
+  const [itemsPerPage, setItemsPerPage] = useState(ItemsPerPageValues[0]);
 
   const { data, error, isLoading } = useTreeTable(origin);
 
@@ -87,7 +89,7 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
   }, [data, error, inputFilter]);
 
   const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
-    usePagination(listItems.length, ITEMS_PER_PAGE);
+    usePagination(listItems.length, itemsPerPage);
 
   if (error) {
     return <div>Error: {error.message}</div>;
@@ -100,6 +102,20 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
       </Skeleton>
     );
 
+  const tableInfoElement = (
+    <TableInfo
+      itemName="global.tree"
+      startIndex={startIndex + 1}
+      endIndex={endIndex}
+      totalTrees={listItems.length}
+      itemsPerPageValues={ItemsPerPageValues}
+      itemsPerPageSelected={itemsPerPage}
+      onChangeItemsPerPage={setItemsPerPage}
+      onClickBack={onClickGoBack}
+      onClickForward={onClickGoForward}
+    />
+  );
+
   return data && data.length > 0 ? (
     <div className="flex flex-col gap-6">
       <div className="flex items-center justify-between gap-4">
@@ -109,30 +125,10 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
             values={formattedBreakLineValue}
           />
         </span>
-        <div className="flex items-end gap-4">
-          <TableInfo
-            itemName="global.tree"
-            startIndex={startIndex + 1}
-            endIndex={endIndex}
-            totalTrees={listItems.length}
-            itemsPerPage={ITEMS_PER_PAGE}
-            onClickBack={onClickGoBack}
-            onClickForward={onClickGoForward}
-          />
-        </div>
+        {tableInfoElement}
       </div>
       <TreeTable treeTableRows={listItems.slice(startIndex, endIndex)} />
-      <div className="flex flex-col items-end">
-        <TableInfo
-          itemName="global.tree"
-          startIndex={startIndex + 1}
-          endIndex={endIndex}
-          totalTrees={listItems.length}
-          itemsPerPage={ITEMS_PER_PAGE}
-          onClickBack={onClickGoBack}
-          onClickForward={onClickGoForward}
-        />
-      </div>
+      <div className="flex flex-col items-end">{tableInfoElement}</div>
     </div>
   ) : (
     <div className="grid h-[400px] place-items-center rounded-md bg-slate-100 dark:bg-slate-800">
@@ -141,6 +137,4 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
   );
 };
 
-const ITEMS_PER_PAGE = 10;
-
 export default TreeListingPage;
diff --git a/dashboard/src/pages/BuildDetails/BuildDetailsTestSection.tsx b/dashboard/src/pages/BuildDetails/BuildDetailsTestSection.tsx
@@ -13,6 +13,7 @@ import { usePagination } from '@/hooks/usePagination';
 import { MessagesKey } from '@/locales/messages';
 import { GroupedTestStatus } from '@/components/Status/Status';
 import { formatDate } from '@/utils/utils';
+import { ItemsPerPageValues } from '@/utils/constants/general';
 
 interface IBuildDetailsTestSection {
   buildId: string;
@@ -40,6 +41,7 @@ const BuildDetailsTestSection = ({
   buildId,
 }: IBuildDetailsTestSection): JSX.Element => {
   const intl = useIntl();
+  const [itemsPerPage, setItemsPerPage] = useState(ItemsPerPageValues[0]);
   const [pathParam, setPathParam] = useState('');
   const { data, error } = useBuildTests(buildId, pathParam);
   const data_len = data?.length || 0;
@@ -90,7 +92,9 @@ const BuildDetailsTestSection = ({
         startIndex={startIndex + 1}
         endIndex={endIndex}
         totalTrees={data_len}
-        itemsPerPage={ITEMS_PER_PAGE}
+        itemsPerPageValues={ItemsPerPageValues}
+        itemsPerPageSelected={itemsPerPage}
+        onChangeItemsPerPage={setItemsPerPage}
         onClickBack={onClickGoBack}
         onClickForward={onClickGoForward}
       />