121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
import {
|
|
Button,
|
|
Checkbox,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
FormControlLabel,
|
|
FormGroup,
|
|
TextField,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import React, { useState } from "react";
|
|
import { useAppSelector } from "../../redux/hooks";
|
|
import { selectFavorites } from "../../redux/slices/favoritesSlice";
|
|
import { selectTeam, selectUsers } from "../../redux/slices/usersSlice";
|
|
import GroupSelect from "../sidebar/GroupSelect";
|
|
import { SidebarUserObj } from "./Home";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
selectedValue: SidebarUserObj;
|
|
onClose: (value: SidebarUserObj) => void;
|
|
users: SidebarUserObj[];
|
|
}
|
|
|
|
const CallFavouritesDialog: React.FC<Props> = ({
|
|
open,
|
|
selectedValue,
|
|
onClose,
|
|
users,
|
|
}: Props) => {
|
|
const handleClose = () => {
|
|
onClose(selectedValue);
|
|
};
|
|
console.log(users);
|
|
|
|
const [group, setGroup] = useState<string>("Favorites");
|
|
const [inputText, setInputText] = useState<string>("");
|
|
const [checkedUuids, setCheckedUuids] = useState<string[]>([]);
|
|
|
|
const handleCheck = (uuid: string, checked: boolean) => {
|
|
if (checked) {
|
|
setCheckedUuids(checkedUuids.concat([uuid]));
|
|
} else {
|
|
setCheckedUuids(checkedUuids.filter((id) => id != uuid));
|
|
}
|
|
};
|
|
|
|
const handleGroupChange = () => {
|
|
setCheckedUuids([]);
|
|
};
|
|
|
|
const favoritesUuids = useAppSelector(selectFavorites);
|
|
const teamUuids = useAppSelector(selectTeam);
|
|
|
|
const groupMembersUuids: string[] =
|
|
group === "Favorites" ? favoritesUuids : teamUuids;
|
|
const groupMembers = useAppSelector((state) =>
|
|
selectUsers(state, groupMembersUuids)
|
|
);
|
|
|
|
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>
|
|
|
|
<DialogActions>
|
|
<Button color="success" onClick={handleClose}>
|
|
<Typography variant="button" color="black">
|
|
Call
|
|
</Typography>
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default CallFavouritesDialog;
|