From 3509726b73ec6787b6c5c07dc4a604ec7f8b1900 Mon Sep 17 00:00:00 2001 From: Rafael Date: Sun, 7 Mar 2021 21:00:31 +0100 Subject: [PATCH] Completed and styled form --- src/App.tsx | 4 +- src/components/Central.tsx | 229 ++++++---------------------- src/styledComponents/Central-jss.ts | 81 ++-------- 3 files changed, 62 insertions(+), 252 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8422425..c44a88e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import { Provider } from "react-redux"; import { createStore, Reducer } from "redux"; import GlobalState, { initialState } from "./state/globalState"; import Header from "./styledComponents/Header"; -import Central from "./styledComponents/Central"; +import Centrals from "./styledComponents/Central"; import Footer from "./styledComponents/Footer"; import Carousel from "./styledComponents/Carousel"; import { CentralActions, StepAction } from "./actions/CentralActions"; @@ -26,7 +26,7 @@ function App() {
- +
diff --git a/src/components/Central.tsx b/src/components/Central.tsx index 60d6d79..601a914 100644 --- a/src/components/Central.tsx +++ b/src/components/Central.tsx @@ -12,164 +12,8 @@ import { Select, } from "@material-ui/core"; import TextField from "@material-ui/core/TextField"; -/* -function Central(props: any) { - return ( -
-
-
-

{props.type}

-
-
- - Ayuda en ventana nueva - -
-
-
-
-
-
{props.place}
-
Datos del interesado
-
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
-
- Datos del representante -
-
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
-
Otros datos
-
-
- - - - -
-
- - - - -
-
- - - - -
-
-
-
+import injectSheet from "react-jss"; -
-
- -
-
- -
-
- -
-
-
- asdasdasdad -
- ); -} - -*/ interface Form { oficina?: string; area?: string; @@ -191,6 +35,7 @@ interface Form { interface ICentralProps { current: number; + classes: any; setActiveStep: (arg0: number) => void; } @@ -199,6 +44,7 @@ interface ICentralState { } class Centrals extends React.Component { + classes: any; steps = [ "Seleccionar oficina", "Seleccionar Área", @@ -222,6 +68,7 @@ class Centrals extends React.Component { constructor(props: ICentralProps) { super(props); this.state = { formulario: {} as Form }; + this.classes = props.classes; } onValueChange = (event: React.ChangeEvent) => { @@ -238,26 +85,25 @@ class Centrals extends React.Component { } handleNext = () => { - console.log(this.props); - if(this.props.current < this.steps.length-1){ + if (this.props.current < this.steps.length - 1) { this.props.setActiveStep(this.props.current + 1); - }else{ - alert("Formulario enviado") + } else { + alert("Formulario enviado"); } - console.log(this.props.current); }; handleBack = () => { this.props.setActiveStep(this.props.current - 1); }; + getStepContent(step: number) { switch (step) { case 0: return ( - - Oficina + + Oficina { return ( - + { onChange={this.onValueChange} > - + { - + { onChange={this.onValueChange} > - + { return ( - + { onChange={this.onValueChange} > - + { - + { onChange={this.onValueChange} > - + { return ( - + { onChange={this.onValueChange} > - + { - + { return "Unknown step"; } } + + allowContinue = () => { + const form = this.state.formulario; + const step1 = this.props.current === 0 && !form.oficina; + const step2 = this.props.current === 1 && !form.area; + const step3 = + this.props.current === 2 && + !(form.nie && form.nombre && form.apellidos && form.email); + const step4 = + this.props.current === 3 && + !(form.rnie && form.rnombre && form.rapellidos && form.remail); + const step5 = + this.props.current === 4 && + !(form.telefono && form.expediente && form.matricula); + return step1 || step2 || step3 || step4 || step5; + }; + render() { return ( -
+
{this.steps.map((label, index) => { const stepProps: { completed?: boolean } = {}; @@ -443,7 +306,12 @@ class Centrals extends React.Component { {this.getStepContent(this.props.current)} -
+ -
+
)}
diff --git a/src/styledComponents/Central-jss.ts b/src/styledComponents/Central-jss.ts index 78d57dd..ba29d23 100644 --- a/src/styledComponents/Central-jss.ts +++ b/src/styledComponents/Central-jss.ts @@ -1,77 +1,18 @@ -import boton from "../assets/img/bot_n.gif"; - const classes = { - subHeader: { - float: "left", - width: "100%", - backgroundColor: "#305880", - }, - shText: { - padding: "1em", - float: "left", - letterSpacing: "0.1em", - maxWidth: "430px", - }, - font: { - color: "white", - fontSize: "100% !important", - }, - help: { - margin: "0.5em", - float: "right", - }, - fieldset: { - float: "left", - background: "#ced7de no-repeat right 50%;", - }, - campos: { - float: "left", - width: "35%", - padding: "1em", - }, - field: { - fontSize: "1em", - width: "85%", - marginBottom: "10px", - }, - box: { - float: "left", - paddingLeft: "1em", - marginTop: "1em", - marginLeft: "1em", - width: "94%", - border: "solid 1px #eeeeee", - paddingBottom: "1.2em", - }, - subtitles: { - float: "left", - marginTop: "1em", - marginLeft: "1em", - width: "94%", - border: "0 !important", - fontWeight: "bold", - }, - buttonGroup: { - paddingTop: "0.5em", - paddingBottom: "0.5em", - width: "100%", - display: "flex", - justifyContent: "flex-end", - backgroundColor: "#ced7de", + formControl: { + width: '40%', + margin: '1em' }, - button: { - borderWidth: "0px", - float: "right", - backgroundImage: "url(" + boton + ")", - width: "86px !important", - cursor: "pointer !important", - color: "white", - height: "21px", - marginRight: "0.5em", + text: { + width: '20%', + margin: '2em' }, - none: { - border: "none", + selector: { + width: "100%" }, + content: { + padding: "1em" + } }; export default classes;