suwako
/
kikikan
アーカイブ
1
0
フォーク 0
コード イシュー プルリクエスト プロジェクト リリース Wiki アクティビティ

add pdf library

このコミットが含まれているのは:
dragon1211 2021-12-15 17:49:09 -08:00
親 33b046b445
コミット 2760fcc39a
7個のファイルの変更、336行の追加、289行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

4
backend/public/css/app.css vendored
ファイルの表示

@ -17596,6 +17596,10 @@ a {
font-size: 16px !important;
}
}
.react-pdf__Page__canvas {
margin: auto;
}
.react-datepicker__month-container {
width: 250px;
font-size: 13px;

535
backend/public/js/app.js vendored
ファイルの表示

ファイル差分が大きすぎるため省略します 差分を読み込み

15
backend/resources/js/admin/meeting/edit.jsx
ファイルの表示

@ -6,7 +6,7 @@ import { LoadingButton } from '@material-ui/lab';
import IconButton from '@mui/material/IconButton';
import RemoveIcon from '@mui/icons-material/Remove';
import Alert from '../../component/alert';
import { Document, Page} from "react-pdf";
const REGISTED_IMAGE_ID = -100; //登録された画像を区別するために導入されます。
@ -19,6 +19,7 @@ const MeetingEdit = (props) => {
const [memo, setMemo] = useState('');
const [text, setText] = useState('');
const [pdf, setPdf] = useState('');
const [pdf_url, setPDFURL] = useState('');
const [meeting_image, setMeetingImages] = useState([]);
const [approval_list, setApproval] = useState([]);
const [children_list, setChildrenList] = useState([]);
@ -65,6 +66,7 @@ const MeetingEdit = (props) => {
setMeetingImages(response.data.params?.meeting_image);
setApproval(response.data.params?.approval);
setPdf(response.data.params?.pdf);
setPDFURL(response.data.params?.pdf);
var list = [...response.data.params?.children];
var approval = [...response.data.params?.approval];
@ -192,6 +194,7 @@ const MeetingEdit = (props) => {
let reader = new FileReader();
let _file = e.target.files[0];
if(!_file) return;
setPDFURL(URL.createObjectURL(_file))
reader.readAsDataURL(_file);
reader.onloadend = () => {
setPdf(reader.result);
@ -258,7 +261,7 @@ const MeetingEdit = (props) => {
{
pdf &&
<IconButton
onClick={()=>setPdf('')}
onClick={()=>{setPdf(''); setPDFURL('');}}
style={{position: 'absolute',
top: '-6px',
right: '-6px'}}>
@ -275,6 +278,14 @@ const MeetingEdit = (props) => {
{_422errors.pdf}
</span>
}
<div style={{ width: '100%', height:'300px', border:'1px solid rgba(36, 77, 138, 0.1)', margin:'15px 0'}}>
{
pdf_url &&
<Document file={pdf_url} loading={<></>}>
<Page pageNumber={1} loading={<></>} height={300}/>
</Document>
}
</div>
</div>
<div className="edit-set edit-set-mt15">
<label className="edit-set-file-label" htmlFor={meeting_image.length < 10 ? 'file_image': ''}>

2
backend/resources/js/component/modal_edit_memo.jsx
ファイルの表示

@ -13,7 +13,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
export default function ModalEditMemo({ show, content, handleClose, handleUpdateMemo}){
const [memo, setMemo] = useState(content);
const [memo, setMemo] = useState(content ? content : '');
const handleChange = (memo) => {
setMemo(memo);

47
backend/resources/js/parent/meeting/add.jsx
ファイルの表示

@ -7,8 +7,7 @@ import IconButton from '@mui/material/IconButton';
import RemoveIcon from '@mui/icons-material/Remove';
import Alert from '../../component/alert';
import Notification from '../notification';
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
import { Document, Page} from "react-pdf";
const MeetingAdd = (props) => {
@ -43,6 +42,7 @@ const MeetingAdd = (props) => {
setMemo(state.memo ? state.memo: '');
setText(state?.text);
setPdf(state?.pdf);
setPDFURL(state?.pdf);
let images = [];
for(let i in state.meeting_image){
images.push(state.meeting_image[i].image);
@ -174,8 +174,8 @@ const MeetingAdd = (props) => {
e.preventDefault();
let reader = new FileReader();
let _file = e.target.files[0];
setPDFURL(URL.createObjectURL(_file))
if(!_file) return;
setPDFURL(URL.createObjectURL(_file))
reader.readAsDataURL(_file);
reader.onloadend = () => {
setPdf(reader.result);
@ -193,26 +193,7 @@ const MeetingAdd = (props) => {
list[index].checked = e.target.checked;
setChildrenList(list);
}
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1); //default fisrt page
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
setPageNumber(1);
}
function changePage(offset) {
setPageNumber(prevPageNumber => prevPageNumber + offset);
}
function previousPage() {
changePage(-1);
}
function nextPage() {
changePage(1);
}
return (
<div className="l-content">
@ -249,7 +230,7 @@ const MeetingAdd = (props) => {
</div>
<div className="edit-set">
<label className="control-label" htmlFor="meeting_textarea">本文</label>
<textarea value={ text } onChange={e=>setText(e.target.value)} rows="8" className={`textarea-default ${ _422errors.text && 'is-invalid c-input__target'} `} id="meeting_textarea" />
<textarea value={ text ? text:'' } onChange={e=>setText(e.target.value)} rows="8" className={`textarea-default ${ _422errors.text && 'is-invalid c-input__target'} `} id="meeting_textarea" />
{
_422errors.text &&
<span className="l-alert__text--error ft-16 ft-md-14">
@ -259,7 +240,7 @@ const MeetingAdd = (props) => {
</div>
<div className="edit-set">
<label className="control-label" htmlFor="meeting_textarea">メモ</label>
<textarea value={ memo } onChange={e=>setMemo(e.target.value)} rows="8" className={`textarea-default ${ _422errors.memo && 'is-invalid c-input__target'} `} id="meeting_textarea" />
<textarea value={ memo ? memo:'' } onChange={e=>setMemo(e.target.value)} rows="8" className={`textarea-default ${ _422errors.memo && 'is-invalid c-input__target'} `} id="meeting_textarea" />
{
_422errors.memo &&
<span className="l-alert__text--error ft-16 ft-md-14">
@ -275,7 +256,7 @@ const MeetingAdd = (props) => {
{
pdf &&
<IconButton
onClick={()=>setPdf('')}
onClick={()=>{setPdf(''); setPDFURL('');}}
style={{position: 'absolute',
top: '-6px',
right: '-6px'}}>
@ -292,12 +273,14 @@ const MeetingAdd = (props) => {
{_422errors.pdf}
</span>
}
{
pdf &&
<Document file={pdf_url} width={200} height={300} renderMode='svg'>
<Page pageNumber={1} />
</Document>
}
<div style={{ width: '100%', height:'300px', border:'1px solid rgba(36, 77, 138, 0.1)', margin:'15px 0'}}>
{
pdf_url &&
<Document file={pdf_url} loading={<></>}>
<Page pageNumber={1} loading={<></>} height={300}/>
</Document>
}
</div>
</div>
<div className="edit-set edit-set-mt15">
<label className="edit-set-file-label" htmlFor={meeting_image.length < 10 ? 'file_image': ''}>

18
backend/resources/js/parent/meeting/edit.jsx
ファイルの表示

@ -9,6 +9,7 @@ import 'react-toastify/dist/ReactToastify.css';
import Alert from '../../component/alert';
import Notification from '../notification';
import { Document, Page} from "react-pdf";
const REGISTED_IMAGE_ID = -100; //登録された画像を区別するために導入されます。
@ -23,6 +24,7 @@ const MeetingEdit = (props) => {
const [memo, setMemo] = useState('');
const [text, setText] = useState('');
const [pdf, setPdf] = useState('');
const [pdf_url, setPDFURL] = useState('');
const [meeting_image, setMeetingImages] = useState([]);
const [approval_list, setApproval] = useState([]);
const [children_list, setChildrenList] = useState([]);
@ -54,6 +56,7 @@ const MeetingEdit = (props) => {
setMeetingImages(response.data.params?.meeting_image);
setApproval(response.data.params?.approval);
setPdf(response.data.params?.pdf);
setPDFURL(response.data.params?.pdf);
var list = [...response.data.params?.children];
var approval = [...response.data.params?.approval];
@ -207,11 +210,12 @@ useEffect(()=>{
setMeetingImages(list);
}
const handleChangePDF = (e) => {
const handlePDFChange = (e) => {
e.preventDefault();
let reader = new FileReader();
let _file = e.target.files[0];
if(!_file) return;
setPDFURL(URL.createObjectURL(_file))
reader.readAsDataURL(_file);
reader.onloadend = () => {
setPdf(reader.result);
@ -281,12 +285,12 @@ useEffect(()=>{
<div className="edit-set edit-set-mt15">
<label className="edit-set-file-label" htmlFor="file_pdf">
PDFアップロード
<input type="file" name="file_pdf" accept=".pdf" id="file_pdf" onChange={handleChangePDF} />
<input type="file" name="file_pdf" accept=".pdf" id="file_pdf" onChange={handlePDFChange} />
</label>
{
pdf &&
<IconButton
onClick={()=>setPdf('')}
onClick={()=>{setPdf(''); setPDFURL('');}}
style={{position: 'absolute',
top: '-6px',
right: '-6px'}}>
@ -303,6 +307,14 @@ useEffect(()=>{
{_422errors.pdf}
</span>
}
<div style={{ width: '100%', height:'300px', border:'1px solid rgba(36, 77, 138, 0.1)', margin:'15px 0'}}>
{
pdf_url &&
<Document file={pdf_url} loading={<></>}>
<Page pageNumber={1} loading={<></>} height={300}/>
</Document>
}
</div>
</div>
<div className="edit-set edit-set-mt15">
<label className="edit-set-file-label" htmlFor={meeting_image.length < 10 ? 'file_image': ''}>

4
backend/resources/sass/layouts/_main.scss vendored
ファイルの表示

@ -290,4 +290,8 @@ a{
}
.react-pdf__Page__canvas{
margin: auto;
}