Skip to content

GitLab

Commit 084e0d1f authored by homeRodrigo's avatar homeRodrigo
Browse files

Fix #72

parent e7706f96
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 26 deletions
frontend/src/components/altaCompromiso.vue
View file @ 084e0d1f
......@@ -127,7 +127,7 @@
</div>
<button type="submit" class="btn btn-primary my-3" v-if="esCompleto" @click="guardarCompromiso">Guardar</button>
<button type="submit" class="btn btn-nuevo my-3" v-if="esCompleto" @click="guardarCompromiso">Guardar</button>
<div id="altaCompromisoEnviarAyuda" class="my-3 form-text text-danger" v-if="!esCompleto">No podrá guardar el compromiso hasta completar todos los campos</div>
</form>
......
frontend/src/components/altaUsuario.vue
View file @ 084e0d1f
......@@ -93,7 +93,7 @@
</div>
</div>
<button type="submit" class="btn btn-primary my-3" v-if="esCompleto" @click="guardarUsuario">Guardar</button>
<button type="submit" class="btn btn-nuevo my-3" v-if="esCompleto" @click="guardarUsuario">Guardar</button>
<div id="altaCompromisoEnviarAyuda" class="my-3 form-text text-danger" v-if="!esCompleto">No podrá guardar el usuario hasta completar todos los campos</div>
</form>
......
frontend/src/components/compromiso.vue
View file @ 084e0d1f
......@@ -76,8 +76,12 @@ export default {
</div>
<div class="col">
<button type="button" class="btn btn-warning m-1" @click="modificarCompromiso()">Modificar</button>
<button type="button" class="btn btn-danger m-1" @click="eliminarCompromiso()">Eliminar</button>
<button type="button" class="btn m-1" data-placement="bottom" title="Editar compromiso" @click="modificarCompromiso()">
<font-awesome-icon icon="fa-solid fa-pen-to-square" />
</button>
<button type="button" class="btn m-1" data-placement="bottom" title="Eliminar compromiso" @click="eliminarCompromiso()">
<font-awesome-icon icon="fa-solid fa-trash" />
</button>
</div>
</div>
......
frontend/src/components/listaUsuarios.vue
View file @ 084e0d1f
......@@ -21,6 +21,7 @@
ingresosUnidadFamiliar:0
},
creciente:true,
filtrosearch:""
}
},
components: {AltaUsuario, Usuario},
......@@ -30,6 +31,19 @@
let modalNuevoUsuario = this.$refs.modalNuevoUsuario
return new Modal(modalNuevoUsuario)
},
usuariosFiltrados(){
if (this.filtrosearch == "" ){
return this.usuariosAlta
} else {
let retorno = new Map()
for (let [id,usuario] of this.usuariosAlta){
if(usuario.nombre.toLowerCase().includes(this.filtrosearch.toLocaleLowerCase())){
retorno.set(id, usuario)
}
}
return retorno
}
}
},
......@@ -86,6 +100,10 @@
this.ordenarDecrecienteUsuarios()
}
},
filtrarPorNombre(){
}
},
......@@ -100,15 +118,17 @@
<template>
<h1 class="mx-3 py-2 row">
<h1 class="col align-self-center"> Usuarios </h1>
<button type="button" class="btn btn-success col-2 align-self-end m-3" @click="altaUsuario">Nuevo usuario</button>
<button type="button" class="btn btn-nuevo col-2 align-self-end m-3" @click="altaUsuario">Nuevo usuario</button>
</h1>
<div class="container mx-2">
<button type="button" class="btn btn-success m-3" @click="ordenar" v-if="this.creciente">Ordenar por prioridad creciente</button>
<button type="button" class="btn btn-success m-3" @click="ordenar" v-if="!this.creciente">Ordenar por prioridad decreciente</button>
<button type="button" class="btn btn-exito m-3" @click="ordenar" v-if="this.creciente">Ordenar por prioridad creciente</button>
<button type="button" class="btn btn-exito m-3" @click="ordenar" v-if="!this.creciente">Ordenar por prioridad decreciente</button>
<input type="search" placeholder="Filtrar por nombre" v-model="filtrosearch" id="listaUsuariosCuadrBuesqueda" data-placement="bottom" title="Escriba el nombre del usuario que quiere buscar">
<font-awesome-icon :icon="['fas', 'search']" class="mx-2"/>
</div>
<div v-for="usuario in this.usuariosAlta" :key="usuario[0]" class="m-5">
<div v-for="usuario in this.usuariosFiltrados" :key="usuario[0]" class="m-5">
<Usuario :usuario="usuario" @modificar-usuario="modificarUsuario" @eliminar-usuario="eliminarUsuario">
</Usuario>
......
frontend/src/components/recogidasAlimento.vue
View file @ 084e0d1f
......@@ -142,7 +142,7 @@ export default {
</div>
</li>
<li class="list-group-item">
<button type="submit" class="btn btn-primary my-3" @click="filtrarYSumar" v-if="this.grupoFiltro != null">filtrar</button>
<button type="submit" class="btn btn-nuevo my-3" @click="filtrarYSumar" v-if="this.grupoFiltro != null">filtrar</button>
<div class="mx-3 text-danger" v-if="recogidasFiltradas == null && this.filtrado">
No existen recogidas de alimento para esas fechas o grupo.
</div>
......@@ -156,7 +156,7 @@ export default {
<div v-if="this.filtrado == true">
<div class="container mx-3" v-if="recogidasFiltradas != null">
<button type="submit" class="btn btn-primary my-3" @click="imprimir">Imprimir</button>
<button type="submit" class="btn btn-nuevo my-3" @click="imprimir">Imprimir</button>
</div>
<div id="recogidasAlimentoAreaImpresion">
......
frontend/src/components/usuario.vue
View file @ 084e0d1f
......@@ -28,7 +28,8 @@
id: this.usuario[0]
},
recogidasAlimentoUsuario: new Map(),
formacionesUsuario: new Map()
formacionesUsuario: new Map(),
verCompromisosDesplegado: false // informa de si el panel de compromisos se ha desplegado
}
},
emits: ['modificar-usuario', 'eliminar-usuario'],
......@@ -165,12 +166,15 @@
//Descarga los compromisos al desplegar el collapse contenedor
verCompromisos(){
const listaCompromisosUsuario = document.getElementById('usuarioCollapseListaCompromisos'+this.usuarioCompleto.id)
// listaCompromisosUsuario.addEventListener('hidden.bs.collapse', event => {
// })
listaCompromisosUsuario.addEventListener('shown.bs.collapse',async event => {
await this.descargarCompromisosUsuario()
})
this.verCompromisosDesplegado = true
})
listaCompromisosUsuario.addEventListener('hidden.bs.collapse',async event => {
this.verCompromisosDesplegado = false
})
}
},
async mounted(){
......@@ -184,15 +188,15 @@
<div class="card" style="width: auto;">
<div class="card-body">
<h5 class="card-title">
{{usuarioCompleto.nombre}} => Índice de prioridad: {{ usuarioCompleto.ingresosUnidadFamiliar / (usuarioCompleto.numeroMenores + 1) }}
<button type="button" class="btn btn-success mx-3" data-bs-toggle="modal" :data-bs-target="'#UsuarioDatosUsuario'+this.usuarioCompleto.id">
{{usuarioCompleto.nombre}} => Índice de prioridad: {{ Math.round(usuarioCompleto.ingresosUnidadFamiliar / (usuarioCompleto.numeroMenores + 1)) }}
<button type="button" class="btn btn-exito mx-3" data-bs-toggle="modal" :data-bs-target="'#UsuarioDatosUsuario'+this.usuarioCompleto.id">
Datos de usuario
</button>
<button type="button" class="btn btn-warning mx-3" @click="modificarUsuario">
Modificar usuario
<button type="button" class="btn mx-3" @click="modificarUsuario" data-placement="bottom" title="Editar usuario">
<font-awesome-icon icon="fa-solid fa-pen-to-square" />
</button>
<button type="button" class="btn btn-danger mx-3" @click="eliminarUsuario">
Eliminar usuario
<button type="button" class="btn mx-3" @click="eliminarUsuario" data-placement="bottom" title="Eliminar usuario">
<font-awesome-icon icon="fa-solid fa-trash" />
</button>
</h5>
<!--Compromisos-->
......@@ -200,9 +204,12 @@
<li class="list-group-item">
<p class="d-inline-flex gap-1">
<button class="btn btn-success" type="button" @click="verCompromisos" data-bs-toggle="collapse" :data-bs-target="'#usuarioCollapseListaCompromisos' +this.usuarioCompleto.id" aria-expanded="false" aria-controls="usuarioCollapseListaCompromisos">
<button v-if="!verCompromisosDesplegado" class="btn btn-exito" type="button" @click="verCompromisos" data-bs-toggle="collapse" :data-bs-target="'#usuarioCollapseListaCompromisos' +this.usuarioCompleto.id" aria-expanded="false" aria-controls="usuarioCollapseListaCompromisos">
Ver compromisos
</button>
<button v-if="verCompromisosDesplegado"class="btn btn-exito" type="button" @click="verCompromisos" data-bs-toggle="collapse" :data-bs-target="'#usuarioCollapseListaCompromisos' +this.usuarioCompleto.id" aria-expanded="false" aria-controls="usuarioCollapseListaCompromisos">
Ocultar compromisos
</button>
</p>
<div class="collapse" :id="'usuarioCollapseListaCompromisos'+this.usuarioCompleto.id">
<div class="card card-body">
......@@ -220,6 +227,11 @@
</Compromiso>
</div>
<div>
<p v-if="this.formacionesUsuario.size == 0 && this.recogidasAlimentoUsuario.size == 0">
No existen compromisos para este usuario
</p>
</div>
</li>
</ul>
</div>
......@@ -229,7 +241,7 @@
</div>
<div class="card-body">
<button type="button" class="btn btn-success m-2" v-if="esAlta" @click="altaCompromiso">Nuevo compromiso</button>
<button type="button" class="btn btn-nuevo m-2" v-if="esAlta" @click="altaCompromiso">Nuevo compromiso</button>
</div>
</div>
......
frontend/src/main.js
View file @ 084e0d1f
......@@ -13,9 +13,8 @@ import * as bootstrap from 'bootstrap'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// A partir de aquí importamos librerías según los iconos que queramos emplear
import { faUser } from '@fortawesome/free-solid-svg-icons'
library.add(faUser)
import { faPenToSquare, faUser, faTrash, faSearch } from '@fortawesome/free-solid-svg-icons'
library.add(faUser, faPenToSquare, faTrash, faSearch)
//Añadimos el componente dfontawesome a la variable de la APP (createApp()...)
......
frontend/src/scss/styles.scss
View file @ 084e0d1f
......@@ -16,4 +16,27 @@ h1 {
background-color: var(--colorA2);
text-align: center;
}
//Botones
.btn-exito{
background-color:var(--colorA2);
}
.btn-advertencia{
background-color:var(--colorA2);
}
.btn-peligro{
background-color:var(--colorB2);
color:white;
}
.btn-nuevo{
background-color:var(--colorC1);
color:white;
}
.btn:hover{
background-color:var(--colorA1);
color: black;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment