From ca7550bf799edd97c71d888b15bbbcc0bf6c6d85 Mon Sep 17 00:00:00 2001
From: DanielRamirezGe <daniel.adrian.ramirez.george@gmail.com>
Date: Wed, 20 Jan 2021 03:18:47 -0600
Subject: [PATCH] incio del proyecto

---
 censo_front/package-lock.json           |  11 +-
 censo_front/package.json                |   1 +
 censo_front/src/components/pcsTable.vue | 129 ++++++++++++++----------
 censo_front/src/config/config.js        |  15 +++
 censo_front/src/view/home.vue           |   5 +-
 5 files changed, 104 insertions(+), 57 deletions(-)
 create mode 100644 censo_front/src/config/config.js

diff --git a/censo_front/package-lock.json b/censo_front/package-lock.json
index c33a146..93bd235 100644
--- a/censo_front/package-lock.json
+++ b/censo_front/package-lock.json
@@ -2461,6 +2461,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5442,8 +5450,7 @@
     "follow-redirects": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
-      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==",
-      "dev": true
+      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
     },
     "for-in": {
       "version": "1.0.2",
diff --git a/censo_front/package.json b/censo_front/package.json
index cf9e81c..dd60102 100644
--- a/censo_front/package.json
+++ b/censo_front/package.json
@@ -11,6 +11,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "axios": "^0.21.1",
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.21.1",
     "core-js": "^3.6.5",
diff --git a/censo_front/src/components/pcsTable.vue b/censo_front/src/components/pcsTable.vue
index da7702d..fc244c7 100644
--- a/censo_front/src/components/pcsTable.vue
+++ b/censo_front/src/components/pcsTable.vue
@@ -1,18 +1,20 @@
 <template>
     <div class="row">
         <div class="col-12">
+            <h3 style="text-align: right; margin-bottom: 1rem;">Totales: {{pcTablesFiltrada.length}} </h3>
             <div class="table-responsive">
                 <table class="table">      
                     <thead>
                         <tr>
-                            <th v-for="item in pcHeaders" v-bind:key="item.nombre" scope="col">
+                            <th v-for="(item,indexHeader) in pcHeaders" v-bind:key="indexHeader" scope="col">
+                               
                                 <div class="dropdown">
                                     <button class="btn nav-link  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         {{item.nombre}}
                                     </button>
-                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                                        <b-dropdown-form>
-                                            <b-form-checkbox  v-for="type in item.data" v-bind:key="type"  scope="col"><a>{{type.nombre}}</a></b-form-checkbox>
+                                    <div class="dropdown-menu"  aria-labelledby="dropdownMenuButton"  style="padding:10px;">
+                                        <b-dropdown-form >
+                                            <div class="checkBox" v-for="(type,index) in item.data" v-bind:key="index"  ><b-form-checkbox @change="filtrar(indexHeader, type.nombre)" v-model="type.value" ><a>{{type.nombre}}</a></b-form-checkbox></div>
                                         </b-dropdown-form>
                                     </div>
                                 </div>
@@ -20,8 +22,8 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="pc in pcData" v-bind:key="pc.index">
-                            <td v-for="(pcCampo,key) in pc" v-bind:key="pcCampo"  v-b-modal.actualizarCampo @click="campo=pcCampo ,valueCampo = pcHeaders[key].nombre" >
+                        <tr v-for="(pc,index) in pcTablesFiltrada" v-bind:key="index">
+                            <td v-for="(pcCampo,key) in pc.datos" v-bind:key="key"  v-b-modal.actualizarCampo @click="campo=pcCampo ,valueCampo = pcHeaders[key].nombre" >
                                 {{pcCampo}}
                             </td>
                         </tr>
@@ -34,60 +36,81 @@
 </template>
 
 <script>
-
+import axios from "axios";
+import config from "../config/config.js";
 import Modal from './modalActualizar.vue'
 export default {
   name: "home",
   components: {
     Modal,
   },
-  data() {
-      return {
-        campo:"",
-        valueCampo:"",
-        pcHeaders: {
-            noInventario: {nombre: "Inventario", data: []},
-            activoFijo: {nombre: "Tipo", data: [{nombre: "compu", value: true}, {nombre: "dos", value: true}]},
-            modelo: {nombre: "Modelo", data: []},
-            marca: {nombre: "Marca", data: []},
-            noSerie: {nombre: "Serie", data: []},
-            procesador: {nombre: "Procesador", data: []},
-            vProcesador: {nombre: "Velocidad de procesador (MHz)", data: []},
-            hdd: {nombre: "ROM (GB)", data: []},
-            memoriasz: {nombre: "RAM (MB)", data: []},
-            memoria: {nombre: "Tipo de memoria", data: []},
-            vMemoria: {nombre: "Velocidad de memoria (MHz)", data: []},
-            graficos:{nombre: "Gráficos", data: []},
-            osname: {nombre: "Sistema operativo", data: []},
-            noResguardo: {nombre: "Resguardo", data: []},
-            uResponsable: {nombre: "Unidad responsable", data: []},
-            nombreResponsable: {nombre: "Responsable", data: []},
-            ubicacion: {nombre: "Ubicación", data: []},
-            uso: {nombre: "Uso", data: []}
-        },
-        pcData: [
-          {    noInventario: "Inventario",
-               activoFijo: "Tipo",
-               modelo: "Modelo",
-               marca: "Marca",
-               noSerie: "Serie",
-               procesador: "Procesador",
-               vProcesador: "Velocidad de procesador (MHz)",
-               hdd: "ROM (GB)",
-               memoriasz: "RAM (MB)",
-               memoria: "Tipo de memoria",
-               vMemoria: "Velocidad de memoria (MHz)",
-               graficos: "Gráficos",
-               osname: "Sistema operativo",
-               noResguardo: "Resguardo",
-               uResponsable: "Unidad responsable",
-               nombreResponsable: "Responsable",
-               ubicacion: "Ubicación",
-               uso: "Uso"  },
-        ],
-      }
+   props: {
+        campoBuscar: String,
+    },
+    data() {
+        return {
+            campo:"",
+            valueCampo:"",
+            pcHeaders: {},
+            pcData: [],
+        }
     },
     methods: {
+        async filtrar(key, dato){
+            for(let index in this.pcData){
+                let pc = this.pcData[index];
+                if(typeof pc.headers[key] !== 'undefined' && typeof pc.datos[key] !== 'undefined' && pc.datos[key] === dato)
+                    pc.headers[key] = !pc.headers[key];
+            }
+        }
+    },
+    async created() {
+        try {
+            let computadoras = await axios.get(`${config.api}/getHeadersComputadoras`);
+            this.pcHeaders = computadoras.data.data;
+        }
+        catch(error){
+            console.log(error);
+        }
+        try {
+            let computadoras = await axios.get(`${config.api}/getComputadoras`);
+            this.pcData = computadoras.data.data;
+        }
+        catch(error){
+            console.log(error);
+        }
+    },
+    computed:{
+        pcTablesFiltrada: function()
+        {
+          return this.pcData.filter( (item)=>{
+                let header = true;
+                for(let campo in item.headers){
+                    if(!item.headers[campo]){
+                        header = false;
+                        break;
+                    }
+                }
+                if(!header)
+                    return false;
+                let searchInventario = (item.datos.numeroInventario).includes(this.campoBuscar) ;
+                let searchResguardo = (item.datos.numeroResguardo).includes(this.campoBuscar) ;
+                let searchSerie = (item.datos.serie).includes(this.campoBuscar) ;
+                if(searchInventario || searchResguardo || searchSerie)
+                    return true;
+                return false;
+                
+              
+          }
+        );
+        }
     }
 };
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+a{
+    font-size: 14px;
+    margin-bottom: 6px;
+    font-weight: normal;
+}
+</style>
\ No newline at end of file
diff --git a/censo_front/src/config/config.js b/censo_front/src/config/config.js
new file mode 100644
index 0000000..e4f58bb
--- /dev/null
+++ b/censo_front/src/config/config.js
@@ -0,0 +1,15 @@
+const config = {
+    //ngrok
+    //api: "https://f8d86328e778.ngrok.io"
+  
+    //Local
+    api: "http://localhost:3000"
+  
+    //Pruebas
+    //api: "https://venus.acatlan.unam.mx/portal"
+  
+    //Produccion
+    //api: "https://venus.acatlan.unam.mx/portal_editorial"
+  };
+  module.exports = config;
+  
\ No newline at end of file
diff --git a/censo_front/src/view/home.vue b/censo_front/src/view/home.vue
index 046dffb..3df0cae 100644
--- a/censo_front/src/view/home.vue
+++ b/censo_front/src/view/home.vue
@@ -8,7 +8,7 @@
                             <b-input-group-prepend is-text>
                                 <b-icon icon="search"></b-icon>
                             </b-input-group-prepend>
-                            <b-form-input type="search" placeholder="Buscar" ></b-form-input>
+                            <b-form-input type="search" placeholder="Buscar" v-model="campoBuscar" ></b-form-input>
                         </b-input-group>
                     </div>
                     <div class="col-sm">
@@ -17,7 +17,7 @@
             </div>
         </div>
         <div class="container" v-if="typeSelected =='Equipos'">
-            <PcTable />
+            <PcTable  v-bind:campoBuscar="campoBuscar" />
         </div>
         <div class="container" v-else>
             <PrinterTable />
@@ -46,6 +46,7 @@ export default {
   data() {
       return {
         typeSelected:"Equipos",
+        campoBuscar: ""
       }
     },
     methods: {