Improve Tokens Records table

src/certificate/TokensRecords.tsx

@@ -26,15 +26,15 @@ export default function TokensRecords(props: TokensRecordsProps) {
     const title = tokensRecords.length === 1 ?
         "Tokens record" :
         "Tokens records";
-    const introduction = tokensRecords.length === 1 ?
-        "The following Tokens Record is signed by the issuer." :
-        "The following Tokens Records, shared with all the owners of tokens declared in this LOC, are signed by issuers."
     return (
         <div className="TokensRecords">
             <Row>
                 <Col>
                     <h2><MenuIcon icon={ { id: "records_polka" } } height="40px" width="70px" /> { title }</h2>
-                    <p>{ introduction }</p>
+                    { tokensRecords.length > 1 &&
+                        <p>The following Tokens Records, shared with all the owners of tokens declared in this LOC, are
+                            signed by issuers.</p>
+                    }
                 </Col>
             </Row>
             { tokensRecords.map((tokensRecord, index) => (

src/loc/record/TokensRecordFiles.tsx

@@ -0,0 +1,98 @@
+import { TokensRecord, LocData, UploadableItemFile } from "@logion/client";
+import { ContributionMode } from "../types";
+import { Viewer, useCommonContext } from "../../common/CommonContext";
+import { tokensRecordDocumentClaimHistoryPath } from "../../legal-officer/LegalOfficerPaths";
+import {
+    tokensRecordDocumentClaimHistoryPath as requesterTokensRecordDocumentClaimHistoryPath,
+    issuerTokensRecordDocumentClaimHistoryPath
+} from "../../wallet-user/UserRouter";
+import { useLocContext } from "../LocContext";
+import ViewFileButton from "../../common/ViewFileButton";
+import { getTokensRecordFileSource } from "../FileModel";
+import Button from "../../common/Button";
+import Icon from "../../common/Icon";
+import { useNavigate } from "react-router-dom";
+import ButtonGroup from "../../common/ButtonGroup";
+import Col from "react-bootstrap/Col";
+import { Row } from "../../common/Grid";
+
+export interface Props {
+    record: TokensRecord;
+    contributionMode?: ContributionMode;
+}
+
+export default function TokensRecordFiles(props: Props) {
+
+    const { record } = props;
+    const { loc } = useLocContext();
+
+    if (!loc) {
+        return null;
+    }
+
+    return (<div className="TokensRecordFiles">
+        { record.files.map(file => (
+            <TokensRecordFileCell { ...props } loc={ loc } file={ file } />
+        )) }
+    </div>)
+}
+
+function TokensRecordFileCell(props: Props & { loc: LocData, file: UploadableItemFile }) {
+    const { loc, record, file, contributionMode } = props;
+    const { viewer } = useCommonContext();
+    const navigate = useNavigate();
+
+    return (
+        <Row className="TokensRecordFile">
+            <Col md={ 7 }>
+                <Row><strong>{ file.name.validValue() }</strong></Row>
+                <TRCell label="File type" value={ file.contentType.validValue() } />
+                <TRCell label="File size" value={ `${ file.size.toString() } (bytes)`} />
+                <TRCell label="Hash" value={ file.hash.toHex() } />
+            </Col>
+            <Col md={ 5 } className="ButtonContainer">
+                <ButtonGroup>
+                    <ViewFileButton
+                        nodeOwner={ loc.ownerAddress }
+                        fileName={ file.name.validValue() }
+                        downloader={ (axios) => getTokensRecordFileSource(axios, {
+                            locId: loc.id.toString(),
+                            recordId: record.id,
+                            hash: file.hash,
+                        }) }
+                    />
+                    <Button
+                        onClick={ () => navigate(documentClaimHistory(viewer, loc, record, file, contributionMode)) }
+                    >
+                        <Icon icon={ { id: "claim" } } /> View document claim history
+                    </Button>
+                </ButtonGroup>
+            </Col>
+        </Row>
+    )
+}
+
+function TRCell(props: { label: string, value: string }) {
+    const { label, value } = props;
+    return (
+        <Row className="TokensRecordFileAttribute">
+            <div>
+                <strong>{ label }</strong>
+                <span className="value">: { value }</span>
+            </div>
+        </Row>
+    )
+}
+
+function documentClaimHistory(viewer: Viewer, loc: LocData, record: TokensRecord, file: UploadableItemFile, contributionMode?: ContributionMode): string {
+    if (viewer === "LegalOfficer") {
+        return tokensRecordDocumentClaimHistoryPath(loc.id, record.id, file.hash);
+    } else if (contributionMode === "Requester") {
+        return requesterTokensRecordDocumentClaimHistoryPath(loc.id, record.id, file.hash);
+    } else if (contributionMode === "VerifiedIssuer") {
+        return issuerTokensRecordDocumentClaimHistoryPath(loc.id, record.id, file.hash);
+    } else {
+        return "";
+    }
+}
+

src/loc/record/TokensRecordTable.css

@@ -1,3 +1,32 @@
-.TokensRecordTable .ViewFileButton {
-    height: 40px;
+.TokensRecordTable .Table.constrained-row-height .body .Row .Col {
+    height: 62px;
 }
+
+.TokensRecordTable .TokensRecordFiles {
+    padding: 10px 10px 0 10px;
+    width: 100%;
+}
+
+.TokensRecordTable .TokensRecordFiles .value {
+    font-weight: lighter;
+}
+
+.TokensRecordTable .TokensRecordFiles .TokensRecordFileAttribute {
+    margin-bottom: 0;
+}
+
+.TokensRecordTable .TokensRecordFiles .TokensRecordFile .ButtonGroup {
+    margin-top: 16px;
+    position: relative;
+}
+
+.TokensRecordTable .TokensRecordFiles .TokensRecordFile .btn-group {
+    position: absolute;
+    right: 5px;
+}
+
+.TokensRecordTable .TokensRecordFiles .TokensRecordFile .ButtonGroup .Button {
+    min-width: 58px;
+    margin-left: 5px;
+}
+

src/loc/record/TokensRecordTable.tsx

@@ -1,21 +1,20 @@
-import { LocData, TokensRecord, fromIsoString } from "@logion/client";
+import { TokensRecord } from "@logion/client";
 import { useMemo, useState } from "react";
-import { useCommonContext, Viewer } from "src/common/CommonContext";
 import SubmitterName from "src/common/SubmitterName";
-import { Cell, DateTimeCell, EmptyTableMessage } from "src/common/Table";
-import ViewFileButton from "src/common/ViewFileButton";
+import { Cell, DateTimeCell, EmptyTableMessage, ActionCell } from "src/common/Table";
 import PagedTable, { getPage, Page } from "src/components/pagedtable/PagedTable";
-import { tokensRecordDocumentClaimHistoryPath } from "src/legal-officer/LegalOfficerPaths";
-import { getTokensRecordFileSource } from "../FileModel";
 import { useLocContext } from "../LocContext";
-import LocPrivateFileDetails from "../LocPrivateFileDetails";
 import { ContributionMode } from "../types";
-import { tokensRecordDocumentClaimHistoryPath as requesterTokensRecordDocumentClaimHistoryPath, issuerTokensRecordDocumentClaimHistoryPath } from "src/wallet-user/UserRouter";
 import { useLogionChain } from "src/logion-chain";
-import { FileItem } from "../LocItem";
 import ViewCertificateButton from "../ViewCertificateButton";
 import { fullTokensRecordsCertificate } from "../../PublicPaths";
 import "./TokensRecordTable.css";
+import CellWithCopyPaste from "../../components/table/CellWithCopyPaste";
+import TokensRecordFiles from "./TokensRecordFiles";
+import ButtonGroup from "../../common/ButtonGroup";
+import CopyPasteButton from "../../common/CopyPasteButton";
+import ViewQrCodeButton from "../ViewQrCodeButton";
+import { useResponsiveContext } from "../../common/Responsive";
 
 export interface Props {
     records: TokensRecord[];
@@ -24,10 +23,10 @@ export interface Props {
 
 export default function TokensRecordTable(props: Props) {
     const { records } = props;
-    const { viewer } = useCommonContext();
     const { loc } = useLocContext();
     const [ currentPageNumber, setCurrentPageNumber ] = useState(0);
     const { api } = useLogionChain();
+    const { width } = useResponsiveContext();
 
     const currentPage: Page<TokensRecord> = useMemo(() => {
         return getPage(records, currentPageNumber, 10);
@@ -41,77 +40,48 @@ export default function TokensRecordTable(props: Props) {
         <PagedTable
             columns={[
                 {
-                    header: "Name",
-                    render: record => <Cell
-                        content={ record.files[0].name.validValue() }
-                        tooltipId={`record-${record.id}-filename`}
-                        overflowing
-                    />,
-                    renderDetails: record => <LocPrivateFileDetails
-                        item={new FileItem(
-                            {
-
-                                newItem: false,
-                                status: "PUBLISHED",
-                                submitter: api.queries.getValidAccountId(record.issuer, "Polkadot"),
-                                timestamp: fromIsoString(record.addedOn),
-                                type: "Document",
-                                template: false,
-                            },
-                            {
-                                fileName: record.files[0].name.validValue(),
-                                hash: record.files[0].hash,
-                                nature: record.description,
-                                size: record.files[0].size,
-                                storageFeePaidBy: "Requester",
-                            }
-                        )}
-                        documentClaimHistory={ documentClaimHistory(viewer, loc, record, props.contributionMode) }
-                        fileName={record.files[0].name.validValue()}
-                        fileType={record.files[0].contentType.validValue()}
-                        otherFeesPaidByRequester={ false }
-                    />,
+                    header: "ID",
+                    render: record => <CellWithCopyPaste content={ record.id.toHex() } />,
+                    align: "left",
+                    width: "40%"
                 },
                 {
-                    header: "Timestamp",
-                    render: record => <DateTimeCell dateTime={ record.addedOn }/>
+                    header: "Description",
+                    render: record => <Cell content={ record.description.validValue() } />,
+                    align: "left",
                 },
                 {
-                    header: "Type",
-                    render: record => <Cell content={ record.files[0].contentType.validValue() }/>
+                    header: "Files",
+                    render: record => <Cell content={ record.files.length.toString() } />,
+                    renderDetails: record => <TokensRecordFiles record={ record } contributionMode={ props.contributionMode }/>,
+                    width: "100px"
                 },
                 {
-                    header: "Size (bytes)",
-                    render: record => <Cell content={record.files[0].size.toString()}/>
+                    header: "Timestamp",
+                    render: record => <DateTimeCell dateTime={ record.addedOn }/>
                 },
                 {
                     header: "Submitted by",
                     render: record => <SubmitterName loc={ loc } submitter={ record.issuer } />
                 },
-                {
-                    header: "Source",
-                    render: record => <Cell content={
-                        <ViewFileButton
-                            nodeOwner={ loc.ownerAddress }
-                            fileName={ record.files[0].name.validValue() }
-                            downloader={ (axios) => getTokensRecordFileSource(axios, {
-                                locId: loc.id.toString(),
-                                recordId: record.id,
-                                hash: record.files[0].hash,
-                            }) }
-                        />
-                    } />,
-                    align: "center",
-                    width: "100px",
-                },
                 {
                     header: "Certificate",
-                    render: record => <Cell content={
-                        <ViewCertificateButton url={ fullTokensRecordsCertificate(loc.id, record.id) } />
-                    } />,
-                    align: "center",
-                    width: "100px",
-                }
+                    render: item => (
+                        <ActionCell>
+                            <ButtonGroup
+                                narrow={ true }
+                            >
+                                <ViewCertificateButton url={ fullTokensRecordsCertificate(loc.id, item.id) } />
+                                <CopyPasteButton value={ fullTokensRecordsCertificate(loc.id, item.id) } tooltip="Copy certificate URL to clipboard" />
+                                <ViewQrCodeButton certificateUrl={ fullTokensRecordsCertificate(loc.id, item.id) } />
+                            </ButtonGroup>
+                        </ActionCell>
+                    ),
+                    width: width({
+                        onSmallScreen: "140px",
+                        otherwise: "160px",
+                    }),
+                },
             ]}
             currentPage={ currentPage }
             goToPage={ setCurrentPageNumber }
@@ -120,15 +90,3 @@ export default function TokensRecordTable(props: Props) {
         />
     </div>);
 }
-
-function documentClaimHistory(viewer: Viewer, loc: LocData, record: TokensRecord, contributionMode?: ContributionMode): string {
-    if(viewer === "LegalOfficer") {
-        return tokensRecordDocumentClaimHistoryPath(loc.id, record.id, record.files[0].hash);
-    } else if(contributionMode === "Requester") {
-        return requesterTokensRecordDocumentClaimHistoryPath(loc.id, record.id, record.files[0].hash);
-    } else if(contributionMode === "VerifiedIssuer") {
-        return issuerTokensRecordDocumentClaimHistoryPath(loc.id, record.id, record.files[0].hash);
-    } else {
-        return "";
-    }
-}