Merge pull request #810 from AI4Bharat/develop2

Develop2 to master

src/common/AddOrganizationMember.jsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect } from "react";
+import { Fragment, useEffect,useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { MenuProps } from "utils";
 
@@ -38,13 +38,39 @@ const AddOrganizationMember = ({
   isAdmin,
 }) => {
   const dispatch = useDispatch();
+  const [inputValue, setInputValue] = useState("");
 
   const userRoles = useSelector((state) => state.getUserRoles.data);
 
   const getUserRolesList = () => {
     const userObj = new FetchUserRolesAPI();
     dispatch(APITransport(userObj));
   };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " " || event.key === ",") {
+      event.preventDefault();
+      if (inputValue.trim()) {
+        handleTextField((prev) => [...prev, inputValue.trim()]);
+        setInputValue("");
+      }
+    }
+  };
+  // const save =(event)=>{
+  //   if (inputValue.trim()) {
+  //     handleTextField((prev) => [...prev, inputValue.trim()]);
+  //     setInputValue("");
+  //   }
+  // }
+
+  // const handleAddButtonClick = async() => {
+  //   save();
+  //   await(handleTextField)
+  //   setTimeout(() => {
+  //     addBtnClickHandler();
+  //     handleUserDialogClose();
+  //   }, 1000);
+  // };
+
 
   useEffect(() => {
     getUserRolesList();
@@ -69,7 +95,10 @@ const AddOrganizationMember = ({
         <Typography variant="h4">{title}</Typography>
         <IconButton
           aria-label="close"
-          onClick={handleUserDialogClose}
+          onClick={()=>{
+            addBtnClickHandler()
+            handleUserDialogClose()
+          }}
           sx={{ marginLeft: "auto" }}
         >
           <CloseIcon />
@@ -82,10 +111,15 @@ const AddOrganizationMember = ({
           freeSolo
           id="add-members"
           value={textFieldValue}
-          onChange={(event) => {
-            event.target.value.trim().length &&
-              handleTextField((prev) => [...prev, event.target.value]);
+          onChange={(event, newValue, reason) => {
+            console.log("hello",event,newValue,reason);
+
+          }}
+          inputValue={inputValue}
+          onInputChange={(event, newInputValue) => {
+            setInputValue(newInputValue);
           }}
+          onKeyDown={handleKeyDown}
           options={[]}
           renderTags={(tagValue) => {
             return tagValue.map((option) => (
@@ -150,8 +184,8 @@ const AddOrganizationMember = ({
           variant="contained"
           sx={{ marginLeft: "10px", borderRadius: "8px" }}
           onClick={() => {
-            addBtnClickHandler();
-            handleUserDialogClose();
+            addBtnClickHandler()
+            handleUserDialogClose()
           }}
           disabled={textFieldLabel || selectFieldValue ? false : true}
         >

src/common/AddProjectMembers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-
+import { useSelector } from "react-redux";
 //Components
 import {
   Button,
@@ -30,6 +30,13 @@ const AddProjectMembers = ({
   handleSelectField,
   managerNames,
 }) => {
+  const alreadyExistingUsers = useSelector((state)=>state.
+  getProjectMembers.data);
+  console.log(alreadyExistingUsers);
+  const acceptedManagers = managerNames.filter((manager) =>manager.has_accepted_invite === true &&
+      !alreadyExistingUsers.some((user) => user.id === manager.id)
+  );
+  console.log(acceptedManagers)
   const filterOptions = (options, state) => {
     const newOptions = options.filter((user) => {
       const { first_name, last_name, email } = user;
@@ -72,7 +79,7 @@ const AddProjectMembers = ({
           <Autocomplete
             multiple
             id="add-project-member"
-            options={managerNames}
+            options={acceptedManagers}
             value={selectFieldValue}
             onChange={(_event, newValue) => {
               handleSelectField(newValue);

src/common/CreateTaskDialog.jsx

@@ -62,7 +62,7 @@ const CreateTaskDialog = ({
     (state) => state.getSupportedLanguages.voiceoverLanguage
   );
   const bulkTaskTypes = useSelector((state) => state.getBulkTaskTypes.data);
-
+const[langLabel,setlabel] =useState("")
   const [taskType, setTaskType] = useState("");
   const [description, setDescription] = useState("");
   const [user, setUser] = useState("");
@@ -72,7 +72,10 @@ const CreateTaskDialog = ({
   const [allowedTaskType, setAllowedTaskType] = useState("");
   const [showAllowedTaskList, setShowAllowedTaskList] = useState(false);
   const [showLimitWarning, setShowLimitWarning] = useState(false);
-
+  const [showPopup, setShowPopup] = useState(false);
+  const filteredMembers = projectMembers.filter((member) =>
+    member.languages.includes(langLabel)
+  );
   useEffect(() => {
     const taskObj = new FetchTaskTypeAPI();
     dispatch(APITransport(taskObj));
@@ -85,6 +88,15 @@ const CreateTaskDialog = ({
 
     // eslint-disable-next-line
   }, []);
+  useEffect(() => {
+    console.log(filteredMembers.length)
+    if (filteredMembers.length === 0) {
+      setShowPopup(true);
+    }
+    else{
+      setShowPopup(false)
+    }
+  }, [filteredMembers]);
 
   useEffect(() => {
     if (taskType.length && !taskType.includes("TRANSCRIPTION")) {
@@ -147,8 +159,13 @@ const CreateTaskDialog = ({
     const {
       target: { value },
     } = event;
-
+    const selectedLanguage = translationLanguage.find(
+      (lang) => lang.value === event.target.value
+    ) || voiceoverLanguage.find(
+      (lang) => lang.value === event.target.value
+    );
     setLanguage(value);
+    setlabel(selectedLanguage.label)
 
     if (isBulk) {
       const obj = new FetchProjectMembersAPI(projectId, taskType, "", value);
@@ -178,7 +195,7 @@ const CreateTaskDialog = ({
   };
 
   const disableBtn = () => {
-    if (!taskType || !allowedTaskType) {
+    if (!taskType || !allowedTaskType || !user) {
       return true;
     }
 
@@ -367,12 +384,49 @@ const CreateTaskDialog = ({
                 inputProps={{ "aria-label": "Without label" }}
                 disabled={isAssignUserDropdownDisabled()}
               >
-                {projectMembers.map((item, index) => (
-                  <MenuItem key={index} value={item}>
-                    {`${item.first_name} ${item.last_name} (${item.email})`}
-                  </MenuItem>
-                ))}
-              </Select>
+                {filteredMembers.map((item, index) => (
+      <MenuItem key={index} value={item}>
+        {`${item.first_name} ${item.last_name} (${item.email})`}
+      </MenuItem>
+    ))}
+
+    {showPopup && (
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: 9999,
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: 'white',
+            padding: '20px',
+            borderRadius: '8px',
+            textAlign: 'center',
+            position: 'relative',
+            minWidth: '300px',
+          }}
+        >
+          <p>Please add a user for the task language</p>
+          <Button
+            style={{ marginTop: '10px' }}
+            onClick={() => setShowPopup(false)}
+            variant="contained"
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    )}
+            </Select>
             </FormControl>
           </Box>
 

src/common/CreateVideoDialog.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { MenuProps } from "utils";
 
@@ -78,6 +78,14 @@ const CreateVideoDialog = ({
     (state) => state.getSupportedLanguages.transcriptionLanguage
   );
 
+  const videosInProject = useSelector((state)=>state.getProjectVideoList.data)
+  const [showPopup, setShowPopup] = useState(false);
+  useEffect(() => {
+    if (videosInProject.some((video) => video.url === videoLink)) {
+      setShowPopup(true);
+    }
+  }, [videoLink, videosInProject]);
+
   const handleClear = () => {
     setLang("");
     setVideoLink("");
@@ -241,6 +249,55 @@ const CreateVideoDialog = ({
           onChange={(event) => setVideoLink(event.target.value)}
           sx={{ mt: 3 }}
         />
+        {showPopup && (
+  <div
+    style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 9999,
+    }}
+  >
+    <div
+      style={{
+        backgroundColor: 'white',
+        padding: '20px',
+        borderRadius: '8px',
+        textAlign: 'center',
+        position: 'relative',
+        minWidth: '300px',
+      }}
+    >
+      <p>This video already exists in the project. Do you want to upload it again?</p>
+      <Button
+                  style={{ marginRight: "10px" }}
+                  // className={classes.projectButton}
+                  onClick={()=>setShowPopup(false)}
+                  variant="contained"
+                >
+                  Yes
+                </Button>
+
+                <Button
+                  style={{ marginRight: "10px" }}
+                  // className={classes.projectButton}
+                  onClick={()=>{setShowPopup(false)
+                    setVideoLink("")
+                  }}
+                  variant="contained"
+                >
+                  No
+                </Button>
+    </div>
+  </div>
+)}
+
 
         <FormControl fullWidth sx={{ mt: 3 }}>
           <InputLabel id="select-voice">Voice Selection</InputLabel>

src/common/DeleteDialog.jsx

@@ -101,13 +101,13 @@ const DeleteDialog = ({
           Cancel
         </Button>
         <Button
-          color="error"
+          color="info"
           variant="contained"
           onClick={() => submit()}
           autoFocus
           sx={{ lineHeight: "1", borderRadius: "8px" }}
         >
-          Delete
+          confirm
           {loading && <Loader size={20} margin="0 0 0 5px" color="secondary" />}
         </Button>
       </DialogActions>

src/common/DeleteTaskDialog.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+} from "@mui/material";
+
+const DeleteTaskDialog = ({
+  openDialog,
+  handleClose,
+  submit,
+}) => {
+  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">
+          Do you really want to delete this task?
+        </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" }}
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteTaskDialog;