@material-ui/icons#AddCircleOutlined JavaScript Examples
The following examples show how to use
@material-ui/icons#AddCircleOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: LoanpurposePage.js From SESTA-FMS with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes } = this.props;
let fpoFilters = this.state.getFPO;
let addFPO = this.state.values.addFPO;
let isCancel = this.state.isCancel;
return (
<Layout
breadcrumbs={
this.state.editPage[0]
? EDIT_LOANPURPOSE_BREADCRUMBS
: ADD_LOANPURPOSE_BREADCRUMBS
}
>
{!this.state.isLoader ? (
<Card style={{ maxWidth: "45rem" }}>
<form
autoComplete="off"
noValidate
onSubmit={this.handleSubmit}
method="post"
>
<CardHeader
title={
this.state.editPage[0]
? "Edit Loan Purpose"
: "Add Loan Purpose "
}
subheader={
this.state.editPage[0]
? "You can edit loan purpose data here!"
: "You can add new loan purpose data here!"
}
/>
<Divider />
<CardContent>
<Grid container spacing={3}>
<Grid item md={12} xs={12}>
{this.state.formSubmitted === true ? (
<Snackbar severity="success">
Loan Purpose added successfully.
</Snackbar>
) : null}
{this.state.formSubmitted === false ? (
<Snackbar severity="error" Showbutton={false}>
Network Error - Please try again!
</Snackbar>
) : null}
</Grid>
<Grid item md={6} xs={12}>
<Input
fullWidth
label="Product Name*"
name="addPurpose"
error={this.hasError("addPurpose")}
helperText={
this.hasError("addPurpose")
? this.state.errors.addPurpose[0]
: null
}
value={this.state.values.addPurpose || ""}
onChange={this.handleChange}
variant="outlined"
/>
</Grid>
<Grid item md={6} xs={12}>
<Input
fullWidth
label="Duration*"
type="number"
name="addDuration"
error={this.hasError("addDuration")}
helperText={
this.hasError("addDuration")
? this.state.errors.addDuration[0]
: null
}
value={this.state.values.addDuration || ""}
onChange={this.handleChange}
variant="outlined"
/>
</Grid>
<Grid item md={6} xs={12}>
<Input
fullWidth
label="Area/Size/Specifications*"
name="addSpecification"
error={this.hasError("addSpecification")}
helperText={
this.hasError("addSpecification")
? this.state.errors.addSpecification[0]
: null
}
value={this.state.values.addSpecification || ""}
onChange={this.handleChange}
variant="outlined"
/>
</Grid>
<Grid item md={6} xs={12}>
<Input
fullWidth
label="Total Amount*"
type="number"
name="addAmount"
error={this.hasError("addAmount")}
helperText={
this.hasError("addAmount")
? this.state.errors.addAmount[0]
: null
}
value={this.state.values.addAmount || ""}
onChange={this.handleChange}
variant="outlined"
/>
</Grid>
{this.state.loggedInUserRole === "Sesta Admin" ||
this.state.loggedInUserRole === "Superadmin" ? (
<Grid item md={6} xs={12}>
<Autotext
id="combo-box-demo"
options={fpoFilters}
variant="outlined"
label="FPO*"
getOptionLabel={(option) => option.name}
onChange={(event, value) => {
this.handleFpoChange(event, value);
}}
value={
addFPO
? this.state.isCancel === true
? null
: fpoFilters[
fpoFilters.findIndex(function (item, i) {
return item.id === addFPO;
})
] || null
: null
}
error={this.hasError("addFPO")}
helperText={
this.hasError("addFPO")
? this.state.errors.addFPO[0]
: null
}
renderInput={(params) => (
<Input
fullWidth
label="FPO*"
name="addFPO"
variant="outlined"
/>
)}
/>
</Grid>
) : null}
<Grid item md={6} xs={12}>
<Input
fullWidth
label="EMI*"
type="number"
name="addEMI"
error={this.hasError("addEMI")}
helperText={
this.hasError("addEMI")
? this.state.errors.addEMI[0]
: null
}
value={this.state.values.addEMI || ""}
onChange={this.handleChange}
variant="outlined"
/>
</Grid>
</Grid>
<br></br>
<Divider className="style.border " style={{ height: "2px" }} />
<br />
<span
style={{ "margin-left": "10px", "font-weight": "bolder" }}
>
EMI Installments
</span>
<br />
<br />
{this.createUI()}
<IconButton
aria-label="add"
onClick={this.addClick.bind(this)}
style={{ position: "relative", left: "15px" }}
>
<AddCircleOutlined className={classes.Icon} />
<span className={classes.labelHeader}>Add EMI</span>
</IconButton>
<Divider className="style.border " style={{ height: "2px" }} />
<br />
<span
style={{ "margin-left": "10px", "font-weight": "bolder" }}
>
Tasks
</span>
<br />
<br />
{this.createTaskUI()}
<IconButton
style={{ position: "relative", left: "15px" }}
aria-label="add"
onClick={this.addTaskClick.bind(this)}
>
<AddCircleOutlined className={classes.Icon} />
<span className={classes.labelHeader}>Add Task</span>
</IconButton>
</CardContent>
<CardActions style={{ padding: "15px" }}>
<Button type="submit">Save</Button>
<Button
color="secondary"
clicked={this.cancelForm}
component={Link}
to="/loanpurposes"
>
cancel
</Button>
</CardActions>
</form>
</Card>
) : (
<Spinner />
)}
</Layout>
);
}
