From 1863990c4c3d0853b837402dc6aa02a4c36235be Mon Sep 17 00:00:00 2001 From: dragon1211 Date: Mon, 1 Nov 2021 23:24:42 +0900 Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=83=8F=E3=81=8C=E4=BD=95=E3=82=82?= =?UTF-8?q?=E3=81=AA=E3=81=84=E5=A0=B4=E5=90=88=E3=81=AF=E6=AD=A3=E6=96=B9?= =?UTF-8?q?=E5=BD=A2=E3=81=A7=E3=81=99=E3=80=82=E7=94=BB=E5=83=8F=E3=81=AF?= =?UTF-8?q?background-size:contain;=E3=81=A8=E5=90=8C=E3=81=98=E6=8C=99?= =?UTF-8?q?=E5=8B=95=E3=81=AB=E3=81=AA=E3=82=8A=E3=81=BE=E3=81=99=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/public/js/app.js | 55 ++++++++++++++----- backend/resources/js/admin/meeting/detail.jsx | 16 ++++-- 2 files changed, 52 insertions(+), 19 deletions(-) diff --git a/backend/public/js/app.js b/backend/public/js/app.js index 281f079c..5c43eb7e 100644 --- a/backend/public/js/app.js +++ b/backend/public/js/app.js @@ -37337,6 +37337,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope + var Transition = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.forwardRef(function Transition(props, ref) { return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_mui_material_Slide__WEBPACK_IMPORTED_MODULE_8__.default, _objectSpread({ direction: "up", @@ -37371,23 +37372,28 @@ var MeetingDetail = function MeetingDetail(props) { var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), _useState10 = _slicedToArray(_useState9, 2), - _400error = _useState10[0], - set400Error = _useState10[1]; + thumbnail = _useState10[0], + setThumbnail = _useState10[1]; var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), _useState12 = _slicedToArray(_useState11, 2), - _success = _useState12[0], - setSuccess = _useState12[1]; + _400error = _useState12[0], + set400Error = _useState12[1]; - var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), + var _useState13 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), _useState14 = _slicedToArray(_useState13, 2), - showPdf = _useState14[0], - setShowPdf = _useState14[1]; + _success = _useState14[0], + setSuccess = _useState14[1]; var _useState15 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), _useState16 = _slicedToArray(_useState15, 2), - showMemo = _useState16[0], - setShowMemo = _useState16[1]; + showPdf = _useState16[0], + setShowPdf = _useState16[1]; + + var _useState17 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), + _useState18 = _slicedToArray(_useState17, 2), + showMemo = _useState18[0], + setShowMemo = _useState18[1]; (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () { var _props$match$params; @@ -37413,6 +37419,7 @@ var MeetingDetail = function MeetingDetail(props) { denominator: total, numerator: num })); + if (list.meeting_image.length > 0) setThumbnail(list.meeting_image[0].image); } else if (response.data.status_code == 400) {//TODO } }); @@ -37615,23 +37622,41 @@ var MeetingDetail = function MeetingDetail(props) { className: "p-file-list", children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("div", { className: "p-file-for", - children: meeting.meeting_image[0] && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("figure", { - children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("img", { - src: meeting.meeting_image[0].image, - alt: meeting.meeting_image[0].image + children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("figure", { + style: { + height: '300px' + }, + children: thumbnail && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("img", { + src: thumbnail, + alt: "thumbnail", + style: { + width: '100%', + height: '100%', + objectFit: 'contain' + } }) }) }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", { className: "p-file-nav", children: [(_meeting$meeting_imag = meeting.meeting_image) === null || _meeting$meeting_imag === void 0 ? void 0 : _meeting$meeting_imag.map(function (x, k) { return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("figure", { + style: { + minWidth: '100px' + }, children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("img", { src: x.image, - alt: x.image + alt: x.image, + onClick: function onClick(e) { + return setThumbnail(x.image); + } }) }, k); }), _toConsumableArray(Array(10 - meeting.meeting_image.length)).map(function (x, k) { - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("figure", {}, k); + return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("figure", { + style: { + minWidth: '100px' + } + }, k); })] })] }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)("div", { diff --git a/backend/resources/js/admin/meeting/detail.jsx b/backend/resources/js/admin/meeting/detail.jsx index a3774920..08b26884 100644 --- a/backend/resources/js/admin/meeting/detail.jsx +++ b/backend/resources/js/admin/meeting/detail.jsx @@ -17,6 +17,7 @@ import Slide from '@mui/material/Slide'; import Alert from '../../component/alert'; import ModalPdf from '../../component/admin/pdf_modal_admin'; import ModalMemo from '../../component/admin/modal_memo'; +import { minWidth } from '@material-ui/system'; const Transition = React.forwardRef(function Transition(props, ref) { @@ -32,6 +33,7 @@ const MeetingDetail = (props) => { const [loaded, setLoaded] = useState(false); const [submit, setSubmit] = useState(false); const [meeting, setMeeting] = useState(null); + const [thumbnail, setThumbnail] = useState(''); const [_400error, set400Error] = useState(''); const [_success, setSuccess] = useState(''); @@ -57,6 +59,7 @@ const MeetingDetail = (props) => { } } setMeeting({...list, denominator:total, numerator:num}); + if(list.meeting_image.length > 0) setThumbnail(list.meeting_image[0].image); } else if(response.data.status_code==400){ //TODO } @@ -161,20 +164,25 @@ const MeetingDetail = (props) => {
+
{ - meeting.meeting_image[0] && -
{meeting.meeting_image[0].image}
+ thumbnail && + thumbnail } +
{ meeting.meeting_image?.map((x, k)=> -
{x.image}
+
+ {x.image}setThumbnail(x.image)}/> +
) } { [...Array(10-meeting.meeting_image.length)].map((x, k)=> -
+
) }