diff --git a/src/Layout/component/Drawer.tsx b/src/Layout/component/Drawer.tsx index 71c086d..b3ef85a 100644 --- a/src/Layout/component/Drawer.tsx +++ b/src/Layout/component/Drawer.tsx @@ -41,6 +41,7 @@ import { Company } from "../../interface/companyInterface"; import { Collapse } from "@material-ui/core"; import packageJson from "../../../package.json"; import { isMaster } from "../../function/checkRole"; +import { history } from "../../store"; const drawerWidth = "15vw"; @@ -139,6 +140,10 @@ class PermanentDrawerLeft extends React.Component { })); }; + handleOfferModel = () => { + history.push('/offermodel') + } + render() { const { classes } = this.props; const itemlist1 = [ @@ -485,6 +490,15 @@ class PermanentDrawerLeft extends React.Component { + + + + + + + + + this.props.showSnackBar()}> diff --git a/src/scenes/OfferModelPage/index.tsx b/src/scenes/OfferModelPage/index.tsx index d3754c7..c2c6643 100644 --- a/src/scenes/OfferModelPage/index.tsx +++ b/src/scenes/OfferModelPage/index.tsx @@ -1,824 +1,1971 @@ import React from "react"; import PropTypes from "prop-types"; -import { Grid, Theme, createStyles, Paper, WithStyles, withStyles, Divider, TextField, Typography, IconButton, ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails } from "@material-ui/core"; +import { + Grid, + Theme, + createStyles, + Paper, + WithStyles, + withStyles, + Divider, + TextField, + Typography, + IconButton, + ExpansionPanel, + ExpansionPanelSummary, + ExpansionPanelDetails +} from "@material-ui/core"; import { mapDispatchToProps } from "../../helper/dispachProps"; import { connect } from "react-redux"; import DeleteIcon from "@material-ui/icons/Delete"; import AddIcon from "@material-ui/icons/Add"; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import color from "@material-ui/core/colors/pink"; const styles = (theme: Theme) => - createStyles({ - root: { - flexGrow: 1, - fontSize: 13, - }, - title: { - fontSize: 20 - }, - subtitle: { - fontWeight: 'bold' - }, - paper: { - height: '100%', - padding: 10, - textAlign: 'center', - color: theme.palette.text.secondary, - }, - spacediv: { - height: 20 - }, - container: { - borderRadius: 4, - borderWidth: 0.5, - borderStyle: "solid" - }, - colorcontainer: { - background: '#e6d5c5', - }, - verticaltext: { - transform: 'rotate(0.5turn)' - } - }); + createStyles({ + root: { + flexGrow: 1, + fontSize: 13 + }, + title: { + fontSize: 20 + }, + subtitle: { + fontWeight: "bold" + }, + paper: { + height: "100%", + padding: 10, + textAlign: "center", + color: theme.palette.text.secondary + }, + spacediv: { + height: 20 + }, + container: { + borderRadius: 4, + borderWidth: 0.5, + borderStyle: "solid" + }, + colorcontainer: { + // background: "#e6d5c5" + background: theme.palette.primary.main, + color: "#000", + padding: "0.5rem", + fontWeight: "bold" + }, + verticaltext: { + transform: "rotate(0.5turn)" + }, + paperpadding: { + padding: "1rem" + } + }); -interface Props extends WithStyles { } +interface Props extends WithStyles {} interface Bonus { - name: string, - CNY: string + name: string; + CNY: string; } interface State { - guaranteedcash_current: Bonus[]; - guaranteedcash_propose: Bonus[]; - shortterm_current: Bonus[]; - shortterm_propose: Bonus[]; - longterm_current: Bonus[]; - longterm_propose: Bonus[]; - signons_current: Bonus[]; - signons_propose: Bonus[]; + guaranteedcash_current: Bonus[]; + guaranteedcash_propose: Bonus[]; + shortterm_current: Bonus[]; + shortterm_propose: Bonus[]; + longterm_current: Bonus[]; + longterm_propose: Bonus[]; + signons_current: Bonus[]; + signons_propose: Bonus[]; } class OfferModelPage extends React.Component { - state = { - guaranteedcash_current: [], - guaranteedcash_propose: [], - shortterm_current: [], - shortterm_propose: [], - longterm_current: [], - longterm_propose: [], - signons_current: [], - signons_propose: [], - } + state = { + guaranteedcash_current: [], + guaranteedcash_propose: [], + shortterm_current: [], + shortterm_propose: [], + longterm_current: [], + longterm_propose: [], + signons_current: [], + signons_propose: [] + }; - handleDeleteGC = (index) => { this.setState(state => { const guaranteedcash_current = state.guaranteedcash_current.filter((item, j) => index !== j); return { guaranteedcash_current, }; }); } - handleAddGC = () => { this.setState(state => { const guaranteedcash_current = state.guaranteedcash_current.concat({ name: '', CNY: '' }); return { guaranteedcash_current }; }); }; - handleDeleteGP = (index) => { this.setState(state => { const guaranteedcash_propose = state.guaranteedcash_propose.filter((item, j) => index !== j); return { guaranteedcash_propose, }; }); } - handleAddGP = () => { this.setState(state => { const guaranteedcash_propose = state.guaranteedcash_propose.concat({ name: '', CNY: '' }); return { guaranteedcash_propose }; }); }; - - handleDeleteSC = (index) => { this.setState(state => { const shortterm_current = state.shortterm_current.filter((item, j) => index !== j); return { shortterm_current, }; }); } - handleAddSC = () => { this.setState(state => { const shortterm_current = state.shortterm_current.concat({ name: '', CNY: '' }); return { shortterm_current }; }); }; - handleDeleteSP = (index) => { this.setState(state => { const shortterm_propose = state.shortterm_propose.filter((item, j) => index !== j); return { shortterm_propose, }; }); } - handleAddSP = () => { this.setState(state => { const shortterm_propose = state.shortterm_propose.concat({ name: '', CNY: '' }); return { shortterm_propose }; }); }; - - handleDeleteLC = (index) => { this.setState(state => { const longterm_current = state.longterm_current.filter((item, j) => index !== j); return { longterm_current, }; }); } - handleAddLC = () => { this.setState(state => { const longterm_current = state.longterm_current.concat({ name: '', CNY: '' }); return { longterm_current }; }); }; - handleDeleteLP = (index) => { this.setState(state => { const longterm_propose = state.longterm_propose.filter((item, j) => index !== j); return { longterm_propose, }; }); } - handleAddLP = () => { this.setState(state => { const longterm_propose = state.longterm_propose.concat({ name: '', CNY: '' }); return { longterm_propose }; }); }; - - handleDeleteSOC = (index) => { this.setState(state => { const signons_current = state.signons_current.filter((item, j) => index !== j); return { signons_current, }; }); } - handleAddSOC = () => { this.setState(state => { const signons_current = state.signons_current.concat({ name: '', CNY: '' }); return { signons_current }; }); }; - handleDeleteSOP = (index) => { this.setState(state => { const signons_propose = state.signons_propose.filter((item, j) => index !== j); return { signons_propose, }; }); } - handleAddSOP = () => { this.setState(state => { const signons_propose = state.signons_propose.concat({ name: '', CNY: '' }); return { signons_propose }; }); }; - - render() { - const { classes } = this.props; - let a = [{ - name: '', - CNY: '' - }]; - return ( - - - - } - aria-controls="panel1a-content" - id="panel1a-header" - > - -

Name

 - - - - - - - -

Status

 -

Current

 -

Propose

 - - -

Title

 - - - - - - - - -

Country

 - - - - -

Location

 - - - - -

Grade

 - - - - -

Datestart

 - - - - -

Jobfunction

 - - - - - - + handleDeleteGC = index => { + this.setState(state => { + const guaranteedcash_current = state.guaranteedcash_current.filter( + (item, j) => index !== j + ); + return { guaranteedcash_current }; + }); + }; + handleAddGC = () => { + this.setState(state => { + const guaranteedcash_current = state.guaranteedcash_current.concat({ + name: "", + CNY: "" + }); + return { guaranteedcash_current }; + }); + }; + handleDeleteGP = index => { + this.setState(state => { + const guaranteedcash_propose = state.guaranteedcash_propose.filter( + (item, j) => index !== j + ); + return { guaranteedcash_propose }; + }); + }; + handleAddGP = () => { + this.setState(state => { + const guaranteedcash_propose = state.guaranteedcash_propose.concat({ + name: "", + CNY: "" + }); + return { guaranteedcash_propose }; + }); + }; + handleDeleteSC = index => { + this.setState(state => { + const shortterm_current = state.shortterm_current.filter( + (item, j) => index !== j + ); + return { shortterm_current }; + }); + }; + handleAddSC = () => { + this.setState(state => { + const shortterm_current = state.shortterm_current.concat({ + name: "", + CNY: "" + }); + return { shortterm_current }; + }); + }; + handleDeleteSP = index => { + this.setState(state => { + const shortterm_propose = state.shortterm_propose.filter( + (item, j) => index !== j + ); + return { shortterm_propose }; + }); + }; + handleAddSP = () => { + this.setState(state => { + const shortterm_propose = state.shortterm_propose.concat({ + name: "", + CNY: "" + }); + return { shortterm_propose }; + }); + }; -
- - } - aria-controls="panel1a-content" - id="panel1a-header" - > -

Guaranteed Cash

- - - - - - -

Current

- - Currency - CNY - USD - - - - Annual Base - - - - - - Compa Ratio - - - - - - Market Ratio - - - - - - {this.state.guaranteedcash_current.map((item: Bonus, index) => - - - - - this.handleDeleteGC(index)}> - )} - -
- - Sub - 679,000 - 101,850 - - - - - - -

Propose

- - Currency - CNY - USD - Difference - - - - Annual Base - - - - - - - Compa Ratio - - - - - - - Market Ratio - - - - - - - {this.state.guaranteedcash_propose.map((item: Bonus, index) => - - - - - - this.handleDeleteGP(index)}> - )} - -
- - - Sub - 679,000 - 101,850 - 133% - - - - - - - + handleDeleteLC = index => { + this.setState(state => { + const longterm_current = state.longterm_current.filter( + (item, j) => index !== j + ); + return { longterm_current }; + }); + }; + handleAddLC = () => { + this.setState(state => { + const longterm_current = state.longterm_current.concat({ + name: "", + CNY: "" + }); + return { longterm_current }; + }); + }; + handleDeleteLP = index => { + this.setState(state => { + const longterm_propose = state.longterm_propose.filter( + (item, j) => index !== j + ); + return { longterm_propose }; + }); + }; + handleAddLP = () => { + this.setState(state => { + const longterm_propose = state.longterm_propose.concat({ + name: "", + CNY: "" + }); + return { longterm_propose }; + }); + }; -
+ handleDeleteSOC = index => { + this.setState(state => { + const signons_current = state.signons_current.filter( + (item, j) => index !== j + ); + return { signons_current }; + }); + }; + handleAddSOC = () => { + this.setState(state => { + const signons_current = state.signons_current.concat({ + name: "", + CNY: "" + }); + return { signons_current }; + }); + }; + handleDeleteSOP = index => { + this.setState(state => { + const signons_propose = state.signons_propose.filter( + (item, j) => index !== j + ); + return { signons_propose }; + }); + }; + handleAddSOP = () => { + this.setState(state => { + const signons_propose = state.signons_propose.concat({ + name: "", + CNY: "" + }); + return { signons_propose }; + }); + }; - - } - aria-controls="panel1a-content" - id="panel1a-header" + render() { + const { classes } = this.props; + let a = [ + { + name: "", + CNY: "" + } + ]; + return ( + + + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + + +

Name

+ + + + + + + + + + + +

Status

+ + +

Current

+ + +

Propose

+ + + + +

Title

+ + + + + + + + + + +

Country

+ + + + + + + + + + +

Location

+ + + + + + + + + + +

Grade

+ + + + + + + + + + +

Datestart

+ + + + + + + + + + +

Jobfunction

+ + + + + + + + + + + + +
+ + } + aria-controls="panel1a-content" + id="panel1a-header" + > +

Guaranteed Cash

+ + + + + + +

Current

+ + + Currency + + + CNY + + + USD + + + + + + + + + + Annual Base + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + Market Ratio + + + + + + + + + + + {this.state.guaranteedcash_current.map( + (item: Bonus, index) => ( + -

Short Term

- - - - - - -

Current

- - Currency - CNY - USD - - - - Annual Base - - - - - - Compa Ratio - - - - - - Market Ratio - - - - - - {this.state.shortterm_current.map((item: Bonus, index) => - - - - - this.handleDeleteSC(index)}> - )} - -
- - Sub - 679,000 - 101,850 - - - - - - -

Propose

- - Currency - CNY - USD - Difference - - - - Annual Base - - - - - - - Compa Ratio - - - - - - - Market Ratio - - - - - - - {this.state.shortterm_propose.map((item: Bonus, index) => - - - - - - this.handleDeleteSP(index)}> - )} - -
- - - Sub - 679,000 - 101,850 - 133% - - - - - - - + + + + + + + + + + + this.handleDeleteGC(index)} + > + + + + + ) + )}
+ + + Sub + + + 679,000 + + + 101,850 + + + + + + + +

