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

Feat/105 review modal text #126

Merged
merged 3 commits into from
Oct 20, 2023
Merged

Feat/105 review modal text #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
31e226b
Feat: Initial FormModal Structure
heronlancellot Oct 19, 2023
7fe1f0b
Initial Structure ReviewTask
heronlancellot Oct 20, 2023
308b0c5
Merge branch 'dev' into feat/105-review-modal-text
heronlancellot Oct 20, 2023
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
56 changes: 56 additions & 0 deletions src/components/Form/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { useEffect, useState } from 'react';

export default function FormDialog({ openForm, onSubmit }) {
const [open, setOpen] = useState<boolean>(false)
const [descriptionReview, setDescriptionReview] = useState()


const handleConfirmation = (event: { target: { value: any; }; }) => {
let description = event.target.value;
setDescriptionReview(description);
}

const handleClose = () => {
setOpen(false);
};

const handleSubmit = () => {
onSubmit(descriptionReview);
handleClose();
};

useEffect(() => {
setOpen(openForm)
}, [])

return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>Review Description</DialogTitle>
<DialogContent>
<DialogContentText>
Add your Task Description
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Well Done ! I like that approach. We should make that way. After that, increase the font size to 32. Any Help, contact-me on discord"
fullWidth
variant="standard"
onChange={(event) => (handleConfirmation(event))}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleSubmit}>Send</Button>
</DialogActions>
</Dialog>
);
}
118 changes: 69 additions & 49 deletions src/components/Task/CardTask.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Close from '@mui/icons-material/Close';
import Check from '@mui/icons-material/Check';
import { useSnackBar } from 'src/contexts/SnackBarContext';
import { ethers } from 'ethers';
import { set } from 'date-fns';
import FormDialog from '../Form';

/**
* CardTasks Component
Expand All @@ -26,7 +26,7 @@ import { set } from 'date-fns';
*/


export const CardTask = ({ taskId, taskData, loading }: any) => {
export const CardTask = ({ taskId, taskData, loading, setNewReview }: any) => {
const { startTask, reviewTask, completeTask, cancelTask, hasMemberRole, hasLeaderRole, hasVoted, getMinQuorum, getQuorumApprovals } = useTaskService();
const [openError, setOpenError] = useState(false);
const [error, setError] = useState<string>();
Expand All @@ -35,6 +35,21 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
const [approvals, setApprovals] = useState<string>();
const [isMember, setIsMember] = useState<boolean>(false);
const [isLeader, setIsLeader] = useState<boolean>(false);
const [openForm, setOpenForm] = useState<boolean>(false);

const handleOpenForm = async () => {
setOpenForm(true);
};

const handleFormSubmit = async (metadata: any) => {
console.log('metadata ', metadata);
setOpenForm(false);
console.log('taskId HANDLEFORMSUBMIT - CARDTASK', taskId);
console.log('dataForm HANDLEFORMSUBMIT - CARDTASK', metadata)
await reviewTask(BigInt(taskId), metadata).then(result => { setNewReview(true), handleSnackbar('Review Task process initiated with success!', 'info'), console.log('result', result) });

}

const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

Expand Down Expand Up @@ -68,12 +83,13 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
handleSnackbar('Task Start process initiated with success!', 'info')
break;
case "Progress":
await reviewTask(BigInt(taskId), "Hello, I already finished");
handleSnackbar('Review Task process initiated with success!', 'info')
handleOpenForm();


break;
case "Review":
await reviewTask(BigInt(taskId), "Awesome, contact me on Discord!");
handleSnackbar('Review Task process initiated with success!', 'info')
handleOpenForm();

break;
default:
break;
Expand Down Expand Up @@ -114,7 +130,7 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
} catch (error) {
setError(error.message)
setOpenError(true);
}
}
}

