diff --git a/src/app/new-project/newproject.js b/src/app/new-project/newproject.js index 92b7db1e..17d00d95 100644 --- a/src/app/new-project/newproject.js +++ b/src/app/new-project/newproject.js @@ -1,7 +1,7 @@ -'use client' +"use client"; import React, { useEffect, useState } from "react"; -import { useRouter } from 'next/navigation'; +import { useRouter } from "next/navigation"; import MUIDataTable from "mui-datatables"; import { Box, @@ -17,33 +17,37 @@ import { InputAdornment, Switch, InputLabel, - TextField + TextField, } from "@mui/material"; import SearchIcon from "@mui/icons-material/Search"; import CancelIcon from "@mui/icons-material/Cancel"; import { useDispatch, useSelector } from "react-redux"; import { MenuProps } from "@/utils/utils"; import { useParams } from "react-router-dom"; -import { createProject, setPasswordForProject } from "@/Lib/Features/actions/projects"; + +import { + createProject, + setPasswordForProject, +} from "@/Lib/Features/actions/projects"; import { useNavigate } from "react-router-dom"; import ColumnList from "@/components/common/ColumnList"; import { snakeToTitleCase } from "@/utils/utils"; import OutlinedTextField from "@/components/common/OutlinedTextField"; import Button from "@/components/common/Button"; import MenuItems from "@/components/common/MenuItems"; -import "@/styles/Dataset.css"; +import "../../styles/Dataset.css"; import themeDefault from "@/themes/theme"; import tableTheme from "@/themes/tableTheme"; import { fetchDomains } from "@/Lib/Features/actions/domains"; import { fetchDatasetByType } from "@/Lib/Features/datasets/getDatasetByType"; import { fetchDatasetSearchPopup } from "@/Lib/Features/datasets/DatasetSearchPopup"; -import {fetchLanguages} from "@/Lib/Features/fetchLanguages"; +import { fetchLanguages } from "@/Lib/Features/fetchLanguages"; import DatasetSearchPopup from "@/components/datasets/DatasetSearchPopup"; import { fetchDataitemsById } from "@/Lib/Features/datasets/GetDataitemsById"; import { fetchWorkspaceDetails } from "@/Lib/Features/getWorkspaceDetails"; import { Visibility, VisibilityOff } from "@mui/icons-material"; -import UploadIcon from '@mui/icons-material/Upload'; -import sampleQuestion from './sampleQue'; +import UploadIcon from "@mui/icons-material/Upload"; +import sampleQuestion from "./sampleQue"; const isNum = (str) => { var reg = new RegExp("^[0-9]*$"); return reg.test(String(str)); @@ -52,34 +56,34 @@ const isNum = (str) => { const projectStage = [ { name: "Annotation Stage", value: 1 }, { name: "Review Stage", value: 2 }, - { name: "Super-Check Stage", value: 3 } + { name: "Super-Check Stage", value: 3 }, ]; const CreateAnnotationsAutomatically = [ { name: "None", value: "none" }, { name: "Annotation", value: "annotation" }, { name: "Review", value: "review" }, - { name: "Supercheck", value: "supercheck" } + { name: "Supercheck", value: "supercheck" }, ]; - const CreateProject = () => { - /* eslint-disable react-hooks/exhaustive-deps */ + /* eslint-disable react-hooks/exhaustive-deps */ const router = useRouter(); const dispatch = useDispatch(); const { id } = useParams(); //const { workspaceId } = useParams(); - const ProjectDomains = useSelector(state => state.domains?.domains); - const ProjectDomains1 = useSelector(state => console.log(state)); + const ProjectDomains = useSelector((state) => state.domains?.domains); + const ProjectDomains1 = useSelector((state) => console.log(state)); const DatasetInstances = useSelector((state) => state.getDatasetByType.data); // const DatasetFields = useSelector((state) => state.getDatasetFields.data); - const LanguageChoices = useSelector((state) => state.getLanguages.data?.language); + const LanguageChoices = useSelector( + (state) => state.getLanguages.data?.language, + ); const DataItems = useSelector((state) => state.GetDataitemsById.data); - const NewProject = useSelector(state => state.projects.newProject?.res); - const UserData = useSelector(state => state.getLoggedInData.data); + const NewProject = useSelector((state) => state.projects.newProject?.res); + const UserData = useSelector((state) => state.getLoggedInData.data); const navigate = useNavigate(); - const [domains, setDomains] = useState([]); const [projectTypes, setProjectTypes] = useState(null); @@ -105,9 +109,11 @@ const CreateProject = () => { const [selectedAnnotatorsNum, setSelectedAnnotatorsNum] = useState(1); const [filterString, setFilterString] = useState(null); const [selectedVariableParameters, setSelectedVariableParameters] = useState( - [] + [], + ); + const workspaceDtails = useSelector( + (state) => state.getWorkspaceDetails.data, ); - const workspaceDtails = useSelector(state => state.getWorkspaceDetails.data); const [taskReviews, setTaskReviews] = useState(1); const [variable_Parameters_lang, setVariable_Parameters_lang] = useState(""); //Table related state variables @@ -120,40 +126,44 @@ const CreateProject = () => { const [searchAnchor, setSearchAnchor] = useState(null); const [is_published, setIsPublished] = useState(false); const [selectedFilters, setsSelectedFilters] = useState({}); - const [createannotationsAutomatically, setsCreateannotationsAutomatically] = useState("none"); + const [createannotationsAutomatically, setsCreateannotationsAutomatically] = + useState("none"); const [passwordForProjects, setPasswordForProjects] = useState(""); const [shownewpassword, setShowNewPassword] = useState(false); const [csvFile, setCsvFile] = useState(null); - const [jsonInput, setJsonInput] = useState(JSON.stringify(sampleQuestion)); - const [questionsJSON, setQuestionsJSON] = useState(sampleQuestion); - + const [jsonInput, setJsonInput] = useState(JSON.stringify(sampleQuestion)); + const [questionsJSON, setQuestionsJSON] = useState(sampleQuestion); + const handleJsonInputChange = (event) => { const input = event.target.value; - setJsonInput(input); + setJsonInput(input); try { - const parsedInput = JSON.parse(input); - if (Array.isArray(parsedInput) && parsedInput.every(item => typeof item === 'object' && item !== null)) { - setQuestionsJSON(parsedInput); + const parsedInput = JSON.parse(input); + if ( + Array.isArray(parsedInput) && + parsedInput.every((item) => typeof item === "object" && item !== null) + ) { + setQuestionsJSON(parsedInput); } else { console.error("Input is not a valid array of objects"); } } catch (error) { - console.error("Invalid JSON input"); + console.error("Invalid JSON input"); } }; - + const handleCsvUpload = (event) => { const file = event.target.files[0]; - + if (file) { const reader = new FileReader(); reader.onload = (e) => { const csvData = e.target.result; - + try { - const csvJson = convertCsvToJson(csvData); - setJsonInput(JSON.stringify(csvJson, null, 2)); - setQuestionsJSON(csvJson); + const csvJson = convertCsvToJson(csvData); + setJsonInput(JSON.stringify(csvJson, null, 2)); + setQuestionsJSON(csvJson); } catch (error) { console.error("Error parsing CSV:", error); } @@ -161,11 +171,11 @@ const CreateProject = () => { reader.readAsText(file); } }; - + const convertCsvToJson = (csvData) => { - const rows = csvData.split("\n").filter(row => row.trim() !== ""); - const headers = rows[0].split(","); - return rows.slice(1).map(row => { + const rows = csvData.split("\n").filter((row) => row.trim() !== ""); + const headers = rows[0].split(","); + return rows.slice(1).map((row) => { const values = row.split(","); let obj = {}; headers.forEach((header, index) => { @@ -174,14 +184,13 @@ const CreateProject = () => { return obj; }); }; - useEffect(() => { - console.log('questionsJSON:', questionsJSON); - console.log('typeof questionsJSON:', typeof questionsJSON); - console.log('Array.isArray(questionsJSON):', Array.isArray(questionsJSON)); + useEffect(() => { + console.log("questionsJSON:", questionsJSON); + console.log("typeof questionsJSON:", typeof questionsJSON); + console.log("Array.isArray(questionsJSON):", Array.isArray(questionsJSON)); }, [questionsJSON]); - - - console.log("questions json: " + typeof questionsJSON); + + console.log("questions json: " + typeof questionsJSON); const handleFileChange = (event) => { const file = event.target.files[0]; if (file) { @@ -189,96 +198,111 @@ const CreateProject = () => { parseCSV(file); } }; - + const parseCSV = (file) => { const reader = new FileReader(); - + reader.onload = (event) => { const content = event.target.result; - const lines = content.split('\n').filter(line => line.trim() !== ''); - const headers = lines[0].split(',').map(header => header.trim()); - - const jsonData = lines.slice(1).map(line => { + const lines = content.split("\n").filter((line) => line.trim() !== ""); + const headers = lines[0].split(",").map((header) => header.trim()); + + const jsonData = lines.slice(1).map((line) => { const values = []; let insideArray = false; let insideQuotes = false; - let currentVal = ''; + let currentVal = ""; let escape = false; - + for (let i = 0; i < line.length; i++) { const char = line[i]; - - if (char === '\\' && !escape) { + + if (char === "\\" && !escape) { escape = true; continue; } - + if (char === '"') { insideQuotes = !insideQuotes; } - - if (char === '[') { + + if (char === "[") { insideArray = true; - } else if (char === ']') { + } else if (char === "]") { insideArray = false; } - - if (char === ',' && !insideArray && !insideQuotes && !escape) { + + if (char === "," && !insideArray && !insideQuotes && !escape) { let value = currentVal.trim(); - if (value.startsWith('"') && value.endsWith('"') && !value.startsWith('""')) { - value = value.slice(1, -1); + if ( + value.startsWith('"') && + value.endsWith('"') && + !value.startsWith('""') + ) { + value = value.slice(1, -1); } - if (value.startsWith('[') && value.endsWith(']')) { + if (value.startsWith("[") && value.endsWith("]")) { value = value.replace(/""/g, '"'); try { - values.push(JSON.parse(value)); + values.push(JSON.parse(value)); } catch { - values.push(value); + values.push(value); } } else { value = value.replace(/\\"/g, '"'); - if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') { - values.push(value.toLowerCase() === 'true'); + if ( + value.toLowerCase() === "true" || + value.toLowerCase() === "false" + ) { + values.push(value.toLowerCase() === "true"); } else { values.push(value); } - } - currentVal = ''; + currentVal = ""; } else { currentVal += char; escape = false; } } - + let lastValue = currentVal.trim(); - if (lastValue.startsWith('"') && lastValue.endsWith('"') && !lastValue.startsWith('""')) { + if ( + lastValue.startsWith('"') && + lastValue.endsWith('"') && + !lastValue.startsWith('""') + ) { lastValue = lastValue.slice(1, -1); } - if (lastValue.startsWith('[') && lastValue.endsWith(']')) { + if (lastValue.startsWith("[") && lastValue.endsWith("]")) { lastValue = lastValue.replace(/""/g, '"'); try { values.push(JSON.parse(lastValue)); } catch { - values.push(lastValue); + values.push(lastValue); } } else { - lastValue = lastValue.replace(/\\"/g, '"'); - if (lastValue.toLowerCase() === 'true' || lastValue.toLowerCase() === 'false') { - values.push(lastValue.toLowerCase() === 'true'); + lastValue = lastValue.replace(/\\"/g, '"'); + if ( + lastValue.toLowerCase() === "true" || + lastValue.toLowerCase() === "false" + ) { + values.push(lastValue.toLowerCase() === "true"); } else { values.push(lastValue); } - } - + return headers.reduce((obj, header, index) => { obj[header] = values[index]; return obj; }, {}); }); - - if (Array.isArray(jsonData) && jsonData.every(item => typeof item === 'object' && item !== null)) { + + if ( + Array.isArray(jsonData) && + jsonData.every((item) => typeof item === "object" && item !== null) + ) { console.log("Parsed JSON Data is an array of objects:", jsonData); setQuestionsJSON(jsonData); } else { @@ -286,7 +310,11 @@ const CreateProject = () => { } if (Array.isArray(questionsJSON)) { console.log("questionsJSON is an array"); - if (questionsJSON.every(item => typeof item === 'object' && item !== null)) { + if ( + questionsJSON.every( + (item) => typeof item === "object" && item !== null, + ) + ) { console.log("questionsJSON is an array of objects"); } else { console.log("questionsJSON is not an array of objects"); @@ -295,14 +323,13 @@ const CreateProject = () => { console.log("questionsJSON is not an array"); } }; - + reader.readAsText(file); }; - - if(questionsJSON[0]?.mandatory) console.log("this is true") + if (questionsJSON[0]?.mandatory) console.log("this is true"); else console.log("this is false"); - /* eslint-disable react-hooks/exhaustive-deps */ + /* eslint-disable react-hooks/exhaustive-deps */ const searchOpen = Boolean(searchAnchor); const excludeKeys = [ "parent_data_id", @@ -320,19 +347,18 @@ const CreateProject = () => { "rating", ]; - const getWorkspaceDetails = ()=>{ + const getWorkspaceDetails = () => { dispatch(fetchWorkspaceDetails(id)); - } - - - useEffect(()=>{ + }; + + useEffect(() => { getWorkspaceDetails(); - },[]); + }, []); //Fetch and display Project Domains useEffect(() => { // if(ProjectDomains.status !== "succeeded") - dispatch(fetchDomains()); + dispatch(fetchDomains()); }, []); const onSelectDomain = (value) => { setSelectedDomain(value); @@ -360,8 +386,16 @@ const CreateProject = () => { align: "center", customHeadLabelRender: customColumnHead, customBodyRender: (value) => { - if ((keys == "metadata_json" || keys == "prediction_json" || keys == "ocr_prediction_json" || keys == "transcribed_json" || keys == "draft_data_json" || keys == "ocr_transcribed_json") && value !== null) { - const data = JSON.stringify(value) + if ( + (keys == "metadata_json" || + keys == "prediction_json" || + keys == "ocr_prediction_json" || + keys == "transcribed_json" || + keys == "draft_data_json" || + keys == "ocr_transcribed_json") && + value !== null + ) { + const data = JSON.stringify(value); const metadata = data.replace(/\\/g, ""); return metadata; } else { @@ -378,7 +412,6 @@ const CreateProject = () => { setSelectedColumns(tempSelected); }, [DataItems]); - useEffect(() => { if (LanguageChoices && LanguageChoices.length > 0) { let temp = []; @@ -391,7 +424,7 @@ const CreateProject = () => { setLanguageOptions(temp); } }, [LanguageChoices]); - useEffect(() => { + useEffect(() => { if (UserData) { const tempDomains = []; const tempTypes = {}; @@ -405,16 +438,16 @@ const CreateProject = () => { tempTypesArr.push(project_type); if ( ProjectDomains[domain]["project_types"][project_type][ - "input_dataset" + "input_dataset" ] ) { tempDatasetTypes[project_type] = ProjectDomains[domain]["project_types"][project_type][ - "input_dataset" + "input_dataset" ]["class"]; tempColumnFields[project_type] = ProjectDomains[domain]["project_types"][project_type][ - "input_dataset" + "input_dataset" ]["fields"]; } // let temp = @@ -439,7 +472,7 @@ const CreateProject = () => { name: key, value: key, }; - }) + }), ); // setVariableParameters(tempVariableParameters); setProjectTypes(tempTypes); @@ -451,7 +484,7 @@ const CreateProject = () => { const handleRandomChange = (e) => { setRandom(e.target.value); setSamplingParameters( - e.target.value ? { fraction: parseFloat(e.target.value / 100) } : null + e.target.value ? { fraction: parseFloat(e.target.value / 100) } : null, ); }; @@ -459,7 +492,6 @@ const CreateProject = () => { setShowNewPassword(!shownewpassword); }; - const onSelectProjectType = (value) => { setSelectedType(value); dispatch(fetchDatasetByType(datasetTypes[value])); @@ -478,8 +510,6 @@ const CreateProject = () => { setSearchAnchor(null); }; - - useEffect(() => { let tempInstanceIds = {}; for (const instance in DatasetInstances) { @@ -488,7 +518,7 @@ const CreateProject = () => { } setInstanceIds(tempInstanceIds); }, [DatasetInstances]); - const handleCreateProject = async() => { + const handleCreateProject = async () => { const newProject = { title: title, description: description, @@ -505,24 +535,23 @@ const CreateProject = () => { label_config: "string", sampling_mode: samplingMode, sampling_parameters_json: samplingParameters, - batch_size:batchSize, - batch_number:batchNumber, + batch_size: batchSize, + batch_number: batchNumber, // variable_parameters: selectedVariableParameters, filter_string: filterString, project_stage: taskReviews, required_annotators_per_task: selectedAnnotatorsNum, automatic_annotation_creation_mode: createannotationsAutomatically, - is_published:is_published, + is_published: is_published, password: passwordForProjects, - metadata_json: questionsJSON + metadata_json: questionsJSON, }; console.log(newProject); - + if (sourceLanguage) newProject["src_language"] = sourceLanguage; if (targetLanguage) newProject["tgt_language"] = targetLanguage; - - dispatch(createProject(newProject)); - + + dispatch(createProject(newProject)); }; const newProject = { @@ -541,26 +570,28 @@ const CreateProject = () => { label_config: "string", sampling_mode: samplingMode, sampling_parameters_json: samplingParameters, - batch_size:batchSize, - batch_number:batchNumber, + batch_size: batchSize, + batch_number: batchNumber, // variable_parameters: selectedVariableParameters, filter_string: filterString, project_stage: taskReviews, required_annotators_per_task: selectedAnnotatorsNum, automatic_annotation_creation_mode: createannotationsAutomatically, - is_published:is_published, + is_published: is_published, password: passwordForProjects, - metadata_json: questionsJSON + metadata_json: questionsJSON, }; console.log(newProject); const setPasswordForNewProject = async (projectId) => { try { - console.log("Project id: "+projectId) - console.log("password: " + passwordForProjects) - dispatch(setPasswordForProject({ projectId, password: passwordForProjects })); + console.log("Project id: " + projectId); + console.log("password: " + passwordForProjects); + dispatch( + setPasswordForProject({ projectId, password: passwordForProjects }), + ); } catch (error) { - console.error('Error setting password for project:', error); + console.error("Error setting password for project:", error); } }; @@ -571,7 +602,7 @@ const CreateProject = () => { if (NewProject?.id) { const projectId = NewProject?.id; - console.log('Project ID:', projectId); + console.log("Project ID:", projectId); setPasswordForNewProject(projectId); } } @@ -607,13 +638,13 @@ const CreateProject = () => { setSamplingParameters(null); }; const getDataItems = () => { - const dataObj = ({ - instanceIds:selectedInstances, - datasetType:datasetTypes[selectedType], - selectedFilters:selectedFilters, - pageNo:currentPageNumber, - countPerPage:currentRowPerPage - }); + const dataObj = { + instanceIds: selectedInstances, + datasetType: datasetTypes[selectedType], + selectedFilters: selectedFilters, + pageNo: currentPageNumber, + countPerPage: currentRowPerPage, + }; dispatch(fetchDataitemsById(dataObj)); }; @@ -629,15 +660,15 @@ const CreateProject = () => { }; const handleChangeCreateAnnotationsAutomatically = (e) => { - setsCreateannotationsAutomatically(e.target.value) - } + setsCreateannotationsAutomatically(e.target.value); + }; useEffect(() => { if (selectedInstances && datasetTypes) { getDataItems(); } }, [currentPageNumber, currentRowPerPage]); - const sample = useSelector(state=>console.log(state)); + const sample = useSelector((state) => console.log(state)); const renderToolBar = () => { return ( @@ -661,7 +692,7 @@ const CreateProject = () => { ); }; - + const customColumnHead = (col) => { return ( { ); }; - + const options = { count: totalDataitems, rowsPerPage: currentRowPerPage, @@ -731,8 +762,7 @@ const CreateProject = () => { return ( - - + { className="projectsettingGrid" > - Title* : + Title* : @@ -768,7 +798,6 @@ const CreateProject = () => { fullWidth value={title} onChange={(e) => setTitle(e.target.value)} - /> @@ -783,7 +812,7 @@ const CreateProject = () => { xl={12} > - Description* : + Description* : @@ -791,7 +820,6 @@ const CreateProject = () => { fullWidth value={description} onChange={(e) => setDescription(e.target.value)} - /> @@ -807,11 +835,12 @@ const CreateProject = () => { xl={12} > - Select a Category to Work in* : + Select a Category to Work in + * : - { xl={12} > - Select a Project Type * : + Select a Project Type{" "} + * : @@ -879,74 +909,74 @@ const CreateProject = () => { )} */} {selectedDomain && ( - <> - - - Source Language: - - - - - - - + <> + + + Source Language: + + + + + + + - - - Target Language: - - - - - - - - - )} + + + Target Language: + + + + + + + + + )} {instanceIds && ( <> @@ -962,7 +992,8 @@ const CreateProject = () => { xl={12} > - Select sources to fetch data from * : + Select sources to fetch data from{" "} + * : @@ -1005,12 +1036,12 @@ const CreateProject = () => { confirmed ? undefined : () => { - setSelectedInstances( - selectedInstances.filter( - (instance) => instance !== key - ) - ); - } + setSelectedInstances( + selectedInstances.filter( + (instance) => instance !== key, + ), + ); + } } /> ))} @@ -1083,8 +1114,7 @@ const CreateProject = () => { title={""} data={tableData} columns={columns.filter((column) => - selectedColumns.includes(column.name) - + selectedColumns.includes(column.name), )} options={options} /> @@ -1100,7 +1130,8 @@ const CreateProject = () => { xl={12} > - Select Sampling Type* : + Select Sampling Type + * : @@ -1304,92 +1335,105 @@ const CreateProject = () => { - {selectedType==="ModelInteractionEvaluation" ? - ( - - - - Upload CSV or Paste JSON* : - - - - - - - - - - - ): null} + {selectedType === "ModelInteractionEvaluation" ? ( + + + Upload CSV or Paste JSON + * : + + + + + + + + + ) : null} {workspaceDtails?.guest_workspace_display === "Yes" ? ( - <> - - - Set a password: - - - - - { - setPasswordForProjects(e.target.value); - }} - InputProps={{ - endAdornment: ( - - - {shownewpassword ? : } - - - ), - }} - /> - + <> + + + Set a password: + + - - - -) : null} + + { + setPasswordForProjects(e.target.value); + }} + InputProps={{ + endAdornment: ( + + + {shownewpassword ? ( + + ) : ( + + )} + + + ), + }} + /> + + + ) : null} - {workspaceDtails?.guest_workspace_display === "Yes"? - - Publish Project : - - - :null} - + {workspaceDtails?.guest_workspace_display === "Yes" ? ( + + + Publish Project : + + + + ) : null} )} { onClick={handleCreateProject} disabled={ title && - description && - selectedDomain && - selectedType && - selectedInstances && - domains && - samplingMode && (selectedType==="ModelInteractionEvaluation"? questionsJSON?.length>0 : true) - ? false:true + description && + selectedDomain && + selectedType && + selectedInstances && + domains && + samplingMode && + (selectedType === "ModelInteractionEvaluation" + ? questionsJSON?.length > 0 + : true) + ? false + : true } /> - ); - const { pageType, title, createdBy, onArchiveWorkspace,initialUserData } = props; + const CustomButton = ({ + label, + buttonVariant, + color, + disabled = false, + ...rest + }) => ( + + ); + const { pageType, title, createdBy, onArchiveWorkspace, initialUserData } = + props; const [addUserDialogOpen, setAddUserDialogOpen] = useState(false); const [csvFile, setCsvFile] = useState(null); const [selectedUsers, setSelectedUsers] = useState([]); const [userType, setUserType] = useState(Object.keys(UserRolesList)[0]); const [selectedEmails, setSelectedEmails] = useState([]); - const [btn,setbtn] = useState(null); + const [btn, setbtn] = useState(null); const [snackbar, setSnackbarInfo] = useState({ open: false, message: "", variant: "success", }); const { id, orgId } = useParams(); - const organisation_id = useSelector(state => state.getWorkspacesProjectData?.data?.[0]?.organization_id); + const organisation_id = useSelector( + (state) => state.getWorkspacesProjectData?.data?.[0]?.organization_id, + ); const handleUserDialogOpen = () => { setAddUserDialogOpen(true); }; @@ -100,9 +114,14 @@ const DetailsViewPage = (props) => { const userDetails = useSelector((state) => state.getLoggedInData.data); const dispatch = useDispatch(); const [value, setValue] = React.useState(0); - const [user,setuser] = useState(initialUserData) + + const [user, setuser] = useState(initialUserData); const [loading, setLoading] = useState(false); - const apiLoading = useSelector((state) => pageType === componentType.Type_Workspace && state.getWorkspaceDetails.status == "loading"); + const apiLoading = useSelector( + (state) => + pageType === componentType.Type_Workspace && + state.getWorkspaceDetails.status == "loading", + ); const [addAnnotatorsDialogOpen, setAddAnnotatorsDialogOpen] = React.useState(false); const [addManagersDialogOpen, setAddManagersDialogOpen] = @@ -113,9 +132,8 @@ const DetailsViewPage = (props) => { const [selectmenu, setSelectmenu] = useState("TaskAnalytics"); const handleMenuOpen = (event) => { setAnchorEl(event.currentTarget); - }; - + const handleMenuClose = () => { setAnchorEl(null); }; @@ -127,7 +145,6 @@ const DetailsViewPage = (props) => { dispatch(fetchWorkspaceDetails(orgId)); }; - const handleAnnotatorDialogClose = () => { setAddAnnotatorsDialogOpen(false); }; @@ -147,22 +164,20 @@ const DetailsViewPage = (props) => { const handleWorkspaceDialogClose = () => { setAddWorkspacesDialogOpen(false); dispatch(fetchWorkspaceData()); - }; const handleWorkspaceDialogOpen = () => { setAddWorkspacesDialogOpen(true); }; - const handleOpenSettings = () => { navigate(`/workspaces/${id}/workspacesetting`); }; - const handleClickMenu = (data) =>{ - setSelectmenu(data) - handleMenuClose() - } + const handleClickMenu = (data) => { + setSelectmenu(data); + handleMenuClose(); + }; const renderSnackBar = () => { return ( @@ -177,15 +192,14 @@ const DetailsViewPage = (props) => { /> ); }; - + const addBtnClickHandler = async () => { setLoading(true); - if(userDetails?.role === userRole.WorkspaceManager) - { + if (userDetails?.role === userRole.WorkspaceManager) { const addUsesrsObj = new InviteManagerSuggestions( organisation_id, selectedUsers, - userType + userType, ); const res = await fetch(addUsesrsObj.apiEndPoint(), { method: "POST", @@ -201,22 +215,18 @@ const DetailsViewPage = (props) => { }); const orgObj = new GetOragnizationUsersAPI(id); dispatch(APITransport(orgObj)); - - }else { + } else { setSnackbarInfo({ open: true, message: resp?.message, variant: "error", }); } - } - else - { - - const addMembersObj = new InviteUsersToOrgAPI( + } else { + const addMembersObj = new InviteUsersToOrgAPI( organisation_id, selectedUsers, - userType + userType, ); const res = await fetch(addMembersObj.apiEndPoint(), { method: "POST", @@ -232,7 +242,7 @@ const DetailsViewPage = (props) => { }); const orgObj = new GetOragnizationUsersAPI(id); dispatch(APITransport(orgObj)); - }else { + } else { setSnackbarInfo({ open: true, message: resp?.message, @@ -242,321 +252,445 @@ const DetailsViewPage = (props) => { } handleUserDialogClose(); setLoading(false); - setSelectedUsers([ ]); + setSelectedUsers([]); setSelectedEmails([]); setCsvFile(null); - setbtn(null) - setUserType(Object.keys(UserRolesList)[0]) + setbtn(null); + setUserType(Object.keys(UserRolesList)[0]); }; - return ( - - {apiLoading ? : - - + return ( + + {apiLoading ? ( + + ) : ( + + {pageType === componentType.Type_Organization && ( - - { title} + + {title} - )} + )} {pageType === componentType.Type_Workspace && ( - - + {title} - - + + {(userRole.Annotator !== userDetails?.role || userRole.Reviewer !== userDetails?.role || userRole.SuperChecker !== userDetails?.role) && ( - - {/* - - - - */} - - {translate("label.showProjectSettings")} - - } - > - - - - - - )} - + {translate("label.showProjectSettings")} + + } + > + + + + + )} + )} - - Created by : {createdBy} + + Created by : {createdBy} - + {pageType === componentType.Type_Workspace && ( + + )} + {pageType === componentType.Type_Organization && ( + + )} + + {pageType === componentType.Type_Workspace && ( + + )} + {pageType === componentType.Type_Organization && ( + + )} + + {pageType === componentType.Type_Workspace && ( + + )} + {pageType === componentType.Type_Organization && ( + + )} + + {pageType === componentType.Type_Workspace && ( + + )} + {pageType === componentType.Type_Organization && ( + + )} + + {pageType === componentType.Type_Workspace && ( + + {" "} + {translate("label.analytics")}{" "} + {" "} + + } + aria-controls="menu" + aria-haspopup="true" + onClick={handleMenuOpen} + sx={{ + fontSize: 16, + fontWeight: "700", + bgcolor: value === 4 ? "#d3d3d3" : "#F5F5F5", + color: value === 4 ? "black" : "text.primary", + borderRadius: 1, + "&:hover": { + bgcolor: "#e0e0e0", + }, + }} + /> + )} + + {pageType === componentType.Type_Organization && ( + + )} + + + + handleClickMenu("TaskAnalytics")} + > + {" "} + Task Analytics{" "} + + handleClickMenu("MetaAnalytics")} + > + Meta Analytics + + handleClickMenu("AdvanceAnalytics")} + > + Advance Analytics + + handleClickMenu("PerformanceAnalytics")} + > + Performance Analytics + + + {pageType === componentType.Type_Workspace && ( - + <> + + + + +
+ +
+ )} {pageType === componentType.Type_Organization && ( - + <> + + + + )} - + + {pageType === componentType.Type_Workspace && ( - + <> + + + + + + + + + + getWorkspaceDetails() + } + /> + + addBtnClickHandler()} + loading={loading} + selectedEmails={selectedEmails} + setSelectedEmails={setSelectedEmails} + csvFile={csvFile} + setCsvFile={setCsvFile} + btn={btn} + setbtn={setbtn} + value={value} + setvalue={setValue} + /> + )} {pageType === componentType.Type_Organization && ( - + <> + + )} - + + {pageType === componentType.Type_Workspace && ( - + <> + + + + )} {pageType === componentType.Type_Organization && ( - - )} - - {pageType === componentType.Type_Workspace && ( - + )} + + {pageType === componentType.Type_Organization && ( - + )} - {pageType === componentType.Type_Workspace && ( - - {translate("label.analytics")} } - aria-controls="menu" - aria-haspopup="true" - onClick={handleMenuOpen} - sx={{ fontSize: 16, fontWeight: "700"}} - /> - + )} - + + + {pageType === componentType.Type_Workspace && + selectmenu === "TaskAnalytics" && } + {pageType === componentType.Type_Workspace && + selectmenu === "MetaAnalytics" && } + {pageType === componentType.Type_Workspace && + selectmenu === "AdvanceAnalytics" && } + {pageType === componentType.Type_Workspace && + selectmenu === "PerformanceAnalytics" && ( + + )} {pageType === componentType.Type_Organization && ( - - + )} - - - - - handleClickMenu("TaskAnalytics")}> Task Analytics - handleClickMenu("MetaAnalytics")}>Meta Analytics - handleClickMenu("AdvanceAnalytics")}>Advance Analytics - handleClickMenu("PerformanceAnalytics")}>Performance Analytics - - - {pageType === componentType.Type_Workspace && ( - <> - - {/* */} - - - - {/* */} - {/* - - - - */} -
- -
- - )} - {pageType === componentType.Type_Organization && ( - <> - - - - - )} - - - {pageType === componentType.Type_Workspace && ( - <> - - - - - - - - - - - getWorkspaceDetails()} - /> - - addBtnClickHandler()} - loading={loading} - selectedEmails={selectedEmails} - setSelectedEmails={setSelectedEmails} - csvFile={csvFile} - setCsvFile={setCsvFile} - btn={btn} - setbtn={setbtn} - value={value} - setvalue={setValue} - /> - - - - )} - {pageType === componentType.Type_Organization && ( - <> - - - )} - - - {pageType === componentType.Type_Workspace && ( - <> - - - - - )} - {pageType === componentType.Type_Organization && ( - - )} - - - {pageType === componentType.Type_Organization && ( - - )} - {pageType === componentType.Type_Workspace && } - - - {pageType === componentType.Type_Workspace && selectmenu=== "TaskAnalytics" && } - {pageType === componentType.Type_Workspace && selectmenu=== "MetaAnalytics" && } - {pageType === componentType.Type_Workspace && selectmenu=== "AdvanceAnalytics" && } - {pageType === componentType.Type_Workspace && selectmenu=== "PerformanceAnalytics" && } - {pageType === componentType.Type_Organization && ( - - )} - - - - } + + + + )} ); }; - - - -export default DetailsViewPage; \ No newline at end of file +export default DetailsViewPage; diff --git a/src/styles/Dataset.css b/src/styles/Dataset.css index 6ab861c9..3b59fc88 100644 --- a/src/styles/Dataset.css +++ b/src/styles/Dataset.css @@ -39,7 +39,6 @@ width: 100%; min-height: 420px; padding: 40px; - justify-content: center; justify-items: center } .projectsettingGrid { diff --git a/src/styles/dataset.js b/src/styles/dataset.js index a7a1b7b1..292b3741 100644 --- a/src/styles/dataset.js +++ b/src/styles/dataset.js @@ -1,46 +1,41 @@ -import { makeStyles } from '@mui/styles'; +import { makeStyles } from "@mui/styles"; // #EE6633 - const DatasetStyle = makeStyles({ - Projectsettingtextarea: { width: "100%", fontSize: "1.4rem", fontFamily: "Roboto", fontWeight: 10, lineHeight: 1.2, - }, - custombtn:{ - borderRadius:0 + custombtn: { + borderRadius: 0, }, workspaceTables: { - marginTop: "20px" + marginTop: "20px", }, projectButton: { width: "100%", textDecoration: "none", }, annotatorsButton: { - width: "100%" + width: "100%", }, managersButton: { - width: "100%" + width: "100%", }, settingsButton: { width: "100%", - color: "#ee6633" + color: "#ee6633", }, workspaceCard: { width: "100%", minHeight: "420px", padding: "40px", - justifyContent: "center", justifyItems: "center" }, projectsettingGrid: { margin: "20px 0px 10px 0px", - }, filterToolbarContainer: { // alignItems : 'center', @@ -51,9 +46,8 @@ const DatasetStyle = makeStyles({ justifyContent: "flex-end", alignItems: "center", columnGap: "10px", - }, - + clearAllBtn: { float: "right", margin: "9px 16px 0px auto", @@ -112,7 +106,7 @@ const DatasetStyle = makeStyles({ }, }, projectCardContainer: { - cursor: 'pointer' + cursor: "pointer", }, modelname: { boxSizing: "border-box", @@ -120,7 +114,7 @@ const DatasetStyle = makeStyles({ height: "64px", backgroundColor: "white", maxWidth: "90%", - minWidth: '90%', + minWidth: "90%", width: "auto", display: "flex", alignItems: "center", @@ -133,51 +127,50 @@ const DatasetStyle = makeStyles({ alignItems: "center", paddingBottom: "5vh", // justifyContent: "space-around", - flexGrow: 0 + flexGrow: 0, }, projectCardContainer1: { backgroundColor: "#EE6633", height: "100%", - width: "100%" + width: "100%", }, projectCardContainer2: { backgroundColor: "#66bb6a", height: "100%", - width: "100%" + width: "100%", }, userCardContainer: { direction: "column", alignItems: "center", height: "100%", - placeContent: "center" + placeContent: "center", }, dashboardContentContainer: { alignItems: "left", justifyContent: "space-around", minHeight: "70vh", - borderLeft: '1px solid lightgray', - paddingLeft: '5%' + borderLeft: "1px solid lightgray", + paddingLeft: "5%", }, link: { - textDecoration: "none" + textDecoration: "none", }, progress: { - position: 'fixed', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - + position: "fixed", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", }, progressDiv: { - position: 'fixed', + position: "fixed", // backgroundColor: 'rgba(0.5, 0, 0, 0.5)', zIndex: 1000, // width: '100%', // height: '100%', - top: '50%', - left: '50%', + top: "50%", + left: "50%", opacity: 1, - pointerEvents: 'none', + pointerEvents: "none", }, search: { //position: "relative", @@ -192,7 +185,6 @@ const DatasetStyle = makeStyles({ // position: "absolute", // Right: "200px", // top:"155px", - }, searchIcon: { // padding: theme.spacing(0, 2), @@ -217,14 +209,13 @@ const DatasetStyle = makeStyles({ ToolbarContainer: { position: "absolute", bottom: "14px", - right: "45px" - + right: "45px", }, TotalSummarydata: { padding: "4px 0px 0px 4px", }, projectgrid: { - textAlign: "start" + textAlign: "start", }, // fixedWidthContainer: { // maxWidth: "5%", @@ -245,8 +236,7 @@ const DatasetStyle = makeStyles({ overflow: "hidden", "@media (max-width:400px)": { marginLeft: "-14px", - fontSize: "12px" - + fontSize: "12px", }, }, descCardIcon: { @@ -256,19 +246,21 @@ const DatasetStyle = makeStyles({ height: "fit-content", }, formControl: { - width: 300 + width: 300, }, AddGlossaryCard: { width: "100%", minHeight: "420px", padding: "20px 40px 20px 40px", - justifyContent: "center", justifyItems: "center" + justifyContent: "center", + justifyItems: "center", }, SuggestAnEditCard: { width: "100%", minHeight: "350px", padding: "20px 40px 20px 40px", - justifyContent: "center", justifyItems: "center" + justifyContent: "center", + justifyItems: "center", }, heading: { @@ -293,23 +285,35 @@ const DatasetStyle = makeStyles({ boxShadow: "3px 0 2px -2px #00000029", }, toolTip: { - width: "200px", height: "180px", fontSize: "16px", backgroundColor: "white", color: "black", padding: "5px 10px 10px 10px", border: "1px solid gray" + width: "200px", + height: "180px", + fontSize: "16px", + backgroundColor: "white", + color: "black", + padding: "5px 10px 10px 10px", + border: "1px solid gray", }, - toolTips: { - width: "280px", height: "220px", fontSize: "16px", backgroundColor: "white", color: "black", padding: "5px 10px 10px 10px", border: "1px solid gray" + toolTips: { + width: "280px", + height: "220px", + fontSize: "16px", + backgroundColor: "white", + color: "black", + padding: "5px 10px 10px 10px", + border: "1px solid gray", }, - textTransliteration:{ + textTransliteration: { borderRadius: "3px", - height: "60px", - padding: "15px 10px 10px 10px", - resize: "none", - margin: "7px 0px 0px 0px", - width: "200px",fontSize:"16px" - } - -}) + height: "60px", + padding: "15px 10px 10px 10px", + resize: "none", + margin: "7px 0px 0px 0px", + width: "200px", + fontSize: "16px", + }, +}); -export default DatasetStyle \ No newline at end of file +export default DatasetStyle;