UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bug fix for Schedule Meetings and Call Group

Browse Source
This commit is contained in:
CodeServer 2022-03-31 01:45:08 +01:00
parent eca6fba645
commit f008abe473
2 changed files with 180 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/home/CallFavouritesDialog.tsx
View File

@ -4,6 +4,7 @@ import {
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
DialogContentText,
DialogTitle, DialogTitle,
FormControlLabel, FormControlLabel,
FormGroup, FormGroup,
@ -33,6 +34,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
const [group, setGroup] = useState<string>("Favorites"); const [group, setGroup] = useState<string>("Favorites");
const [inputText, setInputText] = useState<string>(""); const [inputText, setInputText] = useState<string>("");
const [checkedUuids, setCheckedUuids] = useState<string[]>([]); const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
const [urlDialog, seturlDialog] = useState({ open: false, url: "" });
const handleCheck = (uuid: string, checked: boolean) => { const handleCheck = (uuid: string, checked: boolean) => {
if (checked) { if (checked) {
@ -58,8 +60,11 @@ const CallFavouritesDialog: React.FC<Props> = ({
const auth = useAuth(); const auth = useAuth();
const handleCall = async(e: React.SyntheticEvent) => { const handleCall = async(e: React.SyntheticEvent) => {
const start = new Date().toISOString();
let newStart = start.split('.')[0];
newStart += start.includes("Z") ? "Z" : "";
const newMeeting: NewMeeting ={ const newMeeting: NewMeeting ={
startTime: new Date().toISOString(), startTime: newStart,
duration: 60, duration: 60,
topic: "Quick Call to Group", topic: "Quick Call to Group",
registrantIds: checkedUuids registrantIds: checkedUuids
@ -70,63 +75,77 @@ const CallFavouritesDialog: React.FC<Props> = ({
); );
const meeting: DetailedMeeting = response?.data; const meeting: DetailedMeeting = response?.data;
console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration); console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration);
seturlDialog({ open: true, url: meeting.joinUrl });
handleClose(); handleClose();
}; };
return ( return (
<Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm"> <>
<DialogTitle>Select who to call:</DialogTitle> <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
<DialogContent> <DialogTitle>Select who to call:</DialogTitle>
<GroupSelect <DialogContent>
group={group} <GroupSelect
setGroup={setGroup} group={group}
onGroupChange={handleGroupChange} setGroup={setGroup}
/> onGroupChange={handleGroupChange}
</DialogContent> />
<DialogContent sx={{ height: "40vh" }} dividers> </DialogContent>
<TextField <DialogContent sx={{ height: "40vh" }} dividers>
label="Search" <TextField
variant="outlined" label="Search"
placeholder="Person" variant="outlined"
fullWidth placeholder="Person"
sx={{ pb: 1 }} fullWidth
onChange={(e) => { sx={{ pb: 1 }}
setInputText(e.target.value); onChange={(e) => {
}} setInputText(e.target.value);
/> }}
<FormGroup> />
{groupMembers <FormGroup>
.filter((member) => {groupMembers
member.name.toLowerCase().includes(inputText.toLowerCase()) .filter((member) =>
) member.name.toLowerCase().includes(inputText.toLowerCase())
.map((member) => ( )
<FormControlLabel .map((member) => (
key={member.uuid} <FormControlLabel
label={member.name} key={member.uuid}
sx={{ pl: 1 }} label={member.name}
// eslint-disable-next-line @typescript-eslint/no-explicit-any sx={{ pl: 1 }}
onChange={(e: any) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any
handleCheck(member.uuid, e.target.checked); onChange={(e: any) => {
}} handleCheck(member.uuid, e.target.checked);
control={ }}
<Checkbox control={
color="success" <Checkbox
checked={checkedUuids.includes(member.uuid)} color="success"
/> checked={checkedUuids.includes(member.uuid)}
} />
/> }
))} />
</FormGroup> ))}
</DialogContent> </FormGroup>
</DialogContent>
<DialogActions> <DialogActions>
<Button color="success" onClick={handleCall}> <Button color="success" onClick={handleCall}>
<Typography variant="button" color="black"> <Typography variant="button" color="black">
Call Call
</Typography> </Typography>
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
<Dialog
open={urlDialog.open}
onClose={() => {
seturlDialog({ open: false, url: "" });
}}
>
<DialogTitle>Join</DialogTitle>
<DialogContent>
<DialogContentText>{urlDialog.url}</DialogContentText>
</DialogContent>
</Dialog>
</>
); );
}; };

197
src/components/home/ScheduleMeetingDialog.tsx
View File

@ -4,6 +4,7 @@ import {
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
DialogContentText,
DialogTitle, DialogTitle,
FormControlLabel, FormControlLabel,
FormGroup, FormGroup,
@ -28,7 +29,7 @@ import {
handleClose: () => void; handleClose: () => void;
} }
const CallFavouritesDialog: React.FC<Props> = ({ const CallScheduledMeetingDialog: React.FC<Props> = ({
open, open,
handleClose, handleClose,
}: Props) => { }: Props) => {
@ -39,6 +40,7 @@ import {
const [group, setGroup] = useState<string>("Favorites"); const [group, setGroup] = useState<string>("Favorites");
const [inputText, setInputText] = useState<string>(""); const [inputText, setInputText] = useState<string>("");
const [checkedUuids, setCheckedUuids] = useState<string[]>([]); const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
const [urlDialog, seturlDialog] = useState({ open: false, url: "" });
const handleCheck = (uuid: string, checked: boolean) => { const handleCheck = (uuid: string, checked: boolean) => {
if (checked) { if (checked) {
@ -69,8 +71,11 @@ import {
const auth = useAuth(); const auth = useAuth();
const handleCall = async(e: React.SyntheticEvent) => { const handleCall = async(e: React.SyntheticEvent) => {
const start = meetingStartDate ? meetingStartDate.toISOString() : new Date().toISOString();
let newStart = start.split('.')[0];
newStart += start.includes("Z") ? "Z" : "";
const newMeeting: NewMeeting ={ const newMeeting: NewMeeting ={
startTime: meetingStartDate ? meetingStartDate.toISOString() : new Date().toISOString(), startTime: newStart,
duration: meetingDuration, duration: meetingDuration,
topic: meetingTopic, topic: meetingTopic,
registrantIds: checkedUuids registrantIds: checkedUuids
@ -81,98 +86,112 @@ import {
); );
const meeting: DetailedMeeting = response?.data; const meeting: DetailedMeeting = response?.data;
console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration); console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration);
seturlDialog({ open: true, url: meeting.joinUrl });
handleClose(); handleClose();
}; };
return ( return (
<Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm"> <>
<DialogTitle>Schedule A Meeting</DialogTitle> <Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
<DialogContent dividers> <DialogTitle>Schedule A Meeting</DialogTitle>
<LocalizationProvider dateAdapter={AdapterDateFns}> <DialogContent dividers>
<DateTimePicker <LocalizationProvider dateAdapter={AdapterDateFns}>
label="Meeting Start Date&Time" <DateTimePicker
value={meetingStartDate} label="Meeting Start Date&Time"
onChange={handleDateChange} value={meetingStartDate}
renderInput={(params) => <TextField {...params} />} onChange={handleDateChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
<TextField
className="meetingDuration-input"
id="outlined-number"
label="Duration"
variant="outlined"
value={meetingDuration}
type="number"
onChange={(event) => {
setMeetingDuration(parseInt(event.target.value));
}}
/> />
</LocalizationProvider> </DialogContent>
<TextField <DialogContent dividers>
className="meetingDuration-input" <TextField
id="outlined-number" fullWidth
label="Duration" className="meetingTopic-input"
variant="outlined" id="outlined-basic"
value={meetingDuration} label="Meeting Topic"
type="number" variant="outlined"
onChange={(event) => { value={meetingTopic}
setMeetingDuration(parseInt(event.target.value)); onChange={(event) => {
}} setMeetingTopic(event.target.value);
/> }}
</DialogContent> />
<DialogContent dividers> </DialogContent>
<TextField <DialogContent>
fullWidth <GroupSelect
className="meetingTopic-input" group={group}
id="outlined-basic" setGroup={setGroup}
label="Meeting Topic" onGroupChange={handleGroupChange}
variant="outlined" />
value={meetingTopic} </DialogContent>
onChange={(event) => { <DialogContent sx={{ height: "40vh" }} dividers>
setMeetingTopic(event.target.value); <TextField
}} label="Search"
/> variant="outlined"
</DialogContent> placeholder="Person"
<DialogContent> fullWidth
<GroupSelect sx={{ pb: 1 }}
group={group} onChange={(e) => {
setGroup={setGroup} setInputText(e.target.value);
onGroupChange={handleGroupChange} }}
/> />
</DialogContent> <FormGroup>
<DialogContent sx={{ height: "40vh" }} dividers> {groupMembers
<TextField .filter((member) =>
label="Search" member.name.toLowerCase().includes(inputText.toLowerCase())
variant="outlined" )
placeholder="Person" .map((member) => (
fullWidth <FormControlLabel
sx={{ pb: 1 }} key={member.uuid}
onChange={(e) => { label={member.name}
setInputText(e.target.value); sx={{ pl: 1 }}
}} // eslint-disable-next-line @typescript-eslint/no-explicit-any
/> onChange={(e: any) => {
<FormGroup> handleCheck(member.uuid, e.target.checked);
{groupMembers }}
.filter((member) => control={
member.name.toLowerCase().includes(inputText.toLowerCase()) <Checkbox
) color="success"
.map((member) => ( checked={checkedUuids.includes(member.uuid)}
<FormControlLabel />
key={member.uuid} }
label={member.name} />
sx={{ pl: 1 }} ))}
// eslint-disable-next-line @typescript-eslint/no-explicit-any </FormGroup>
onChange={(e: any) => { </DialogContent>
handleCheck(member.uuid, e.target.checked);
}} <DialogActions>
control={ <Button color="success" onClick={handleCall}>
<Checkbox <Typography variant="button" color="black">
color="success" Call
checked={checkedUuids.includes(member.uuid)} </Typography>
/> </Button>
} </DialogActions>
/> </Dialog>
))} <Dialog
</FormGroup> open={urlDialog.open}
</DialogContent> onClose={() => {
seturlDialog({ open: false, url: "" });
<DialogActions> }}
<Button color="success" onClick={handleCall}> >
<Typography variant="button" color="black"> <DialogTitle>Join</DialogTitle>
Call <DialogContent>
</Typography> <DialogContentText>{urlDialog.url}</DialogContentText>
</Button> </DialogContent>
</DialogActions> </Dialog>
</Dialog> </>
); );
}; };
export default CallFavouritesDialog; export default CallScheduledMeetingDialog;