From 6777c24879555fad2b3f10cbab8eedb00917f4e6 Mon Sep 17 00:00:00 2001
From: alfredojl <alfredo.jl323@gmail.com>
Date: Thu, 17 Sep 2020 21:26:05 -0500
Subject: [PATCH] =?UTF-8?q?Vistas=20de=20agregar=20funcionando=20al=20cien?=
 =?UTF-8?q?.=20Mejoras=20de=20dise=C3=B1o=20en=20el=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.vue |   5 +-
 src/main.js               |  12 +-
 src/views/AddEquip.vue    | 223 ++++++++++++++++++++++++++------------
 src/views/AddPrinter.vue  | 156 +++++++++++++++++++++-----
 src/views/User.vue        |   8 +-
 5 files changed, 292 insertions(+), 112 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 9747bf6..6a3e595 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -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()"> 
diff --git a/src/main.js b/src/main.js
index ec747f7..684fe6e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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')
\ No newline at end of file
diff --git a/src/views/AddEquip.vue b/src/views/AddEquip.vue
index 8b70e2a..226850d 100644
--- a/src/views/AddEquip.vue
+++ b/src/views/AddEquip.vue
@@ -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');
+        }
+      });
     }
   },
 }
diff --git a/src/views/AddPrinter.vue b/src/views/AddPrinter.vue
index 2ad031c..152813d 100644
--- a/src/views/AddPrinter.vue
+++ b/src/views/AddPrinter.vue
@@ -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');
+        }
+      });
     }
   },
 }
diff --git a/src/views/User.vue b/src/views/User.vue
index 7159494..f9bc34f 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -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');
                 }