From 747ddfc08a50657265659ae2d82af8742e05d5f7 Mon Sep 17 00:00:00 2001 From: Santiago Palenque Date: Tue, 26 May 2026 14:27:19 -0300 Subject: [PATCH] fix: add preview modal en download func --- src/actions/sponsor-mu-actions.js | 4 +- src/components/mui/PreviewModal/index.jsx | 116 ++++++++++++++++++ src/i18n/en.json | 4 + .../tabs/sponsor-media-upload-tab/index.js | 41 +++++-- .../sponsors/sponsor-page-mu-list-reducer.js | 17 +-- src/utils/methods.js | 6 +- 6 files changed, 162 insertions(+), 26 deletions(-) create mode 100644 src/components/mui/PreviewModal/index.jsx diff --git a/src/actions/sponsor-mu-actions.js b/src/actions/sponsor-mu-actions.js index 99fedba58..d84b14514 100644 --- a/src/actions/sponsor-mu-actions.js +++ b/src/actions/sponsor-mu-actions.js @@ -55,7 +55,7 @@ export const getSponsorMURequests = const params = { page: currentPage, fields: - "id,name,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name", + "id,name,page_id,upload_deadline,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name", relations: "media_upload,file_type,add_ons", expand: "media_upload,file_type,add_ons", per_page: perPage, @@ -98,7 +98,7 @@ export const getGeneralMURequests = const params = { page: currentPage, fields: - "id,name,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name", + "id,name,page_id,upload_deadline,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name", relations: "media_upload,file_type,add_ons", expand: "media_upload,file_type,add_ons", per_page: perPage, diff --git a/src/components/mui/PreviewModal/index.jsx b/src/components/mui/PreviewModal/index.jsx new file mode 100644 index 000000000..b0cbd50a4 --- /dev/null +++ b/src/components/mui/PreviewModal/index.jsx @@ -0,0 +1,116 @@ +import React from "react"; +import PropTypes from "prop-types"; +import T from "i18n-react/dist/i18n-react"; +import { + Dialog, + DialogTitle, + DialogContent, + Box, + Typography, + IconButton +} from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; +import BrokenImageOutlinedIcon from "@mui/icons-material/BrokenImageOutlined"; +import { formatDate } from "../../../utils/methods"; + +const PreviewModal = ({ title, open, onClose, url, filename, uploadDate }) => ( + + + {title} + + ({ + position: "absolute", + right: 12, + top: 12, + color: theme.palette.grey[500] + })} + > + + + + + {url ? ( + + ) : ( + + + + )} + + + {filename && ( + + + {T.translate("preview_modal.file_name")} + + {filename} + + )} + {uploadDate && ( + + + {T.translate("preview_modal.uploaded")} + + {formatDate(uploadDate)} + + )} + + + +); + +PreviewModal.propTypes = { + title: PropTypes.string.isRequired, + open: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + url: PropTypes.string, + filename: PropTypes.string, + uploadDate: PropTypes.number +}; + +PreviewModal.defaultProps = { + url: null, + filename: "", + uploadDate: 0 +}; + +export default PreviewModal; diff --git a/src/i18n/en.json b/src/i18n/en.json index 6e09b6b04..37f8d0580 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -4211,5 +4211,9 @@ "country": "Country", "save": "Save", "cancel": "Cancel" + }, + "preview_modal": { + "file_name": "File name", + "uploaded": "Uploaded" } } diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-media-upload-tab/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-media-upload-tab/index.js index bd81e51d0..e227aade5 100644 --- a/src/pages/sponsors/sponsor-page/tabs/sponsor-media-upload-tab/index.js +++ b/src/pages/sponsors/sponsor-page/tabs/sponsor-media-upload-tab/index.js @@ -30,6 +30,7 @@ import CustomAlert from "../../../../../components/mui/custom-alert"; import { SPONSOR_MEDIA_UPLOAD_STATUS } from "../../../../../utils/constants"; import UploadDialog from "../../../../../components/upload-dialog"; import showConfirmDialog from "../../../../../components/mui/showConfirmDialog"; +import PreviewModal from "../../../../../components/mui/PreviewModal"; const SponsorMediaUploadTab = ({ sponsor, @@ -41,6 +42,7 @@ const SponsorMediaUploadTab = ({ removeFileForSponsorMU }) => { const [uploadModule, setUploadModule] = useState(null); + const [previewModule, setPreviewModule] = useState(null); useEffect(() => { getSponsorMURequests(); @@ -70,11 +72,17 @@ const SponsorMediaUploadTab = ({ }; const handleView = (item) => { - console.log("VIEW : ", item); + setPreviewModule(item); }; const handleDownload = (item) => { - console.log("DOWNLOAD : ", item); + if (item?.media_upload?.public_url) { + window.open( + item.media_upload.public_url, + "_blank", + "noopener,noreferrer" + ); + } }; const handleDelete = async (item) => { @@ -161,15 +169,18 @@ const SponsorMediaUploadTab = ({ header: "", width: 80, align: "center", - render: (row) => ( - handleView(row)} - > - - - ) + render: (row) => { + const isImage = row.media_upload?.file_mimetype.includes("image"); + return ( + handleView(row)} + > + + + ); + } }, { columnKey: "download", @@ -268,6 +279,14 @@ const SponsorMediaUploadTab = ({ }} maxFiles={1} /> + setPreviewModule(null)} + title={previewModule?.name} + filename={previewModule?.media_upload?.file_name} + uploadDate={previewModule?.media_upload?.file_created} + url={previewModule?.media_upload?.public_url} + /> ); }; diff --git a/src/reducers/sponsors/sponsor-page-mu-list-reducer.js b/src/reducers/sponsors/sponsor-page-mu-list-reducer.js index 1222680ee..3d7453395 100644 --- a/src/reducers/sponsors/sponsor-page-mu-list-reducer.js +++ b/src/reducers/sponsors/sponsor-page-mu-list-reducer.js @@ -13,7 +13,6 @@ import moment from "moment-timezone"; import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions"; -import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods"; import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions"; import { RECEIVE_GENERAL_MEDIA_UPLOADS, @@ -23,7 +22,7 @@ import { SPONSOR_MEDIA_UPLOAD_FILE_DELETED, SPONSOR_MEDIA_UPLOAD_FILE_UPLOADED } from "../../actions/sponsor-mu-actions"; -import { bytesToMb } from "../../utils/methods"; +import { bytesToMb, formatDate } from "../../utils/methods"; import { DEADLINE_ALERT_DAYS, SPONSOR_MEDIA_UPLOAD_STATUS @@ -71,11 +70,9 @@ const getStatus = (mediaObject) => { return status; }; -const mapMediaObject = (mediaObject, summitTZ) => { +const mapMediaObject = (mediaObject) => { const deadline = mediaObject.upload_deadline - ? epochToMomentTimeZone(mediaObject.upload_deadline, summitTZ)?.format( - "YYYY/MM/DD" - ) + ? formatDate(mediaObject.upload_deadline) : "N/A"; return { @@ -119,9 +116,7 @@ const sponsorPageMUListReducer = (state = DEFAULT_STATE, action) => { last_page: lastPage } = payload.response; - const requests = payload.response.data.map((a) => - mapMediaObject(a, state.summitTZ) - ); + const requests = payload.response.data.map(mapMediaObject); return { ...state, @@ -157,9 +152,7 @@ const sponsorPageMUListReducer = (state = DEFAULT_STATE, action) => { last_page: lastPage } = payload.response; - const requests = payload.response.data.map((a) => - mapMediaObject(a, state.summitTZ) - ); + const requests = payload.response.data.map(mapMediaObject); return { ...state, diff --git a/src/utils/methods.js b/src/utils/methods.js index 324c2a579..dd426a3dd 100644 --- a/src/utils/methods.js +++ b/src/utils/methods.js @@ -620,7 +620,11 @@ export const normalizeSelectAllField = ( }; }; -export const formatDate = (date, timeZone, format = DATETIME_FORMAT) => { +export const formatDate = ( + date, + timeZone = "LOC", + format = DATETIME_FORMAT +) => { if (timeZone === "LOC") { return moment(date * MILLISECONDS_TO_SECONDS).format(format); }