From 1a69ecec63d3626f0308d5acdbc32dbf0f239a14 Mon Sep 17 00:00:00 2001
From: Norbert Csaba Herczeg <noherczeg@gmail.com>
Date: Fri, 8 Nov 2024 13:48:49 +0100
Subject: [PATCH] JNG-5993 save state

---
 .../AccessTablePage/index.tsx.snapshot        |  3 +-
 .../model/ActionGroupTest-ui.model            |  4 +-
 .../components/widgets/CardsContainer.tsx.hbs | 63 +++++++++++++++++--
 3 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/pages/God/God/Galaxies/AccessTablePage/index.tsx.snapshot b/judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/pages/God/God/Galaxies/AccessTablePage/index.tsx.snapshot
index b0314296..f0bdcd8e 100644
--- a/judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/pages/God/God/Galaxies/AccessTablePage/index.tsx.snapshot
+++ b/judo-ui-react-itest/ActionGroupTest/action_group_test__god/src/test/resources/snapshots/frontend-react/src/pages/God/God/Galaxies/AccessTablePage/index.tsx.snapshot
@@ -27,6 +27,7 @@ import type { JudoIdentifiable } from '~/services/data-api/common/JudoIdentifiab
 import { draftIdentifierPrefix } from '~/services/data-api/common/utils';
 import type { ViewGalaxy, ViewGalaxyStored } from '~/services/data-api/model/ViewGalaxy';
 import type { ViewGalaxyQueryCustomizer } from '~/services/data-api/rest/ViewGalaxyQueryCustomizer';
+import { X_JUDO_COUNT_RECORDS } from '~/services/data-api/rest/headers';
 import type { JudoRestResponse } from '~/services/data-api/rest/requestResponse';
 import { GodServiceForGalaxiesImpl } from '~/services/data-axios/GodServiceForGalaxiesImpl';
 import { judoAxiosProvider } from '~/services/data-axios/JudoAxiosProvider';
@@ -195,7 +196,7 @@ export default function GodGodGalaxiesAccessTablePage() {
     try {
       setIsLoading(true);
       setEditMode(false);
-      return godServiceForGalaxiesImpl.list(undefined, queryCustomizer);
+      return godServiceForGalaxiesImpl.list(undefined, queryCustomizer, { [X_JUDO_COUNT_RECORDS]: 'true' });
     } catch (error) {
       handleError(error);
       setLatestViewData(null);
diff --git a/judo-ui-react-itest/ActionGroupTest/model/ActionGroupTest-ui.model b/judo-ui-react-itest/ActionGroupTest/model/ActionGroupTest-ui.model
index 3491a8d0..6741371e 100644
--- a/judo-ui-react-itest/ActionGroupTest/model/ActionGroupTest-ui.model
+++ b/judo-ui-react-itest/ActionGroupTest/model/ActionGroupTest-ui.model
@@ -3728,7 +3728,7 @@
   </pageContainers>
   <pageContainers xmi:id="God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTablePageContainer" name="ReadOnlyTest::MissionTransfer::MissionTransfer_Table" label="MissionTransfer Table" dataElement="God/(esm/_yt_moNGJEe6VerkxrKTO4w)/ClassType" onInit="God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTableTableRefreshActionDefinition">
     <children xsi:type="ui:Flex" xmi:id="God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTableVisualElement" name="MissionTransfer_Table" col="12.0" direction="VERTICAL" mainAxisAlignment="START" crossAxisAlignment="STRETCH">
-      <children xsi:type="ui:Table" xmi:id="God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTableTable" name="MissionTransfer_Table" sourceId="_yuOQINGJEe6VerkxrKTO4w" label="MissionTransfer Table" col="12.0" row="12.0" dataElement="God/(esm/_yt_moNGJEe6VerkxrKTO4w)/ClassType" crudOperationsDisplayed="1" selectorRowsPerPage="10" representationComponent="CARD">
+      <children xsi:type="ui:Table" xmi:id="God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTableTable" name="MissionTransfer_Table" sourceId="_yuOQINGJEe6VerkxrKTO4w" label="MissionTransfer Table" col="12.0" row="12.0" dataElement="God/(esm/_yt_moNGJEe6VerkxrKTO4w)/ClassType" crudOperationsDisplayed="1" selectorRowsPerPage="10" representationComponent="CARD" showTotalCount="true">
         <columns xmi:id="God/(esm/_OVVgoNGLEe6VerkxrKTO4w)/TableColumn/(discriminator/God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTableTable)" name="name" label="Name" col="2.0" format="%s" attributeType="God/(esm/_yu4-gNGJEe6VerkxrKTO4w)/AttributeType"/>
         <columns xmi:id="God/(esm/_OVmmYNGLEe6VerkxrKTO4w)/TableColumn/(discriminator/God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTableTable)" name="startDate" label="StartDate" col="2.0" format="%s" attributeType="God/(esm/_yvHoANGJEe6VerkxrKTO4w)/AttributeType"/>
         <columns xmi:id="God/(esm/_OV1P4NGLEe6VerkxrKTO4w)/TableColumn/(discriminator/God/(esm/_yuOQINGJEe6VerkxrKTO4w)/TransferObjectTableTable)" name="endDate" label="EndDate" col="2.0" format="%s" attributeType="God/(esm/_yvYtwNGJEe6VerkxrKTO4w)/AttributeType"/>
@@ -5601,7 +5601,7 @@
   </pageContainers>
   <pageContainers xmi:id="God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTablePageContainer" name="View::Galaxy::Table" label="Galaxies" dataElement="God/(esm/_YTkpoE7rEeycO-gUAWxcVg)/ClassType" onInit="God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTableTableRefreshActionDefinition">
     <children xsi:type="ui:Flex" xmi:id="God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTableVisualElement" name="Table" col="12.0" direction="VERTICAL" mainAxisAlignment="START" crossAxisAlignment="STRETCH">
-      <children xsi:type="ui:Table" xmi:id="God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTableTable" name="Table" sourceId="_YT0hQE7rEeycO-gUAWxcVg" label="Galaxies" col="12.0" row="12.0" dataElement="God/(esm/_YTkpoE7rEeycO-gUAWxcVg)/ClassType" crudOperationsDisplayed="1" rowsPerPage="25" selectorRowsPerPage="25">
+      <children xsi:type="ui:Table" xmi:id="God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTableTable" name="Table" sourceId="_YT0hQE7rEeycO-gUAWxcVg" label="Galaxies" col="12.0" row="12.0" dataElement="God/(esm/_YTkpoE7rEeycO-gUAWxcVg)/ClassType" crudOperationsDisplayed="1" rowsPerPage="25" selectorRowsPerPage="25" representationComponent="CARD" showTotalCount="true">
         <columns xmi:id="God/(esm/_8AiKcE7tEeycO-gUAWxcVg)/TableColumn/(discriminator/God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTableTable)" name="name" label="Name" col="2.0" format="%s" attributeType="God/(esm/_YT6n4E7rEeycO-gUAWxcVg)/AttributeType" sort="ASC"/>
         <columns xmi:id="God/(esm/_EIBPIFjXEeyV2_3ibolaNQ)/TableColumn/(discriminator/God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTableTable)" name="real" label="Real" col="2.0" format="%s" attributeType="God/(esm/_Q3EmkFjVEeyV2_3ibolaNQ)/AttributeType"/>
         <columns xmi:id="God/(esm/_Vne4AFjJEeyV2_3ibolaNQ)/TableColumn/(discriminator/God/(esm/_YT0hQE7rEeycO-gUAWxcVg)/TransferObjectTableTable)" name="constellation" label="Constellation" col="2.0" format="%s" attributeType="God/(esm/_ABgK4FjFEeyV2_3ibolaNQ)/AttributeType"/>
diff --git a/judo-ui-react/src/main/resources/actor/src/components/widgets/CardsContainer.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/widgets/CardsContainer.tsx.hbs
index 50c9747b..56de04ff 100644
--- a/judo-ui-react/src/main/resources/actor/src/components/widgets/CardsContainer.tsx.hbs
+++ b/judo-ui-react/src/main/resources/actor/src/components/widgets/CardsContainer.tsx.hbs
@@ -1,7 +1,14 @@
 {{> fragment.header.hbs }}
 
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useMemo, useCallback, useEffect, type ChangeEvent } from 'react';
 import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Pagination from '@mui/material/Pagination';
+import Typography from '@mui/material/Typography';
 import type {
   GridColDef,
   GridEventListener,
@@ -169,9 +176,9 @@ export const CardsContainer = <T extends GridValidRowModel,>(props: CardsContain
       };
       const { data: res, headers } = await fetch!(processedQueryCustomizer);
 
-      if (showTotalCount) {
+      // if (typeof showTotalCount === 'boolean' ? showTotalCount : true) {
         setTotalCount(headers[X_JUDO_COUNT] ? Number(headers[X_JUDO_COUNT]) : -1);
-      }
+      // }
 
       if (res.length > rowsPerPage) {
         setIsNextButtonEnabled(true);
@@ -199,5 +206,53 @@ export const CardsContainer = <T extends GridValidRowModel,>(props: CardsContain
     fetchData();
   }, [queryCustomizer, refreshCounter]);
 
-  return <Box>ID: {uniqueId}</Box>;
+  const onPageChange = useCallback((event: ChangeEvent<unknown>, page: number) => {
+    alert(page);
+  }, []);
+
+  const formatValue = useCallback((value: any) => {
+    if (value instanceof Date) {
+      return new Intl.DateTimeFormat(l10nLocale, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+      }).format(value);
+    }
+    if (value === undefined || value === null) {
+      return '';
+    }
+    return value.toString();
+  }, []);
+
+  return <Box>
+    <Typography>ID: {uniqueId}</Typography>
+    <Grid container spacing={2}>
+      <Grid item xs={12}>Filters</Grid>
+      <Grid item xs={12}>
+        <Grid container spacing={2} direction="row">
+          {data.map(d => (<Grid item sm={12} md={6} lg={6} xl={4} key={d.__identifier}>
+            <Card variant="outlined">
+              <CardContent>
+                {columns.map((k, idx) => (
+                  <Typography key={`${d.__identifier}-${k.field}`} variant={idx === 0 ? 'h5' : 'body2'}>
+                    {formatValue(d[k.field])}
+                  </Typography>
+                ))}
+              </CardContent>
+              <CardActions>
+                <Button size="small" onClick={() => actions.openPageAction(d)}>Learn More</Button>
+              </CardActions>
+            </Card>
+          </Grid>))}
+        </Grid>
+      </Grid>
+      <Grid item xs={12}>
+        <Pagination count={Math.ceil(totalCount / pageLimit)} page={page} onChange={onPageChange} variant="outlined" shape="rounded" />
+      </Grid>
+    </Grid>
+  </Box>;
 };