brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated the dialog actions for the submit and cancel buttons

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
src/common/TagSettings.tsx
View file

@ -17,6 +17,7 @@ import { useState } from "react";
import { Tag as TagUI } from "./Tag"; import { Tag as TagUI } from "./Tag";
import { red } from "@mui/material/colors"; import { red } from "@mui/material/colors";
import { makeStyles, withStyles } from "@mui/styles"; import { makeStyles, withStyles } from "@mui/styles";
import CancelSubmit from "./CancelSubmit";
const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
return ({ return ({
@ -72,12 +73,13 @@ function ConfirmDeleteTag(props: ConfirmDeleteTagProps) {
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => onClose()} color="primary"> <CancelSubmit onSubmit={onSubmit} onCancel={onClose}/>
{/* <Button onClick={() => onClose()} color="primary">
Cancel Cancel
</Button> </Button>
<Button onClick={() => onSubmit()} color="primary"> <Button onClick={() => onSubmit()} color="primary">
Submit Submit
</Button> </Button> */}
</DialogActions> </DialogActions>
</Dialog> </Dialog>
); );

12
src/component/ComponentSettings.tsx
View file

@ -67,6 +67,7 @@ import {
Add as AddIcon, Add as AddIcon,
} from "@mui/icons-material" } from "@mui/icons-material"
import CancelSubmit from "common/CancelSubmit";
const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
return ({ return ({
@ -820,7 +821,7 @@ export default function ComponentSettings(props: Props) {
const actions = () => { const actions = () => {
return ( return (
<DialogActions> <DialogActions>
<Grid container justifyContent="space-between" direction="row"> <Grid container justifyContent="space-between" direction="row" width={"100%"}>
<Grid size={{ xs: 5 }} > <Grid size={{ xs: 5 }} >
{mode === "add" ? ( {mode === "add" ? (
<Button disabled={activeStep === 0} onClick={stepBack} color="primary"> <Button disabled={activeStep === 0} onClick={stepBack} color="primary">
@ -834,7 +835,9 @@ export default function ComponentSettings(props: Props) {
{mode === "add" ? ( {mode === "add" ? (
<React.Fragment> <React.Fragment>
<Button onClick={close} color="primary"> <Button onClick={close} color="primary">
Cancel <Typography variant="subtitle2" color="textPrimary">
Cancel
</Typography>
</Button> </Button>
{activeStep === steps.length - 1 ? ( {activeStep === steps.length - 1 ? (
<Button color="primary" onClick={addComponent} disabled={!formValid}> <Button color="primary" onClick={addComponent} disabled={!formValid}>
@ -848,14 +851,15 @@ export default function ComponentSettings(props: Props) {
</React.Fragment> </React.Fragment>
) : ( ) : (
<React.Fragment> <React.Fragment>
<Button onClick={close} color="primary"> <CancelSubmit onSubmit={updateComponent} onCancel={close} submitDisabled={!canEdit || !formValid}/>
{/* <Button onClick={close} color="primary">
Cancel Cancel
</Button> </Button>
{canEdit && ( {canEdit && (
<Button onClick={updateComponent} color="primary" disabled={!formValid}> <Button onClick={updateComponent} color="primary" disabled={!formValid}>
Submit Submit
</Button> </Button>
)} )} */}
</React.Fragment> </React.Fragment>
)} )}
</Grid> </Grid>

12
src/device/DeviceSettings.tsx
View file

@ -32,6 +32,7 @@ import { quack } from "protobuf-ts/quack";
import LinearMutationBuilder from "common/LinearMutationBuilder"; import LinearMutationBuilder from "common/LinearMutationBuilder";
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import CancelSubmit from "common/CancelSubmit";
interface TabPanelProps { interface TabPanelProps {
children?: React.ReactNode; children?: React.ReactNode;
@ -584,17 +585,18 @@ export default function DeviceSettings(props: Props) {
const actions = () => { const actions = () => {
return ( return (
<Grid container justifyContent="space-between" direction="row"> <Grid container justifyContent="space-between" direction="row" width={"100%"}>
<Grid size={{ xs: 5 }}> <Grid>
{canRemove() && <DeleteButton onClick={confirmRemoveDevice}>Delete</DeleteButton>} {canRemove() && <DeleteButton onClick={confirmRemoveDevice}>Delete</DeleteButton>}
</Grid> </Grid>
<Grid size={{ xs: 7 }} container justifyContent="flex-end"> <Grid container justifyContent="flex-end">
<Button onClick={close} color="primary"> <CancelSubmit onSubmit={submitSettings} onCancel={close}/>
{/* <Button onClick={close} color="primary">
Cancel Cancel
</Button> </Button>
<Button onClick={submitSettings} color="primary" disabled={!isFormValid() || !canEdit}> <Button onClick={submitSettings} color="primary" disabled={!isFormValid() || !canEdit}>
Submit Submit
</Button> </Button> */}
</Grid> </Grid>
</Grid> </Grid>
); );

12
src/group/GroupSettings.tsx
View file

@ -23,6 +23,7 @@ import {
Typography Typography
} from "@mui/material"; } from "@mui/material";
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
import CancelSubmit from "common/CancelSubmit";
// import { darken, lighten } from "@material-ui/core/styles/colorManipulator"; // import { darken, lighten } from "@material-ui/core/styles/colorManipulator";
// import { Theme } from "@material-ui/core/styles/createMuiTheme"; // import { Theme } from "@material-ui/core/styles/createMuiTheme";
import DeleteButton from "common/DeleteButton"; import DeleteButton from "common/DeleteButton";
@ -435,7 +436,7 @@ export default function GroupSettings(props: Props) {
const actions = () => { const actions = () => {
return ( return (
<Grid2 container justifyContent="space-between" direction="row"> <Grid2 container justifyContent="space-between" direction="row" width={"100%"}>
<Grid2 size={{ xs: 5 }}> <Grid2 size={{ xs: 5 }}>
{mode === "add" ? ( {mode === "add" ? (
<Button onClick={backStep} color="primary" disabled={tabIndex === 0}> <Button onClick={backStep} color="primary" disabled={tabIndex === 0}>
@ -447,7 +448,12 @@ export default function GroupSettings(props: Props) {
)} )}
</Grid2> </Grid2>
<Grid2 size={{ xs: 7 }} container justifyContent="flex-end"> <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 Cancel
</Button> </Button>
{(mode === "add" && tabIndex === steps.length - 1) || mode === "update" {(mode === "add" && tabIndex === steps.length - 1) || mode === "update"
@ -460,7 +466,7 @@ export default function GroupSettings(props: Props) {
<Button onClick={nextStep} color="primary"> <Button onClick={nextStep} color="primary">
Next Next
</Button> </Button>
)} )} */}
</Grid2> </Grid2>
</Grid2> </Grid2>
); );

8
src/interactions/InteractionSettings.tsx
View file

@ -64,6 +64,7 @@ import { green, red } from "@mui/material/colors";
import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers"; import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import dayjs from "dayjs"; import dayjs from "dayjs";
import CancelSubmit from "common/CancelSubmit";
// import { Sensor } from "ventilation/drawable/Sensor"; // import { Sensor } from "ventilation/drawable/Sensor";
@ -1555,14 +1556,15 @@ export default function InteractionSettings(props: Props) {
const actions = () => { const actions = () => {
return ( return (
<Grid container justifyContent="space-between" direction="row"> <Grid container justifyContent="space-between" direction="row" width={"100%"}>
<Grid size={{ xs: 5 }}> <Grid size={{ xs: 5 }}>
{mode === "update" && canEdit && ( {mode === "update" && canEdit && (
<DeleteButton onClick={openRemoveInteraction}>Delete</DeleteButton> <DeleteButton onClick={openRemoveInteraction}>Delete</DeleteButton>
)} )}
</Grid> </Grid>
<Grid size={{ xs: 7 }} container justifyContent="flex-end"> <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 Cancel
</Button> </Button>
{canEdit && ( {canEdit && (
@ -1572,7 +1574,7 @@ export default function InteractionSettings(props: Props) {
disabled={!isInteractionValid(interaction) || invalidConditionValues()}> disabled={!isInteractionValid(interaction) || invalidConditionValues()}>
Submit Submit
</Button> </Button>
)} )} */}
</Grid> </Grid>
</Grid> </Grid>
); );

24
src/objects/bulkEditForms/bulkGrainBagSettings.tsx
View file

@ -1,5 +1,5 @@
//import { Button, Grid, TextField } from "@material-ui/core"; //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 SearchSelect, { Option } from "common/SearchSelect";
import { GrainOptions } from "grain"; import { GrainOptions } from "grain";
import { GrainBag } from "models/GrainBag"; import { GrainBag } from "models/GrainBag";
@ -77,7 +77,7 @@ export default function BulkGrainBagSettings(props: Props) {
<React.Fragment> <React.Fragment>
<Grid container direction="row" spacing={2} alignContent="center" alignItems="center"> <Grid container direction="row" spacing={2} alignContent="center" alignItems="center">
{/* first row */} {/* first row */}
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Name" label="Name"
@ -87,7 +87,7 @@ export default function BulkGrainBagSettings(props: Props) {
}} }}
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Length" label="Length"
@ -98,7 +98,7 @@ export default function BulkGrainBagSettings(props: Props) {
}} }}
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Diameter" label="Diameter"
@ -109,7 +109,7 @@ export default function BulkGrainBagSettings(props: Props) {
}} }}
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Capacity" label="Capacity"
@ -122,7 +122,7 @@ export default function BulkGrainBagSettings(props: Props) {
</Grid> </Grid>
{/* second row */} {/* second row */}
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<SearchSelect <SearchSelect
label="Grain Type" label="Grain Type"
selected={grainOption} selected={grainOption}
@ -137,7 +137,7 @@ export default function BulkGrainBagSettings(props: Props) {
options={GrainOptions()} options={GrainOptions()}
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Grain Variant" label="Grain Variant"
@ -148,7 +148,7 @@ export default function BulkGrainBagSettings(props: Props) {
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Custom Grain" label="Custom Grain"
@ -158,7 +158,7 @@ export default function BulkGrainBagSettings(props: Props) {
}} }}
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Bushels" label="Bushels"
@ -171,7 +171,7 @@ export default function BulkGrainBagSettings(props: Props) {
</Grid> </Grid>
{/* last row */} {/* last row */}
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
type="date" type="date"
@ -181,7 +181,7 @@ export default function BulkGrainBagSettings(props: Props) {
onChange={e => setFillDate(e.target.value)} onChange={e => setFillDate(e.target.value)}
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<TextField <TextField
fullWidth fullWidth
label="Initial Moisture" label="Initial Moisture"
@ -192,7 +192,7 @@ export default function BulkGrainBagSettings(props: Props) {
}} }}
/> />
</Grid> </Grid>
<Grid item xs={gridItemWidth}> <Grid size={gridItemWidth}>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"