41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import {
|
|
Modal,
|
|
ModalDialog,
|
|
Typography,
|
|
ModalClose,
|
|
Autocomplete,
|
|
} from "@mui/joy";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface SelectUserModalProps {
|
|
showSelectUser: boolean;
|
|
setShowSelectUser: (value: boolean) => void;
|
|
usernameData: { users: string[] };
|
|
usernameDataIsLoading: boolean;
|
|
selectedUser: string | null;
|
|
handleUserSelection: (value: string | null) => void;
|
|
}
|
|
|
|
export const SelectUserModal = (props: SelectUserModalProps) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Modal open={props.showSelectUser}>
|
|
<ModalDialog color="primary" layout="center" size="lg">
|
|
<ModalClose onClick={() => props.setShowSelectUser(false)} />
|
|
<Typography>{t("user")}</Typography>
|
|
{/* User selection */}
|
|
<Autocomplete
|
|
options={props.usernameData?.users ?? []}
|
|
loading={props.usernameDataIsLoading}
|
|
loadingText={t("loading")}
|
|
value={props.selectedUser}
|
|
onChange={(_, value) => props.handleUserSelection(value)}
|
|
placeholder={t("user")}
|
|
variant="soft"
|
|
sx={{ borderRadius: "10px" }}
|
|
/>
|
|
</ModalDialog>
|
|
</Modal>
|
|
);
|
|
};
|