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, + }) } + /> + + + + + ) +} + +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 ""; - } -}