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 }) => (
+
+);
+
+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);
}