Untitled
unknown
plain_text
a month ago
7.4 kB
4
Indexable
import { Button, CircularProgress, Fade, Typography } from '@mui/material'; import { Modal, Select } from 'antd'; import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { secureApi } from '../../Config/api'; import { errorMessage, getAllUsers, successMessage } from '../../utils/helpers'; const { Option } = Select; const ShareProjectModal = (props) => { const { open, setOpen, name, id, instruction, getProjects } = props; const [instructionSharedUser, setInstructionSharedUser] = useState([]); const [loading, setLoading] = useState(false); const user = useSelector((state) => state?.authReducer?.user); const guest = useSelector((state) => state?.authReducer?.guest); const IS_INDIVIDUAL = useSelector((state) => state?.appReducer?.IS_INDIVIDUAL); const DI_PROJECT_URL = useSelector((state) => state?.appReducer?.DI_PROJECT_URL); const [allUsers, setAllUsers] = useState([]); const owner_id = guest?.owner_id || user?.user_id; const user_id = guest?.id || owner_id; useEffect(() => { setInstructionSharedUser(instruction?.projectUsers?.map((v) => v?.user_id) || []); }, [open]); useEffect(() => { fetchUsers(); }, []); const fetchUsers = async () => { const fetchedUsers = await getAllUsers(false); console.log('fetchedUsers', fetchedUsers); setAllUsers(fetchedUsers); }; const handleChangeBox2 = (value) => { setInstructionSharedUser(value); }; const handleCloseModal = () => { setOpen(false); setInstructionSharedUser([]); }; const checkSharedUsers = () => { const currentSharedUsers = instruction?.projectUsers || []; console.log('currentSharedUsers', currentSharedUsers); console.log('instructionSharedUser', instructionSharedUser); const newSharedUsers = instructionSharedUser || []; if (!newSharedUsers?.length) { if (currentSharedUsers?.length) { shareProject("The user's access to the project has been removed!"); return; } else { return errorMessage('Please select the users to share the project!'); } } const hasChanges = currentSharedUsers?.length !== newSharedUsers?.length || currentSharedUsers?.some((user) => !newSharedUsers?.includes(user.user_id)) || newSharedUsers?.some((user_id) => !currentSharedUsers?.some((user) => user.user_id === user_id)); if (!hasChanges) { return errorMessage('Please choose a different user, or cancel!'); } if (!newSharedUsers?.length) { return errorMessage('Please select the users to share the project!'); } else { shareProject('The project has been successfully shared!'); } }; const shareProject = (message) => { setLoading(true); let obj = { project_id: id, shared_with: instructionSharedUser, }; secureApi .post(`${DI_PROJECT_URL}/api/v1.0/project/share`, obj, { withCredentials: true }) .then((data) => { if (data?.success) { setLoading(false); handleCloseModal(); getProjects(); successMessage(message); } else { setLoading(false); handleCloseModal(); errorMessage(data?.message); } }) .catch((err) => { console.log('err', err); setLoading(false); }); }; return ( <Modal aria-labelledby="spring-modal-title" aria-describedby="spring-modal-description" open={open} className="file_upload_modal_cont antd-ins-modal share-editor-modal" onClose={handleCloseModal} closeAfterTransition footer={null} destroyOnClose={true} onCancel={handleCloseModal} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', }} > <Fade style={{ width: '500px' }} in={open}> <div className="tab-section-dtl"> <div className="tab-section-dtl-sub b-noned"> <div className="custom_instruct"> <span style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', }} > <h4 className="people-access" style={{ fontWeight: '800' }}> Share {name} </h4> </span> </div> </div> <div className="select-user-dp" style={{ margin: '10px 0px' }}> <Select mode="multiple" className="selectoption" style={{ maxHeight: 100, borderRadius: '5px', width: '100%' }} value={instructionSharedUser} onChange={handleChangeBox2} placeholder="Select User" maxTagCount={'responsive'} filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} > {allUsers ?.filter((u) => u?.user_id !== user_id) ?.map((v, i) => { return ( <Option style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }} key={i} value={v?.id} > {v?.email} </Option> ); })} </Select> </div> <div> <h4 className="people-access">People with access</h4> <div style={{ maxHeight: '250px', minHeight: '150px', overflow: 'auto', }} > <div style={{ display: 'flex' }}> <div> <Typography sx={{ fontSize: 15 }}> <b>-</b> {user?.name} ({user?.email}) </Typography> </div> </div> {instruction?.projectUsers?.map((v, i) => { return ( <div style={{ display: 'flex' }}> <div> <Typography sx={{ fontSize: 15 }}> <b>-</b> {v?.user?.name} ({v?.user?.email}) </Typography> </div> </div> ); })} </div> </div> <div style={{ display: 'flex', justifyContent: 'flex-end' }}> <Button variant="outlined" style={{ marginRight: 6 }} onClick={handleCloseModal}> Cancel </Button> <Button loading={loading} variant="contained" style={{ marginRight: 6 }} onClick={checkSharedUsers}> {loading ? ( <> <CircularProgress size={20} style={{ color: 'white' }} /> Done </> ) : ( 'Done' )} </Button> </div> </div> </Fade> </Modal> ); }; export default ShareProjectModal;
Editor is loading...
Leave a Comment