Propose

+ + + Currency + + + CNY + + + USD + + + Difference + + + + + + + + + + Annual Base + + + + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + + + + Market Ratio + + + + + + + + + + + + - - - - - - Cash Total - 787,000 - 118,850 - 1,060,000 - 159,000 - 135% - - + {this.state.guaranteedcash_propose.map( + (item: Bonus, index) => ( + + + + + + + + + + + + + + + this.handleDeleteGP(index)} + > + + + - + ) + )}
+ + + Sub + + + 679,000 + + + 101,850 + + + 133% + + + + + + + + - - } - aria-controls="panel1a-content" - id="panel1a-header" - > -

Long Term

- - - - - - - -

Current

- - Currency - CNY - USD - - - - Annual Base - - - - - - Compa Ratio - - - - - - Market Ratio - - - - - - {this.state.longterm_current.map((item: Bonus, index) => - - - - - this.handleDeleteLC(index)}> - )} - -
- - Sub - 679,000 - 101,850 - - - - - - -

Propose

- - Currency - CNY - USD - Difference - - - - Annual Base - - - - - - - Compa Ratio - - - - - - - Market Ratio - - - - - - - {this.state.longterm_propose.map((item: Bonus, index) => - - - - - - this.handleDeleteLP(index)}> - )} - -
- - - Sub - 679,000 - 101,850 - 133% - - - - - - - +
+ + + } + aria-controls="panel1a-content" + id="panel1a-header" + > +

