Vistas de agregar funcionando al cien. Mejoras de diseño en el header

This commit is contained in:
alfredojl
2020-09-17 21:26:05 -05:00
parent a1f70071b1
commit 6777c24879
5 changed files with 292 additions and 112 deletions
+4 -1
View File
@@ -30,7 +30,10 @@
<div class="container d-flex justify-content-between py-1">
<div class="d-flex">
<b-avatar v-if="!!setCurrentUser()" class="mr-3 m-2"></b-avatar>
<font-awesome-icon v-if="!['login'].includes($route.name)" icon="home" class="mr-5 my-auto text-white" style="cursor:pointer" @click="$router.push('user')"/>
<font-awesome-icon icon="user" v-if="!!setCurrentUser()" class="mr-2 my-auto text-white" />
<span class="text-white mr-3 my-auto mr-md-4" v-text="setCurrentUser()">
</span>
<div v-if="isAdmin()">
+7 -5
View File
@@ -2,7 +2,7 @@ import Vue from 'vue'
import App from './App.vue'
import router from './routes'
import {library} from '@fortawesome/fontawesome-svg-core'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faUserSecret,
faUser,
@@ -12,8 +12,9 @@ import {
faKey,
faExclamationCircle,
faEnvelope,
faHome
} from '@fortawesome/free-solid-svg-icons'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)
library.add(faUser)
@@ -23,6 +24,7 @@ library.add(faGraduationCap)
library.add(faExclamationCircle)
library.add(faKey)
library.add(faEnvelope)
library.add(faHome)
Vue.component('font-awesome-icon', FontAwesomeIcon)
@@ -30,6 +32,6 @@ Vue.config.productionTip = false
// el: '#app',
new Vue({
render: h => h(App),
router,
}).$mount('#app')
render: h => h(App),
router,
}).$mount('#app')
+151 -72
View File
@@ -1,122 +1,171 @@
<template>
<div class="container mt-5">
<div v-if="loading" class="text-center">
<b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
<b-modal id="session" ref="" hide-footer hide-header>
<div class="d-block text-center">
<h3>La sesión ha caducado</h3>
</div>
<b-button class="mt-3" variant="primary" block @click="$router.replace('/login')">¡Llévame al login!</b-button>
</b-modal>
<div v-if="loading" class="container text-center p-5">
<b-spinner variant="primary" label="Spinning" class="m-4 p-5"></b-spinner>
</div>
<div v-else class="d-flex flex-column">
<h1 class="text-center">Agregar equipo</h1>
<h3 class="text-left mt-4">Datos generales:</h3>
<form
class="mb-5 form-add-user pl-0"
enctype="multipart/form-data"
>
<input
v-model="equipo.noInventario"
type="text"
class="pb-2 my-4"
placeholder="Número de inventario:"
/>
/>
<input
v-model="equipo.noResguardo"
type="text"
class="pb-2 my-4"
placeholder="Número de resguardo:"
/>
/>
<input
<!-- <input
v-model="equipo.nombreResponsable"
type="text"
class="pb-2 my-4"
placeholder="Nombre del responsable:"
/>
/> -->
<select class="py-2 my-4 sel-form-add" required>
<option value="" hidden>Unidad Responsable</option>
<option v-for="unidad in respuesta.unidades" :key="unidad.idUnidadResponsable">{{ unidad.idUnidadResponsable }} {{ unidad.uResponsable }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="equipo.idUnidadResponsable"
:options="respuesta.unidades"
value-field="idUnidadResponsable"
text-field="uResponsable">
<template v-slot:first>
<b-select-option :value="null" disabled>Unidad Responsable:</b-select-option>
</template>
</b-select>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Ubicación</option>
<option v-for="ubicacion in respuesta.ubicaciones" :key="ubicacion.idUbicacion">{{ ubicacion.idUbicacion }} {{ ubicacion.ubicacion }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="equipo.idUbicacion"
:options="respuesta.ubicaciones"
value-field="idUbicacion"
text-field="ubicacion"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Ubicación:</b-select-option>
</template>
</b-select>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Uso</option>
<option v-for="uso in respuesta.usos" :key="uso.idUso">{{ uso.idUso }} {{ uso.uso }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="equipo.idUso"
:options="respuesta.usos"
value-field="idUso"
text-field="uso"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Uso:</b-select-option>
</template>
</b-select>
</form>
<div>
<h3>Computadora</h3>
<h3>Computadora</h3>
<form
class="mb-5 form-add-user pl-0"
enctype="multipart/form-data"
>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Tipo de equipo:</option>
<option v-for="activoFijo in respuesta.activosFijo" :key="activoFijo.idActivoFijo">{{ activoFijo.idActivoFijo }} {{ activoFijo.activoFijo }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="equipo.idActivoFijo"
:options="respuesta.activosFijos"
value-field="idActivoFijo"
text-field="activoFijo"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Tipo de equipo:</b-select-option>
</template>
</b-select>
<input
v-model="equipo.modelo"
type="text"
class="pb-2 my-4"
placeholder="Modelo:"
/>
<input
type="text"
class="pb-2 my-4"
placeholder="Marca:"
/>
/>
<b-select class="py-2 my-4 sel-form-add"
v-model="equipo.idMarca"
:options="respuesta.marcas"
value-field="idMarca"
text-field="marca"
>
<template v-slot:first>
<b-select-option :value="null" disable>Marca:</b-select-option>
</template>
</b-select>
<input
v-model="equipo.noSerie"
type="text"
class="pb-2 my-4"
placeholder="Número de serie:"
/>
/>
<input
v-model="equipo.procesador"
type="text"
class="pb-2 my-4"
placeholder="Procesador:"
/>
/>
<input
v-model="equipo.vProcesador"
type="text"
class="pb-2 my-4"
placeholder="Velocidad del procesador:"
/>
placeholder="Velocidad del procesador en MHz:"
/>
<input
v-model="equipo.hdd"
type="text"
class="pb-2 my-4"
placeholder="Memoria ROM en GB:"
/>
/>
<input
v-model="equipo.memoriasz"
type="text"
class="pb-2 my-4"
placeholder="Memoria RAM en MB:"
/>
/>
<input
v-model="equipo.memoria"
type="text"
class="pb-2 my-4"
placeholder="Tipo de memoria:"
/>
/>
<input
v-model="equipo.vMemoria"
type="text"
class="pb-2 my-4"
placeholder="Velocidad de memoria en MHz:"
/>
/>
<input
v-model="equipo.graficos"
type="text"
class="pb-2 my-4"
placeholder="Gráficos:"
/>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Sistema operativo:</option>
<option v-for="distro in respuesta.distros" :key="distro.idOS">{{ distro.idOS }} {{ distro.osname }}</option>
</select>
/>
<b-select class="py-2 my-4 sel-form-add"
v-model="equipo.idOS"
:options="respuesta.distros"
value-field="idOS"
text-field="osname"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Sistema Operativo:</b-select-option>
</template>
</b-select>
</form>
</div>
@@ -129,7 +178,7 @@
</button>
<button
class="btn btn-lg btn-success"
@click.prevent="addEquip()"
@click.prevent="addEquip()"
>
Añadir
</button>
@@ -160,7 +209,7 @@
</div>
</footer>
</div>
</div>
</div>
</template>
<script>
@@ -172,24 +221,26 @@ export default {
data() {
return {
loading: null,
noInventario: null,
noResguardo: null,
nombreResponsable: '',
uResponsable: null,
ubicacion: null,
uso: null,
activoFijo: null,
modelo: '',
marca: '',
noSerie: '',
procesador: null,
vProcesador: null,
hdd: null,
memoriasz: null,
memoria: null,
vMemoria: null,
graficos: '',
osname: null,
equipo: {
noInventario: null,
noResguardo: null,
// nombreResponsable: null,
idUnidadResponsable: null,
idUbicacion: null,
idUso: null,
idActivoFijo: null,
modelo: null,
idMarca: null,
noSerie: null,
procesador: null,
vProcesador: null,
hdd: null,
idOS: null,
memoriasz: null,
memoria: null,
vMemoria: null,
graficos: null
},
respuesta: []
}
},
@@ -198,6 +249,7 @@ export default {
},
methods: {
addEquip() {
const data = this.equipo;
Swal.fire({
title: '¿Está seguro de querer añadir este equipo?',
icon: 'warning',
@@ -208,9 +260,30 @@ export default {
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.value) {
Swal.fire({
title: '¡Equipo añadido!',
icon: 'success'
axios
.post(`${config.api}/api/AddEquip`, data, {
headers: {
token: localStorage.token
}
})
.then(() => {
Swal.fire({
title: '¡Hecho!',
text: 'Equipo agregado correctamente.',
icon: 'success'
})
Object.keys(this.equipo).forEach(key => this.equipo[key] = null);
})
.catch((error) => {
if(error.response.status === 409) {
localStorage.clear();
this.$bvModal.show('session');
}
else Swal.fire({
title: '¡Error!',
text: 'No se pudo agregar el equipo al inventario.',
icon: 'error'
});
})
}
})
@@ -225,10 +298,16 @@ export default {
}
})
.then((res) => {
// console.log();
this.respuesta = res.data;
this.loading = false;
})
.catch((e) => console.log(e))
.catch(error => {
if(error.response.status === 409) {
localStorage.clear();
this.$bvModal.show('session');
}
});
}
},
}
+126 -30
View File
@@ -1,7 +1,18 @@
<template>
<div class="container mt-5 justify-content-center">
<b-modal id="session" ref="" hide-footer hide-header>
<div class="d-block text-center">
<h3>La sesión ha caducado</h3>
</div>
<b-button class="mt-3" variant="primary" block @click="$router.replace('/login')">¡Llévame al login!</b-button>
</b-modal>
<div v-if="loading" class="container text-center p-5">
<b-spinner variant="primary" label="Spinning" class="m-4 p-5"></b-spinner>
</div>
<div class="d-flex flex-column">
<div v-else class="d-flex flex-column">
<h1 class="text-center">Agregar impresora</h1>
<h3 class="text-left mt-4">Datos generales:</h3>
@@ -11,37 +22,57 @@
enctype="multipart/form-data"
>
<input
v-model="printer.noInventario"
type="text"
class="pb-2 my-4"
placeholder="Número de inventario:"
/>
<input
v-model="printer.noResguardo"
type="text"
class="pb-2 my-4"
placeholder="Número de resguardo:"
/>
<input
<!-- <input
v-model=""
type="text"
class="pb-2 my-4"
placeholder="Nombre del responsable:"
/>
/> -->
<select class="py-2 my-4 sel-form-add" required>
<option value="" hidden>Unidad Responsable</option>
<option v-for="unidad in respuesta.unidades" :key="unidad.idUnidadResponsable">{{ unidad.idUnidadResponsable }} {{ unidad.uResponsable }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="printer.idUnidadResponsable"
:options="respuesta.unidades"
value-field="idUnidadResponsable"
text-field="uResponsable">
<template v-slot:first>
<b-select-option :value="null" disabled>Unidad Responsable:</b-select-option>
</template>
</b-select>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Ubicación</option>
<option v-for="ubicacion in respuesta.ubicaciones" :key="ubicacion.idUbicacion">{{ ubicacion.idUbicacion }} {{ ubicacion.ubicacion }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="printer.idUbicacion"
:options="respuesta.ubicaciones"
value-field="idUbicacion"
text-field="ubicacion"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Ubicación:</b-select-option>
</template>
</b-select>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Uso</option>
<option v-for="uso in respuesta.usos" :key="uso.idUso">{{ uso.idUso }} {{ uso.uso }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="printer.idUso"
:options="respuesta.usos"
value-field="idUso"
text-field="uso"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Uso:</b-select-option>
</template>
</b-select>
</form>
<div>
@@ -54,27 +85,50 @@
enctype="multipart/form-data"
>
<select class="py-2 my-4 sel-form-add">
<option value="" hidden>Tipo de impresora:</option>
<option v-for="tipo in respuesta.tipos" :key="tipo.idTipo">{{ tipo.idTipo }} {{ tipo.tipo }}</option>
</select>
<b-select class="py-2 my-4 sel-form-add"
v-model="printer.idTipo"
:options="respuesta.tipos"
value-field="idTipo"
text-field="tipo"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Tipo de impresora:</b-select-option>
</template>
</b-select>
<b-select class="py-2 my-4 sel-form-add"
v-model="printer.idMarca"
:options="respuesta.marcas"
value-field="idMarca"
text-field="marca"
>
<template v-slot:first>
<b-select-option :value="null" disabled>Marca:</b-select-option>
</template>
</b-select>
<input
v-model="printer.modelo"
type="text"
class="pb-2 my-4"
placeholder="Modelo:"
/>
<input
type="text"
class="pb-2 my-4"
placeholder="Marca:"
/>
<input
v-model="printer.noSerie"
type="text"
class="pb-2 my-4"
placeholder="Número de serie:"
/>
<b-textarea
v-model="printer.descripcion"
class="pb-2 my-4 sel-form-add"
placeholder="Descripcion adicional:"
rows="3"
no-resize
></b-textarea>
</form>
</div>
@@ -129,6 +183,20 @@ import config from '../config/config';
export default {
data() {
return {
loading: true,
printer: {
noInventario: null,
noResguardo: null,
// nombreResponsable: null,
idUnidadResponsable: null,
idUbicacion: null,
idUso: null,
idTipo: null,
modelo: null,
idMarca: null,
noSerie: null,
descripcion: null
},
respuesta: []
}
},
@@ -137,19 +205,42 @@ export default {
},
methods: {
addEquip() {
const data = this.printer;
Swal.fire({
title: '¿Está seguro de querer añadir este equipo?',
title: '¿Está seguro de querer añadir esta impresora?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Sí, estoy seguro',
cancelButtonText: 'Cancelar'
}).then((result) => {
})
.then((result) => {
if (result.value) {
Swal.fire({
title: '¡Equipo añadido!',
icon: 'success'
axios
.post(`${config.api}/api/addPrinter`, data, {
headers: {
token: localStorage.token
}
})
.then(() => {
Swal.fire({
title: '¡Hecho!',
text: 'Impresora agregada correctamente.',
icon: 'success'
})
Object.keys(this.printer).forEach(key => this.printer[key] = null);
})
.catch((error) => {
if(error.response.status === 409) {
localStorage.clear();
this.$bvModal.show('session');
}
else Swal.fire({
title: '¡Error!',
text: 'No se pudo agregar la impresora al inventario.',
icon: 'error'
});
})
}
})
@@ -167,7 +258,12 @@ export default {
this.respuesta = res.data;
this.loading = false;
})
.catch((e) => console.log(e))
.catch(error => {
if(error.response.status === 409) {
localStorage.clear();
this.$bvModal.show('session');
}
});
}
},
}
+4 -4
View File
@@ -1,6 +1,6 @@
<template>
<div>
<b-modal id="session" ref="" hide-footer>
<b-modal id="session" ref="" hide-footer hide-header>
<div class="d-block text-center">
<h3>La sesión ha caducado</h3>
</div>
@@ -39,7 +39,7 @@
</thead>
<tbody class="overflow-auto thov" v-for="item in respuesta" :key="item.noInventario">
<tr @click="watchRow()">
<td>{{ item.noInventario }}</td>
<td class="text-primary">{{ item.noInventario }}</td>
<td>{{ item.activoFijo }}</td>
<td>{{ item.modelo }}</td>
<td>{{ item.marca }}</td>
@@ -181,7 +181,7 @@ export default {
this.loading = false;
})
.catch((error) => {
if(error.response.status === 401) {
if(error.response.status === 409) {
localStorage.clear();
this.$bvModal.show('session');
}
@@ -201,7 +201,7 @@ export default {
this.loading = false;
})
.catch(error => {
if(error.response.status === 401) {
if(error.response.status === 409) {
localStorage.clear();
this.$bvModal.show('session');
}