Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rahul 537 #829

Open
wants to merge 7 commits into
base: develop2
Choose a base branch
from
Open

Rahul 537 #829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
86ee1e2
Added transaltions and transcription in task details tab
Rahul-538 Sep 20, 2024
c3c7416
Merge branch 'Rahul-537' of https://github.com/AI4Bharat/Chitralekha-…
Rahul-538 Sep 20, 2024
3431d2d
Update TaskDetails.jsx
Rahul-538 Sep 24, 2024
3921738
Update TaskDetails.jsx
Rahul-538 Sep 24, 2024
778e915
Added Video details tab in Admin
Rahul-538 Oct 8, 2024
9208171
Merge branch 'Rahul-537' of https://github.com/AI4Bharat/Chitralekha-…
Rahul-538 Oct 8, 2024
fc402e6
Added loader in filter
Rahul-538 Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/config/apiendpoint.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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