Short Term

+ + + + + + +

Current

+ + + Currency + + + CNY + + + USD + + + + + + + + + + Annual Base + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + Market Ratio + + + + + + + + + + + {this.state.shortterm_current.map((item: Bonus, index) => ( + + + + + + + + + + + + this.handleDeleteSC(index)} + > + + + + + ))}
+ + + Sub + + + 679,000 + + + 101,850 + + + + + + + +

Propose

+ + + Currency + + + CNY + + + USD + + + Difference + + + + + + + + + + Annual Base + + + + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + + + + Market Ratio + + + + + + + + + + + + - - } - aria-controls="panel1a-content" - id="panel1a-header" - > -

Sign Ons

- - - - - - - -

Current

- - Currency - CNY - USD - - - - Annual Base - - - - - - Compa Ratio - - - - - - Market Ratio - - - - - - {this.state.signons_current.map((item: Bonus, index) => - - - - - this.handleDeleteSOC(index)}> - )} - -
- - Sub - 679,000 - 101,850 - - - - - - -

Propose

- - Currency - CNY - USD - Difference - - - - Annual Base - - - - - - - Compa Ratio - - - - - - - Market Ratio - - - - - - - {this.state.signons_propose.map((item: Bonus, index) => - - - - - - this.handleDeleteSOP(index)}> - )} - -
- - - Sub - 679,000 - 101,850 - 133% - - - - - - - + {this.state.shortterm_propose.map((item: Bonus, index) => ( + + + + + + + + + + + + + + + this.handleDeleteSP(index)} + > + + + + + ))}
- - - - - - Cash Total - 787,000 - 118,850 - 1,060,000 - 159,000 - 135% - - + + + Sub + + + 679,000 + + + 101,850 + + + 133% + + + + + + + + + +
+ + + + + + + + Cash Total + + + 787,000 + + + 118,850 + + + 1,060,000 + + + 159,000 + + + 135% + + + + + + +
+ + + } + aria-controls="panel1a-content" + id="panel1a-header" + > +

