updated the dialog actions for the submit and cancel buttons

This commit is contained in:
csawatzky 2025-03-04 13:44:13 -06:00
parent f2cf950a6b
commit 1982a93bf0
6 changed files with 45 additions and 29 deletions

View file

@ -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>
);

View file

@ -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">
Cancel
<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>

View file

@ -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>
);

View file

@ -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>
);

View file

@ -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>
);

View file

@ -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"