From 3405317a63600c96bd5c7efbff1f24cdacfedefb Mon Sep 17 00:00:00 2001 From: harsh12-99 Date: Thu, 29 Feb 2024 12:52:07 +0530 Subject: [PATCH] added drag and drop in bulk video upload --- public/expected_glossary_input.csv | 2 ++ .../Organization/MyOrganization.jsx | 32 ++++++++++------- .../Organization/Project/Project.jsx | 32 ++++++++++------- src/containers/UserManagement/MyGlossary.jsx | 36 ++++++++++++------- 4 files changed, 64 insertions(+), 38 deletions(-) create mode 100644 public/expected_glossary_input.csv diff --git a/public/expected_glossary_input.csv b/public/expected_glossary_input.csv new file mode 100644 index 00000000..43c21c00 --- /dev/null +++ b/public/expected_glossary_input.csv @@ -0,0 +1,2 @@ +Email Id,Source Text,Target Text,Source Language,Target Language +shrgupta01@gmail.com,Python,अजगर,en,hi diff --git a/src/containers/Organization/MyOrganization.jsx b/src/containers/Organization/MyOrganization.jsx index 96eccfae..e8cd4581 100644 --- a/src/containers/Organization/MyOrganization.jsx +++ b/src/containers/Organization/MyOrganization.jsx @@ -1,5 +1,5 @@ //My Organization -import { Fragment, useEffect, useRef, useState } from "react"; +import { Fragment, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate, useParams } from "react-router-dom"; import { roles } from "utils"; @@ -36,6 +36,7 @@ import OrganizationReport from "./OrganizationReport"; import ProjectList from "./ProjectList"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import { AddOrganizationMember, AlertComponent, Loader } from "common"; +import UploadFileDialog from "common/UploadFileDialog"; const TabPanel = (props) => { const { children, value, index, ...other } = props; @@ -58,7 +59,6 @@ const MyOrganization = () => { const dispatch = useDispatch(); const classes = DatasetStyle(); const navigate = useNavigate(); - const csvUpload = useRef(); const [value, setValue] = useState(0); const [addUserDialog, setAddUserDialog] = useState(false); @@ -69,6 +69,8 @@ const MyOrganization = () => { const [alertMessage, setAlertMessage] = useState(""); const [alertColumn, setAlertColumn] = useState([]); const [orgOwnerId, setOrgOwnerId] = useState(""); + const [openUploadBulkVideoDialog, setOpenUploadBulkVideoDialog] = + useState(false); const organizationDetails = useSelector( (state) => state.getOrganizationDetails.data @@ -83,6 +85,10 @@ const MyOrganization = () => { if (!progress) { if (success) { + if (apiType === "UPLOAD_CSV") { + setOpenUploadBulkVideoDialog(false); + } + if (apiType === "GET_USERS_ROLES") { setNewMemberName([]); setNewMemberRole(""); @@ -95,6 +101,7 @@ const MyOrganization = () => { setAlertData(data.response); setAlertMessage(data.message); setAlertColumn("csvAlertColumns"); + setOpenUploadBulkVideoDialog(false); } } } @@ -242,7 +249,7 @@ const MyOrganization = () => { style={{ marginLeft: "10px" }} className={classes.projectButton} variant="contained" - onClick={() => csvUpload.current.click()} + onClick={() => setOpenUploadBulkVideoDialog(true)} > Bulk Video Upload @@ -258,16 +265,6 @@ const MyOrganization = () => { - { - handeFileUpload(event.target.files); - event.target.value = null; - }} - /> )} @@ -359,6 +356,15 @@ const MyOrganization = () => { columns={alertColumn} /> )} + + {openUploadBulkVideoDialog && ( + setOpenUploadBulkVideoDialog(false)} + title={"Upload Bulk Videos"} + handleSubmit={handeFileUpload} + /> + )} ); }; diff --git a/src/containers/Organization/Project/Project.jsx b/src/containers/Organization/Project/Project.jsx index 808ecd70..4051ea18 100644 --- a/src/containers/Organization/Project/Project.jsx +++ b/src/containers/Organization/Project/Project.jsx @@ -1,5 +1,5 @@ //My Organization -import { useEffect, useState, useRef } from "react"; +import { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate, useParams } from "react-router-dom"; import moment from "moment/moment"; @@ -48,6 +48,7 @@ import { CreateVideoDialog, Loader, } from "common"; +import UploadFileDialog from "common/UploadFileDialog"; const TabPanel = (props) => { const { children, value, index, ...other } = props; @@ -70,7 +71,6 @@ const Project = () => { const dispatch = useDispatch(); const classes = DatasetStyle(); const navigate = useNavigate(); - const csvUpload = useRef(); const [addmembers, setAddmembers] = useState([]); const [addUserDialog, setAddUserDialog] = useState(false); @@ -102,6 +102,8 @@ const Project = () => { const [alertColumn, setAlertColumn] = useState(""); const [orgOwnerId, setOrgOwnerId] = useState(""); const [tabIndex, setTabIndex] = useState(0); + const [openUploadBulkVideoDialog, setOpenUploadBulkVideoDialog] = + useState(false); const projectInfo = useSelector((state) => state.getProjectDetails.data); const projectvideoList = useSelector( @@ -130,6 +132,10 @@ const Project = () => { getProjectMembers(); } + if (apiType === "UPLOAD_CSV") { + setOpenUploadBulkVideoDialog(false); + } + if (apiType === "CREATE_NEW_VIDEO") { dispatch(setSnackBar({ open: false })); setShowAlert(true); @@ -145,6 +151,7 @@ const Project = () => { setAlertMessage(data.message); setAlertData(data.response); setAlertColumn("csvAlertColumns"); + setOpenUploadBulkVideoDialog(false); } } } @@ -397,7 +404,7 @@ const Project = () => { style={{ marginLeft: "10px" }} className={classes.projectButton} variant="contained" - onClick={() => csvUpload.current.click()} + onClick={() => setOpenUploadBulkVideoDialog(true)} > Bulk Video Upload @@ -413,16 +420,6 @@ const Project = () => { - { - handeFileUpload(event.target.files); - event.target.value = null; - }} - /> )} @@ -543,6 +540,15 @@ const Project = () => { columns={alertColumn} /> )} + + {openUploadBulkVideoDialog && ( + setOpenUploadBulkVideoDialog(false)} + title={"Upload Bulk Videos"} + handleSubmit={handeFileUpload} + /> + )} ); }; diff --git a/src/containers/UserManagement/MyGlossary.jsx b/src/containers/UserManagement/MyGlossary.jsx index a50d7403..45a3ebb8 100644 --- a/src/containers/UserManagement/MyGlossary.jsx +++ b/src/containers/UserManagement/MyGlossary.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getColumns, getOptions } from "utils"; import MUIDataTable from "mui-datatables"; @@ -22,13 +22,13 @@ import DeleteIcon from "@mui/icons-material/Delete"; import { DatasetStyle, TableStyles } from "styles"; import GlossaryDialog from "common/GlossaryDialog"; import UploadFileDialog from "common/UploadFileDialog"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; const MyGlossary = () => { const classes = DatasetStyle(); const tableClasses = TableStyles(); const dispatch = useDispatch(); - const csvUpload = useRef(); const [openGlossaryDialog, setOpenGlossaryDialog] = useState(false); const [openUploadGlossaryDialog, setOpenUploadGlossaryDialog] = @@ -155,6 +155,20 @@ const MyGlossary = () => { reader.readAsBinaryString(file[0]); }; + const handleSampleDownload = (event) => { + event.stopPropagation(); + + const link = document.createElement("a"); + + link.href = "expected_glossary_input.csv"; + link.download = "expected_glossary_input.csv"; + + document.body.appendChild(link); + + link.click(); + document.body.removeChild(link); + }; + return ( @@ -191,17 +205,15 @@ const MyGlossary = () => { onClick={() => setOpenUploadGlossaryDialog(true)} > Upload Glossary + + handleSampleDownload(e)} + sx={{ color: "white" }} + > + + + - { - uploadGlossary(event.target.files); - event.target.value = null; - }} - /> )}