Merge branch 'develop2' into merge-video

src/common/DeleteDialog.jsx

@@ -101,6 +101,7 @@ const DeleteDialog = ({
           Cancel
         </Button>
         <Button
+          color="error"
           variant="contained"
           onClick={() => submit()}
           autoFocus

src/common/TaskReopenDialog.jsx

@@ -0,0 +1,120 @@
+import React from "react";
+
+//Components
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Tooltip,
+} from "@mui/material";
+import Loader from "./Spinner";
+
+const headers = ["Video Id", "Task Type", "Target Language", "Video Name"];
+
+const TaskReopenDialog = ({
+  openDialog,
+  handleClose,
+  submit,
+  message,
+  loading,
+  taskReopenResponse,
+}) => {
+  return (
+    <Dialog
+      open={openDialog}
+      onClose={handleClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+      maxWidth={"md"}
+      PaperProps={{ style: { borderRadius: "10px" } }}
+    >
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {message}
+          <br/>
+          If you continue, corresponding Voice-Over task would be deleted.
+          {taskReopenResponse && (
+            <TableRow
+              style={{
+                borderLeft: `2px solid #E9F7EF`,
+                borderRight: `2px solid #E9F7EF`,
+                backgroundColor: "#fff",
+              }}
+            >
+              <TableCell colSpan={9} sx={{ borderBottom: "none" }}>
+                <Box>
+                  <Table size="large">
+                    <TableHead>
+                      <TableRow
+                        style={{
+                          height: "60px",
+                        }}
+                      >
+                        {headers.map((item, index) => {
+                          return (
+                            <TableCell key={index} sx={{ padding: "6px 16px" }}>
+                              {item}
+                            </TableCell>
+                          );
+                        })}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {taskReopenResponse.map((item, index) => {
+                        return (
+                          <TableRow
+                            key={index}
+                            style={{
+                              backgroundColor: "rgba(254, 191, 44, 0.1)",
+                              height: "60px",
+                            }}
+                          >
+                            <TableCell>{item.video_id}</TableCell>
+                            <TableCell>{item.task_type}</TableCell>
+                            <TableCell>
+                              {item.target_language}
+                            </TableCell>
+                            <TableCell>{item.video_name}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </Box>
+              </TableCell>
+            </TableRow>
+          )}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ p: "0 20px 20px 20px" }}>
+        <Button
+          variant="text"
+          onClick={handleClose}
+          sx={{ lineHeight: "1", borderRadius: "8px" }}
+        >
+          Cancel
+        </Button>
+            <Button
+            color="error"
+            variant="contained"
+            onClick={() => submit()}
+            autoFocus
+            sx={{ lineHeight: "1", borderRadius: "8px" }}
+            >
+            Reopen
+            {loading && <Loader size={20} margin="0 0 0 5px" color="secondary" />}
+            </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default TaskReopenDialog;

src/common/index.js

@@ -11,6 +11,7 @@ import CreateVideoDialog from "./CreateVideoDialog";
 import CustomMenuComponent from "./CustomMenuComponent";
 import CustomSwitchDarkBackground from "./CustomSwitchDarkBackground";
 import DeleteDialog from "./DeleteDialog";
+import TaskReopenDialog from "./TaskReopenDialog";
 import DeleteMemberErrorDialog from "./DeleteMemberErrorDialog";
 import ExportAllDialog from "./ExportAllDialog";
 import ExportDialog from "./ExportDialog";
@@ -58,6 +59,7 @@ export {
   CustomMenuComponent,
   CustomSwitchDarkBackground,
   DeleteDialog,
+  TaskReopenDialog,
   DeleteMemberErrorDialog,
   ExportAllDialog,
   ExportDialog,

src/config/tableColumns.js

@@ -500,14 +500,14 @@ export const taskQueueStatusColumns = [
 ];
 
 export const failInfoColumns = [
-  {
-    name: "index",
-    label: "Id",
-  },
   {
     name: "page_number",
     label: "Page Number",
   },
+  {
+    name: "index",
+    label: "Id",
+  },
   {
     name: "start_time",
     label: "Start Time",
@@ -524,17 +524,21 @@ export const failInfoColumns = [
     name: "target_text",
     label: "Target Text",
   },
+  {
+    name: "issue_type",
+    label: "Issue Type",
+  },
 ];
 
 export const failTranscriptionInfoColumns = [
-  {
-    name: "index",
-    label: "Id",
-  },
   {
     name: "page_number",
     label: "Page Number",
   },
+  {
+    name: "index",
+    label: "Id",
+  },
   {
     name: "start_time",
     label: "Start Time",
@@ -550,14 +554,14 @@ export const failTranscriptionInfoColumns = [
 ];
 
 export const voiceoverFailInfoColumns = [
-  {
-    name: "index",
-    label: "Id",
-  },
   {
     name: "page_number",
     label: "Page Number",
   },
+  {
+    name: "index",
+    label: "Id",
+  },
   {
     name: "reason",
     label: "Reason",

src/containers/Organization/Project/TaskList.jsx

@@ -46,6 +46,7 @@ import {
   UpdateBulkTaskDialog,
   UploadFormatDialog,
   ViewTaskDialog,
+  TaskReopenDialog,
 } from "common";
 
 //Icons
@@ -117,6 +118,10 @@ const TaskList = () => {
   const [uploadLoading, setUploadLoading] = useState([]);
   const [deleteMsg, setDeleteMsg] = useState("");
   const [deleteResponse, setDeleteResponse] = useState([]);
+
+  const [taskReopenMsg, setTaskReopenMsg] = useState("");
+  const [taskReopenResponse, setTaskReopenResponse] = useState([]);
+
   const [isSubmit, setIsSubmit] = useState(false);
 
   const [currentTaskDetails, setCurrentTaskDetails] = useState();
@@ -133,6 +138,7 @@ const TaskList = () => {
     uploadDialog: false,
     speakerInfoDialog: false,
     tableDialog: false,
+    TaskReopenDialog: false,
   });
   const [tableDialogMessage, setTableDialogMessage] = useState("");
   const [tableDialogResponse, setTableDialogResponse] = useState([]);
@@ -177,51 +183,6 @@ const TaskList = () => {
     (state) => state.getPreviewData?.data
   );
 
-  const reopenActionColumn = {
-    name: "Action",
-    label: "Actions",
-    options: {
-      filter: false,
-      sort: false,
-      align: "center",
-      setCellHeaderProps: () => ({
-        className: tableClasses.cellHeaderProps,
-      }),
-      customBodyRender: (_value, tableMeta) => {
-        const { tableData: data, rowIndex } = tableMeta;
-        const selectedTask = data[rowIndex];
-
-        return (
-          <Tooltip
-            placement="top"
-            title='Warning! VoiceOver cannot be recovered once deleted'
-            sx={{
-                color:'red',
-                display: "flex",
-                justifyContent: "flex-end",
-                alignItems: "center",
-            }}
-          >
-            <Button
-            color={'error'}
-            sx={{whiteSpace:'nowrap',display:'inline'}}
-            onClick={()=>{
-            {
-              console.log(tableMeta.rowData[0]);
-              console.log(setTableDialogColumn)
-              const reopenObj = new ReopenTaskAPI(reOpenTaskId,true);
-              dispatch(APITransport(reopenObj));
-            }
-            }
-            }>
-            Reopen
-            </Button>
-          </Tooltip>
-        );
-      },
-    },
-  };
-
   useEffect(() => {
     const { progress, success, apiType, data } = apiStatus;
     if (!progress) {
@@ -237,6 +198,11 @@ const TaskList = () => {
             fetchTaskList();
             break;
 
+          case "REOPEN_TASK":
+            handleDialogClose("TaskReopenDialog");
+            fetchTaskList();
+            break;
+
           case "GENERATE_TRANSLATION_OUTPUT":
             navigate(`/task/${currentTaskDetails?.id}/translate`);
             break;
@@ -295,10 +261,9 @@ const TaskList = () => {
 
         if (apiType === "REOPEN_TASK" && data.response) {
           dispatch(setSnackBar({ open: false }));
-          handleDialogOpen("tableDialog");
-          setTableDialogColumn([...reopenTableColumns,reopenActionColumn]);
-          setTableDialogMessage(data.message);
-          setTableDialogResponse(data.response);
+          handleDialogOpen("TaskReopenDialog");
+          setTaskReopenMsg(data.message);
+          setTaskReopenResponse(data.response);
         }
       }
     }
@@ -592,6 +557,14 @@ const TaskList = () => {
     handleDialogClose("deleteDialog");
   };
 
+  const handleTaskReopen = async () => {
+    setLoading(true);
+
+    const reopenObj = new ReopenTaskAPI(reOpenTaskId,true);
+    dispatch(APITransport(reopenObj));
+    handleDialogClose("TaskReopenDialog");
+  };
+
   const handlePreviewTask = async (videoId, taskType, targetlanguage) => {
     handleDialogOpen("previewDialog");
 
@@ -1105,6 +1078,17 @@ const TaskList = () => {
         />
       )}
 
+      {openDialogs.TaskReopenDialog && (
+        <TaskReopenDialog
+          openDialog={openDialogs.TaskReopenDialog}
+          handleClose={() => handleDialogClose("TaskReopenDialog")}
+          submit={() => handleTaskReopen()}
+          loading={apiStatus.loading}
+          message={taskReopenMsg}
+          taskReopenResponse={taskReopenResponse}
+        />
+      )}
+
       {openDialogs.editTaskDialog && (
         <UpdateBulkTaskDialog
           open={openDialogs.editTaskDialog}