Merge branch 'dev' into 'staging'

верификация проверяется перед рисовкой пдф, уменьшено превью

See merge request frontend/marketplace!214
This commit is contained in:
Nastya 2024-07-13 13:27:46 +00:00
commit 7b5c6afed6
5 changed files with 64 additions and 31 deletions

@ -20,11 +20,14 @@ html * ::-webkit-scrollbar-track {
} }
html * ::-webkit-scrollbar-thumb { html * ::-webkit-scrollbar-thumb {
width: 4px; width: 4px;
background-color: #9A9AAF; background-color: #7e2aea;
color: #9A9AAF; color: #7e2aea;
border-radius: 5px; border-radius: 5px;
} }
.cnvs {
width: 80px;
}
/* /*
::-webkit-scrollbar это фон самого скроллбара. ::-webkit-scrollbar это фон самого скроллбара.

@ -11,7 +11,7 @@ import { Document, Page } from "react-pdf";
import { Buffer } from "buffer"; import { Buffer } from "buffer";
import { downloadFileToDevice } from "@root/utils/downloadFileToDevice"; import { downloadFileToDevice } from "@root/utils/downloadFileToDevice";
import EditIcon from "@mui/icons-material/Edit"; import EditIcon from "@mui/icons-material/Edit";
import { ChangeEvent, useRef } from "react"; import { ChangeEvent, useEffect, useRef, useState } from "react";
import { SendDocumentsArgs, Verification } from "@root/model/auth"; import { SendDocumentsArgs, Verification } from "@root/model/auth";
import { updateDocument } from "@api/verification"; import { updateDocument } from "@api/verification";
import { jsonToFormdata } from "@utils/jsonToFormdata"; import { jsonToFormdata } from "@utils/jsonToFormdata";
@ -58,6 +58,22 @@ export default function DocumentItem({
return; return;
}; };
const [readyShowDocument, setReadyShowDocument] = useState(false);
useEffect(() => {
if (typeof documentUrl === 'string') {
if (!documentUrl.includes("pena.digital")) {
console.log(documentUrl)
fetch(documentUrl)
.then(e => {
console.log(e)
setReadyShowDocument(true)
})
.catch(e => console.log(e))
}
}
}, [])
async function sendDocument(e: ChangeEvent<HTMLInputElement>) { async function sendDocument(e: ChangeEvent<HTMLInputElement>) {
const target = e.target as HTMLInputElement; const target = e.target as HTMLInputElement;
const file = target?.files?.[0] || null; const file = target?.files?.[0] || null;
@ -76,7 +92,6 @@ export default function DocumentItem({
enqueueSnackbar("Данные обновлены"); enqueueSnackbar("Данные обновлены");
} }
} }
return ( return (
<Box <Box
sx={{ sx={{
@ -96,7 +111,7 @@ export default function DocumentItem({
> >
{text} {text}
</Typography> </Typography>
{documentUrl && ( {documentUrl && readyShowDocument && (
<> <>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Typography <Typography
@ -119,10 +134,10 @@ export default function DocumentItem({
/> />
</Box> </Box>
<Document file={documentUrl}> <Document file={documentUrl} className={"cnvs"}>
<Page <Page
pageNumber={1} pageNumber={1}
width={200} width={80}
renderTextLayer={false} renderTextLayer={false}
renderAnnotationLayer={false} renderAnnotationLayer={false}
/> />

@ -1,4 +1,4 @@
import { ChangeEvent, useRef } from "react" import { ChangeEvent, useEffect, useRef, useState } from "react"
import axios from "axios" import axios from "axios"
import { Document, Page, pdfjs } from "react-pdf" import { Document, Page, pdfjs } from "react-pdf"
import { Box, SxProps, Theme, Typography } from "@mui/material" import { Box, SxProps, Theme, Typography } from "@mui/material"
@ -13,12 +13,12 @@ import { readFile } from "@root/utils/readFile"
import { downloadFileToDevice } from "@root/utils/downloadFileToDevice" import { downloadFileToDevice } from "@root/utils/downloadFileToDevice"
interface Props { interface Props {
text: string; text: string;
document: UserDocument; document: UserDocument;
documentUrl?: string; documentUrl?: string;
onFileChange: (event: ChangeEvent<HTMLInputElement>) => void; onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
accept?: string; accept?: string;
} }
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`; pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
@ -31,12 +31,31 @@ export default function DocumentUploadItem({
sx, sx,
accept = "image/*", accept = "image/*",
}: Props) { }: Props) {
const urlOrFile = document.file || documentUrl
const fileInputRef = useRef<HTMLInputElement>(null) const fileInputRef = useRef<HTMLInputElement>(null)
function handleChooseFileClick() { function handleChooseFileClick() {
fileInputRef.current?.click() fileInputRef.current?.click()
} }
const [readyShowDocument, setReadyShowDocument] = useState(false);
useEffect(() => {
if (typeof urlOrFile === 'string') {
if (!urlOrFile.includes("pena.digital")) {
console.log(documentUrl)
fetch(documentUrl)
.then(e => {
console.log(e)
setReadyShowDocument(true)
})
.catch(e => console.log(e))
}
} else {
setReadyShowDocument(true)
}
}, [])
const downloadFile = async () => { const downloadFile = async () => {
if (!document.file && documentUrl) { if (!document.file && documentUrl) {
const { data } = await axios.get<ArrayBuffer>(documentUrl, { const { data } = await axios.get<ArrayBuffer>(documentUrl, {
@ -93,16 +112,16 @@ export default function DocumentUploadItem({
multiple multiple
accept={accept} accept={accept}
/> />
{(document.file || documentUrl) && {urlOrFile && readyShowDocument &&
<Document file={document.file || documentUrl}> <Document file={urlOrFile}>
<Page <Page
pageNumber={1} pageNumber={1}
width={200} width={80}
renderTextLayer={false} renderTextLayer={false}
renderAnnotationLayer={false} renderAnnotationLayer={false}
onClick={downloadFile} onClick={downloadFile}
/> />
</Document>} </Document>}
</Box> </Box>
) )
} }

@ -13,12 +13,7 @@ import { sendDocuments, updateDocuments } from "@root/api/verification"
import { readFile } from "@root/utils/readFile" import { readFile } from "@root/utils/readFile"
import { deleteEmptyKeys } from "@root/utils/deleteEmptyKeys" import { deleteEmptyKeys } from "@root/utils/deleteEmptyKeys"
import { verify } from "../helper" import { verify } from "../helper"
import {ChangeEvent, useState} from "react"
import { theme } from "@root/utils/theme" import { theme } from "@root/utils/theme"
import makeRequest from "@api/makeRequest"
import {Verification} from "@root/model/auth"
import {jsonToFormdata} from "@utils/jsonToFormdata"
import {parseAxiosError} from "@utils/parse-error"
const dialogContainerStyle = { const dialogContainerStyle = {
height: "100%", height: "100%",
@ -174,7 +169,7 @@ export default function JuridicalDocumentsDialog() {
> >
<CloseSmallIcon /> <CloseSmallIcon />
</IconButton> </IconButton>
<Box sx={{ p: "40px", overflowY: "scroll" }}> <Box sx={{ p: "40px", pb: "70px", overflowY: "scroll" }}>
<Typography variant="h5" lineHeight="100%"> <Typography variant="h5" lineHeight="100%">
{verificationStatus === VerificationStatus.VERIFICATED {verificationStatus === VerificationStatus.VERIFICATED
? "Ваши документы" ? "Ваши документы"

@ -129,6 +129,7 @@ export default function NkoDocumentsDialog() {
text="1. Свидетельство о регистрации НКО" text="1. Свидетельство о регистрации НКО"
keyName="certificate" keyName="certificate"
documentUrl={documentsUrl["Свидетельство о регистрации НКО"]} documentUrl={documentsUrl["Свидетельство о регистрации НКО"]}
/> />
<DocumentItem <DocumentItem
text="2. Скан ИНН организации НКО (выписка из ЕГЮРЛ)" text="2. Скан ИНН организации НКО (выписка из ЕГЮРЛ)"
@ -206,7 +207,7 @@ export default function NkoDocumentsDialog() {
> >
<CloseSmallIcon /> <CloseSmallIcon />
</IconButton> </IconButton>
<Box sx={{ p: "40px", overflowY: "scroll" }}> <Box sx={{ p: "40px", pb: "70px", overflowY: "scroll" }}>
<Typography variant="h5" lineHeight="100%"> <Typography variant="h5" lineHeight="100%">
{verificationStatus === VerificationStatus.VERIFICATED {verificationStatus === VerificationStatus.VERIFICATED
? "Ваши документы" ? "Ваши документы"