g-cpa-squad-produto · cleandersonlobo · Oct 22, 2018 · Oct 22, 2018 · Oct 22, 2018 · Oct 22, 2018
diff --git a/desafio/.gitignore b/desafio/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/desafio/README.md b/desafio/README.md
diff --git a/desafio/package-lock.json b/desafio/package-lock.json
diff --git a/desafio/package.json b/desafio/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "desafio",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^3.3.0",
+    "@material-ui/icons": "^3.0.1",
+    "axios": "^0.18.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "2.0.5",
+    "redux": "^4.0.1",
+    "redux-actions": "^2.6.3",
+    "redux-thunk": "^2.3.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/desafio/public/favicon.ico b/desafio/public/favicon.ico
diff --git a/desafio/public/index.html b/desafio/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,600">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/desafio/public/manifest.json b/desafio/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Desafio",
+  "name": "Desafio Softplan",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/desafio/src/assets/img/150x150.png b/desafio/src/assets/img/150x150.png
diff --git a/desafio/src/assets/img/80x80.png b/desafio/src/assets/img/80x80.png
diff --git a/desafio/src/components/CadastrarProcesso/CadastrarProcesso.js b/desafio/src/components/CadastrarProcesso/CadastrarProcesso.js
@@ -0,0 +1,186 @@
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Close } from '@material-ui/icons';
+import { 
+  Button,
+  Grid,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  withMobileDialog,
+  TextField,
+  IconButton,
+} from '@material-ui/core';
+import styles from './styles';
+
+// Modal
+class CadastrarProcesso extends Component {
+
+  state = {
+    assunto: '',
+    interessado: '',
+    interessados: [],
+    descricao: '',
+  }
+
+  handleChange = name => event => {
+    this.setState({
+      [name]: event.target.value,
+    });
+  };
+
+  handleAddInteressado = () => {
+    const { interessado } = this.state;
+    const interessados = [
+      ...this.state.interessados,
+      interessado,
+    ];
+
+    this.setState({ interessados, interessado: '' });
+  }
+  handleNovoProcesso = () => {
+    const { assunto, interessados, descricao }  = this.state;
+
+     this.props.novoProcesso({ assunto, interessados, descricao });
+
+    this.props.handleModalClose();
+    this.setState({
+      assunto: '',
+      interessado: '',
+      interessados: [],
+      descricao: '',
+    })
+  }
+
+  handleClose = () => {
+    this.props.handleModalClose();
+    this.setState({
+      assunto: '',
+      interessado: '',
+      interessados: [],
+      descricao: '',
+    })
+  }
+
+  render() {
+    const { fullScreen, classes } = this.props;
+    const { assunto, interessados, descricao }  = this.state;
+    const isBtnDisabled = !assunto.length || !interessados.length || !descricao.length 
+
+    return (
+      <div>
+        <Dialog
+          fullScreen={fullScreen}
+          open={this.props.open}
+          onBackdropClick={this.handleClose}
+          onClose={this.handleClose}
+          aria-labelledby="responsive-dialog-title"
+        >
+
+          <DialogTitle id="responsive-dialog-title">
+
+            <Grid container >
+              <Grid item xs={11}>
+                Cadastro do processo
+              </Grid>
+              <Grid item xs={1}>
+                <IconButton onClick={this.handleClose}>
+                <Close />
+              </IconButton>
+              </Grid>
+            </Grid>
+          </DialogTitle>
+          <DialogContent>
+              <form className={classes.container} noValidate autoComplete="off">
+                <Grid container >
+                    <Grid item xs={8}>
+                      <TextField
+                        id="assunto"
+                        label="Assunto"
+                        InputLabelProps={{
+                          shrink: true,
+                        }}
+                        className={classes.textField}
+                        value={this.state.assunto}
+                        onChange={this.handleChange('assunto')}
+                        margin="normal"
+                      />
+                    </Grid>
+                    <Grid container alignItems="flex-end" >
+
+                        <Grid item xs={12}>
+                        {this.state.interessados.length > 0 &&
+                          <p className={classes.subtitle}>Interessados</p>
+                        }
+                          {this.state.interessados.map((item, index) => (
+                            <p key={index} className={classes.bodyInteressados}>{item}</p>
+                          ))}
+                        </Grid>
+                      </Grid>
+                    <Grid container alignItems="flex-end" spacing={24}>
+                      <Grid item xs={8}>
+                        <TextField
+                            label="Novo Interessado"
+                            InputLabelProps={{
+                              shrink: true,
+                            }}
+                            className={classes.textField}
+                            value={this.state.interessado}
+                            onChange={this.handleChange('interessado')}
+                            margin="normal"
+                          />
+                      </Grid>
+                      <Grid item xs={4}>
+                        <Button 
+                          className={classNames(classes.buttonAction, classes.btnAdd)}
+                          variant="contained" 
+                          size="small"
+                          onClick={this.handleAddInteressado}
+                        >
+                          Adicionar
+                        </Button>
+                      </Grid>
+                    </Grid>
+                    <Grid item xs={11}>
+                      <TextField
+                        id="descricao"
+                        label="Descrição"
+                        InputLabelProps={{
+                          shrink: true,
+                        }}
+                        multiline
+                        className={classes.textField}
+                        value={this.state.descricao}
+                        onChange={this.handleChange('descricao')}
+                        margin="normal"
+                      />
+                    </Grid>
+                </Grid>
+              </form>
+          </DialogContent>
+          <DialogActions>
+            <Button 
+              onClick={this.handleNovoProcesso} 
+              variant="contained" 
+              color="primary"
+              disabled={isBtnDisabled}
+            >
+              Salvar
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+CadastrarProcesso.propTypes = {
+  classes: PropTypes.object.isRequired,
+  fullScreen: PropTypes.bool.isRequired,
+  novoProcesso: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(withMobileDialog()(CadastrarProcesso));
diff --git a/desafio/src/components/CadastrarProcesso/index.js b/desafio/src/components/CadastrarProcesso/index.js
@@ -0,0 +1,3 @@
+import CadastrarProcesso from './CadastrarProcesso';
+
+export default CadastrarProcesso;
diff --git a/desafio/src/components/CadastrarProcesso/styles.js b/desafio/src/components/CadastrarProcesso/styles.js
@@ -0,0 +1,36 @@
+const styles = theme => ({ 
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    width: '100%',
+    marginLeft: theme.spacing.unit,
+  },
+  dense: {
+
+  },
+  menu: {
+
+  },
+  bodyInteressados: {
+    fontSize: 14,
+    marginLeft: theme.spacing.unit,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  subtitle: {
+    fontSize: 14,
+    marginLeft: theme.spacing.unit,
+    color: theme.palette.secondary.main
+  },
+  buttonAction: {
+    fontWeight: 'bold', 
+    marginLeft: theme.spacing.unit,
+  }, 
+  btnAdd: {
+    color:'#FFFFFF',
+  }, 
+});
+
+export default styles;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import CadastrarProcesso from './CadastrarProcesso';

		export default CadastrarProcesso;