Skip to content

Leo Vazquez - Tp7 - ElementUI #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
leo113000 wants to merge 1 commit into
base: tp7
Choose a base branch
from
Open

Leo Vazquez - Tp7 - ElementUI #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions Leo Vazquez/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
26 changes: 26 additions & 0 deletions Leo Vazquez/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# vue-comp-utn-mega

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```
5 changes: 5 additions & 0 deletions Leo Vazquez/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}
12,399 changes: 12,399 additions & 0 deletions Leo Vazquez/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

45 changes: 45 additions & 0 deletions Leo Vazquez/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{
"name": "vue-comp-utn-mega",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"element-ui": "^2.4.9",
"vue": "^2.5.17",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.4",
"@vue/cli-plugin-eslint": "^3.0.4",
"@vue/cli-service": "^3.0.4",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": false,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Binary file added Leo Vazquez/public/favicon.ico
View file
Open in desktop
Binary file not shown.
17 changes: 17 additions & 0 deletions Leo Vazquez/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-comp-utn-mega</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-comp-utn-mega doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
45 changes: 45 additions & 0 deletions Leo Vazquez/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<div id="app">
<el-tabs @tab-click="handleClick">
<el-tab-pane label="Home" name="home"></el-tab-pane>
<el-tab-pane label="User Form" name="addUser"></el-tab-pane>
</el-tabs>
<router-view/>
</div>
</template>

<script>
import userForm from './components/user-form.vue';
import userCardList from './components/user-card-list.vue';
import errorMessage from './components/error-message.vue';

export default {
name: 'app',
components: {
userForm,
userCardList,
errorMessage
},
data() {
return {
personas: [],
erroresDeFormulario : []
}
},
methods: {
handleClick(tab, event) {
switch(tab.name){
case "home":
return this.$router.push("/");
case "addUser":
return this.$router.push("/addUser");
}
}
},
computed: {
title() {
return this.personas.length ? `Personas cargadas: ${this.personas.length}` : "No hay personas cargadas";
}
}
}
</script>
Binary file added Leo Vazquez/src/assets/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions Leo Vazquez/src/components/error-message.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<div class="error">
<h2 v-for="(e, index) in errores" :key="index">
{{e}}
</h2>
</div>
</template>

<script>
export default {
name: 'errorMessage',
props: ['errores']
}
</script>

<style>
.error {
background-color: red;
}
</style>
51 changes: 51 additions & 0 deletions Leo Vazquez/src/components/user-card-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<template>
<div>
<el-button-group>
<el-button @click="setMostrarSexo('todos')">Mostrar todos</el-button>
<el-button @click="setMostrarSexo('Hombre')">Mostrar Hombres</el-button>
<el-button @click="setMostrarSexo('Mujer')">Mostrar Mujeres</el-button>
</el-button-group>
<div class="user-card-list">
<user-card @borrar="borrarPersona" v-for="p in personasPorSexo" :persona="p" :key="p.id"></user-card>
</div>
</div>
</template>

<script>

import userCard from './user-card.vue';

export default {
name: 'userCardList',
components: {
userCard
},
mounted () {
this.personas = JSON.parse(localStorage.getItem('people') || null ) || [];
},
data: function() {
return {
personas: [],
mostrarSoloSexo: 'todos'
}
},
computed: {
personasPorSexo(){
if(this.mostrarSoloSexo !== 'todos'){
return this.personas.filter( p => p.sexo === this.mostrarSoloSexo);
}
return this.personas;
}
},
methods: {
borrarPersona(id){
console.log(id);
this.personas = this.personas.filter( persona => persona.id !== id );
localStorage.setItem('people', JSON.stringify(this.personas));
},
setMostrarSexo(sexo){
this.mostrarSoloSexo = sexo;
}
}
}
</script>
20 changes: 20 additions & 0 deletions Leo Vazquez/src/components/user-card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<div>
<el-tag closable @close="$emit('borrar',persona.id)"> {{ persona.nombre }} {{ persona.edad }} {{ persona.sexo }} </el-tag>
</div>
</template>

<script>
export default {
name: 'userCard',
props: ['persona'],

}
</script>

<style>
.card {
color: green;
padding-top: 30px;
}
</style>
88 changes: 88 additions & 0 deletions Leo Vazquez/src/components/user-form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<el-form>
<error :errores="errores"/>

<el-form-item label="Nombre">
<el-input placeholder="Nombre" type="text" v-model="persona.nombre"></el-input>
</el-form-item>
<el-form-item label="Edad">
<el-input-number v-model="persona.edad" :min="4" :max="120"></el-input-number>
</el-form-item>

<el-form-item label="Sexo">
<el-radio v-model="persona.sexo" label="Hombre">Hombre</el-radio>
<el-radio v-model="persona.sexo" label="Mujer">Mujer</el-radio>
</el-form-item>

<el-button type="primary" @click="nuevaPersona()">Agregar</el-button>

</el-form>
</template>

<script>
import errorMessage from '@/components/error-message';
export default {
name: 'userForm',
components: {
error: errorMessage
},
data: function() {
return{
errores:[],
persona: {
id:0,
nombre: "",
edad: 0,
sexo: ""
}
}
},
methods:{
nuevaPersona(){
if(this.camposValidos()){
const people = JSON.parse(localStorage.getItem('people') || null) || [];
this.persona.id = people.length ? (people[people.length-1].id + 1) : 1;
people.push({...this.persona});
localStorage.setItem('people', JSON.stringify(people));
this.vaciarCampos();
}
},
camposValidos(){
let esValido = true;
this.errores = [];

if(this.persona.nombre.trim().length === 0){
esValido = false;
this.errores.push("Falta el nombre");
} else if(!isNaN(this.persona.nombre)){
esValido = false;
this.errores.push("Un nombre no puede ser un numero");
}

if(this.persona.sexo.length === 0){
esValido = false;
this.errores.push("Por favor, seleccione sexo");
}

if(this.persona.edad <= 0 || this.persona.edad > 200){
esValido = false;
this.errores.push("Edad no válida");
}

return esValido;
},
vaciarCampos() {
this.persona.nombre = this.persona.sexo = "";
this.persona.edad = 0;
this.errores = [];
}

}
}
</script>

<style>
.userForm {
background-color: yellow
}
</style>
13 changes: 13 additions & 0 deletions Leo Vazquez/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
router,
render: h => h(App)
}).$mount('#app')
23 changes: 23 additions & 0 deletions Leo Vazquez/src/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import userForm from './components/user-form.vue';
import userCardList from './components/user-card-list.vue';

Vue.use(VueRouter);

export default new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: "home",
component: userCardList,
},
{
path: '/addUser',
name: "user",
component: userForm,
},
]
})