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

add pdf-preview.jsx

このコミットが含まれているのは:
dragon1211 2021-12-18 11:16:16 -08:00
親 60fa72f908
コミット eb0ae7e11c
9個のファイルの変更、89行の追加、101行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

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

@ -14491,6 +14491,8 @@ categories: [project]
border: 1px solid rgba(36, 77, 138, 0.1);
border-radius: 6px;
margin-bottom: 15px;
width: 100%;
height: width;
}
.p-file-for figure {
height: 350px;

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

@ -36415,7 +36415,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _mui_material_IconButton__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material/IconButton */ "./node_modules/@mui/material/IconButton/IconButton.js");
/* harmony import */ var _mui_icons_material_Remove__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material/Remove */ "./node_modules/@mui/icons-material/Remove.js");
/* harmony import */ var _component_alert__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../component/alert */ "./resources/js/component/alert.jsx");
/* harmony import */ var react_pdf__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-pdf */ "./node_modules/react-pdf/dist/esm/entry.js");
/* harmony import */ var _component_preview_pdf__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../component/preview_pdf */ "./resources/js/component/preview_pdf.jsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@ -36454,7 +36454,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var REGISTED_IMAGE_ID = -100; //登録された画像を区別するために導入されます。
var MeetingEdit = function MeetingEdit(props) {
@ -36903,22 +36902,8 @@ var MeetingEdit = function MeetingEdit(props) {
}), _422errors.pdf && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
className: "l-alert__text--error ft-16 ft-md-14",
children: _422errors.pdf
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
style: {
width: '100%',
height: '300px',
border: '1px solid rgba(36, 77, 138, 0.1)',
margin: '15px 0'
},
children: pdf_url && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_3__.Document, {
file: pdf_url,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {}),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_3__.Page, {
pageNumber: 1,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {}),
height: 300
})
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_component_preview_pdf__WEBPACK_IMPORTED_MODULE_3__.default, {
pdf_url: pdf_url
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
className: "edit-set edit-set-mt15",
@ -44231,6 +44216,50 @@ function ModalPdf(_ref) {
/***/ }),
/***/ "./resources/js/component/preview_pdf.jsx":
/*!************************************************!*\
!*** ./resources/js/component/preview_pdf.jsx ***!
\************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react_pdf__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-pdf */ "./node_modules/react-pdf/dist/esm/entry.js");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
var PreviewPDF = function PreviewPDF(_ref) {
var pdf_url = _ref.pdf_url;
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
className: "p-file-for",
style: {
height: '400px',
marginTop: '15px'
},
children: pdf_url && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_1__.Document, {
file: pdf_url,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {}),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_1__.Page, {
className: 'position-relative',
pageNumber: 1,
height: 400,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {})
})
})
});
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PreviewPDF);
/***/ }),
/***/ "./resources/js/pages/contact/complete.jsx":
/*!*************************************************!*\
!*** ./resources/js/pages/contact/complete.jsx ***!
@ -47681,7 +47710,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _mui_icons_material_Remove__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Remove */ "./node_modules/@mui/icons-material/Remove.js");
/* harmony import */ var _component_alert__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../component/alert */ "./resources/js/component/alert.jsx");
/* harmony import */ var _notification__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../notification */ "./resources/js/parent/notification.jsx");
/* harmony import */ var react_pdf__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-pdf */ "./node_modules/react-pdf/dist/esm/entry.js");
/* harmony import */ var _component_preview_pdf__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../component/preview_pdf */ "./resources/js/component/preview_pdf.jsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@ -47722,7 +47751,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var MeetingAdd = function MeetingAdd(props) {
var _ref;
@ -48121,22 +48149,8 @@ var MeetingAdd = function MeetingAdd(props) {
}), _422errors.pdf && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
className: "l-alert__text--error ft-16 ft-md-14",
children: _422errors.pdf
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
style: {
width: '100%',
height: '300px',
border: '1px solid rgba(36, 77, 138, 0.1)',
margin: '15px 0'
},
children: pdf_url && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_4__.Document, {
file: pdf_url,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {}),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_4__.Page, {
pageNumber: 1,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {}),
height: 300
})
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_component_preview_pdf__WEBPACK_IMPORTED_MODULE_4__.default, {
pdf_url: pdf_url
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
className: "edit-set edit-set-mt15",
@ -48865,7 +48879,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react_toastify_dist_ReactToastify_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-toastify/dist/ReactToastify.css */ "./node_modules/react-toastify/dist/ReactToastify.css");
/* harmony import */ var _component_alert__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../component/alert */ "./resources/js/component/alert.jsx");
/* harmony import */ var _notification__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../notification */ "./resources/js/parent/notification.jsx");
/* harmony import */ var react_pdf__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-pdf */ "./node_modules/react-pdf/dist/esm/entry.js");
/* harmony import */ var _component_preview_pdf__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../component/preview_pdf */ "./resources/js/component/preview_pdf.jsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@ -48906,7 +48920,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var REGISTED_IMAGE_ID = -100; //登録された画像を区別するために導入されます。
var MeetingEdit = function MeetingEdit(props) {
@ -49394,22 +49407,8 @@ var MeetingEdit = function MeetingEdit(props) {
}), _422errors.pdf && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("span", {
className: "l-alert__text--error ft-16 ft-md-14",
children: _422errors.pdf
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)("div", {
style: {
width: '100%',
height: '300px',
border: '1px solid rgba(36, 77, 138, 0.1)',
margin: '15px 0'
},
children: pdf_url && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_5__.Document, {
file: pdf_url,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {}),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(react_pdf__WEBPACK_IMPORTED_MODULE_5__.Page, {
pageNumber: 1,
loading: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.Fragment, {}),
height: 300
})
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_component_preview_pdf__WEBPACK_IMPORTED_MODULE_5__.default, {
pdf_url: pdf_url
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)("div", {
className: "edit-set edit-set-mt15",

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

@ -6,7 +6,8 @@ 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";
import PreviewPDF from '../../component/preview_pdf';
const REGISTED_IMAGE_ID = -100; //登録された画像を区別するために導入されます。
@ -281,14 +282,7 @@ 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>
<PreviewPDF pdf_url={pdf_url}></PreviewPDF>
</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/component/notification.jsx
ファイルの表示

@ -1,18 +0,0 @@
import React, { useEffect, useState } from 'react';
const Notification = () => {
return (
<div className="p-notification">
<div className="p-notification-icon">
<div className="p-notification-icon-wrap">
<div className="count">1</div>
<div className="p-notification-icon-bg"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.742 19.855" className="icon svg-icon svg-fill svg-y50" ><g fill="none" stroke="#080808" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" data-name="Icon feather-alert-triangle" transform="translate(0.777 0.75)"><path d="M11.188,5.322,2.6,19.659A2.028,2.028,0,0,0,4.334,22.7H21.51a2.028,2.028,0,0,0,1.734-3.042L14.656,5.322a2.028,2.028,0,0,0-3.468,0Z" data-name="パス 3" transform="translate(-2.328 -4.346)"/><path d="M18,13.5v6.91" data-name="パス 4" transform="translate(-7.406 -8.547)"/><path d="M18,25.5h0" data-name="パス 5" transform="translate(-7.406 -11.2)"/></g></svg>
</div>
</div>
</div>
)
}
export default Notification;

23
backend/resources/js/component/preview_pdf.jsx ノーマルファイル
ファイルの表示

@ -0,0 +1,23 @@
import React, { useEffect, useState } from 'react';
import { Document, Page} from "react-pdf";
const PreviewPDF = ({pdf_url}) => {
return (
<div className="p-file-for" style={{ height:'400px', marginTop:'15px' }}>
{
pdf_url &&
<Document file={pdf_url} loading={<></>}>
<Page
className={'position-relative'}
pageNumber={1}
height={400}
loading={<></>}
/>
</Document>
}
</div>
)
}
export default PreviewPDF;

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

@ -7,7 +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} from "react-pdf";
import PreviewPDF from '../../component/preview_pdf';
const MeetingAdd = (props) => {
@ -275,14 +275,7 @@ const MeetingAdd = (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>
<PreviewPDF pdf_url={pdf_url}></PreviewPDF>
</div>
<div className="edit-set edit-set-mt15">
<label className="edit-set-file-label" htmlFor={meeting_image.length < 10 ? 'file_image': ''}>

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

@ -9,7 +9,9 @@ import 'react-toastify/dist/ReactToastify.css';
import Alert from '../../component/alert';
import Notification from '../notification';
import { Document, Page} from "react-pdf";
import PreviewPDF from '../../component/preview_pdf';
const REGISTED_IMAGE_ID = -100; //登録された画像を区別するために導入されます。
@ -309,14 +311,7 @@ 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>
<PreviewPDF pdf_url={pdf_url}></PreviewPDF>
</div>
<div className="edit-set edit-set-mt15">
<label className="edit-set-file-label" htmlFor={meeting_image.length < 10 ? 'file_image': ''}>

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

@ -285,5 +285,3 @@ a{
.react-pdf__Page__canvas{
margin: auto;
}

2
backend/resources/sass/scss/object/project/_article.scss vendored
ファイルの表示

@ -99,6 +99,8 @@ categories: [project]
border: 1px solid rgba(36,77,138,.1);
border-radius: 6px;
margin-bottom: 15px;
width: 100%;
height: width;
figure{
height: 350px;
img{