dist/js/chunk-f782c928.8998d61d.js.map

-{"version":3,"sources":["webpack:///./src/views/sections/Info.vue?ecfa","webpack:///./src/views/sections/Info.vue?cdec","webpack:///src/views/sections/Info.vue","webpack:///./src/views/sections/Info.vue?1cb9","webpack:///./src/views/sections/Info.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","staticRenderFns","component","VCol","VContainer","VResponsive","VRow","VThemeProvider"],"mappings":"gHAAA,W,gECAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,mBAAmB,CAACE,MAAM,CAAC,KAAO,KAAK,CAACF,EAAG,eAAe,CAACG,YAAY,gBAAgBD,MAAM,CAAC,GAAK,aAAa,CAACF,EAAG,eAAe,CAACG,YAAY,UAAUD,MAAM,CAAC,YAAY,SAAS,CAACF,EAAG,cAAc,CAACE,MAAM,CAAC,MAAQ,KAAK,CAACF,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACE,MAAM,CAAC,KAAO,KAAK,GAAK,MAAM,CAACF,EAAG,cAAc,GAAGA,EAAG,QAAQ,CAACE,MAAM,CAAC,KAAO,KAAK,GAAK,MAAM,CAACF,EAAG,iBAAiB,CAACE,MAAM,CAAC,MAAQ,aAAaF,EAAG,wBAAwB,CAACE,MAAM,CAAC,MAAQ,OAAO,GAAGF,EAAG,QAAQ,CAACE,MAAM,CAAC,KAAO,KAAK,GAAK,MAAM,CAACF,EAAG,kBAAkB,GAAGA,EAAG,QAAQ,CAACE,MAAM,CAAC,KAAO,KAAK,GAAK,MAAM,CAACF,EAAG,cAAc,IAAI,IAAI,IAAI,IAAI,IAAI,IAC5qBI,EAAkB,GCgDtB,G,8BAAA,CACE,KAAF,sBAEE,WAAF,CACI,aAAJ,WAAM,OAAN,iDACI,UAAJ,WAAM,OAAN,oDCtD6V,I,yGCQzVC,EAAY,eACd,EACAV,EACAS,GACA,EACA,KACA,KACA,MAIa,aAAAC,EAAiB,QAShC,IAAkBA,EAAW,CAACC,OAAA,KAAKC,aAAA,KAAWC,cAAA,KAAYC,OAAA,KAAKC,iBAAA","file":"js/chunk-f782c928.8998d61d.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Info.vue?vue&type=style&index=0&lang=sass&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-theme-provider',{attrs:{\"dark\":\"\"}},[_c('base-section',{staticClass:\"grey darken-4\",attrs:{\"id\":\"info-alt\"}},[_c('v-responsive',{staticClass:\"mx-auto\",attrs:{\"max-width\":\"1400\"}},[_c('v-container',{attrs:{\"fluid\":\"\"}},[_c('v-row',[_c('v-col',{attrs:{\"cols\":\"12\",\"md\":\"3\"}},[_c('base-info')],1),_c('v-col',{attrs:{\"cols\":\"12\",\"md\":\"3\"}},[_c('base-info-card',{attrs:{\"title\":\"Contact\"}}),_c('base-business-contact',{attrs:{\"dense\":\"\"}})],1),_c('v-col',{attrs:{\"cols\":\"12\",\"md\":\"3\"}},[_c('info-features')],1),_c('v-col',{attrs:{\"cols\":\"12\",\"md\":\"3\"}},[_c('instagram')],1)],1)],1)],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <v-theme-provider dark>\n    <base-section\n      id=\"info-alt\"\n      class=\"grey darken-4\"\n    >\n      <v-responsive\n        class=\"mx-auto\"\n        max-width=\"1400\"\n      >\n        <v-container fluid>\n          <v-row>\n            <v-col\n              cols=\"12\"\n              md=\"3\"\n            >\n              <base-info />\n            </v-col>\n\n            <v-col\n              cols=\"12\"\n              md=\"3\"\n            >\n              <base-info-card title=\"Contact\" />\n\n              <base-business-contact dense />\n            </v-col>\n\n            <v-col\n              cols=\"12\"\n              md=\"3\"\n            >\n              <info-features />\n            </v-col>\n\n            <v-col\n              cols=\"12\"\n              md=\"3\"\n            >\n              <instagram />\n            </v-col>\n          </v-row>\n        </v-container>\n      </v-responsive>\n    </base-section>\n  </v-theme-provider>\n</template>\n\n<script>\n  export default {\n    name: 'SectionBusinessInfo',\n\n    components: {\n      InfoFeatures: () => import('@/components/InfoFeatures'),\n      Instagram: () => import('@/components/Instagram'),\n    },\n  }\n</script>\n\n<style lang=\"sass\">\n  #info-alt a\n    text-decoration: none\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Info.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Info.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Info.vue?vue&type=template&id=951250be&\"\nimport script from \"./Info.vue?vue&type=script&lang=js&\"\nexport * from \"./Info.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Info.vue?vue&type=style&index=0&lang=sass&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\nimport { VResponsive } from 'vuetify/lib/components/VResponsive';\nimport { VRow } from 'vuetify/lib/components/VGrid';\nimport { VThemeProvider } from 'vuetify/lib/components/VThemeProvider';\ninstallComponents(component, {VCol,VContainer,VResponsive,VRow,VThemeProvider})\n"],"sourceRoot":""}
\ No newline at end of file

src/axios/areas.js

@@ -5,26 +5,25 @@ import queryString from 'query-string'
 
 export async function getAreas (idCenter, page = 1) {
   const url = `${REQUEST_DIR}centros/${idCenter}/areas?page=${page}`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   return response
 }
 
 export async function getArea (id) {
   const url = `${REQUEST_DIR}areas/${id}`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   return response
 }
 
 export async function postArea (data) {
-  const url = `${REQUEST_DIR}/areas`
-  data = queryString.stringify(data)
+  const url = `${REQUEST_DIR}areas`
   const response = await axios.post(url, data, requestDataFormUrlEncoded())
   return response
 }
 
 export async function deleteArea (idCenter, id) {
   const url = `${REQUEST_DIR}centros/${idCenter}/areas/${id}`
-  const response = await axios.delete(url, requestData())
+  const response = await axios.delete(url, requestDataFormUrlEncoded())
   return response
 }
 

src/axios/auth.js

 import { REQUEST_DIR } from '@/utils/constants'
 import { requestData, requestDataFormUrlEncoded } from './requestHeadersHelper'
 import axios from 'axios'
