{/* order */}
- ORDER
+ ORDEN
{this.FILTER_CONFIG['order'].map(n =>
- DEPARTMENT
+ DEPARTAMENTO
{this.FILTER_CONFIG['department'].map(n =>
- PRICE
+ PRECIO
{this.FILTER_CONFIG['price'].map(n =>
- Clear All
+ Limpiar Todo
{/* filter tags */}
diff --git a/src/pages/dashboard/utils/generateFilterString.js b/src/pages/dashboard/utils/generateFilterString.js
index 277aab7..aa08101 100644
--- a/src/pages/dashboard/utils/generateFilterString.js
+++ b/src/pages/dashboard/utils/generateFilterString.js
@@ -17,10 +17,10 @@ export default (state) => {
for (const v of state[name]) {
temp = v
}
- if (temp.toUpperCase() === 'ASCENDING') {
+ if (temp.toUpperCase() === 'ASCENDENTE') {
order = 'order=price'
}
- if (temp.toUpperCase() === 'DESCENDING') {
+ if (temp.toUpperCase() === 'DESCENDENTE') {
order = 'order=-price'
}
}
@@ -40,10 +40,10 @@ export default (state) => {
if (name === 'price') {
let _price_str_arr = []
for (let p of state[name]) {
- if (p.match(/less/i)) {
+ if (p.match(/menor/i)) {
p = p.replace(/[\D]+/i, '0 - ')
}
- if (p.match(/greater/i)) {
+ if (p.match(/mayor/i)) {
p = p.replace(/[\D]+/i, '').concat(' - 999')
}
_price_str_arr = _price_str_arr.concat(p.match(/[\d]+/g))
diff --git a/src/pages/ingresarProducto/IngresarProducto.js b/src/pages/ingresarProducto/IngresarProducto.js
new file mode 100644
index 0000000..a80af3d
--- /dev/null
+++ b/src/pages/ingresarProducto/IngresarProducto.js
@@ -0,0 +1,86 @@
+import React from 'react'
+import Header from '../../components/header/headerContainer'
+import styles from './stylesheets/ingresarProducto.module.sass'
+import { Form,Col,Button,FormLabel,FormControl,InputGroup, FormGroup} from 'react-bootstrap'
+
+export default function IngresarProducto() {
+ return (
+
+
+
+
+
+ Ingrese producto
+
+
+
+ Nombre
+
+
+
+ Descripción
+
+
+
+ Link de la imagen
+
+
+
+
+ Tallas
+
+
+
+ Color
+
+
+
+
+ Precio
+
+
+ S/.
+
+
+
+
+
+ Cantidad
+
+
+
+
+
+
+ Departamento-Categoría
+
+ Mujeres - Basicos
+ Mujeres - Chaqueta
+ Varones - Prendas de punto
+ Varones - Jeans
+ Varones - Camperas
+ Niños - Niña
+ Niños - Niño
+
+
+
+
+
+ Registrar
+
+
+
+
+
+
+ )
+ }
\ No newline at end of file
diff --git a/src/pages/ingresarProducto/stylesheets/ingresarProducto.module.sass b/src/pages/ingresarProducto/stylesheets/ingresarProducto.module.sass
new file mode 100644
index 0000000..dcc7e06
--- /dev/null
+++ b/src/pages/ingresarProducto/stylesheets/ingresarProducto.module.sass
@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css?family=Comfortaa');
+@import '../../../modules/mediaQuery/app'
+
+
+.outbox
+ min-width: max-content
+ min-width: 386px
+ min-height: 100vh
+ display: flex
+ justify-content: center
+ background: rgb(244, 244, 244)
+ font-size: 1rem
+
+.box
+ width: 100%
+ margin-top: 12vh
+ display: flex
+ justify-content: center
+ align-items: center
+
+
+.content
+ padding: 3%
+ margin: 4em
+ background: white
+ min-width: max-content
+ justify-content: center
+ align-items: center
+
+
+.title
+ color: blue
+ font-size: 2rem
+ font-family: 'Comfortaa', cursive;
+ margin-bottom: 5vh
+
+
+.table
+ width: max-content
+
+.process_box
+ width: 100%
+ display: flex
+ flex-direction: column
+ align-items: flex-end
+
+.total
+ font-size: 20px
+ font-weight: bold
+
+
+
+
+// @include media-breakpoint-down(md)
+// .box
+// max-width: 70%
+// @include media-breakpoint-down(sm)
+// .box
+// max-width: 90%
+// .title
+// font-size: 1.5rem
+
\ No newline at end of file
diff --git a/src/pages/ingreseProducto/LoginSignin.js b/src/pages/ingreseProducto/LoginSignin.js
new file mode 100644
index 0000000..6067282
--- /dev/null
+++ b/src/pages/ingreseProducto/LoginSignin.js
@@ -0,0 +1,112 @@
+import React, { Component } from 'react'
+import styles from './stylesheets/loginsignin.module.sass'
+import Base from './components/Base'
+import capitalizeString from './utils/capitalizeString'
+import jumpTo from '../../modules/Navigation'
+import LoadingAnimation from '../../components/loadingAnimation'
+import Header from '../../components/header/headerContainer'
+
+
+export default class LoginSignin extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {}
+ this.inputText = {}
+ for (const input of props.INPUT_CONFIG) {
+ this.state[input.name] = { errorMsg: '' }
+ this.inputText[input.name] = ''
+ }
+ }
+ //validate input when blur
+ handleBlur = (e, validResult) => {
+ const name = e.target.name
+ this.inputText[name] = e.target.value
+ if (!validResult.isValid) {
+ this.setState({
+ [name]: { errorMsg: validResult.errorMsg }
+ })
+ } else {
+ this.setState({
+ [name]: { errorMsg: '' }
+ })
+ }
+ }
+ // when focus, clear error message
+ handleFocus = (e) => {
+ const name = e.target.name
+ this.setState({
+ [name]: { errorMsg: '' }
+ })
+ }
+ //submit actions
+ handleClick = () => {
+ //validate all input
+ let canSubmit = true
+ for (const input of this.props.INPUT_CONFIG) {
+ if (!!!input.validations) continue
+ for (const v of input.validations) {
+ let checkResult = v.check(this.inputText[input.name])
+ canSubmit = canSubmit && checkResult
+ if (!checkResult) {
+ this.setState({
+ [input.name]: { errorMsg: v.errMsg }
+ })
+ break
+ }
+ }
+ }
+ if (!canSubmit) {
+ console.log('valid fail');
+ return
+ }
+ if (this.props.title === 'Iniciar Sesion') {
+ const { email, password } = this.inputText
+ this.props.submitAction(email, password)
+ .then(res => {
+ jumpTo('/dashboard')
+ // console.log(res)
+ // console.log('loginsignin res');
+ return res
+ })
+ .catch(error => {
+ // console.log('loginsignin error')
+ // console.log(error.response)
+ alert(error.response.data.error.message)
+ return error
+ })
+ }
+ if (this.props.title === 'Registrar Producto') {
+ alert("ESO ES TODO AMIGOS 😥")
+ //window.location.href = 'https://www.youtube.com/watch?v=BtLSaxRnIhc';
+ }
+ }
+ render() {
+ return (
+
+
+
+
+
+
+ {this.props.loading &&
+
+ }
+
+ {this.props.footer_text}
+
+ }
+ />
+
+
+ )
+ }
+}
diff --git a/src/pages/ingreseProducto/Signin.js b/src/pages/ingreseProducto/Signin.js
new file mode 100644
index 0000000..5a38b85
--- /dev/null
+++ b/src/pages/ingreseProducto/Signin.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import LoginSignin from './LoginSignin'
+import {
+ validateExistence,
+ validateEmail,
+ validateLength,
+ validateLowerCase,
+ validateUpperCase
+} from './utils/validation'
+
+
+const INPUT_CONFIG = [
+ {
+ title: "Nombre",
+ name: "fullname",
+
+ },
+ {
+ title: "Descripcion",
+ name: "descripcion",
+
+ },
+ {
+ title: "Link de la imagen",
+ name: "imagen",
+
+ },
+ {
+ title: "Tallas",
+ name: "tallas",
+ },
+ {
+ title: "Precio",
+ name: "precio",
+
+ },
+ {
+ title: "Color",
+ name: "color",
+
+ },
+ {
+ title: "Cantidad",
+ name: "cantidad",
+
+ },
+ {
+ title: "Sexo",
+ name: "sexo",
+
+ },
+ {
+ title: "Categoria",
+ name: "categoria",
+ },
+]
+
+
+export default function Signin({signin,signin_loading,signin_error}) {
+ return (
+
+
+ )
+}
+
+
+
diff --git a/src/pages/ingreseProducto/SigninContainer.js b/src/pages/ingreseProducto/SigninContainer.js
new file mode 100644
index 0000000..c681ca8
--- /dev/null
+++ b/src/pages/ingreseProducto/SigninContainer.js
@@ -0,0 +1,13 @@
+import Signin from './Signin'
+import { connect } from 'react-redux'
+import { signin } from '../../redux/action/signinAction'
+
+const mapDispatchToProps = {
+ signin
+}
+const mapStoreToProps = state => ({
+ signin_loading: state.signin.signin_loading,
+ signin_error: state.signin.error
+})
+
+export default connect(mapStoreToProps, mapDispatchToProps)(Signin)
diff --git a/src/pages/ingreseProducto/components/Base.js b/src/pages/ingreseProducto/components/Base.js
new file mode 100644
index 0000000..22ec400
--- /dev/null
+++ b/src/pages/ingreseProducto/components/Base.js
@@ -0,0 +1,44 @@
+import styles from '../stylesheets/base.module.sass'
+import React from 'react'
+import FormInput from './FormInput'
+import Button from './Button'
+import Footer from './footer'
+
+
+export default function Base({
+ title,
+ inputs,
+ onInputBlur,
+ onInputFocus,
+ onInputChange,
+ onSubmit,
+ errorMsg,
+ button_title,
+ footer_content
+}) {
+ return (
+
+
+
{title}
+
+ {
+ inputs.map(({ title,name, validations }) =>
+
+ )
+ }
+
+
+
+ )
+}
+
+
diff --git a/src/pages/ingreseProducto/components/Button.js b/src/pages/ingreseProducto/components/Button.js
new file mode 100644
index 0000000..89dd676
--- /dev/null
+++ b/src/pages/ingreseProducto/components/Button.js
@@ -0,0 +1,25 @@
+import React from 'react'
+
+const outStyle={
+ width:'80%',
+ height:'30px',
+ marginBottom:'10px',
+ marginTop:'5px'
+}
+const btnStyle={
+ width:'100%',
+ height:'100%',
+ borderRadius:'7px',
+ background:'rgb(0,100,255)',
+ color:'white',
+ fontFamily:'Roboto sans-serif',
+ fontSize:'15px'
+}
+
+export default function Button({ button_title,onClick }) {
+ return (
+
+
+ )
+}
diff --git a/src/pages/ingreseProducto/components/FormInput.js b/src/pages/ingreseProducto/components/FormInput.js
new file mode 100644
index 0000000..d05e1a8
--- /dev/null
+++ b/src/pages/ingreseProducto/components/FormInput.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import styles from '../stylesheets/formInput.module.sass'
+import capitalizeString from '../utils/capitalizeString'
+
+/*Construye los inputs*/
+export default function FormInput({
+ title,
+ name,
+ validations,
+ errorMessage,
+ onBlur,
+ onFocus,
+}) {
+ return (
+
+
+ {capitalizeString(title)}
+
+
+
+
+
+ {errorMessage}
+
+
+ )
+}
+
+const validate = (validations, val) => {
+ if (validations) {
+ for (const validation of validations) {
+ if (!validation.check(val)) {
+ return {
+ isValid: false,
+ errorMsg: validation.errMsg
+ }
+ }
+ }
+ }
+ return { isValid: true }
+}
+
diff --git a/src/pages/ingreseProducto/components/footer.js b/src/pages/ingreseProducto/components/footer.js
new file mode 100644
index 0000000..4491331
--- /dev/null
+++ b/src/pages/ingreseProducto/components/footer.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const style={
+ fontSize:'15px',
+ marginBottom:'30px'
+}
+
+export default function footer({content}) {
+ return (
+
+ {content}
+
+ )
+}
+
diff --git a/src/pages/ingreseProducto/stylesheets/base.module.sass b/src/pages/ingreseProducto/stylesheets/base.module.sass
new file mode 100644
index 0000000..38b50e9
--- /dev/null
+++ b/src/pages/ingreseProducto/stylesheets/base.module.sass
@@ -0,0 +1,22 @@
+.outbox
+ display: flex
+ flex-direction: column
+ align-items: center
+ background: white
+
+.logo
+ width: 200px
+ height: 130px
+ background: rgb(238,130,238)
+ font-size: 50px
+ color: white
+
+.title_style
+ color: blue
+ width: 80%
+ font-size: 20px
+
+.border_style
+ width: 80%
+ border-bottom: 1px solid blue
+ margin-bottom: 5px
diff --git a/src/pages/ingreseProducto/stylesheets/formInput.module.sass b/src/pages/ingreseProducto/stylesheets/formInput.module.sass
new file mode 100644
index 0000000..9f6690d
--- /dev/null
+++ b/src/pages/ingreseProducto/stylesheets/formInput.module.sass
@@ -0,0 +1,28 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans')
+
+.outbox
+ display: flex
+ flex-direction: column
+ width: 70%
+ // height: 70px
+ margin-bottom: 5px
+
+.label
+ font-family: 'Open Sans', sans-serif
+ font-size: 15px
+ label
+ margin: 0
+
+.input
+ width: 100%
+ margin-bottom: 3px
+ input
+ width: 100%
+ height: 100%
+ border-radius: 5px
+ border: 1px solid grey
+ padding: 0 0.5rem
+
+.errMsg
+ color: red
+ font-size: 15px
\ No newline at end of file
diff --git a/src/pages/ingreseProducto/stylesheets/loginsignin.module.sass b/src/pages/ingreseProducto/stylesheets/loginsignin.module.sass
new file mode 100644
index 0000000..6749fc8
--- /dev/null
+++ b/src/pages/ingreseProducto/stylesheets/loginsignin.module.sass
@@ -0,0 +1,22 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto')
+
+.header
+
+.outbox
+ min-width: max-content
+ min-width: 500px
+ min-height: 100vh
+ display: flex
+ justify-content: center
+ background: rgb(244, 244, 244)
+ font-size: 1rem
+
+.box
+ width: 100%
+ margin-top: 12vh
+ display: flex
+ justify-content: center
+ align-items: center
+
+
+
diff --git a/src/pages/ingreseProducto/utils/capitalizeString.js b/src/pages/ingreseProducto/utils/capitalizeString.js
new file mode 100644
index 0000000..e46242a
--- /dev/null
+++ b/src/pages/ingreseProducto/utils/capitalizeString.js
@@ -0,0 +1,7 @@
+
+
+const capitalizeString=(str)=>{
+ return str.charAt(0).toUpperCase()+str.slice(1)
+}
+
+export default capitalizeString
\ No newline at end of file
diff --git a/src/pages/ingreseProducto/utils/validation.js b/src/pages/ingreseProducto/utils/validation.js
new file mode 100644
index 0000000..b05bbb1
--- /dev/null
+++ b/src/pages/ingreseProducto/utils/validation.js
@@ -0,0 +1,42 @@
+class Validation {
+ constructor(assertion, rule, errMsg) {
+ this.assertion = assertion
+ this.rule = rule
+ this.errMsg = errMsg
+ }
+ check(text) {
+ return this.rule(text)
+ }
+ errMsg() {
+ return this.errMsg
+ }
+}
+
+export const validateExistence = new Validation(
+ 'input should have value',
+ text => /\S/.test(text),
+ 'Llene el campo'
+)
+export const validateEmail = new Validation(
+ 'input should be an email',
+ text => !!text.match(/[\w-]+@([\w-]+\.)+[\w-]+/i),
+ 'Correo Electronico'
+)
+export const validateLength = (min_len, max_len) => {
+ const regex = new RegExp(`(?=.{${min_len},${max_len}})`, 'g')
+ return new Validation(
+ 'input should within certain length',
+ text => !!text.match(regex),
+ `La contraseña debe tener entre ${min_len} y ${max_len} caracteres`
+ )
+}
+export const validateLowerCase = new Validation(
+ 'input should have an uppercase',
+ text => !!text.match(/(?=.*[A-Z])/g),
+ 'La contraseña debe tener al menos una mayuscula'
+)
+export const validateUpperCase = new Validation(
+ 'input should have lowercase',
+ text => !!text.match(/(?=.*[a-z])/g),
+ 'La contraseña debe tener al menos una minuscula'
+)
\ No newline at end of file
diff --git a/src/pages/loginsignin/Login.js b/src/pages/loginsignin/Login.js
index 22655cf..cdbb92a 100644
--- a/src/pages/loginsignin/Login.js
+++ b/src/pages/loginsignin/Login.js
@@ -11,10 +11,12 @@ import {
const INPUT_CONFIG = [
{
+ title: "Correo Electronico",
name: "email",
validations: [validateExistence, validateEmail]
},
{
+ title: "Contraseña",
name: "password",
validations: [validateExistence, validateLength(6, 15), validateLowerCase, validateUpperCase]
}
@@ -25,8 +27,8 @@ export default function Login({ postToken, login_loading, login_error }) {
{
@@ -74,10 +75,11 @@ export default class LoginSignin extends Component {
return error
})
}
- if (this.props.title === 'Signin') {
+ if (this.props.title === 'Registrarse') {
+ //desestructurando los input
const { fullname, email, password, verifyPassword } = this.inputText
- this.props.submitAction(fullname, email, password, verifyPassword)
- .then(res => {
+ this.props.submitAction(fullname, email, password, verifyPassword)////////////////////
+ .then(res => {
jumpTo('/login')
})
.catch(error => {
@@ -104,7 +106,7 @@ export default class LoginSignin extends Component {
footer_content={
}
diff --git a/src/pages/loginsignin/Signin.js b/src/pages/loginsignin/Signin.js
index 121b810..b70305b 100644
--- a/src/pages/loginsignin/Signin.js
+++ b/src/pages/loginsignin/Signin.js
@@ -11,18 +11,22 @@ import {
const INPUT_CONFIG = [
{
+ title: "Nombre Completo",
name: "fullname",
// validations: [validateLength()]
},
{
+ title: "Correo Electronico",
name: "email",
validations: [validateExistence, validateEmail]
},
{
+ title: "Contraseña",
name: "password",
validations: [validateExistence, validateLength(6, 15), validateLowerCase, validateUpperCase]
},
{
+ title: "Verificar Contraseña",
name: "verifyPassword",
validations: [validateExistence, validateLength(6, 15), validateLowerCase, validateUpperCase]
},
@@ -34,9 +38,9 @@ export default function Signin({signin,signin_loading,signin_error}) {
{
- inputs.map(({ name, validations }) =>
+ inputs.map(({ title,name, validations }) =>
- {capitalizeString(name)}
+ {capitalizeString(title)}
+
diff --git a/src/pages/loginsignin/stylesheets/base.module.sass b/src/pages/loginsignin/stylesheets/base.module.sass
index 38b50e9..c99df6f 100644
--- a/src/pages/loginsignin/stylesheets/base.module.sass
+++ b/src/pages/loginsignin/stylesheets/base.module.sass
@@ -8,7 +8,7 @@
width: 200px
height: 130px
background: rgb(238,130,238)
- font-size: 50px
+ font-size: 55px
color: white
.title_style
diff --git a/src/pages/loginsignin/utils/validation.js b/src/pages/loginsignin/utils/validation.js
index bef6fc9..b05bbb1 100644
--- a/src/pages/loginsignin/utils/validation.js
+++ b/src/pages/loginsignin/utils/validation.js
@@ -15,28 +15,28 @@ class Validation {
export const validateExistence = new Validation(
'input should have value',
text => /\S/.test(text),
- 'Required'
+ 'Llene el campo'
)
export const validateEmail = new Validation(
'input should be an email',
text => !!text.match(/[\w-]+@([\w-]+\.)+[\w-]+/i),
- 'invalid email'
+ 'Correo Electronico'
)
export const validateLength = (min_len, max_len) => {
const regex = new RegExp(`(?=.{${min_len},${max_len}})`, 'g')
return new Validation(
'input should within certain length',
text => !!text.match(regex),
- `password has to be ${min_len}-${max_len} letter`
+ `La contraseña debe tener entre ${min_len} y ${max_len} caracteres`
)
}
export const validateLowerCase = new Validation(
'input should have an uppercase',
text => !!text.match(/(?=.*[A-Z])/g),
- 'at least one upper case'
+ 'La contraseña debe tener al menos una mayuscula'
)
export const validateUpperCase = new Validation(
'input should have lowercase',
text => !!text.match(/(?=.*[a-z])/g),
- 'at least one lower case'
+ 'La contraseña debe tener al menos una minuscula'
)
\ No newline at end of file
diff --git a/src/pages/productOverview/ProductOverview.js b/src/pages/productOverview/ProductOverview.js
index b4fbdee..a449f78 100644
--- a/src/pages/productOverview/ProductOverview.js
+++ b/src/pages/productOverview/ProductOverview.js
@@ -85,8 +85,8 @@ export default class ProductOverview extends Component {
/>
- Add to Bag
- Buy Now
+ Agregar a la bolsa
+ Comprar Ahora