updated the dialog actions for the submit and cancel buttons
This commit is contained in:
parent
f2cf950a6b
commit
1982a93bf0
6 changed files with 45 additions and 29 deletions
|
|
@ -17,6 +17,7 @@ import { useState } from "react";
|
|||
import { Tag as TagUI } from "./Tag";
|
||||
import { red } from "@mui/material/colors";
|
||||
import { makeStyles, withStyles } from "@mui/styles";
|
||||
import CancelSubmit from "./CancelSubmit";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return ({
|
||||
|
|
@ -72,12 +73,13 @@ function ConfirmDeleteTag(props: ConfirmDeleteTagProps) {
|
|||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => onClose()} color="primary">
|
||||
<CancelSubmit onSubmit={onSubmit} onCancel={onClose}/>
|
||||
{/* <Button onClick={() => onClose()} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => onSubmit()} color="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</Button> */}
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ import {
|
|||
Add as AddIcon,
|
||||
|
||||
} from "@mui/icons-material"
|
||||
import CancelSubmit from "common/CancelSubmit";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
return ({
|
||||
|
|
@ -820,7 +821,7 @@ export default function ComponentSettings(props: Props) {
|
|||
const actions = () => {
|
||||
return (
|
||||
<DialogActions>
|
||||
<Grid container justifyContent="space-between" direction="row">
|
||||
<Grid container justifyContent="space-between" direction="row" width={"100%"}>
|
||||
<Grid size={{ xs: 5 }} >
|
||||
{mode === "add" ? (
|
||||
<Button disabled={activeStep === 0} onClick={stepBack} color="primary">
|
||||
|
|
@ -834,7 +835,9 @@ export default function ComponentSettings(props: Props) {
|
|||
{mode === "add" ? (
|
||||
<React.Fragment>
|
||||
<Button onClick={close} color="primary">
|
||||
<Typography variant="subtitle2" color="textPrimary">
|
||||
Cancel
|
||||
</Typography>
|
||||
</Button>
|
||||
{activeStep === steps.length - 1 ? (
|
||||
<Button color="primary" onClick={addComponent} disabled={!formValid}>
|
||||
|
|
@ -848,14 +851,15 @@ export default function ComponentSettings(props: Props) {
|
|||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Button onClick={close} color="primary">
|
||||
<CancelSubmit onSubmit={updateComponent} onCancel={close} submitDisabled={!canEdit || !formValid}/>
|
||||
{/* <Button onClick={close} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
{canEdit && (
|
||||
<Button onClick={updateComponent} color="primary" disabled={!formValid}>
|
||||
Submit
|
||||
</Button>
|
||||
)}
|
||||
)} */}
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import { quack } from "protobuf-ts/quack";
|
|||
import LinearMutationBuilder from "common/LinearMutationBuilder";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import CancelSubmit from "common/CancelSubmit";
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
|
|
@ -584,17 +585,18 @@ export default function DeviceSettings(props: Props) {
|
|||
|
||||
const actions = () => {
|
||||
return (
|
||||
<Grid container justifyContent="space-between" direction="row">
|
||||
<Grid size={{ xs: 5 }}>
|
||||
<Grid container justifyContent="space-between" direction="row" width={"100%"}>
|
||||
<Grid>
|
||||
{canRemove() && <DeleteButton onClick={confirmRemoveDevice}>Delete</DeleteButton>}
|
||||
</Grid>
|
||||
<Grid size={{ xs: 7 }} container justifyContent="flex-end">
|
||||
<Button onClick={close} color="primary">
|
||||
<Grid container justifyContent="flex-end">
|
||||
<CancelSubmit onSubmit={submitSettings} onCancel={close}/>
|
||||
{/* <Button onClick={close} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={submitSettings} color="primary" disabled={!isFormValid() || !canEdit}>
|
||||
Submit
|
||||
</Button>
|
||||
</Button> */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {
|
|||
Typography
|
||||
} from "@mui/material";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import CancelSubmit from "common/CancelSubmit";
|
||||
// import { darken, lighten } from "@material-ui/core/styles/colorManipulator";
|
||||
// import { Theme } from "@material-ui/core/styles/createMuiTheme";
|
||||
import DeleteButton from "common/DeleteButton";
|
||||
|
|
@ -435,7 +436,7 @@ export default function GroupSettings(props: Props) {
|
|||
|
||||
const actions = () => {
|
||||
return (
|
||||
<Grid2 container justifyContent="space-between" direction="row">
|
||||
<Grid2 container justifyContent="space-between" direction="row" width={"100%"}>
|
||||
<Grid2 size={{ xs: 5 }}>
|
||||
{mode === "add" ? (
|
||||
<Button onClick={backStep} color="primary" disabled={tabIndex === 0}>
|
||||
|
|
@ -447,7 +448,12 @@ export default function GroupSettings(props: Props) {
|
|||
)}
|
||||
</Grid2>
|
||||
<Grid2 size={{ xs: 7 }} container justifyContent="flex-end">
|
||||
<Button onClick={close} color="primary">
|
||||
<CancelSubmit
|
||||
onSubmit={(mode === "add" && tabIndex === steps.length - 1) || mode === "update" ? submit : nextStep}
|
||||
submitText={(mode === "add" && tabIndex === steps.length - 1) || mode === "update" ? "Submit" : "Next"}
|
||||
onCancel={close}
|
||||
submitDisabled={!isFormValid()}/>
|
||||
{/* <Button onClick={close} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
{(mode === "add" && tabIndex === steps.length - 1) || mode === "update"
|
||||
|
|
@ -460,7 +466,7 @@ export default function GroupSettings(props: Props) {
|
|||
<Button onClick={nextStep} color="primary">
|
||||
Next
|
||||
</Button>
|
||||
)}
|
||||
)} */}
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ import { green, red } from "@mui/material/colors";
|
|||
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
|
||||
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
|
||||
import dayjs from "dayjs";
|
||||
import CancelSubmit from "common/CancelSubmit";
|
||||
|
||||
// import { Sensor } from "ventilation/drawable/Sensor";
|
||||
|
||||
|
|
@ -1555,14 +1556,15 @@ export default function InteractionSettings(props: Props) {
|
|||
|
||||
const actions = () => {
|
||||
return (
|
||||
<Grid container justifyContent="space-between" direction="row">
|
||||
<Grid container justifyContent="space-between" direction="row" width={"100%"}>
|
||||
<Grid size={{ xs: 5 }}>
|
||||
{mode === "update" && canEdit && (
|
||||
<DeleteButton onClick={openRemoveInteraction}>Delete</DeleteButton>
|
||||
)}
|
||||
</Grid>
|
||||
<Grid size={{ xs: 7 }} container justifyContent="flex-end">
|
||||
<Button onClick={close} color="primary">
|
||||
<CancelSubmit onSubmit={submit} onCancel={close} submitDisabled={!canEdit || !isInteractionValid(interaction) || invalidConditionValues()}/>
|
||||
{/* <Button onClick={close} color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
{canEdit && (
|
||||
|
|
@ -1572,7 +1574,7 @@ export default function InteractionSettings(props: Props) {
|
|||
disabled={!isInteractionValid(interaction) || invalidConditionValues()}>
|
||||
Submit
|
||||
</Button>
|
||||
)}
|
||||
)} */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
//import { Button, Grid, TextField } from "@material-ui/core";
|
||||
import { Button, Grid, TextField } from "@mui/material";
|
||||
import { Button, Grid2 as Grid, TextField } from "@mui/material";
|
||||
import SearchSelect, { Option } from "common/SearchSelect";
|
||||
import { GrainOptions } from "grain";
|
||||
import { GrainBag } from "models/GrainBag";
|
||||
|
|
@ -77,7 +77,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
<React.Fragment>
|
||||
<Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
|
||||
{/* first row */}
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name"
|
||||
|
|
@ -87,7 +87,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Length"
|
||||
|
|
@ -98,7 +98,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Diameter"
|
||||
|
|
@ -109,7 +109,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Capacity"
|
||||
|
|
@ -122,7 +122,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
</Grid>
|
||||
|
||||
{/* second row */}
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<SearchSelect
|
||||
label="Grain Type"
|
||||
selected={grainOption}
|
||||
|
|
@ -137,7 +137,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
options={GrainOptions()}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Grain Variant"
|
||||
|
|
@ -148,7 +148,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Custom Grain"
|
||||
|
|
@ -158,7 +158,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Bushels"
|
||||
|
|
@ -171,7 +171,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
</Grid>
|
||||
|
||||
{/* last row */}
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
type="date"
|
||||
|
|
@ -181,7 +181,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
onChange={e => setFillDate(e.target.value)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Initial Moisture"
|
||||
|
|
@ -192,7 +192,7 @@ export default function BulkGrainBagSettings(props: Props) {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={gridItemWidth}>
|
||||
<Grid size={gridItemWidth}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue