diff --git a/src/common/AddNewMember.jsx b/src/common/AddNewMember.jsx index 94a4194f..7b78f961 100644 --- a/src/common/AddNewMember.jsx +++ b/src/common/AddNewMember.jsx @@ -1,260 +1,294 @@ import { - Button, - Checkbox, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - FormControl, - Grid, - IconButton, - InputLabel, - ListItemText, - MenuItem, - OutlinedInput, - Select, - TextField, - Typography, - } from "@mui/material"; - import React, { useCallback, useEffect, useState } from "react"; - import CloseIcon from "@mui/icons-material/Close"; - import { MenuProps } from "utils"; - import { - APITransport, - CreateMemberAPI, - FetchOrganizationListAPI, - FetchUserRolesAPI, - setSnackBar, - } from "redux/actions"; - import { useDispatch, useSelector } from "react-redux"; - import { validateEmail } from "utils/utils"; - import CustomizedSnackbars from "./Snackbar"; - import Loader from "./Spinner"; - - const AddNewMember = ({ open, handleClose }) => { - const dispatch = useDispatch(); - - const [formFields, setFormFields] = useState({ - orgName: "", - email: "", - roles: [], - }); - const [errors, setErrors] = useState({ - email: false, - }); - const [loading, setLoading] = useState(false); - - const snackbar = useSelector((state) => state.commonReducer.snackbar); - const userRoles = useSelector((state) => state.getUserRoles.data); - const apiStatus = useSelector((state) => state.apiStatus); - - const getUserRolesList = () => { - const userObj = new FetchUserRolesAPI(); - dispatch(APITransport(userObj)); - }; - - useEffect(() => { - const { progress, success, apiType } = apiStatus; - - if (!progress) { - if (success) { - if (apiType === "CREATE_MEMBER") { - setLoading(false); - handleClose(); - - const apiObj = new FetchOrganizationListAPI(); - dispatch(APITransport(apiObj)); - } + Box, + Button, + Checkbox, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + FormControl, + Grid, + IconButton, + InputLabel, + ListItemText, + MenuItem, + OutlinedInput, + Select, + TextField, + Tooltip, + Typography, +} from "@mui/material"; +import React, { useCallback, useEffect, useState } from "react"; +import CloseIcon from "@mui/icons-material/Close"; +import { MenuProps } from "utils"; +import { + APITransport, + CreateMemberAPI, + FetchOrganizationListAPI, + FetchUserRolesAPI, + setSnackBar, +} from "redux/actions"; +import { useDispatch, useSelector } from "react-redux"; +import CustomizedSnackbars from "./Snackbar"; +import Loader from "./Spinner"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; + +const AddNewMember = ({ open, handleClose }) => { + const dispatch = useDispatch(); + + const [formFields, setFormFields] = useState({ + orgName: "", + email: "", + roles: [], + }); + const [loading, setLoading] = useState(false); + + const snackbar = useSelector((state) => state.commonReducer.snackbar); + const userRoles = useSelector((state) => state.getUserRoles.data); + const apiStatus = useSelector((state) => state.apiStatus); + const orgList = useSelector((state) => state.getOrganizationList.data); + + const getUserRolesList = () => { + const userObj = new FetchUserRolesAPI(); + dispatch(APITransport(userObj)); + }; + + const getOrgList = () => { + const apiObj = new FetchOrganizationListAPI(); + dispatch(APITransport(apiObj)); + }; + + useEffect(() => { + const { progress, success, apiType } = apiStatus; + + if (!progress) { + if (success) { + if (apiType === "CREATE_MEMBER") { + setLoading(false); + handleClose(); + + const apiObj = new FetchOrganizationListAPI(); + dispatch(APITransport(apiObj)); + } + } else { + if (apiType === "CREATE_MEMBER") { + handleClose(); } } - - // eslint-disable-next-line - }, [apiStatus]); - - useEffect(() => { - getUserRolesList(); - - // eslint-disable-next-line - }, []); - - const handleChange = (event) => { - const { - target: { name, value }, - } = event; - - if (name === "email") { - const emailValidation = validateEmail(value); - setErrors((prev) => { - return { - ...prev, - [name]: !emailValidation, - }; - }); - } - + } + + // eslint-disable-next-line + }, [apiStatus]); + + useEffect(() => { + getUserRolesList(); + getOrgList(); + + // eslint-disable-next-line + }, []); + + const handleChange = (event) => { + const { + target: { name, value }, + } = event; + + if (name === "orgName") { setFormFields((prev) => { return { ...prev, - [name]: value, + email: value.organization_owner.email, }; }); - }; - - const handleClear = () => { - setFormFields({ - orgName: "", - email: "", - roles: [], - }); - - setErrors({ - email: false, - }); - }; - - const handleSubmit = async () => { - setLoading(true); - - const { orgName, email, roles } = formFields; - - const apiObj = new CreateMemberAPI(orgName, email, roles); - dispatch(APITransport(apiObj)); - }; - - const disableForm = () => { - const { orgName, email, roles } = formFields; - - if (orgName === "" || email === "" || roles.length === 0) { - return true; - } - - return false; - }; - - const renderSnackBar = useCallback(() => { - return ( - - dispatch(setSnackBar({ open: false, message: "", variant: "" })) - } - anchorOrigin={{ vertical: "top", horizontal: "right" }} - variant={snackbar.variant} - message={[snackbar.message]} - /> - ); - - //eslint-disable-next-line - }, [snackbar]); - + } + + setFormFields((prev) => { + return { + ...prev, + [name]: value, + }; + }); + }; + + const handleClear = () => { + setFormFields({ + orgName: "", + email: "", + roles: [], + }); + }; + + const handleSubmit = async () => { + setLoading(true); + + const { orgName, email, roles } = formFields; + + const apiObj = new CreateMemberAPI(orgName, email, roles); + dispatch(APITransport(apiObj)); + }; + + const disableForm = () => { + const { orgName, email, roles } = formFields; + + if (orgName === "" || email === "" || roles.length === 0) { + return true; + } + + return false; + }; + + const renderSnackBar = useCallback(() => { return ( - <> - {renderSnackBar()} - - - Create New Members{" "} - - - - - - - - - + dispatch(setSnackBar({ open: false, message: "", variant: "" })) + } + anchorOrigin={{ vertical: "top", horizontal: "right" }} + variant={snackbar.variant} + message={[snackbar.message]} + /> + ); + + //eslint-disable-next-line + }, [snackbar]); + + return ( + <> + {renderSnackBar()} + + + Create New Members{" "} + + + + + + + + + + Organization Name* + } - renderValue={(selected) => - selected.map((obj) => obj.label).join(", ") - } - MenuProps={MenuProps} - > - {userRoles.map((role) => ( - - obj.value) - .indexOf(role.value) > -1 - } - /> - - - ))} - - - + input={} + MenuProps={MenuProps} + > + {orgList.map((org) => ( + + {org.title} + + ))} + + - - - - - - - - - - ); - }; - - export default AddNewMember; \ No newline at end of file + + + + + + + + + + Roles + + + + + + + + + + + + + + + + + + + + ); +}; + +export default AddNewMember; diff --git a/src/containers/Admin/CreateNewOrg.jsx b/src/containers/Admin/CreateNewOrg.jsx index bf7463f5..d33bdefc 100644 --- a/src/containers/Admin/CreateNewOrg.jsx +++ b/src/containers/Admin/CreateNewOrg.jsx @@ -29,6 +29,7 @@ import { FetchBulkTaskTypeAPI, FetchSupportedLanguagesAPI, } from "redux/actions"; +import { validateEmail } from "utils/utils"; const ITEM_HEIGHT = 48; const ITEM_PADDING_TOP = 8; @@ -67,6 +68,19 @@ const CreateNewOrg = () => { const [translationLanguage, setTranslationLanguage] = useState([]); const [voiceOverSourceType, setVoiceOverSourceType] = useState("MACHINE_GENERATED"); + const [orgOwners, setOrgOwners] = useState([]); + const [enableOwnerTextBox, setEnableOwnerTextBox] = useState(false); + const [orgOwnerEmail, setOrgOwnerEmail] = useState(""); + const [emailError, setEmailError] = useState(false); + + useEffect(() => { + const temp = [ + ...orgOwnerList, + { id: "createNewOwner", email: "+ Create New Org Owner" }, + ]; + + setOrgOwners(temp); + }, [orgOwnerList]); useEffect(() => { const { progress, success, apiType } = apiStatus; @@ -83,7 +97,7 @@ const CreateNewOrg = () => { }, [apiStatus]); const disableBtn = () => { - if (!title || !owner) { + if (!title) { return true; } @@ -94,6 +108,20 @@ const CreateNewOrg = () => { return true; } + if (enableOwnerTextBox) { + if (!orgOwnerEmail) { + return true; + } + } else { + if (!owner) { + return true; + } + } + + if (emailError) { + return true; + } + return false; }; @@ -120,7 +148,7 @@ const CreateNewOrg = () => { const reqBody = { title, email_domain_name: emailDomainName, - organization_owner: owner, + organization_owner: enableOwnerTextBox ? orgOwnerEmail : owner.id, default_transcript_type: transcriptSourceType, default_translation_type: translationSourceType, default_task_types: defaultTask.map((item) => item.value), @@ -132,6 +160,23 @@ const CreateNewOrg = () => { dispatch(APITransport(apiObj)); }; + const handleOrgOwnerChange = (value) => { + if (value.id === "createNewOwner") { + setOwner(""); + setEnableOwnerTextBox(true); + } else { + setEnableOwnerTextBox(false); + setOwner(value); + } + }; + + const handleChange = (value) => { + setOrgOwnerEmail(value); + + const emailValidation = validateEmail(value); + setEmailError(!emailValidation); + }; + return ( { @@ -165,7 +206,6 @@ const CreateNewOrg = () => { name="title" value={title} onChange={(e) => setTitle(e.target.value)} - InputLabelProps={{ shrink: true }} /> @@ -177,12 +217,12 @@ const CreateNewOrg = () => { id="demo-simple-select" value={owner} label="Owner" - onChange={(event) => setOwner(event.target.value)} + onChange={(event) => handleOrgOwnerChange(event.target.value)} MenuProps={MenuProps} > - {orgOwnerList.map((item, index) => { + {orgOwners.map((item, index) => { return ( - + {item.email} ); @@ -191,6 +231,21 @@ const CreateNewOrg = () => { + {enableOwnerTextBox && ( + + handleChange(e.target.value)} + error={emailError} + helperText={emailError ? "Invalid email" : ""} + /> + + )} + { name="emailDomainName" value={emailDomainName} onChange={(e) => setEmailDomainName(e.target.value)} - InputLabelProps={{ shrink: true }} /> diff --git a/src/containers/Organization/Project/CreateBulkProjects.jsx b/src/containers/Organization/Project/CreateBulkProjects.jsx index 8adb5c78..2126f6c3 100644 --- a/src/containers/Organization/Project/CreateBulkProjects.jsx +++ b/src/containers/Organization/Project/CreateBulkProjects.jsx @@ -115,7 +115,9 @@ const CreateBulkProjects = () => { }; const disableBtn = () => { - if (numberOfProjects !== projectNames.length) { + const projects = projectNames.filter((item) => item !== ""); + + if (numberOfProjects !== projects.length) { return true; }