Merge pull request eclipse-tractusx#412 from achtzig20/feat/transfer-…

…view-table feat: changed transfer view to a table
FraunhoferISST · May 24, 2024 · 7a17315 · 7a17315
2 parents 67fdcef + c6813db
commit 7a17315
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 66 deletions.
diff --git a/.../java/org/eclipse/tractusx/puris/backend/common/edc/logic/util/EdcRequestBodyBuilder.java b/.../java/org/eclipse/tractusx/puris/backend/common/edc/logic/util/EdcRequestBodyBuilder.java
@@ -367,8 +367,12 @@ public JsonNode buildNegotiationsRequestBody() {
     public JsonNode buildTransfersRequestBody() {
         var body = getEdcContextObject();
         body.put("@type", "QuerySpec");
+        /* 
+        to be readded with edc version 0.7.2
+        
         body.put("sortOrder", "DESC");
-        body.put("sortField", "stateTimestamp");
+        body.put("sortField", "stateTimestamp"); 
+        */
         return body;
     }
 

diff --git a/frontend/src/views/TransferView.tsx b/frontend/src/views/TransferView.tsx
@@ -19,76 +19,32 @@ under the License.
 SPDX-License-Identifier: Apache-2.0
 */
 
-import Card from '@mui/material/Card';
-
-import {useTransfers} from '@hooks/edc/useTransfers';
-import {Transfer} from '@models/types/edc/transfer';
-
-type TransferCardProps = {
-    transfer: Transfer;
-};
-
-const TransferCard = ({transfer}: TransferCardProps) => {
-    return (
-        <Card className="p-5">
-            <h1 className="text-3xl font-semibold text-gray-700 mb-10">Transfer</h1>
-            <div className="flex w-full flex-col gap-4">
-                <div className="flex flex-col gap-2">
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> Transfer Id: </span>
-                        {transfer['@id']}
-                    </div>
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> Correlation Id: </span>
-                        {transfer['correlationId']}
-                    </div>
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> State: </span>
-                        {transfer['state']}
-                    </div>
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> State Timestamp: </span>
-                        {new Date(transfer['stateTimestamp']).toLocaleString()}
-                    </div>
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> Type: </span>
-                        {transfer['type']}
-                    </div>
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> Asset Id: </span>
-                        {transfer['assetId']}
-                    </div>
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> Contract Id: </span>
-                        <span className="break-all w-[60ch]">{transfer['contractId']}</span>
-                    </div>
-                    <div className="flex gap-3">
-                        <span className="w-[30ch] font-semibold"> Connector Id: </span>
-                        {transfer['connectorId']}
-                    </div>
-                </div>
-            </div>
-        </Card>
-    );
-};
+import { useTransfers } from '@hooks/edc/useTransfers';
+import { Table } from '@catena-x/portal-shared-components';
+import { Box } from '@mui/material';
 
 export const TransferView = () => {
-    const {transfers} = useTransfers();
+    const { transfers } = useTransfers();
     return (
         <div className="flex flex-col items-center w-full h-full">
             <h1 className="text-3xl font-semibold text-gray-700 mb-10">Transfers</h1>
-            <ul className="flex flex-col gap-3 w-[100ch]">
-                {transfers && transfers.length > 0 ? (
-                    transfers.map((transfer) => (
-                        <li key={transfer["@id"]}>
-                            <TransferCard transfer={transfer}/>
-                        </li>
-                    ))
-                ) : (
-                    <p className='text-center'>No transfers found. This Page will be updated as soon as there are
-                        transfers.</p>
-                )}
-            </ul>
+            <Box width="100%">
+                <Table
+                    title="Transfer history"
+                    columns={[
+                        { headerName: 'Transfer Id', field: '@id', width: 200 },
+                        { headerName: 'Correlation Id', field: 'correlationId', width: 200 },
+                        { headerName: 'State', field: 'state', width: 120 },
+                        { headerName: 'Type', field: 'type', width: 120 },
+                        { headerName: 'Asset Id', field: 'assetId', width: 200 },
+                        { headerName: 'Contract Id', field: 'contractId', width: 200 },
+                        { headerName: 'Connector Id', field: 'connectorId', width: 200 },
+                    ]}
+                    rows={transfers ?? []}
+                    getRowId={(row) => row['@id']}
+                    noRowsMsg='No transfers found'
+                />
+            </Box>
         </div>
     );
 };