Long Term

+ + + + + + +

Current

+ + + Currency + + + CNY + + + USD + + + + + + + + + + Annual Base + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + Market Ratio + + + + + + + + + + + {this.state.longterm_current.map((item: Bonus, index) => ( + + + - + + + + + + + + this.handleDeleteLC(index)} + > + + + + + ))} + +
+ + + Sub + + + 679,000 + + + 101,850 + + + + - - - - Internal Promotion - Buy USD - 0.15 + + +

Propose

+ + + Currency + + + CNY + + + USD + + + Difference + + + + + + + + + + Annual Base + + + + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + + + + Market Ratio + + + + + + + + + + + + + + {this.state.longterm_propose.map((item: Bonus, index) => ( + + + - - Comparator Data - 27 + + - -
- - - -

Internal

- - - - - Min - Medium - Max - Datapoint - - - Grade - 600,000 - 700,000 - 900,000 - - - - Payroll Spread - 650,000 - 890,000 - 1,100,000 - 32 - - - Functional - 720,000 - 769,000 - 980,000 - - - + + + + + + + this.handleDeleteLP(index)} + > + + + + + ))} + +
+ + + + Sub + + + 679,000 + + + 101,850 + + + 133% + + + + + + + + + +
+ + } + aria-controls="panel1a-content" + id="panel1a-header" + > +

