diff --git a/src/certificate/TokensRecords.tsx b/src/certificate/TokensRecords.tsx
index 04d066e9..c4408d60 100644
--- a/src/certificate/TokensRecords.tsx
+++ b/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 (
{ title }
- { introduction }
+ { tokensRecords.length > 1 &&
+ The following Tokens Records, shared with all the owners of tokens declared in this LOC, are
+ signed by issuers.
+ }
{ tokensRecords.map((tokensRecord, index) => (
diff --git a/src/loc/record/TokensRecordFiles.css b/src/loc/record/TokensRecordFiles.css
new file mode 100644
index 00000000..dae83855
--- /dev/null
+++ b/src/loc/record/TokensRecordFiles.css
@@ -0,0 +1,27 @@
+.TokensRecordFiles {
+ padding: 10px 10px 0 10px;
+ width: 100%;
+}
+
+.TokensRecordFiles .value {
+ font-weight: lighter;
+}
+
+.TokensRecordFiles .TokensRecordFileAttribute {
+ margin-bottom: 0 !important;
+}
+
+.TokensRecordFiles .TokensRecordFile .ButtonGroup {
+ margin-top: 18px;
+ position: relative;
+}
+
+.TokensRecordFiles .TokensRecordFile .btn-group {
+ position: absolute;
+ right: 5px;
+}
+
+.TokensRecordFiles .TokensRecordFile .ButtonGroup .Button {
+ min-width: 58px;
+ margin-left: 5px;
+}
diff --git a/src/loc/record/TokensRecordFiles.tsx b/src/loc/record/TokensRecordFiles.tsx
new file mode 100644
index 00000000..fdfc1e58
--- /dev/null
+++ b/src/loc/record/TokensRecordFiles.tsx
@@ -0,0 +1,99 @@
+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";
+import "./TokensRecordFiles.css";
+
+export interface Props {
+ record: TokensRecord;
+ contributionMode?: ContributionMode;
+}
+
+export default function TokensRecordFiles(props: Props) {
+
+ const { record } = props;
+ const { loc } = useLocContext();
+
+ if (!loc) {
+ return null;
+ }
+
+ return (
+ { record.files.map(file => (
+
+ )) }
+
)
+}
+
+function TokensRecordFileCell(props: Props & { loc: LocData, file: UploadableItemFile }) {
+ const { loc, record, file, contributionMode } = props;
+ const { viewer } = useCommonContext();
+ const navigate = useNavigate();
+
+ return (
+
+
+ { file.name.validValue() }
+
+
+
+
+
+
+ getTokensRecordFileSource(axios, {
+ locId: loc.id.toString(),
+ recordId: record.id,
+ hash: file.hash,
+ }) }
+ />
+ navigate(documentClaimHistory(viewer, loc, record, file, contributionMode)) }
+ >
+ View document claim history
+
+
+
+
+ )
+}
+
+function TRCell(props: { label: string, value: string }) {
+ const { label, value } = props;
+ return (
+
+
+ { label }
+ : { value }
+
+
+ )
+}
+
+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 "";
+ }
+}
+
diff --git a/src/loc/record/TokensRecordTable.css b/src/loc/record/TokensRecordTable.css
index 7011617f..ae9804a5 100644
--- a/src/loc/record/TokensRecordTable.css
+++ b/src/loc/record/TokensRecordTable.css
@@ -1,3 +1,3 @@
-.TokensRecordTable .ViewFileButton {
- height: 40px;
+.TokensRecordTable .Table.constrained-row-height .body .Row .Col {
+ height: 62px;
}
diff --git a/src/loc/record/TokensRecordTable.tsx b/src/loc/record/TokensRecordTable.tsx
index 0dc17491..894bdb8b 100644
--- a/src/loc/record/TokensRecordTable.tsx
+++ b/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
= useMemo(() => {
return getPage(records, currentPageNumber, 10);
@@ -41,77 +40,48 @@ export default function TokensRecordTable(props: Props) {
| ,
- renderDetails: record => ,
+ header: "ID",
+ render: record => ,
+ align: "left",
+ width: "40%"
},
{
- header: "Timestamp",
- render: record =>
+ header: "Description",
+ render: record => | ,
+ align: "left",
},
{
- header: "Type",
- render: record => |
+ header: "Files",
+ render: record => | ,
+ renderDetails: record => ,
+ width: "100px"
},
{
- header: "Size (bytes)",
- render: record =>
+ header: "Timestamp",
+ render: record =>
},
{
header: "Submitted by",
render: record =>
},
- {
- header: "Source",
- render: record => getTokensRecordFileSource(axios, {
- locId: loc.id.toString(),
- recordId: record.id,
- hash: record.files[0].hash,
- }) }
- />
- } />,
- align: "center",
- width: "100px",
- },
{
header: "Certificate",
- render: record => |
- } />,
- align: "center",
- width: "100px",
- }
+ render: item => (
+
+
+
+
+
+
+
+ ),
+ width: width({
+ onSmallScreen: "140px",
+ otherwise: "160px",
+ }),
+ },
]}
currentPage={ currentPage }
goToPage={ setCurrentPageNumber }
@@ -120,15 +90,3 @@ export default function TokensRecordTable(props: Props) {
/>
| | );
}
-
-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 "";
- }
-}