Skip to content

Commit

Permalink
Merge pull request #829 from AI4Bharat/Rahul-537
Browse files Browse the repository at this point in the history 
Rahul 537
  • Loading branch information
@aparna-aa
aparna-aa authored Dec 4, 2024
2 parents 952746b + fc402e6 commit 2ae32ad
Show file tree
Hide file tree
Showing 6 changed files with 362 additions and 27 deletions.
1 change: 1 addition & 0 deletions src/config/apiendpoint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const endpoints = {
//Video
video: "/video/",
getVideoTasks: '/video/list_tasks',
listVideosTasks:'/video/get_listings',
transcript: "/transcript/",
GetAllTranscriptions:"/transcript/retrieve_all_transcriptions/",
GetAllTranslations:"/translation/retrieve_all_translations/",
Expand Down
14 changes: 10 additions & 4 deletions src/containers/Admin/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import AdminLevelReport from "./AdminLevelReport";
import NewsLetter from "./NewsLetterTemplate";
import OnboardingRequests from "./OnboardingRequests";
import VideoTaskDetails from "./VideoTaskDetails";
import VideoDetails from "./VideoDetails";
import TaskDetails from "./TaskDetails";

// APIs
Expand Down Expand Up @@ -83,6 +84,7 @@ const DashBoard = () => {
];

const orgOwnerTabs = [
{ label: "Video Details", component: <VideoDetails /> },
{ label: "Video Task Details", component: <VideoTaskDetails /> },
{ label: "Task Details", component: <TaskDetails /> },
];
Expand All @@ -94,9 +96,7 @@ const DashBoard = () => {
<Grid container direction="row" justifyContent="center" alignItems="center">
<Card className={classes.workspaceCard}>
<Box>
<Tabs value={value}
onChange={handleTabChange}
aria-label="basic tabs example">
<Tabs value={value} onChange={handleTabChange} aria-label="basic tabs example">
{isAdmin &&
adminTabs.map((tab, index) => (
<Tab key={index} label={tab.label} sx={{ fontSize: 16, fontWeight: "700" }} />
Expand Down Expand Up @@ -186,11 +186,17 @@ const DashBoard = () => {
<>
<TabPanel value={value} index={0}>
<Paper variant="outlined" sx={{ borderRadius: "5px", backgroundColor: "ButtonHighlight", padding: "32px" }}>
<VideoTaskDetails />
<VideoDetails />
</Paper>
</TabPanel>

<TabPanel value={value} index={1}>
<Paper variant="outlined" sx={{ borderRadius: "5px", backgroundColor: "ButtonHighlight", padding: "32px" }}>
<VideoTaskDetails />
</Paper>
</TabPanel>

<TabPanel value={value} index={2}>
<Paper variant="outlined" sx={{ borderRadius: "5px", backgroundColor: "ButtonHighlight", padding: "32px" }}>
<TaskDetails />
</Paper>
Expand Down
185 changes: 162 additions & 23 deletions src/containers/Admin/TaskDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,108 @@ import React, { useState } from 'react';
import { Grid, TextField, Button, Box, Typography, CircularProgress, Tabs, Tab } from '@mui/material';
import { JSONTree } from 'react-json-tree';
import GetTaskDetailsAPI from "redux/actions/api/Admin/GetTaskDetails.js";
import GetAllTranscriptionsAPI from "redux/actions/api/Admin/GetAllTranscriptions.js";
import GetAllTranslationsAPI from "redux/actions/api/Admin/GetAllTranslations.js";
import { snakeToTitleCase } from '../../utils/utils.js';

function TaskDetails() {
const [taskId, setTaskId] = useState('');
const [tabValue, setTabValue] = useState(0);
const [taskDetails, setTaskDetails] = useState(null);
const [transcriptions, setTranscriptions] = useState(null);
const [translations, setTranslations] = useState(null);
const [loading, setLoading] = useState(false);
const [loadingTranscriptions, setLoadingTranscriptions] = useState(false);
const [loadingTranslations, setLoadingTranslations] = useState(false);

const fetchTaskDetails = async () => {
setLoading(true);
setTaskDetails(null);
setTranscriptions(null);
setTranslations(null);

const apiObj = new GetTaskDetailsAPI(taskId);
fetch(apiObj.apiEndPoint(), apiObj.getHeaders())
.then(async (res) => {
if (res.status === 200) {
const data = await res.json();
setTaskDetails(data);
} else if (res.status === 404) {
setTaskDetails({ error: 'Task not found' });
} else {
setTaskDetails({ error: 'Something went wrong' });
}
setLoading(false);
});
try {
const res = await fetch(apiObj.apiEndPoint(), apiObj.getHeaders());
let data;
if (res.status === 200) {
data = await res.json();
} else if (res.status === 404) {
data = { error: 'Task not found' };
} else {
data = { error: 'Something went wrong' };
}

setLoading(false);
if (data.error) {
setTaskDetails({ error: data.error });
return;
}

setTaskDetails(data);
const videoId = data.video;

setTabValue(0);

if (["TRANSCRIPTION_EDIT", "TRANSCRIPTION_REVIEW"].includes(data.task_type)) {
fetchTranscriptions(videoId);
} else if (["TRANSLATION_EDIT", "TRANSLATION_REVIEW", "TRANSLATION_VOICEOVER_EDIT", "TRANSLATION_VOICEOVER_REVIEW"].includes(data.task_type)) {
fetchTranslations(videoId);
}

} catch (error) {
setLoading(false);
setTaskDetails({ error: 'Network error' });
console.error(error);
}
};

const fetchTranscriptions = async (videoId) => {
setLoadingTranscriptions(true);
const apiObj = new GetAllTranscriptionsAPI(videoId);
try {
const res = await fetch(apiObj.apiEndPoint(), apiObj.getHeaders());
let data;
if (res.status === 200) {
data = await res.json();
} else {
data = { error: 'Failed to fetch transcriptions' };
}

if (data.error) {
setTranscriptions({ error: data.error });
} else {
setTranscriptions(data.transcripts);
}
} catch (error) {
setTranscriptions({ error: 'Network error' });
console.error(error);
}
setLoadingTranscriptions(false);
};

const fetchTranslations = async (videoId) => {
setLoadingTranslations(true);
const apiObj = new GetAllTranslationsAPI(videoId);
try {
const res = await fetch(apiObj.apiEndPoint(), apiObj.getHeaders());
let data;
if (res.status === 200) {
data = await res.json();
} else {
data = { error: 'Failed to fetch translations' };
}

if (data.error) {
setTranslations({ error: data.error });
} else {
setTranslations(data);
}
} catch (error) {
setTranslations({ error: 'Network error' });
console.error(error);
}
setLoadingTranslations(false);
};

const theme = {
Expand All @@ -39,9 +117,9 @@ function TaskDetails() {
base06: '#f5f4f1',
base07: '#f9f8f5',
base08: '#f92672',
base09: '#fd971f', //orange
base09: '#fd971f',
base0A: '#f4bf75',
base0B: '#a6e22e', //green
base0B: '#a6e22e',
base0C: '#a1efe4',
base0D: '#66d9ef',
base0E: '#ae81ff',
Expand Down Expand Up @@ -86,7 +164,7 @@ function TaskDetails() {
>
{value === index && (
<Box p={2}>
<Typography>{children}</Typography>
<Typography component={'div'}>{children}</Typography>
</Box>
)}
</div>
Expand Down Expand Up @@ -119,19 +197,80 @@ function TaskDetails() {
<Grid item xs={12}>
<Tabs value={tabValue} onChange={(e, v) => setTabValue(v)} aria-label="task-details-tabs">
<Tab label="Details" sx={{ fontSize: 17, fontWeight: '400', marginRight: '28px !important' }} />
{["TRANSCRIPTION_EDIT", "TRANSCRIPTION_REVIEW"].includes(taskDetails.task_type) && (
<Tab label="Transcriptions" sx={{ fontSize: 17, fontWeight: '400', marginRight: '28px !important' }} />
)}
{["TRANSLATION_EDIT", "TRANSLATION_REVIEW", "TRANSLATION_VOICEOVER_EDIT", "TRANSLATION_VOICEOVER_REVIEW"].includes(taskDetails.task_type) && (
<Tab label="Translations" sx={{ fontSize: 17, fontWeight: '400', marginRight: '28px !important' }} />
)}
</Tabs>
</Grid>

<Grid item xs={12}>
<TabPanel value={tabValue} index={0}>
<JSONTree
data={taskDetails}
hideRoot={true}
invertTheme={true}
labelRenderer={([key]) => <strong>{typeof key === "string" ? snakeToTitleCase(key) : key}</strong>}
valueRenderer={(raw) => <span>{typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}</span>}
theme={theme}
/>
{taskDetails.error ? (
<Typography color="error">{taskDetails.error}</Typography>
) : (
<JSONTree
data={taskDetails}
hideRoot={true}
invertTheme={true}
labelRenderer={([key]) => <strong>{typeof key === "string" ? snakeToTitleCase(key) : key}</strong>}
valueRenderer={(raw) => <span>{typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}</span>}
theme={theme}
/>
)}
</TabPanel>

{["TRANSCRIPTION_EDIT", "TRANSCRIPTION_REVIEW"].includes(taskDetails.task_type) && (
<TabPanel value={tabValue} index={1}>
{loadingTranscriptions ? (
<Grid container justifyContent="center" alignItems="center" sx={{ mt: 4 }}>
<CircularProgress color="primary" size={50} />
</Grid>
) : transcriptions ? (
transcriptions.error ? (
<Typography color="error">{transcriptions.error}</Typography>
) : (
<JSONTree
data={transcriptions}
hideRoot={true}
invertTheme={true}
labelRenderer={([key]) => <strong>{typeof key === "string" ? snakeToTitleCase(key) : key}</strong>}
valueRenderer={(raw) => <span>{typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}</span>}
theme={theme}
/>
)
) : (
<Typography>No transcriptions available.</Typography>
)}
</TabPanel>
)}

{["TRANSLATION_EDIT", "TRANSLATION_REVIEW", "TRANSLATION_VOICEOVER_EDIT", "TRANSLATION_VOICEOVER_REVIEW"].includes(taskDetails.task_type) && (
<TabPanel value={tabValue} index={1}>
{loadingTranslations ? (
<Grid container justifyContent="center" alignItems="center" sx={{ mt: 4 }}>
<CircularProgress color="primary" size={50} />
</Grid>
) : translations ? (
translations.error ? (
<Typography color="error">{translations.error}</Typography>
) : (
<JSONTree
data={translations}
hideRoot={true}
invertTheme={true}
labelRenderer={([key]) => <strong>{typeof key === "string" ? snakeToTitleCase(key) : key}</strong>}
valueRenderer={(raw) => <span>{typeof raw === "string" && raw.match(/^"(.*)"$/) ? raw.slice(1, -1) : raw}</span>}
theme={theme}
/>
)
) : (
<Typography>No translations available.</Typography>
)}
</TabPanel>
)}
</Grid>
</>
)}
Expand Down
Loading

0 comments on commit 2ae32ad

Please sign in to comment.