Sign Ons

+ + + + + + +

Current

+ + + Currency + + + CNY + + + USD + + + + + + + + + + Annual Base + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + Market Ratio + + + + + + + + + -
- - - -

External

- - - - - P 25 - P 50 - P 75 - - - - Market Grade - 600,000 - 700,000 - 900,000 - - - - Market Functional - 650,000 - 890,000 - 1,100,000 - 32 - - + {this.state.signons_current.map((item: Bonus, index) => ( + + + + + + + + + + + this.handleDeleteSOC(index)} + > + + + + + ))} -
-
-
-
-
-
-
-
-
-
- - - - - - Equity Range - Min - Median - Max - - - Annual - 25,000 - 45,000 - 70,000 - - - New Hire - 36,000 - 70,000 - 105,000 - - +
+ + + Sub + + + 679,000 + + + 101,850 + + + + + + + +

Propose

+ + + Currency + + + CNY + + + USD + + + Difference + + + + + + + + + + Annual Base + + + + + + + + + + + + + + + Compa Ratio + + + + + + + + + + + + + + + Market Ratio + + + + + + + + + + + + + + {this.state.signons_propose.map((item: Bonus, index) => ( + + + + + + + + + + + + + + this.handleDeleteSOP(index)} + > + + + + + ))} - +
+ + + + Sub + + + 679,000 + + + 101,850 + + + 133% + + + + + + + + +
+ + + + + + + Cash Total + + + 787,000 + + + 118,850 + + + 1,060,000 + + + 159,000 + + + 135% + + + - ); - } + + + + + + + Internal Promotion + + + Buy USD + + + 0.15 + + + + + Comparator Data + + + 27 + + + +
+ + + +

+ Internal +

+ + + + + {" "} + + + Min + + + Medium + + + Max + + + Datapoint + + + + + Grade + + + 600,000 + + + 700,000 + + + 900,000 + + + {" "} + + + + + Payroll Spread + + + 650,000 + + + 890,000 + + + 1,100,000 + + + 32 + + + + + Functional + + + 720,000 + + + 769,000 + + + 980,000 + + + {" "} + + + + + +
+ + + +

+ External +

+ + + + + {" "} + + + P 25 + + + P 50 + + + P 75 + + + {" "} + + + + + Market Grade + + + 600,000 + + + 700,000 + + + 900,000 + + + {" "} + + + + + Market Functional + + + 650,000 + + + 890,000 + + + 1,100,000 + + + 32 + + + + + +
+
+
+
+
+
+
+
+
+
+ + + + + + Equity Range + + + Min + + + Median + + + Max + + + + + Annual + + + 25,000 + + + 45,000 + + + 70,000 + + + + + New Hire + + + 36,000 + + + 70,000 + + + 105,000 + + + + + + + + ); + } } (OfferModelPage as React.ComponentClass).propTypes = { - classes: PropTypes.object.isRequired + classes: PropTypes.object.isRequired } as any; export default connect( - null, - mapDispatchToProps + null, + mapDispatchToProps )(withStyles(styles)(OfferModelPage));