Views updated and correct functionally. Improvements added.

src/views/UpdateEquip.vue

@@ -1,7 +1,27 @@
 <template>
   <div class="container mt-5">
+
+    <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>
+    
+    <b-modal id="status" ref="" hide-footer hide-header>
+            <div class="d-block text-center">
+                <h3>Error.</h3>
+                <br>
+                <h6>Regrese y seleccione una fila para editar los campos.</h6>
+            </div>
+            <b-button class="mt-3" variant="primary" block @click="$router.replace('/user')">Regresar al inicio.</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">Editar información del equipo</h1>
 
         <h3 class="text-left mt-4">Datos generales:</h3>
@@ -11,108 +31,152 @@
         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."
           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 value="">Opcion 1</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 value="">Opcion 1</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 value="">Opcion 1</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 value="">Opcion 1</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 MGHz:"
-        /> 
+          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 value="">Opcion 1</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>
 
@@ -128,7 +192,7 @@
                 </button>
                 <button
                   class="btn btn-lg btn-danger mx-3"
-                  @click.prevent="deleteEquip()"  
+                  @click.prevent="deleteEquip(equipo.noInventario)"  
                 >
                   Eliminar
                 </button>
@@ -170,18 +234,65 @@
 
 <script>
 import Swal from 'sweetalert2'
+import axios from 'axios'
+import config from '../config/config'
 
 export default {
   data() {
     return {
-      noInventario: null,
-      noResguardo: null,
-      nombreResponsable: '',
-      uResponsable: '',
-      ubicacion: ''
+      loading: true,
+      status: null,
+      equipo: {},
+      respuesta: {}
     }
   },
+  created() {
+    this.getEquipo();
+  },
   methods: {
+    getEquipo(){
+      const params = { noInventario: localStorage.noInventario };
+      this.loading = true;
+      axios
+      .get(`${config.api}/api/updateEquip`, {
+        params,
+        headers: {
+          token: localStorage.token
+        }
+      })
+      .then( res => {
+        this.equipo = res.data.equipo[0];
+        this.getAll();
+        this.loading = false;
+      })
+      .catch(error => {
+        if(error.response.status === 409) {
+          localStorage.clear();
+          this.$bvModal.show('session');
+        }
+        if(error.response.status === 500)
+          this.$bvModal.show('status');
+      });
+    },
+    getAll() {
+      this.loading = true;
+      axios
+      .get(`${config.api}/api/addEquip`, {
+        headers: {
+          token: localStorage.token
+        }
+      })
+      .then((res) => {
+        this.respuesta = res.data;
+        this.loading = false;
+      })
+      .catch(error => {
+        if(error.response.status === 409) {
+            localStorage.clear();
+            this.$bvModal.show('session');
+        }
+      });
+    },
     saveChanges() {
         Swal.fire({
         title: '¿Está seguro de querer guardar los cambios?',
@@ -193,14 +304,34 @@ export default {
         cancelButtonText: 'Cancelar'
       }).then((result) => {
         if (result.value) {
-          Swal.fire({
-            title: '¡Información actualizada!',
-            icon: 'success'
+          axios
+          .put(`${ config.api }/api/updateEquip`, this.equipo, {
+            headers: {
+              token: localStorage.token
+            }
+          })
+          .then(() => {
+            Swal.fire({
+              title: '¡Hecho!',
+              text: 'Equipo actualizado con éxito.',
+              icon: 'success'
+            })
+          })
+          .catch(error => {
+            if(error.response.status === 409) {
+                    localStorage.clear();
+                    this.$bvModal.show('session');
+                }
+            else Swal.fire({
+                  title: '¡Error!',
+                  text: 'No se pudo actualizar el equipo en el inventario.',
+                  icon: 'error'
+                });
           })
         }
       })
     },
-    deleteEquip() {
+    deleteEquip(noInventario) {
         Swal.fire({
         title: '¿Está seguro de querer eliminar este equipo?',
         icon: 'warning',
@@ -211,9 +342,35 @@ export default {
         cancelButtonText: 'Cancelar'
       }).then((result) => {
         if (result.value) {
-          Swal.fire({
-            title: '¡Información eliminada!',
-            icon: 'success'
+          axios
+          .delete(`${ config.api }/api/updateEquip`, {
+            data: {
+              noInventario
+            }
+          }, {
+            headers: {
+              token: localStorage.token
+            }
+          })
+          .then(() => {
+            Swal.fire({
+              title: '¡Hecho!',
+              text: 'Equipo eliminado con éxito.',
+              icon: 'success'
+            })
+            localStorage.removeItem('noInventario');
+            this.$router.replace('/user');
+          })
+          .catch(error => {
+            if(error.response.status === 409) {
+                    localStorage.clear();
+                    this.$bvModal.show('session');
+                }
+            else Swal.fire({
+                  title: '¡Error!',
+                  text: 'No se pudo actualizar el equipo en el inventario.',
+                  icon: 'error'
+                });
           })
         }
       })