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

Merge pull request #71 from CPSC319-Winter-term-2/home

Browse Source 
bug fix for Schedule Meetings and Call Group
This commit is contained in:
Jincheng Lu 2022-03-30 17:45:40 -07:00 committed by GitHub
commit 0044435a11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControlLabel,
FormGroup,
@ -33,6 +34,7 @@ const CallFavouritesDialog: React.FC<Props> = ({
const [group, setGroup] = useState<string>("Favorites");
const [inputText, setInputText] = useState<string>("");
const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
const [urlDialog, seturlDialog] = useState({ open: false, url: "" });
const handleCheck = (uuid: string, checked: boolean) => {
if (checked) {
@ -58,8 +60,11 @@ const CallFavouritesDialog: React.FC<Props> = ({
const auth = useAuth();
const handleCall = async(e: React.SyntheticEvent) => {
const start = new Date().toISOString();
let newStart = start.split('.')[0];
newStart += start.includes("Z") ? "Z" : "";
const newMeeting: NewMeeting ={
startTime: new Date().toISOString(),
startTime: newStart,
duration: 60,
topic: "Quick Call to Group",
registrantIds: checkedUuids
@ -70,63 +75,77 @@ const CallFavouritesDialog: React.FC<Props> = ({
);
const meeting: DetailedMeeting = response?.data;
console.log("create meeting response: " + meeting.startTime + ":" + meeting.duration);
seturlDialog({ open: true, url: meeting.joinUrl });
handleClose();
};
return (
<Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
<DialogTitle>Select who to call:</DialogTitle>
<DialogContent>
<GroupSelect
group={group}
setGroup={setGroup}
onGroupChange={handleGroupChange}
/>
</DialogContent>
<DialogContent sx={{ height: "40vh" }} dividers>
<TextField
label="Search"
variant="outlined"
placeholder="Person"
fullWidth
sx={{ pb: 1 }}
onChange={(e) => {
setInputText(e.target.value);
}}
/>
<FormGroup>
{groupMembers
.filter((member) =>
member.name.toLowerCase().includes(inputText.toLowerCase())
)
.map((member) => (
<FormControlLabel
key={member.uuid}
label={member.name}
sx={{ pl: 1 }}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onChange={(e: any) => {
handleCheck(member.uuid, e.target.checked);
}}
control={
<Checkbox
color="success"
checked={checkedUuids.includes(member.uuid)}
/>
}
/>
))}
</FormGroup>
</DialogContent>
<>
<Dialog onClose={handleClose} open={open} fullWidth maxWidth="sm">
<DialogTitle>Select who to call:</DialogTitle>
<DialogContent>
<GroupSelect
group={group}
setGroup={setGroup}
onGroupChange={handleGroupChange}
/>
</DialogContent>
<DialogContent sx={{ height: "40vh" }} dividers>
<TextField
label="Search"
variant="outlined"
placeholder="Person"
fullWidth
sx={{ pb: 1 }}
onChange={(e) => {
setInputText(e.target.value);
}}
/>
<FormGroup>
{groupMembers
.filter((member) =>
member.name.toLowerCase().includes(inputText.toLowerCase())
)
.map((member) => (
<FormControlLabel
key={member.uuid}
label={member.name}
sx={{ pl: 1 }}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onChange={(e: any) => {
handleCheck(member.uuid, e.target.checked);
}}
control={
<Checkbox
color="success"
checked={checkedUuids.includes(member.uuid)}
/>
}
/>
))}
</FormGroup>
</DialogContent>
<DialogActions>
<Button color="success" onClick={handleCall}>
<Typography variant="button" color="black">
Call
</Typography>
</Button>
</DialogActions>
</Dialog>
<DialogActions>
<Button color="success" onClick={handleCall}>
<Typography variant="button" color="black">
Call
</Typography>
</Button>
</DialogActions>
</Dialog>
<Dialog
open={urlDialog.open}
onClose={() => {
seturlDialog({ open: false, url: "" });
}}
>
<DialogTitle>Join</DialogTitle>
<DialogContent>
<DialogContentText>{urlDialog.url}</DialogContentText>
</DialogContent>
</Dialog>
</>
);
};

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

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