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

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');
+        }
+      });
     }
   },
 }