[TM-1603] change the quantity of elements shown in tables in site rep…

…orts landing pages (#854)
wri · Jan 29, 2025 · 4deebec · 4deebec
1 parent 562bddb
commit 4deebec
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/src/components/elements/ImageGallery/ImageGallery.tsx b/src/components/elements/ImageGallery/ImageGallery.tsx
@@ -428,7 +428,7 @@ const ImageGallery = ({
           defaultPageSize={defaultPageSize}
           hasPageSizeSelector
           invertSelect
-          isImageGallery
+          galleryType={"imageGallery"}
         />
       </div>
     </>

diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx
@@ -57,6 +57,7 @@ export interface TableProps<TData>
   onRowClick?: (row: TData) => void;
   contentClassName?: string;
   classNameTableWrapper?: string;
+  galleryType?: string;
 }
 
 export interface TableState {
@@ -91,6 +92,7 @@ function Table<TData extends RowData>({
   resetOnDataChange = true, // maintains default behavior
   onRowClick,
   contentClassName,
+  galleryType,
   ...props
 }: TableProps<TData>) {
   const t = useT();
@@ -300,10 +302,11 @@ function Table<TData extends RowData>({
           previousPage={previousPage}
           setPageIndex={setPageIndex}
           setPageSize={setPageSize}
-          defaultPageSize={initialTableState?.pagination?.pageSize || 5}
+          defaultPageSize={galleryType === "treeSpeciesPD" ? 8 : initialTableState?.pagination?.pageSize || 5}
           containerClassName="mt-6"
           hasPageSizeSelector
           invertSelect={invertSelectPagination}
+          galleryType={galleryType}
         />
       )}
     </div>

diff --git a/src/components/extensive/Pagination/index.tsx b/src/components/extensive/Pagination/index.tsx
@@ -12,11 +12,25 @@ export interface PaginationProps extends PageSelectorProps {
   setPageSize?: (count: number) => void;
   variant?: VariantPagination;
   invertSelect?: boolean;
-  isImageGallery?: boolean;
+  galleryType?: string;
+}
+
+function getPageSizeOptions(galleryType?: string) {
+  if (galleryType === undefined) {
+    return [5, 10, 15, 20, 50];
+  }
+  if (galleryType === "imageGallery") {
+    return [3, 6, 12, 30, 60];
+  }
+  if (galleryType === "treeSpeciesPD") {
+    return [8, 16, 24, 40, 56];
+  }
+  return [5, 10, 15, 20, 50];
 }
 
 function Pagination(props: PaginationProps) {
   const t = useT();
+  const pageSizeOptions = getPageSizeOptions(props.galleryType);
   return (
     <div
       className={classNames(
@@ -28,7 +42,7 @@ function Pagination(props: PaginationProps) {
       {props.hasPageSizeSelector ? (
         <PerPageSelector
           label={t(props.variant?.labelText || "Per page")}
-          options={props.isImageGallery ? [3, 6, 12, 30, 60] : [5, 10, 15, 20, 50]}
+          options={pageSizeOptions}
           variantText={props.variant?.VariantPrePageText}
           defaultValue={props.defaultPageSize}
           onChange={props.setPageSize!}

diff --git a/src/components/extensive/Tables/TreeSpeciesTablePD.tsx b/src/components/extensive/Tables/TreeSpeciesTablePD.tsx
@@ -40,6 +40,7 @@ export interface TreeSpeciesTablePDProps {
     | "treeCountSite"
     | "saplingsCount";
   visibleRows?: number;
+  galleryType?: string;
 }
 
 export interface TreeSpeciesTableRowData {
@@ -61,6 +62,7 @@ const TreeSpeciesTablePD = ({
   secondColumnWidth = "",
   typeTable,
   visibleRows = 5,
+  galleryType,
   data
 }: TreeSpeciesTablePDProps) => {
   const queryParams: any = {};
@@ -436,6 +438,7 @@ const TreeSpeciesTablePD = ({
         hasPagination
         invertSelectPagination
         visibleRows={visibleRows}
+        galleryType={galleryType}
       />
     </div>
   );

diff --git a/src/pages/reports/site-report/[uuid].page.tsx b/src/pages/reports/site-report/[uuid].page.tsx
@@ -169,6 +169,8 @@ const SiteReportDetailPage = () => {
                           modelUUID={siteReportUUID}
                           collection="tree-planted"
                           framework={siteReport.framework_key}
+                          visibleRows={8}
+                          galleryType={"treeSpeciesPD"}
                         />
                       </div>
                     </ContextCondition>
@@ -195,6 +197,8 @@ const SiteReportDetailPage = () => {
                           modelUUID={siteReportUUID}
                           collection="tree-planted"
                           framework={siteReport.framework_key}
+                          visibleRows={8}
+                          galleryType={"treeSpeciesPD"}
                         />
                       </div>
                     </ContextCondition>
@@ -221,6 +225,8 @@ const SiteReportDetailPage = () => {
                           modelUUID={siteReportUUID}
                           collection="seeding"
                           framework={siteReport.framework_key}
+                          visibleRows={8}
+                          galleryType={"treeSpeciesPD"}
                         />
                       </div>
                     </ContextCondition>
@@ -247,6 +253,8 @@ const SiteReportDetailPage = () => {
                           modelUUID={siteReportUUID}
                           collection="non-tree"
                           framework={siteReport.framework_key}
+                          visibleRows={8}
+                          galleryType={"treeSpeciesPD"}
                         />
                       </div>
                     </ContextCondition>
@@ -273,6 +281,8 @@ const SiteReportDetailPage = () => {
                           modelUUID={siteReportUUID}
                           collection="replanting"
                           framework={siteReport.framework_key}
+                          visibleRows={8}
+                          galleryType={"treeSpeciesPD"}
                         />
                       </div>
                     </ContextCondition>