+import { store } from '@/store'
 
 export async function login (user, pass) {
     user = {
@@ -8,6 +9,25 @@ export async function login (user, pass) {
         password: pass,
      }
   const url = `${REQUEST_DIR}auth/login`
-  const response = await axios.post(url, user, requestDataFormUrlEncoded())
+  const response = await axios
+    .post(url, user, requestData())
+  return response
+}
+export async function logout () {
+  const url = `${REQUEST_DIR}auth/logout`
+  const response = await axios.get(url, requestDataFormUrlEncoded())
+  return response
+}
+
+export async function getUser () {
+  const url = `${REQUEST_DIR}auth/user`
+  const response = await axios.get(url, requestDataFormUrlEncoded())
+  store.commit('setAntigens', response)
+  return response
+}
+
+export async function register (data) {
+  const url = `${REQUEST_DIR}auth/signup`
+  const response = await axios.post(url, data, requestData())
   return response
 }

src/axios/centers.js

 import axios from 'axios'
+import store from '@/store'
 import { REQUEST_DIR } from '../utils/constants'
-import {
-  requestData,
-  requestDataFormUrlEncoded,
-} from './requestHeadersHelper'
+import { requestData, requestDataFormUrlEncoded } from './requestHeadersHelper'
 
-export async function getCenters (page = 1) {
-  const url = `${REQUEST_DIR}centros?page=${page}`
-  const response = await axios.get(url, requestData())
+export async function getCenters (filters) {
+  const url = `${REQUEST_DIR}centros`
+  const response = await axios.get(url, requestData(filters))
+  const data = response.data.centros
+  store.commit('setCenters', data)
   return response
 }
 
@@ -25,7 +25,7 @@ export async function postCenter (data) {
 
 export async function deleteCenter (id) {
   const url = `${REQUEST_DIR}centros/${id}`
-  const response = await axios.delete(url, requestData())
+  const response = await axios.delete(url, requestDataFormUrlEncoded())
   return response
 }
 

src/axios/nomenclators.js

 import axios from 'axios'
 import store from '@/store'
 import { REQUEST_DIR } from '../utils/constants'
-import { requestData } from './requestHeadersHelper'
+import { requestDataFormUrlEncoded } from './requestHeadersHelper'
 
 export async function getCategories () {
   const url = `${REQUEST_DIR}nomenclador/categoria`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   const categories = response.data
   store.commit('setCategories', categories)
   return response
 }
-export async function getAntigenos () {
+export async function getAntigens () {
   const url = `${REQUEST_DIR}nomenclador/antigeno`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   const antigens = response.data
   store.commit('setAntigens', antigens)
   return response
 }
 export async function getSystemStatus () {
   const url = `${REQUEST_DIR}nomenclador/sistema`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   store.commit('setSystemStatuses', response.data)
   return response
 }
-export async function getHealthStatus () {
-  const url = `${REQUEST_DIR}nomenclador/estado`
-  const response = await axios.get(url, requestData())
+export async function getHealthStatuses () {
+  const url = `${REQUEST_DIR}nomenclador/salud`
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   const health = response.data
   store.commit('setHealthStatuses', health)
   return response
 }
 export async function getProvinces () {
   const url = `${REQUEST_DIR}nomenclador/provincia`
-  const response = await axios.get(url, requestData())
-   const provinces = response.data
-   store.commit('setProvinces', provinces)
+  const response = await axios.get(url, requestDataFormUrlEncoded())
+  const provinces = response.data
+  store.commit('setProvinces', provinces)
   return response
 }
 export async function getMunicipalities (id = 6) {
   const url = `${REQUEST_DIR}nomenclador/municipio/${id}`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   const municipalities = response.data
   store.commit('setMunicipalities', municipalities)
   return response
 }
 export async function getClasifications () {
-  const url = `${REQUEST_DIR}nomenclador/clasificacion`
-  const response = await axios.get(url, requestData())
+  const url = `${REQUEST_DIR}nomenclador/riesgo-categoria`
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   const clasifications = response.data
   store.commit('setClasifications', clasifications)
   return response
 }
 export async function getHealthAreas (id = 1) {
   const url = `${REQUEST_DIR}nomenclador/salud/${id}`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   const hAreas = response.data
   store.commit('setHealthAreas', hAreas)
   return response

src/axios/patients.js

 import axios from 'axios'
 import { REQUEST_DIR } from '../utils/constants'
 import { requestData, requestDataFormUrlEncoded } from './requestHeadersHelper'
-import queryString from 'query-string'
 
-export async function getPatients (page = 1) {
-  const url = `${REQUEST_DIR}pacientes?page=${page}`
-  const response = await axios.get(url, requestData())
+export async function getPatients (filters) {
+  const url = `${REQUEST_DIR}pacientes`
+  const response = await axios.get(url, requestDataFormUrlEncoded(filters))
   return response
 }
 
 export async function getPatient (id) {
   const url = `${REQUEST_DIR}pacientes/${id}`
-  const response = await axios.get(url, requestData())
+  const response = await axios.get(url, requestDataFormUrlEncoded())
   return response
 }
 
@@ -23,7 +22,7 @@ export async function postPatient (data) {
 
 export async function deletePatient (id) {
   const url = `${REQUEST_DIR}pacientes/${id}`
-  const response = await axios.delete(url, requestData())
+  const response = await axios.delete(url, requestDataFormUrlEncoded())
   return response
 }
 
@@ -32,3 +31,39 @@ export async function putPatient (data) {
   const response = await axios.put(url, data, requestDataFormUrlEncoded())
   return response
 }
+
+export async function checkPatientData (data) {
+  data.estado_sistema = 3
+  const url = `${REQUEST_DIR}pacientes/${data.id_paciente}`
+  const response = await axios.put(url, data, requestDataFormUrlEncoded())
+  return response
+}
+
+export async function assignatePatient (idCenter, idPatient) {
+  const url = `${REQUEST_DIR}asignar-pacientes`
+  const data = {
+    id_centro: idCenter,
+    id_paciente: idPatient,
+  }
+  const response = await axios.post(url, data, requestDataFormUrlEncoded())
+  return response
+}
+export async function ingresarPacientes (patients_ids, id_area) {
+  const url = `${REQUEST_DIR}ingresar-pacientes`
+  const data = {
+    patients_ids: patients_ids,
+    id_paciente: id_area,
+  }
+  const response = await axios.post(url, data, requestDataFormUrlEncoded())
+  return response
+}
+
+export async function admitPatient (idPatient) {
+  const url = `${REQUEST_DIR}pacientes`
+  const response = await axios.post(
+    url,
+    idPatient,
+    requestDataFormUrlEncoded(),
+  )
+  return response
+}

src/axios/requestHeadersHelper.js

 import { AGENT } from '@/utils/constants'
-import { decrypt } from '../utils/enc'
 
-export function requestData () {
+export function requestData (filters) {
   return {
+    params: filters,
     headers: {
-      Authorization: 'Bearer ' + decrypt(localStorage.getItem('tkn')),
+      // Authorization: 'Bearer ' + localStorage.getItem('tkn'),
       'Content-Type': 'application/json',
       Accept: 'application/json',
     },
@@ -14,10 +14,11 @@ export function requestData () {
   }
 }
 
-export function requestDataFormUrlEncoded () {
+export function requestDataFormUrlEncoded (filters) {
   return {
+    params: filters,
     headers: {
-      Authorization: 'Bearer ' + decrypt(localStorage.getItem('tkn')),
+      Authorization: 'Bearer ' + localStorage.getItem('tkn'),
       'Content-Type': 'application/json',
       Accept: 'application/json',
     },

src/components/FilterTool.vue

 <template>
   <v-expansion-panel>
-    <v-expansion-panel-header>Filtros</v-expansion-panel-header>
+    <v-expansion-panel-header>
+      <template v-slot:default="{ open }">
+        <v-row no-gutters>
+          <v-col
+            cols="12"
+            md="2"
+            lg="1"
+          >
+            <span>Filtros</span>
+          </v-col>
+          <v-col
+            cols="8"
+            class="text--secondary"
+          >
+            <v-fade-transition
+              leave-absolute
+            >
+              <span
+                v-if="open"
+                key="0"
+              >
+                Escoja los parámetros para su búsqueda
+              </span>
+              <span
+                v-else-if="activeFilters.length !== 0 && filterStatus"
+                key="1"
+              >
+                <v-icon color="warning">mdi-alert</v-icon>
+                Filtros activos:
+                <span><b> {{ activeFilters.toString() }}</b></span>
+              </span>
+            </v-fade-transition>
+          </v-col>
+        </v-row>
+      </template>
+    </v-expansion-panel-header>
     <v-expansion-panel-content>
       <v-row>
         <v-col
@@ -9,7 +44,7 @@
           md="2"
         >
           <v-text-field
-            v-model="filters.ci"
+            v-model="cacheFilters.ci"
             label="Carné de Identidad"
             :counter="11"
             :rules="ciRules"
@@ -21,7 +56,7 @@
           md="2"
         >
           <v-text-field
-            v-model="filters.nombre"
+            v-model="cacheFilters.nombre"
             label="Nombre"
             clearable
           />
@@ -32,7 +67,7 @@
           md="2"
         >
           <v-text-field
-            v-model="filters.apellidos"
+            v-model="cacheFilters.apellidos"
             label="Apellidos"
             clearable
           />
@@ -44,7 +79,7 @@
           md="2"
         >
           <v-autocomplete
-            v-model="filters.categoria"
+            v-model="cacheFilters.categoria"
             :items="categories"
             item-value="id"
             item-text="nombre"
@@ -52,6 +87,21 @@
             clearable
           />
         </v-col>
+        <v-col
+          v-if="categories !==null"
+          cols="12"
+          sm="4"
+          md="2"
+        >
+          <v-autocomplete
+            v-model="cacheFilters.salud"
+            :items="healthStatuses"
+            item-value="id"
+            item-text="nombre"
+            label="Estado de Salud"
+            clearable
+          />
+        </v-col>
         <v-col
           v-if="systemStatuses !== null"
           cols="12"
@@ -59,7 +109,7 @@
           md="2"
         >
           <v-autocomplete
-            v-model="filters.estado_sistema"
+            v-model="cacheFilters.estado_sistema"
             :items="systemStatuses"
             item-value="id"
             item-text="nombre"
@@ -74,13 +124,14 @@
           md="2"
         >
           <v-autocomplete
-            v-model="filters.provincia"
+            v-model="cacheFilters.provincia"
             :items="provinces"
             item-value="id"
             item-text="nombre"
             label="Provincia"
             no-data-text="Ocurrió un problema con el servidor"
             clearable
+            @change="loadMunicipalitiesData"
           />
         </v-col>
         <v-col
@@ -90,14 +141,13 @@
           md="2"
         >
           <v-autocomplete
-            v-model="filters.municipio"
+            v-model="cacheFilters.municipio"
             :items="municipalities"
             item-value="id"
             item-text="nombre"
             label="Municipio"
             clearable
             no-data-text="Debe seleccionar una provincia"
-            @change="searchMunicipalities"
           />
         </v-col>
         <v-col
@@ -106,7 +156,7 @@
           md="2"
         >
           <v-autocomplete
-            v-model="filters.centro"
+            v-model="cacheFilters.centro"
             :items="centers"
             item-value="id_centro"
             item-text="nombre_centro"
@@ -121,7 +171,7 @@
           md="2"
         >
           <v-autocomplete
-            v-model="filters.clasificacion"
+            v-model="cacheFilters.riesgo"
             :items="clasifications"
             item-value="id"
             item-text="nombre"
@@ -132,9 +182,33 @@
         </v-col>
       </v-row>
       <v-row no-gutters>
+        <v-fade-transition>
+          <v-spacer v-if="activeFilters.length !== 0" />
+        </v-fade-transition>
+        <v-fade-transition>
+          <v-btn
+            v-if="activeFilters.length !== 0"
+            text
+            color="red"
+            :loading="loading"
+            @click="sendFilter('clear')"
+          >
+            <v-icon>mdi-filter-variant-remove</v-icon> Limpiar Filtros
+          </v-btn>
+        </v-fade-transition>
+        <v-spacer />
+        <v-btn
+          text
+          color="red"
+          :loading="loading"
+          @click="sendClose"
+        >
+          <v-icon>mdi-cancel</v-icon> Cancelar
+        </v-btn>
         <v-spacer />
         <v-btn
-          color="info"
+          dark
+          color="success"
           :loading="loading"
           @click="sendFilter"
         >
@@ -147,9 +221,9 @@
 </template>
 
 <script>
-  import { getCategories, getSystemStatus, getProvinces, getMunicipalities, getClasifications } from '@/axios/nomenclators'
-  import { isLastName, isId, isPositiveNumber, isCmf } from '@/utils/regex'
-  import { getCenters } from '@/axios/centers'
+  import { getCategories, getSystemStatus, getProvinces, getClasifications, getMunicipalities, getHealthStatuses } from '@/axios/nomenclators'
+  import { isId } from '@/utils/regex'
+  import { mapGetters, mapMutations } from 'vuex'
   export default {
     name: 'FilterTool',
 
@@ -164,18 +238,51 @@
       },
     },
     data: () => ({
+      cacheFilters: {},
       ciRules: [
-        v => isId(v) || 'Debe chequear el carné',
+        v => isId(v) || '',
       ],
 
     }),
     computed: {
+      ...mapGetters(['filterStatus']),
+      activeFilters () {
+        const cache = []
+        if (this.cacheFilters.ci !== null && this.cacheFilters.ci !== '' && this.cacheFilters.ci !== undefined) {
+          cache.push('CI')
+        }
+        if (this.cacheFilters.nombre !== null && this.cacheFilters.nombre !== '' && this.cacheFilters.nombre !== undefined) {
+          cache.push('Nombre')
+        }
+        if (this.cacheFilters.apellidos !== null && this.cacheFilters.apellidos !== '' && this.cacheFilters.apellidos !== undefined) {
+          cache.push('Apellidos')
+        }
+        if (this.cacheFilters.categoria !== null && this.cacheFilters.categoria !== undefined) {
+          cache.push('Categoría')
+        }
+        if (this.cacheFilters.estado_sistema !== null && this.cacheFilters.estado_sistema !== undefined) {
+          cache.push('Estado Sistema')
+        }
+        if (this.cacheFilters.provincia !== null && this.cacheFilters.provincia !== undefined) {
+          cache.push('Provincia')
+        }
+        if (this.cacheFilters.municipio !== null && this.cacheFilters.municipio !== undefined) {
+          cache.push('Municipio')
+        }
+        if (this.cacheFilters.riesgo !== null && this.cacheFilters.provincia !== undefined) {
+          cache.push('Clasificación')
+        }
+        return cache
+      },
       categories () {
         return this.$store.getters.categories
       },
       systemStatuses () {
         return this.$store.getters.systemStatuses
       },
+      healthStatuses () {
+        return this.$store.getters.healthStatuses
+      },
       centers () {
         return this.$store.getters.centers
       },
@@ -190,27 +297,65 @@
       },
     },
     mounted () {
-      if (!this.$store.getters.categories.lenght === 0) {
+      if (this.$store.getters.provinces.length === 0) {
+        getProvinces()
+      }
+      if (this.$store.getters.healthStatuses.length === 0) {
+        getHealthStatuses()
+      }
+      if (this.$store.getters.categories.length === 0) {
         getCategories()
       }
-      if (!this.$store.getters.systemStatuses === null) {
+      if (this.$store.getters.systemStatuses.length === 0) {
         getSystemStatus()
       }
-      if (!this.$store.getters.provinces.lenght === 0) {
-        getProvinces()
+      if (this.$store.getters.clasifications.length === 0) {
+        getClasifications()
       }
-      getClasifications()
     },
     methods: {
-      async searchMunicipalities () {
-        console.log('HELLOOOOO')
-      },
-      sendFilter () {
-        this.$emit('filter-click')
+      ...mapMutations(['clearFilters', 'setFilters', 'setFilterStatus']),
+      showData () {
       },
       sendClose () {
         this.$emit('close-click')
       },
+      sendFilter (type) {
+        if (type === 'clear') {
+          if (this.activeFilters.length === 0) {
+            this.sendClose()
+            return
+          }
+          this.setFilterStatus(false)
+          this.cacheFilters = Object.assign({}, [])
+        } else {
+          this.setFilterStatus(true)
+        }
+        this.setFilters(this.cacheFilters)
+        this.$emit('filter-click')
+      },
+      async loadMunicipalitiesData () {
+        if (this.cacheFilters.provincia !== null) {
+          try {
+            await getMunicipalities(this.cacheFilters.provincia)
+          } catch (e) {
+            this.$toast.error(e.toString(), {
+              position: 'bottom-center',
+              timeout: 5000,
+              closeOnClick: true,
+              pauseOnFocusLoss: false,
+              pauseOnHover: true,
+              draggable: true,
+              draggablePercent: 0.6,
+              showCloseButtonOnHover: false,
+              hideProgressBar: true,
+              closeButton: 'button',
+              icon: true,
+              rtl: false,
+            })
+          }
+        }
+      },
     },
   }
 </script>

src/components/MaterialStatsCard.vue

+<template>
+  <material-card
+    class="v-card--material-stats"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template #subtitle>
+      <div
+        class="text-right text-h3 v-card__subtitle--material-stats"
+        v-text="value"
+      />
+    </template>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+
+    <slot />
+  </material-card>
+</template>
+
+<script>
+  export default {
+    name: 'MaterialStatCard',
+
+    props: { value: String },
+  }
+</script>
+
+<style lang="sass">
+.v-card--material-stats.v-card--material .v-card--material__title
+  color: #999999
+  font-size: .875rem !important
+  margin-left: auto
+  text-align: right
+
+.v-card__subtitle--material-stats
+  color: #3C4858
+</style>

src/components/PatientForm.vue

@@ -693,7 +693,7 @@
                     label="Test Antígeno"
                   />
                 </v-col>
-                <v-col
+                <!-- <v-col
                   cols="12"
                   sm="6"
                   md="4"
@@ -706,7 +706,7 @@
                     item-value="id"
                     label="Estado en el sistema"
                   />
-                </v-col>
+                </v-col> -->
                 <v-col
                   cols="12"
                   sm="6"
@@ -719,6 +719,7 @@
                     no-data-text="No se pudo conectar con el servidor"
                     item-value="id"
                     label="Estado de salud"
+                    :rules="healthAreaRules"
                   />
                 </v-col>
                 <v-col
@@ -727,12 +728,13 @@
                   md="4"
                 >
                   <v-autocomplete
-                    v-model="patient.clasificacion"
+                    v-model="patient.riesgo"
                     :items="clasifications"
                     item-text="nombre"
                     no-data-text="No se pudo conectar con el servidor"
                     item-value="id"
                     label="Clasificación"
+                    :rules="healthAreaRules"
                   />
                 </v-col>
                 <v-col
@@ -788,16 +790,16 @@
     <v-card-actions>
       <v-spacer />
       <v-btn
-        color="blue darken-1"
+        color="red darken-1"
         text
-        @click="sendClose"
+        @click="close"
       >
         Cancelar
       </v-btn>
       <v-btn
-        color="blue darken-1"
-        text
-        :loading="loadingPatientData"
+        color="green darken-1"
+        dark
+        :loading="loading"
         @click="save"
       >
         Guardar
@@ -807,29 +809,23 @@
 </template>
 
 <script>
-  import { getCategories, getProvinces, getHealthAreas, getMunicipalities, getHealthStatus, getClasifications } from '@/axios/nomenclators'
+  import { getCategories, getProvinces, getHealthAreas, getMunicipalities, getHealthStatus, getClasifications, getAntigens } from '@/axios/nomenclators'
   import { COUNTRIES } from '@/utils/constants'
-  import { postPatient, putPatient, getPatients } from '@/axios/patients'
-  import { isLastName, isId, isPositiveNumber, isCmf } from '@/utils/regex'
+  import { postPatient, putPatient } from '@/axios/patients'
+  import { isLastName, isId, isPositiveNumber } from '@/utils/regex'
+  import { mapMutations, mapGetters } from 'vuex'
+  import errorHandler from '@/mixins/error-handler'
   export default {
     name: 'PatientForm',
 
     props: {
-      index: {
-        type: Number,
-        default: -1,
-      },
       title: {
         type: String,
         default: 'Paciente',
       },
-      patient: {
-        type: Object,
-        default: null,
-      },
     },
     data: () => ({
-      loadingPatientData: false,
+      loading: false,
       menu: false,
       remissionTypes: ['Policlínico', 'C.M.F.', 'Hospital'],
       othersS: false,
@@ -843,9 +839,6 @@
       healthAreaRules: [
         v => !!v || 'Este campo es requerido',
       ],
-      cmfRules: [
-        v => isCmf(v) || 'Este campo es requerido',
-      ],
       numberRules: [
         v => !!v || 'Este campo es requerido',
         v => isPositiveNumber(v) || 'Debe chequear la edad',
@@ -860,10 +853,11 @@
       ],
       lastNameRules: [
         v => !!v || 'Este campo es requerido',
-        v => isLastName(v) || 'Debe chequear el nombre',
+        v => isLastName(v) || 'Debe chequear los apellidos',
       ],
     }),
     computed: {
+      ...mapGetters(['pIndex', 'patient', 'editFromFile']),
       countriesD () {
         return COUNTRIES
       },
@@ -899,7 +893,6 @@
       },
     },
     created () {
-      console.log(this.index)
       if (this.$store.getters.categories.length === 0) {
         getCategories()
       }
@@ -918,16 +911,25 @@
       if (this.$store.getters.clasifications.length === 0) {
         getClasifications()
       }
+      if (this.$store.getters.antigens.length === 0) {
+        getAntigens()
+      }
     },
     methods: {
-      close () {
+      ...mapMutations(['setPIndex']),
+      close (type) {
         this.$refs.form.resetValidation()
-
-        this.$nextTick(() => {
-          this.patient = Object.assign({}, this.defaultItem)
-          this.index = -1
-        })
-        this.sendClose()
+        if (!this.editFromFile) {
+          this.$nextTick(() => {
+            this.patient = Object.assign({}, this.defaultItem)
+            this.setPIndex(-1)
+          })
+        }
+        if (type === 'saved') {
+          this.sendRefresh()
+        } else {
+          this.sendClose()
+        }
       },
       clearData () {
         this.patient = Object.assign({}, this.defaultItem)
@@ -936,53 +938,50 @@
         try {
           await getHealthAreas(this.patient.municipio)
         } catch (e) {
-          this.$toast.error(e.toString(), {
-            position: 'bottom-center',
-            timeout: 5000,
-            closeOnClick: true,
-            pauseOnFocusLoss: false,
-            pauseOnHover: true,
-            draggable: true,
-            draggablePercent: 0.6,
-            showCloseButtonOnHover: false,
-            hideProgressBar: true,
-            closeButton: 'button',
-            icon: true,
-            rtl: false,
-          })
+          errorHandler(e)
         }
       },
       async loadMunicipalitiesData () {
         try {
           await getMunicipalities(this.patient.provincia)
         } catch (e) {
-          this.$toast.error(e.toString(), {
-            position: 'bottom-center',
-            timeout: 5000,
-            closeOnClick: true,
-            pauseOnFocusLoss: false,
-            pauseOnHover: true,
-            draggable: true,
-            draggablePercent: 0.6,
-            showCloseButtonOnHover: false,
-            hideProgressBar: true,
-            closeButton: 'button',
-            icon: true,
-            rtl: false,
-          })
+          errorHandler(e)
         }
       },
       sendClose () {
         this.$emit('close-click')
       },
+      sendRefresh () {
+        this.$emit('refresh')
+      },
       async save () {
-        console.log(this.index)
+        this.loading = true
         if (this.$refs.form.validate()) {
-          if (this.index > -1) {
-            this.patientsLoading = true
+          if (this.pIndex !== -1) {
             // Actualizar
             try {
-              await putPatient(this.patient)
+              const response = await putPatient(this.patient)
+              if (response.error !== undefined) {
+                const err = Object.getOwnPropertyNames(response.data.error)
+                if (err.filter(element => element === 'ci') !== null) {
+                  this.$toast.error('El número de carné está en uso, el paciente ya debe tener expediente', {
+                    position: 'bottom-center',
+                    timeout: 5000,
+                    closeOnClick: true,
+                    pauseOnFocusLoss: false,
+                    pauseOnHover: true,
+                    draggable: true,
+                    draggablePercent: 0.6,
+                    showCloseButtonOnHover: false,
+                    hideProgressBar: true,
+                    closeButton: 'button',
+                    icon: true,
+                    rtl: false,
+                  })
+                  this.loading = false
+                  return
+                }
+              }
               this.$toast.success('Datos actualizados correctamente', {
                 position: 'bottom-center',
                 timeout: 5000,
@@ -1000,28 +999,35 @@
 
               this.$refs.form.reset()
               this.$refs.form.resetValidation()
-              this.clearData()
-              this.close()
+              this.close('saved')
             } catch (e) {
-              this.$toast.error(e.toString(), {
-                position: 'bottom-center',
-                timeout: 5000,
-                closeOnClick: true,
-                pauseOnFocusLoss: false,
-                pauseOnHover: true,
-                draggable: true,
-                draggablePercent: 0.6,
-                showCloseButtonOnHover: false,
-                hideProgressBar: true,
-                closeButton: 'button',
-                icon: true,
-                rtl: false,
-              })
+              errorHandler(e)
             }
           } else {
             // Añadir
             try {
-              await postPatient(this.patient)
+              const response = await postPatient(this.patient)
+              if (response.data.error !== undefined) {
+                const err = Object.getOwnPropertyNames(response.data.error)
+                if (err.filter(element => element === 'ci') !== null) {
+                  this.$toast.error('El número de carné está en uso, el paciente ya debe tener expediente', {
+                    position: 'bottom-center',
+                    timeout: 5000,
+                    closeOnClick: true,
+                    pauseOnFocusLoss: false,
+                    pauseOnHover: true,
+                    draggable: true,
+                    draggablePercent: 0.6,
+                    showCloseButtonOnHover: false,
+                    hideProgressBar: true,
+                    closeButton: 'button',
+                    icon: true,
+                    rtl: false,
+                  })
+                  this.loading = false
+                  return
+                }
+              }
               this.$toast.success('Registro exitoso', {
                 position: 'bottom-center',
                 timeout: 5000,
@@ -1039,25 +1045,11 @@
               this.$refs.form.reset()
               this.$refs.form.resetValidation()
               this.clearData()
-              this.close()
+              this.close('saved')
             } catch (e) {
-              this.$toast.error(e.toString(), {
-                position: 'bottom-center',
-                timeout: 5000,
-                closeOnClick: true,
-                pauseOnFocusLoss: false,
-                pauseOnHover: true,
-                draggable: true,
-                draggablePercent: 0.6,
-                showCloseButtonOnHover: false,
-                hideProgressBar: true,
-                closeButton: 'button',
-                icon: true,
-                rtl: false,
-              })
+              errorHandler(e)
             }
           }
-          getPatients()
         } else {
           this.$toast.error('Chequee los datos incorrectos', {
             position: 'bottom-center',
@@ -1074,6 +1066,7 @@
             rtl: false,
           })
         }
+        this.loading = false
       },
     },
   }

src/main.js

@@ -23,10 +23,10 @@ Vue.use(MultiFiltersPlugin)
 Vue.prototype.$axios = api
 localStorage.setItem('tkn', encrypt('pepe'))
 
-if (process.env.NODE_ENV === 'development') {
-  const { worker } = require('./mocks/browser')
-  worker.start()
-}
+// if (process.env.NODE_ENV === 'development') {
+//   const { worker } = require('./mocks/browser')
+//   worker.start()
+// }
 
 Vue.use(Toast, {
   transition: 'Vue-Toastification__bounce',

src/mixins/error-handler.js

+import Vue from 'vue'
+export default function (error) {
+    let status = 0
+    if (error.toString() === 'Error: Network Error') {
+      this.$toast.error('Error de Red, revise su conexión', {
+        position: 'bottom-center',
+        timeout: 3000,
+        closeOnClick: true,
+        pauseOnFocusLoss: false,
+        pauseOnHover: true,
+        draggable: true,
+        draggablePercent: 0.6,
+        showCloseButtonOnHover: false,
+        hideProgressBar: true,
+        closeButton: 'button',
+        icon: true,
+        rtl: false,
+    })
+  }
+  if (error.response !== undefined) {
+    switch (error.response.status) {
+      case 500: {
+        Vue.$toast.error('Error interno del servidor, inténtelo más tarde', {
+          position: 'bottom-center',
+          timeout: 3000,
+          closeOnClick: true,
+          pauseOnFocusLoss: false,
+          pauseOnHover: true,
+          draggable: true,
+          draggablePercent: 0.6,
+          showCloseButtonOnHover: false,
+          hideProgressBar: true,
+          closeButton: 'button',
+          icon: true,
+          rtl: false,
+        })
+        break
+      }
+      case 401: {
+        Vue.$toast.error('No autorizado', {
+          position: 'bottom-center',
+          timeout: 3000,
+          closeOnClick: true,
+          pauseOnFocusLoss: false,
+          pauseOnHover: true,
+          draggable: true,
+          draggablePercent: 0.6,
+          showCloseButtonOnHover: false,
+          hideProgressBar: true,
+          closeButton: 'button',
+          icon: true,
+          rtl: false,
+        })
+        status = -1
+        break
+      }
+      default: {
+        Vue.$toast.error('No autorizado', {
+          position: 'bottom-center',
+          timeout: 3000,
+          closeOnClick: true,
+          pauseOnFocusLoss: false,
+          pauseOnHover: true,
+          draggable: true,
+          draggablePercent: 0.6,
+          showCloseButtonOnHover: false,
+          hideProgressBar: true,
+          closeButton: 'button',
+          icon: true,
+          rtl: false,
+        })
+        status = -1
+        break
+      }
+    }
+  }
+
+    if (status === -1) {
+        localStorage.setItem('tkn', null)
+        localStorage.setItem('userData', null)
+        localStorage.setItem('role', null)
+        Vue.$router.push({ name: 'Login' })
+    }
+}

src/views/admin/Index.vue

+<script>
+  // Extensions
+  import View from '@/views/View'
+
+  // Mixins
+  import LoadSections from '@/mixins/load-sections'
+
+  export default {
+    name: 'Registro',
+
+    metaInfo: { title: 'Registro' },
+
+    extends: View,
+
+    mixins: [
+      LoadSections([
+        'register',
+      ]),
+    ],
+
+    props: {
+      id: {
+        type: String,
+        default: 'register',
+      },
+    },
+  }
+</script>

src/views/sections/IngresarPacientes.vue

@@ -27,10 +27,10 @@
               <div class="col-md-5" id="add-patients">
                 <v-btn
                   depressed
-                  @click="addPatients"
+                  @click="procesar_ingreso"
                   color="primary"
                 >
-                  Agregar Paciente
+                  Ingresar Pacientes
                 </v-btn>
 
               </div>
@@ -98,6 +98,68 @@
                 ></v-select>
               </div>
             </div>
+            <p id="selected-area" v-if="selected_area.length" class="text-justify">
+              Area seleccionada: {{ selected_area }}
+            </p>
+            <!--         modal-->
+            <v-row justify="center">
+              <v-dialog
+                v-model="dialog"
+                scrollable
+                max-width="300px"
+              >
+
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn
+                    color="primary"
+                    dark
+                    v-bind:disabled="selected_centers.length===0"
+                    v-bind="attrs"
+                    v-on="on"
+                  >
+                    Seleccionar area
+                  </v-btn>
+                </template>
+                <v-card>
+                  <v-card-title>Seleccione un area</v-card-title>
+                  <v-divider></v-divider>
+                  <v-card-text style="height: 200px;">
+                    <v-radio-group
+                      v-model="dialogm1"
+                      column
+                    >
+                      <div v-if="selected_centers.length">
+                        <v-radio v-for="item in selected_centers[0].areas"
+                                 v-bind:label="item.nombre"
+                                 v-bind:value="item.id_area"
+                                 @change="update_selected_area(item)"
+                        ></v-radio>
+                      </div>
+
+                    </v-radio-group>
+                  </v-card-text>
+                  <v-divider></v-divider>
+                  <v-card-actions>
+                    <v-btn
+                      color="blue darken-1"
+                      text
+                      @click="dialog = false"
+                    >
+                      Cancelar
+                    </v-btn>
+                    <v-btn
+                      color="blue darken-1"
+                      text
+
+                      @click="dialog = false"
+                    >
+                      Seleccionar
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
+            </v-row>
+
           </template>
         </v-data-table>
       </div>
@@ -107,7 +169,7 @@
 
 
 <script>
-import {getPatients, getPatient, postPatient, deletePatient, putPatient} from '@/axios/patients'
+import {getPatients, getPatient, postPatient, deletePatient, putPatient, ingresarPacientes} from '@/axios/patients'
 import {getCategories, getClasifications} from '@/axios/nomenclators'
 import {deleteCenter, getCenters} from '@/axios/centers'
 import {forInRight} from 'lodash'
@@ -129,7 +191,7 @@ export default {
         {text: 'Edad', value: 'edad'},
         {text: 'Sexo', value: 'sexo'},
         {text: 'Categoría', value: 'categoria'},
-        {text: 'Clasificación', value: 'clasificacion'},
+        {text: 'Clasificación', value: 'riesgo'},
       ],
       patients: [],
       singleSelectCenters: true,
@@ -155,6 +217,9 @@ export default {
       selected_patients: [],
       selected_centers: [],
       text_field: "",
+      dialog: false,
+      selected_area: "",
+      selected_area_id: -1,
     }
   },
   created() {
@@ -163,6 +228,82 @@ export default {
       this.getCentersCategoriesData()
   },
   methods: {
+    async procesar_ingreso() {
+      if (this.selected_patients.length > 0) {
+        if (this.selected_centers.length > 0) {
+          if (this.selected_area_id !== -1) {
+            console.log("SELECTED PATIENTS: " + this.selected_patients + "SELECTED AREA: " + this.selected_area);
+            // const response = await this.ingresarPacientes(this.selected_patients, this.selected_area);
+            // console.log("REsponse", response);
+            this.$toast.success("Paciente ingresado con éxito", {
+              position: 'bottom-center',
+              timeout: 5000,
+              closeOnClick: true,
+              pauseOnFocusLoss: false,
+              pauseOnHover: true,
+              draggable: true,
+              draggablePercent: 0.6,
+              showCloseButtonOnHover: false,
+              hideProgressBar: true,
+              closeButton: 'button',
+              icon: true,
+              rtl: false,
+            })
+          } else {
+            this.$toast.error("Debe seleccionar un area", {
+              position: 'bottom-center',
+              timeout: 5000,
+              closeOnClick: true,
+              pauseOnFocusLoss: false,
+              pauseOnHover: true,
+              draggable: true,
+              draggablePercent: 0.6,
+              showCloseButtonOnHover: false,
+              hideProgressBar: true,
+              closeButton: 'button',
+              icon: true,
+              rtl: false,
+            })
+          }
+        } else {
+          this.$toast.error("Debe seleccionar un centro", {
+            position: 'bottom-center',
+            timeout: 5000,
+            closeOnClick: true,
+            pauseOnFocusLoss: false,
+            pauseOnHover: true,
+            draggable: true,
+            draggablePercent: 0.6,
+            showCloseButtonOnHover: false,
+            hideProgressBar: true,
+            closeButton: 'button',
+            icon: true,
+            rtl: false,
+          })
+        }
+      } else {
+        this.$toast.error("Debe seleccionar al menos un paciente", {
+          position: 'bottom-center',
+          timeout: 5000,
+          closeOnClick: true,
+          pauseOnFocusLoss: false,
+          pauseOnHover: true,
+          draggable: true,
+          draggablePercent: 0.6,
+          showCloseButtonOnHover: false,
+          hideProgressBar: true,
+          closeButton: 'button',
+          icon: true,
+          rtl: false,
+        })
+      }
+    },
+    update_selected_area(item) {
+      this.selected_area = item.nombre;
+      this.selected_area_id = item.id_area;
+      console.log("Selected Area: ", this.selected_area);
+      console.log("Selected Area ID: ", this.selected_area_id);
+    },
     update_selected_patients(values) {
       console.log("SELECTED ITEMS: entre ", values);
       if (values.value) {
@@ -225,6 +366,8 @@ export default {
           this.selected_centers = neo_selected_list;
         }
       }
+      this.selected_area = "";
+      this.selected_area_id = -1;
       console.log("SELECTED ITEMS CENTERS: ", this.selected_centers);
     },
     async filterByOrganismos(val) {
@@ -337,22 +480,37 @@ export default {
       try {
         const patientsResponse = await getPatients()
         this.patients = await patientsResponse.data.pacientes;
+
+        const data = await getClasifications();
+        let clasications = await data.data;
+        for (let i = 0; i < this.patients.length; i++) {
+
+          let patient = this.patients[i];
+
+          for (const c of clasications) {
+            if (c.id === patient.riesgo) {
+              patient.riesgo = c.nombre;
+            }
+          }
+          this.patients[i] = patient;
+        }
+
         await this.getCategoriesData();
         /*let i = 0;
-    for (const p in pacientes) {
-        console.log("Entre aqui");
-         const p = pacientes[i];
-            let classification = 'niño'
-            if(p.embarazada!=0){
-              classification = 'embarazada';
-            }
-            if(p.trabajador_salud!=0){
-              classification = 'trabajador de la salud';
-            }
-            p.clasificacion = classification;
-            pacientes[i] = p;
-            i+=1;
-    }*/
+  for (const p in pacientes) {
+      console.log("Entre aqui");
+       const p = pacientes[i];
+          let classification = 'niño'
+          if(p.embarazada!=0){
+            classification = 'embarazada';
+          }
+          if(p.trabajador_salud!=0){
+            classification = 'trabajador de la salud';
+          }
+          p.clasificacion = classification;
+          pacientes[i] = p;
+          i+=1;
+  }*/
         // this.patients = pacientes;
         // console.log('Patientsss', pacientes);
       } catch (e) {
@@ -466,9 +624,8 @@ export default {
       }
     }
   },
-
-
 }
+
 </script>
 <style>
 #centers-table {
@@ -479,7 +636,7 @@ export default {
   margin-top: 20px;
 }
 
-#filter-organism, #filter-categorie, #filter-categorie-patients, #patients-name {
+#filter-organism, #filter-categorie, #filter-categorie-patients, #patients-name, #selected-area {
   margin-left: 10px;
 
 }

src/views/sections/Register.vue

+<template>
+  <v-card
+    class="elevation-12"
+    style="margin: 8px"
+  >
+    <v-toolbar
+      dark
+      color="success"
+    >
+      <v-toolbar-title>
+        Datos de Usuario
+      </v-toolbar-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-form
+        ref="form"
+        v-model="valid"
+        lazy-validation
+      >
+        <!-- <v-text-field
+          v-model="data.name"
+          :rules="passwordRules"
+          prepend-icon="mdi-account"
+          label="Nombre"
+        /> -->
+        <v-text-field
+          v-model="data.email"
+          :rules="usernameRules"
+          prepend-icon="mdi-at"
+          name="login"
+          label="Coreo Electrónico"
+          required
+          type="email"
+        />
+        <v-autocomplete
+          v-model="data.role"
+          :rules="passwordRules"
+          :items="roles"
+          prepend-icon="mdi-account"
+          label="Rol"
+          item-text="name"
+          item-value="value"
+          required
+        />
+        <v-text-field
+          id="password"
+          v-model="data.password"
+          :rules="passwordRules"
+          prepend-icon="mdi-lock"
+          name="password"
+          required
+          label="Contraseña"
+          type="password"
+        />
+        <v-text-field
+          id="password"
+          v-model="data.confirm_password"
+          :rules="passwordRules"
+          prepend-icon="mdi-lock"
+          name="password"
+          required
+          label="Confirmar Contraseña"
+          type="password"
+        />
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        color="red"
+        text
+        :disabled="!valid"
+        submit
+        :loading="tryLogin"
+        @click="cancel"
+      >
+        Cancelar
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        color="green"
+        dark
+        :disabled="!valid"
+        submit
+        :loading="tryLogin"
+        @click="submit"
+      >
+        Registrar
+      </v-btn>
+      <v-spacer />
+    </v-card-actions>
+  </v-card>
+</template>
+<script>
+  import { register } from '@/axios/auth'
+  import { mapMutations } from 'vuex'
+  import { isLastName, isEmail } from '@/utils/regex'
+
+  export default {
+    name: 'Register',
+    data: () => ({
+      custom: true,
+      data: {
+        name: null,
+        email: null,
+        password: null,
+        confirm_password: null,
+        role: null,
+      },
+      roles: [
+        {
+          value: 'MCP',
+          name: 'Mesa Coordinadora Provincial',
+        },
+        {
+          value: 'ERP',
+          name: 'Equipo de Respuesta Rápida',
+        },
+        {
+          value: 'MCM',
+          name: 'Mesa Coordinadora Municipal',
+        },
+        {
+          value: 'DCA',
+          name: 'Director Centro Hospitalario',
+        },
+        {
+          value: 'MCPREV',
+          name: 'Revisor de Mesa Coordinadora Provincial',
+        },
+        {
+          value: 'CA',
+          name: 'Centro Aislamiento',
+        },
+      ],
+      tryLogin: false,
+      valid: true,
+      passwordRules: [
+        v => !!v || 'Este campo es requerido',
+      ],
+      testRules: [
+        v => !!v || 'Este campo es requerido',
+      ],
+      nameRules: [
+        v => !!v || 'Este campo es requerido',
+        v => isLastName(v) || 'Debe introducir un nombre válido',
+      ],
+      usernameRules: [
+        v => !!v || 'Este campo es requerido',
+        v => isEmail(v) || 'Debe introducir una dirección de correo válida',
+      ],
+    }),
+    computed: {
+      same () {
+        return this.data.password === this.data.confirm_password
+      },
+      progress () {
+        return Math.min(100, this.value.length * 10)
+      },
+      color () {
+        return ['error', 'warning', 'success'][Math.floor(this.progress / 40)]
+      },
+    },
+    methods: {
+      ...mapMutations(['setUser']),
+      cancel () {
+        this.$router.push({ name: 'Control' })
+      },
+      async submit () {
+        this.$refs.form.validate()
+        if (this.$refs.form.validate(true)) {
+          this.tryLogin = true
+          try {
+            this.data.name = this.data.email
+            const loginResponse = await register(this.data)
+            const token = loginResponse.data.token
+            const user = loginResponse.data.user
+            this.setUser(user)
+            localStorage.setItem('tkn', token)
+            this.$router.push({ name: 'Control' })
+          } catch (e) {
+            if (e.toString() === 'Error: Network Error') {
+              this.$toast.error('Error de Red, revise su conexión', {
+                position: 'bottom-center',
+                timeout: 3000,
+                closeOnClick: true,
+                pauseOnFocusLoss: false,
+                pauseOnHover: true,
+                draggable: true,
+                draggablePercent: 0.6,
+                showCloseButtonOnHover: false,
+                hideProgressBar: true,
+                closeButton: 'button',
+                icon: true,
+                rtl: false,
+              })
+              this.tryLogin = false
+            }
+            switch (e.response.status) {
+              case 500: {
+                this.$toast.error('Error interno del servidor, inténtelo más tarde', {
+                  position: 'bottom-center',
+                  timeout: 3000,
+                  closeOnClick: true,
+                  pauseOnFocusLoss: false,
+                  pauseOnHover: true,
+                  draggable: true,
+                  draggablePercent: 0.6,
+                  showCloseButtonOnHover: false,
+                  hideProgressBar: true,
+                  closeButton: 'button',
+                  icon: true,
+                  rtl: false,
+                })
+                break
+              }
+              case 401: {
+                this.$toast.error('No autorizado', {
+                  position: 'bottom-center',
+                  timeout: 3000,
+                  closeOnClick: true,
+                  pauseOnFocusLoss: false,
+                  pauseOnHover: true,
+                  draggable: true,
+                  draggablePercent: 0.6,
+                  showCloseButtonOnHover: false,
+                  hideProgressBar: true,
+                  closeButton: 'button',
+                  icon: true,
+                  rtl: false,
+                })
+                break
+              }
+              default: {
+                this.$toast.error('No autorizado', {
+                  position: 'bottom-center',
+                  timeout: 3000,
+                  closeOnClick: true,
+                  pauseOnFocusLoss: false,
+                  pauseOnHover: true,
+                  draggable: true,
+                  draggablePercent: 0.6,
+                  showCloseButtonOnHover: false,
+                  hideProgressBar: true,
+                  closeButton: 'button',
+                  icon: true,
+                  rtl: false,
+                })
+              }
+            }
+            this.tryLogin = false
+          }
+        }
+      },
+    },
+  }
+</script>