Skip to content

TP6 Matias Simone #89

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
Matiassimone wants to merge 1 commit into
base: tp6
Choose a base branch
from
Open

TP6 Matias Simone #89

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 Matias Simone/.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*
5 changes: 5 additions & 0 deletions Matias Simone/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,390 changes: 12,390 additions & 0 deletions Matias Simone/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 44 additions & 0 deletions Matias Simone/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{
"name": "pruebas",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"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": true,
"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 Matias Simone/public/favicon.ico
View file
Open in desktop
Binary file not shown.
17 changes: 17 additions & 0 deletions Matias Simone/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>pruebas</title>
</head>
<body>
<noscript>
<strong>We're sorry but this TP 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 Matias Simone/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">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/users">List Users</router-link> |
<router-link to="/createUser">Create User</router-link> |
<router-link to="/deleteAndMod">Borrar y Modificar</router-link>
</div>
<router-view/>
</div>
</template>

<script>
export default {
name: 'app',
data() {
return {

}
}
}
</script>


<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}

#nav a {
font-weight: bold;
color: #2c3e50;
}

#nav a.router-link-exact-active {
color: #42b983;
}
</style>
Binary file added Matias Simone/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.
189 changes: 189 additions & 0 deletions Matias Simone/src/components/ms-editAndDeleteUserCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<template>
<div>
<ul>
<li v-for="(persona, index) in personas" :key="index">
<button @click="borrarPersona(persona.id)">Borrar</button> -
<button @click="editarPersona(persona.id)">Editar</button>
{{ persona.nombre }} {{ persona.apellido }} - {{ persona.sexo}} - {{persona.edad}}
<hr>
</li>
</ul>

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close" @click="CloseModal()">X</a>

<h2>Editar</h2>

<ul>
<li v-for="(error, index) in errors" :key="index">{{ error }}</li>
</ul>

<label for="nombre">Nombre </label>
<input type="text" v-model="personaForm.nombre" placeholder="Introduzca su Nombre." name="nombre">
<br><br>
<label for="apellido">Apellido </label>
<input type="text" v-model="personaForm.apellido" placeholder="Introduzca su Apellido." name="apellido">
<br><br>
<label for="edad">Edad </label>
<input type="number" v-model.number="personaForm.edad" name="edad" min="0">
<br><br>
<label for="sexo">Sexo </label>
<select v-model="personaForm.sexo" name="sexo">
<option disabled></option>
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
<option value="Otro">Otro</option>
</select>
<br><br>
<button @click="checkForm()">Editar Usuario</button>
</div>
</div>
</div>
</template>
<script>
import PersonService from '@/services/personService'

export default {

name: 'editAndDelete',

data() {
return {
personas: [],
errors: [],
personaForm: {
nombre: "",
apellido: "",
sexo: "",
edad: 0,
id: 0
},
idToChange: 0
}
},

created(){
this.personas = PersonService.getAll();
},

methods: {

borrarPersona(id) {
let borrar = this.personas.find(person => person.id === id);
let index = this.personas.indexOf(borrar);
this.personas.splice(index, 1);

PersonService.saveAll(this.personas);
},

editarPersona(id) {
this.idToChange = id;
document.getElementById('openModal').style.display = 'block';
},

CloseModal() {
document.getElementById('openModal').style.display = 'none';
},

checkForm : function () {
if (this.personaForm.nombre && this.personaForm.apellido && this.personaForm.sexo && this.personaForm.edad && this.personaForm.edad<150 && this.personaForm.edad>0) {

this.errors = [];

this.personaForm.id = this.idToChange;
PersonService.change(this.personaForm);

this.CloseModal();
this.personaForm = {};
this.reList();


} else {

this.errors = [];

if (!this.personaForm.nombre) {
this.errors.push(' - Nombre requerido');
}
if (!this.personaForm.apellido) {
this.errors.push(' - Apellido requerido');
}
if (!this.personaForm.sexo) {
this.errors.push(' - Sexo requerido');
}
if (!this.personaForm.edad) {
this.errors.push(' - Edad requerida');
}
if (this.personaForm.edad > 150 || this.personaForm.edad < 0) {
this.errors.push(' - Edad invalida');
}
}
},

reList : function(){
this.personas = PersonService.getAll();
}
}
}
</script>

<style>

ul {
list-style: none;
}

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
display:none;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

</style>
32 changes: 32 additions & 0 deletions Matias Simone/src/components/ms-filtersMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<div>
<label for="filterMenu">Opciones de listado </label>
<select v-model="typeList" name="filterMenu">
<option disabled value="">Seleccione un Filtro</option>
<option>Sin filtro</option>
<option value="Masculino">Filtrar solo Masculinos</option>
<option value="Femenino">Filtrar solo Femeninos</option>
<option value="Otro">Filtrar solo Otros</option>
</select>
<button @click="filter()">Filtrar</button>
<br><br><br>
</div>
</template>
<script>
export default {

name: 'filtersMenu',

data() {
return {
typeList: ""
}
},

methods: {
filter() {
this.$emit('filt', this.typeList);
}
}
}
</script>
Loading