Skip to content

2
2023-029
Commit ccd28f55 authored by janithgamage1.ed's avatar janithgamage1.ed
Browse files
Options

fix: update 

Desc : update project
parent 12e80745
Show whitespace changes
Inline Side-by-side
Showing with 165 additions and 6 deletions
Project/Frontend/SignConnectPlus/src/sections/parameters/tutorial-management/AddEditTutorial.tsx
View file @ ccd28f55
......@@ -2,6 +2,9 @@ import { useState } from 'react';
// material-ui
import {
Accordion,
AccordionDetails,
Box,
Button,
DialogActions,
DialogContent,
......@@ -9,15 +12,16 @@ import {
Divider,
Grid,
Stack,
Tooltip
Tooltip,
Typography
} from '@mui/material';
// import { useTheme } from '@mui/material/styles';
import { useTheme } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// third-party
import { Form, FormikProvider, FormikValues, useFormik } from 'formik';
import { FieldArray, Form, FormikProvider, FormikValues, useFormik } from 'formik';
import _ from 'lodash';
import * as Yup from 'yup';
......@@ -26,7 +30,8 @@ import IconButton from 'components/@extended/IconButton';
// assets
import { DeleteFilled } from '@ant-design/icons';
import { InputLabel, TextField } from '@mui/material';
import { AccordionSummary, InputLabel, TextField } from '@mui/material';
import MainCard from 'components/MainCard';
import AlertTutorialDelete from './AlertTutorialDelete';
// types
......@@ -88,7 +93,7 @@ export interface taskItemProps {
}
const AddEditTutorial = ({ tutorial, onCancel }: Props) => {
// const theme = useTheme();
const theme = useTheme();
const isCreating = !tutorial;
......@@ -121,9 +126,16 @@ const AddEditTutorial = ({ tutorial, onCancel }: Props) => {
}
});
const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;
const { errors, touched, handleSubmit, isSubmitting, getFieldProps, values } = formik;
// const { handleSubmit, isSubmitting } = formik;
//accordion handlers
const [expanded, setExpanded] = useState<string | false>('panel-1');
const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
setExpanded(newExpanded ? panel : false);
};
return (
<>
<FormikProvider value={formik}>
......@@ -189,6 +201,153 @@ const AddEditTutorial = ({ tutorial, onCancel }: Props) => {
/>
</Stack>
</Grid>
<Grid item xs={12}>
<FieldArray name="taskItems">
{({ insert, remove, push, }) => {
return (
<>
<MainCard content={false} title="Tasks" sx={{ '& .MuiInputLabel-root': { fontSize: '0.875rem' } }}
secondary={
<Button
style={{
float: "right"
}}
onClick={() => push(
{
_id: undefined,
title: "",
description: "",
howToDo: "",
referenceImage: "",
referenceVideo: ""
}
)}
variant="contained"
>
Add Task
</Button>
}
>
<Box sx={{ p: 2.5 }}>
<Grid container spacing={3}>
<Grid item xs={12}>
{values.taskItems.length > 0 &&
values.taskItems.map((item, index) => {
return (
<>
<Box
sx={{
'& .MuiAccordion-root': {
borderColor: theme.palette.divider,
'& .MuiAccordionSummary-root': {
bgcolor: 'transparent',
flexDirection: 'row',
'&:focus-visible': {
bgcolor: 'primary.lighter'
}
},
'& .MuiAccordionDetails-root': {
borderColor: theme.palette.divider
},
'& .Mui-expanded': {
color: theme.palette.primary.main
}
}
}}
>
<Accordion expanded={expanded === `panel${index}`} onChange={handleChange(`panel${index}`)}>
<AccordionSummary aria-controls={`panel${index}d-content`} id={`panel${index}d-header`}>
<Stack direction="row" spacing={1.5} alignItems="center">
<DeleteFilled
onClick={() => { remove(index) }}
/>
<Typography variant="h6"> {values.taskItems[index].title ? values.taskItems[index].title : "N/A"}</Typography>
</Stack>
</AccordionSummary>
<AccordionDetails>
<Grid container spacing={2}>
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor={`taskItems.${index}.title`}>Task Title</InputLabel>
<TextField
fullWidth
id={`taskItems.${index}.title`}
placeholder="Enter Task Title"
{...getFieldProps(`taskItems.${index}.title`)}
// error={Boolean(touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory)}
// helperText={touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory}
/>
</Stack>
</Grid>
<Grid item xs={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor={`taskItems.${index}.referenceImage`}>Task Reference Image</InputLabel>
<TextField
fullWidth
id={`taskItems.${index}.referenceImage`}
placeholder="Enter Task Reference Image"
{...getFieldProps(`taskItems.${index}.referenceImage`)}
// error={Boolean(touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory)}
// helperText={touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory}
/>
</Stack>
</Grid>
<Grid item xs={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor={`taskItems.${index}.referenceVideo`}>Task Reference Video</InputLabel>
<TextField
fullWidth
id={`taskItems.${index}.referenceVideo`}
placeholder="Enter Task Reference Video"
{...getFieldProps(`taskItems.${index}.referenceVideo`)}
// error={Boolean(touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory)}
// helperText={touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory}
/>
</Stack>
</Grid>
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor={`taskItems.${index}.description`}>Task Description</InputLabel>
<TextField
fullWidth
id={`taskItems.${index}.description`}
placeholder="Enter Task Description"
{...getFieldProps(`taskItems.${index}.description`)}
// error={Boolean(touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory)}
// helperText={touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory}
/>
</Stack>
</Grid>
<Grid item xs={12}>
<Stack spacing={1.25}>
<InputLabel htmlFor={`taskItems.${index}.howToDo`}>Task How To Do</InputLabel>
<TextField
fullWidth
id={`taskItems.${index}.howToDo`}
placeholder="Enter Task How To Do"
{...getFieldProps(`taskItems.${index}.howToDo`)}
// error={Boolean(touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory)}
// helperText={touched.ingredientNutritions![index].nutritionCategory && errors.ingredientNutritions![index].nutritionCategory}
/>
</Stack>
</Grid>
</Grid>
</AccordionDetails>
</Accordion>
</Box>
</>
)
})
}
</Grid >
</Grid>
</Box>
</MainCard>
</>
)
}}
</FieldArray>
</Grid>
</Grid>
</Grid>
</Grid>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment