alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

preview pdf before save

master
Anna Ho 1 year ago
parent
6616ee9799
commit
e60b489fd6
3 changed files with 41 additions and 23 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -6
      src/pages/Proof/Create_FromApp/ProofForm.js
  2. +35
    -13
      src/pages/Proof/Create_FromApp/UploadFileTable.js
  3. +5
    -4
      src/utils/statusUtils/ProofStatus.js

+ 1
- 6
src/pages/Proof/Create_FromApp/ProofForm.js View File

@@ -97,10 +97,6 @@ const FormPanel = ({ formData }) => {
}); });
} }


const getReturnBeforeDate=(date)=>{
return DateUtils.convertToDate(date).getTime();
}

const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
initialValues: data, initialValues: data,
@@ -119,7 +115,7 @@ const FormPanel = ({ formData }) => {
length: values.length, length: values.length,
colCount: columnPrice.colCount, colCount: columnPrice.colCount,
noOfPages: values.noOfPages, noOfPages: values.noOfPages,
returnBeforeDate: getReturnBeforeDate(values.beforeDate)
returnBeforeDate: DateUtils.convertToDate(values.beforeDate).getTime()
}, },
files: attachments, files: attachments,
onSuccess: function (responeData) { onSuccess: function (responeData) {
@@ -156,7 +152,6 @@ const FormPanel = ({ formData }) => {
setIsWarningPopUp(true); setIsWarningPopUp(true);
return; return;
} }

file['id'] = attachments.length; file['id'] = attachments.length;
setAttachments([ setAttachments([
...attachments, ...attachments,


+ 35
- 13
src/pages/Proof/Create_FromApp/UploadFileTable.js View File

@@ -6,19 +6,20 @@ import {
GridRowModes GridRowModes
} from "@mui/x-data-grid"; } from "@mui/x-data-grid";
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import {useEffect} from "react";
import { useEffect } from "react";
// import {useNavigate} from "react-router-dom"; // import {useNavigate} from "react-router-dom";
// import { useTheme } from '@mui/material/styles'; // import { useTheme } from '@mui/material/styles';
import { import {
Box, Box,
Stack
Stack,
Button
} from '@mui/material'; } from '@mui/material';
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //


export default function UploadFileTable({recordList, setRecordList,}) {
export default function UploadFileTable({ recordList, setRecordList, }) {
const [rows, setRows] = React.useState(recordList); const [rows, setRows] = React.useState(recordList);
const [rowModesModel,setRowModesModel] = React.useState({});
const [rowModesModel, setRowModesModel] = React.useState({});
// const theme = useTheme(); // const theme = useTheme();


// const navigate = useNavigate() // const navigate = useNavigate()
@@ -31,8 +32,8 @@ export default function UploadFileTable({recordList, setRecordList,}) {
function NoRowsOverlay() { function NoRowsOverlay() {
return ( return (
<Stack height="100%" alignItems="center" justifyContent="center"> <Stack height="100%" alignItems="center" justifyContent="center">
No File Record
{/* <pre>(rows=&#123;[]&#125;)</pre> */}
No File Record
{/* <pre>(rows=&#123;[]&#125;)</pre> */}
</Stack> </Stack>
); );
} }
@@ -50,6 +51,25 @@ export default function UploadFileTable({recordList, setRecordList,}) {
setRows(rows.filter((row) => row.id !== id)); setRows(rows.filter((row) => row.id !== id));
} }


const handlePreviewClick = (param) => () => {
var reader = new FileReader();
reader.onload = function(){
let path = reader.result;
var pdf_newTab = window.open("");
pdf_newTab.document.write(
"<html>"
+"<head><title>"+param.row.name+"</title></head>"
+"<body>"
+"<iframe title='"+param.row.name+"' width='100%' height='100%' src='"+path+"" + "'></iframe>"
+"</body>"
+"</html>"
);
};
reader.readAsDataURL(param.row);
}



const columns = [ const columns = [
{ {
field: 'actions', field: 'actions',
@@ -58,11 +78,11 @@ export default function UploadFileTable({recordList, setRecordList,}) {
width: 30, width: 30,
cellClassName: 'actions', cellClassName: 'actions',
// hide:true, // hide:true,
getActions: ({id}) => {
getActions: ({ id }) => {
return [ return [
<GridActionsCellItem <GridActionsCellItem
key="OutSave" key="OutSave"
icon={<RemoveCircleOutlineIcon/>}
icon={<RemoveCircleOutlineIcon />}
label="delete" label="delete"
className="textPrimary" className="textPrimary"
onClick={handleCancelClick(id)} onClick={handleCancelClick(id)}
@@ -71,10 +91,12 @@ export default function UploadFileTable({recordList, setRecordList,}) {
}, },
}, },
{ {
id: 'name',
field: 'name', field: 'name',
headerName: 'File Name', headerName: 'File Name',
flex: 1, flex: 1,
renderCell: (params) => {
return <Button onClick={handlePreviewClick(params)}><u>{params.row.name}</u></Button>;
},
}, },
{ {
id: 'size', id: 'size',
@@ -82,8 +104,8 @@ export default function UploadFileTable({recordList, setRecordList,}) {
headerName: 'File Size', headerName: 'File Size',
valueGetter: (params) => { valueGetter: (params) => {
// console.log(params) // console.log(params)
return Math.ceil(params.value/1024)+" KB";
},
return Math.ceil(params.value / 1024) + " KB";
},
flex: 1, flex: 1,
}, },
]; ];
@@ -94,7 +116,7 @@ export default function UploadFileTable({recordList, setRecordList,}) {
rows={rows} rows={rows}
columns={columns} columns={columns}
editMode="row" editMode="row"
sx={{border:1}}
sx={{ border: 1 }}
rowModesModel={rowModesModel} rowModesModel={rowModesModel}
disablePagination disablePagination
components={{ NoRowsOverlay, }} components={{ NoRowsOverlay, }}


+ 5
- 4
src/utils/statusUtils/ProofStatus.js View File

@@ -1,9 +1,10 @@
import {getStatusTag} from "utils/statusUtils/Base"; import {getStatusTag} from "utils/statusUtils/Base";
import * as DateUtils from "utils/DateUtils";


const confirm = {color:"#22a13f", eng:"Confirmed", cht:"可以付印"} const confirm = {color:"#22a13f", eng:"Confirmed", cht:"可以付印"}
const unable = {color:"#d9372b", eng:"Re-proofing", cht:"未能付印"} const unable = {color:"#d9372b", eng:"Re-proofing", cht:"未能付印"}
const timeOut = {color:"#8a8784", eng:"No Reply", cht:"回覆逾時"} const timeOut = {color:"#8a8784", eng:"No Reply", cht:"回覆逾時"}
const noReply = {color:"#f5a83d", eng:"Pending Reply", cht:"未回覆"}
const pendingReply = {color:"#f5a83d", eng:"Pending Reply", cht:"未回覆"}


export function getStatus_Cht(params) { export function getStatus_Cht(params) {
let status = getStatus(params); let status = getStatus(params);
@@ -23,14 +24,14 @@ function getStatus(params) {
if(replyDate){ if(replyDate){
return action?confirm:unable; return action?confirm:unable;
}else{ }else{
return isOverTime(returnBeforeDate)? timeOut: noReply;
return isOverTime(returnBeforeDate)? timeOut: pendingReply;
} }
} }


const isOverTime = (returnBeforeDate) => { const isOverTime = (returnBeforeDate) => {
if (!returnBeforeDate) return true; if (!returnBeforeDate) return true;
returnBeforeDate = new Date(returnBeforeDate).setHours(14, 0, 0, 0);
returnBeforeDate = DateUtils.convertToDate(returnBeforeDate);
let current = new Date(); let current = new Date();
return current.getTime() > returnBeforeDate;
return current.getTime() > returnBeforeDate.getTime();
} }



Write Preview
Loading…
Cancel
Save