From eb0ae7e11ccab5369bbe5f7879883fb8dc90a1dc Mon Sep 17 00:00:00 2001 From: dragon1211 Date: Sat, 18 Dec 2021 11:16:16 -0800 Subject: [PATCH] add pdf-preview.jsx --- backend/public/css/app.css | 2 + backend/public/js/app.js | 107 +++++++++--------- backend/resources/js/admin/meeting/edit.jsx | 12 +- .../resources/js/component/notification.jsx | 18 --- .../resources/js/component/preview_pdf.jsx | 23 ++++ backend/resources/js/parent/meeting/add.jsx | 11 +- backend/resources/js/parent/meeting/edit.jsx | 13 +-- backend/resources/sass/layouts/_main.scss | 2 - .../sass/scss/object/project/_article.scss | 2 + 9 files changed, 89 insertions(+), 101 deletions(-) delete mode 100644 backend/resources/js/component/notification.jsx create mode 100644 backend/resources/js/component/preview_pdf.jsx diff --git a/backend/public/css/app.css b/backend/public/css/app.css index bf489b70..e37d25ca 100644 --- a/backend/public/css/app.css +++ b/backend/public/css/app.css @@ -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; diff --git a/backend/public/js/app.js b/backend/public/js/app.js index fbe7caa8..12fa69ec 100644 --- a/backend/public/js/app.js +++ b/backend/public/js/app.js @@ -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", diff --git a/backend/resources/js/admin/meeting/edit.jsx b/backend/resources/js/admin/meeting/edit.jsx index e9d00751..eec7f868 100644 --- a/backend/resources/js/admin/meeting/edit.jsx +++ b/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} } -
- { - pdf_url && - }> - } height={300}/> - - } -
+