mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-21 14:48:43 +00:00
75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
/*
|
|
* QQQ - Low-code Application Framework for Engineers.
|
|
* Copyright (C) 2021-2024. Kingsrook, LLC
|
|
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
|
* contact@kingsrook.com
|
|
* https://github.com/Kingsrook/
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
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 TextField from "@mui/material/TextField";
|
|
import React, {useState} from "react";
|
|
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
|
|
|
|
|
|
/*******************************************************************************
|
|
** Component that is the dialog for the user to enter the selection-subset
|
|
*******************************************************************************/
|
|
export default function SelectionSubsetDialog(props: { isOpen: boolean; initialValue: number; closeHandler: (value?: number) => void })
|
|
{
|
|
const [value, setValue] = useState(props.initialValue);
|
|
|
|
const handleChange = (newValue: string) =>
|
|
{
|
|
setValue(parseInt(newValue));
|
|
};
|
|
|
|
const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
|
|
{
|
|
if (e.key == "Enter" && value)
|
|
{
|
|
props.closeHandler(value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={props.isOpen} onClose={() => props.closeHandler()} onKeyPress={(e) => keyPressed(e)}>
|
|
<DialogTitle>Subset of the Query Result</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>How many records do you want to select?</DialogContentText>
|
|
<TextField
|
|
autoFocus
|
|
name="selection-subset-size"
|
|
inputProps={{width: "100%", type: "number", min: 1}}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
value={value}
|
|
sx={{width: "100%"}}
|
|
onFocus={event => event.target.select()}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<QCancelButton disabled={false} onClickHandler={() => props.closeHandler()} />
|
|
<QSaveButton label="OK" iconName="check" disabled={value == undefined || isNaN(value)} onClickHandler={() => props.closeHandler(value)} />
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|