useEffect(() => {
Expand Down Expand Up @@ -177,7 +193,6 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
variant="body2"
style={{
textAlign: isSmallScreen ? 'left' : 'center',
// marginLeft: isSmallScreen ? 'auto' : 'unset',
backgroundColor: '#000000',
}}
>
Expand All @@ -196,42 +211,42 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
{taskData.title}
</Typography>
<Box display={'flex'} justifyContent="space-between" alignItems="center">

{
isLeader && taskData.status != "Canceled" &&
<Tooltip key={"top"} placement={"top"} title="Approvals">
<Typography >
{approvals}
</Typography>
</Tooltip>
}

{
isLeader && taskData.status != "Canceled" &&
<Tooltip key={"top"} placement={"top"} title="Complete Task">
<IconButton color="primary"
onClick={handleConfirm}>
<Check />
</IconButton>
</Tooltip>
}

{
isLeader && taskData.status != "Canceled" &&
<Tooltip key={"top"} placement={"top"} title="Cancel Task">
<IconButton color="primary"
onClick={handleCancel}>
<Close />

{
isLeader && taskData.status != "Canceled" &&
<Tooltip key={"top"} placement={"top"} title="Approvals">
<Typography >
{approvals}
</Typography>
</Tooltip>
}

{
isLeader && taskData.status != "Canceled" &&
<Tooltip key={"top"} placement={"top"} title="Complete Task">
<IconButton color="primary"
onClick={handleConfirm}>
<Check />
</IconButton>
</Tooltip>
}

{
isLeader && taskData.status != "Canceled" &&
<Tooltip key={"top"} placement={"top"} title="Review Task">
<IconButton color="primary"
onClick={handleCancel}>
<Close />
</IconButton>
</Tooltip>
}

<Tooltip key={"top"} placement={"top"} title="Share URL">
<IconButton color="primary"
onClick={copyContent}>
<OpenInNewIcon />
</IconButton>
</Tooltip>
}

<Tooltip key={"top"} placement={"top"} title="Share URL">
<IconButton color="primary"
onClick={copyContent}>
<OpenInNewIcon />
</IconButton>
</Tooltip>
</Box>
</Box>
<Typography gutterBottom variant='subtitle2' component="div">
Expand All @@ -255,14 +270,19 @@ export const CardTask = ({ taskId, taskData, loading }: any) => {
<Box display={'flex'} justifyContent="space-between" mt={6} >
{
taskData.status != "Completed" && taskData.status != "Canceled" &&
<Button
<>
<Button
variant="contained"
component="span"
onClick={handleAction}
>
{action}
</Button>

{openForm && <FormDialog openForm={openForm} onSubmit={handleFormSubmit} />}

</>

variant="contained"
component="span"
onClick={handleAction}
>
{action}
</Button>
}
<Button
startIcon={<AccessTime />}
Expand Down
30 changes: 17 additions & 13 deletions src/content/applications/Tasks/details/DetailsTask.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,30 @@ import { Helmet } from 'react-helmet-async';
import SuspenseLoader from 'src/components/SuspenseLoader'
import { useTaskService } from "src/services/tasks-service";
import { useTaskServiceHook } from "src/hooks/TaskServiceHook";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import CardTasks from "../../../../components/Task/CardTask";

const DetailsTask = () => {
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

const taskService = useTaskService();
const { taskId } = useParams();

const [newReview, setNewReview] = useState<boolean>(false);
const { handleTask, handleReview, taskData, taskReview, loading, error } = useTaskServiceHook(taskService);

useEffect(() => {
const fetchData = async () => {
await handleTask(Number(taskId));
await handleReview(Number(taskId));
};
const fetchData = async () => {
await handleTask(Number(taskId));
await handleReview(Number(taskId));
setNewReview(true)
};

useEffect(() => {
fetchData();
}, []);
console.log('newReview = ', newReview);
if (newReview) {
fetchData()
}
}, [newReview]);

return (
<>
Expand All @@ -46,7 +50,7 @@ const DetailsTask = () => {
(
<>
<Box width={isSmallScreen ? '100%' : 709} mt={isSmallScreen ? 2 : 0}>
<CardTasks taskId={taskId} taskData={taskData} loading={loading} />
<CardTasks taskId={taskId} taskData={taskData} loading={loading} setNewReview={setNewReview} />

<Box mt={4} width={isSmallScreen ? '100%' : 679} display={'flex'} flexDirection={isSmallScreen ? 'column' : 'row'} justifyContent={isSmallScreen ? 'center' : 'space-between'} alignItems={'center'}>
<Card sx={{ width: isSmallScreen ? '100%' : 192, height: 119, justifyContent: 'center', marginBottom: isSmallScreen ? '16px' : '0' }}>
Expand All @@ -63,11 +67,11 @@ const DetailsTask = () => {

<Card sx={{ width: isSmallScreen ? '100%' : 434, height: 119, justifyContent: isSmallScreen ? 'center' : 'left' }}>
<CardContent style={{ maxHeight: '200px', overflowY: 'auto' }}>
{/* <CardContent> */}
{/* <CardContent> */}
<Typography gutterBottom variant="h4" textAlign={'left'} component="div">
Reviews
</Typography>
<Divider />
<Divider />
<Typography variant="h6" textAlign={'left'} mt={1} component="div">
{taskReview ? (taskReview.map((review: any) => {
return (
Expand All @@ -78,7 +82,7 @@ const DetailsTask = () => {
</Box>
)
})) : 'No reviews provided for this task.'}
</Typography>
</Typography>
</CardContent>
</Card>
</Box>
Expand Down
Loading