Patients.vue

<template>
  <div style="margin: 8px">
    <v-card>
      <v-card-title>
        <v-toolbar-title>Pacientes Registrados</v-toolbar-title>
        <v-divider
          vertical
          style="margin-left: 8px"
        />
        <v-spacer />
        <router-link :to="{name: 'Asignar'}">
          <v-btn
            text
            color="info"
            class="toolbar-btn"
            dark
          >
            <v-icon>mdi-hospital-building</v-icon> Asignar Pacientes
          </v-btn>
        </router-link>

        <v-dialog
          v-model="dialog"
          max-width="800px"
          persistent
        >
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="success"
              dark
              class="toolbar-btn"
              v-bind="attrs"
              v-on="on"
            >
              <v-icon>mdi-plus</v-icon>Registrar Paciente
            </v-btn>
          </template>
          <patient-form
            :title="formTitle"
            @refresh="closeSaved"
            @close-click="close"
          />
        </v-dialog>
      </v-card-title>
      <v-expansion-panels
        v-model="filterPanel"
      >
        <filter-tool
          :loading="loadingPatientsData"
          @close-click="closeFilter"
          @filter-click="filterData"
        />
      </v-expansion-panels>
      <v-data-table
        v-model="selectedItems"
        locale="es-es"
        style="margin-top: 8px"
        :headers="headers"
        :items="patients"
        :loading="loadingPatientsData"
        :footer-props="{
          'disable-items-per-page': true,
          'items-per-page-text': 'Pacientes por página'
        }"
        :server-items-length="totalPatientsItems"
        loading-text="Cargando Pacientes"
        class="elevation-1"
        @pagination="paginatePatients"
      >
        <template v-slot:item.estado_sistema="{ item }">
          <v-chip
            :color="getStatusColor(item.estado_sistema)"
            dark
          >
            {{ statusName(item.estado_sistema) }}
          </v-chip>
        </template>
        <template v-slot:item.actions="{ item }">
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                class="mr-2"
                color="orange"
                v-bind="attrs"
                :loading="loadingPatientData"
                v-on="on"
                @click="editItem(item)"
              >
                mdi-pencil
              </v-icon>
            </template>
            <span>Editar</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                class="mr-2"
                color="error"
                v-bind="attrs"
                v-on="on"
                @click="deleteItem(item)"
              >
                mdi-delete
              </v-icon>
            </template>
            <span>Eliminar</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                class="mr-2"
                color="info"
                v-bind="attrs"
                v-on="on"
                @click="detailsItem(item.id_paciente)"
              >
                mdi-dots-horizontal-circle
              </v-icon>
            </template>
            <span>Detalle Paciente</span>
          </v-tooltip>
          <v-tooltip
            v-if="canConfirm(item)"
            bottom
          >
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                class="mr-2"
                color="success"
                v-bind="attrs"
                v-on="on"
                @click="admit(item)"
              >
                mdi-notebook-check
              </v-icon>
            </template>
            <span>Confirmar Ingreso</span>
          </v-tooltip>
        </template>
        <template v-slot:no-data>
          No hay datos disponibles
        </template>
      </v-data-table>
    </v-card>

    <v-dialog
      v-model="infoPatient"
      persistent
      max-width="800px"
    >
      <patient-file
        @ok-click="loadPatientsData"
        @close-click="closeDetails"
        @edit-click="editFromDetails"
      />
    </v-dialog>
    <v-dialog
      v-model="dialogDelete"
      max-width="500px"
      persistent
    >
      <v-card>
        <v-card-title
          class="text-h5"
          style="word-break: normal"
        >
          ¿Está seguro que desea eliminar el elemento?
        </v-card-title>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="closeDelete"
          >
            Cancelar
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            :loading="loadingPatientsData"
            @click="deleteItemConfirm"
          >
            Borrar
          </v-btn>
          <v-spacer />
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>

  import PatientFile from '@/components/PatientFile.vue'
  import { mapMutations, mapGetters } from 'vuex'
  import PatientForm from '@/components/PatientForm.vue'
  import { getPatients, getPatient, deletePatient } from '@/axios/patients'
  import FilterTool from '@/components/FilterTool.vue'
  import errorHandler from '@/mixins/error-handler'
  export default {
    components: { PatientFile, FilterTool, PatientForm },
    data: () => ({
      filterPanel: false,
      selectedItems: [],
      assignOnePatient: false,
      antigensData: [],
      patientsFirstLoad: true,
      totalPatientsItems: 0,
      infoPatient: false,
      toDeleteId: -1,
      loadingPatientsData: false,
      loadingPatientData: false,
      valid: false,
      asymptomatic: true,
      modal: false,
      dialogDeleteUnavailable: false,
      dialog: false,
      dialogDelete: false,
      healthAreas: [],
      categories: [],
      headers: [
        {
          text: 'CI',
          align: 'start',
          sortable: false,
          value: 'ci',
        },
        { text: 'Nombre', value: 'nombre', sortable: false },
        { text: 'Apellidos', value: 'apellidos', sortable: false },
        { text: 'Estado en el Sistema', value: 'estado_sistema', sortable: false },
        { text: 'Acciones', value: 'actions', sortable: false },
      ],
      patients: [],
      defaultItem: {
        asymptomatic: true,
        isContact: false,
        arrived: false,
        nombre: '',
        apellidos: '',
        ci: '',
        edad: 0,
        noApp: true,
        sexo: '',
        direccion: '',
        municipio: '',
        provincia: '',
        cmf: '',
        area_salud: '',
        remite_caso: '',
        sintomas: [],
        app: [],
        estado_sistema: '',
        trabajador_salud: false,
        ninho: false,
        embarazada: false,
        vacunado: false,
        test_antigeno: 0,

        // eslint-disable-next-line camelcase
        fecha_sintomas: null,
        fiebre: false,
        rinorrea: false,
        congestion_nasal: false,
        tos: false,
        expectoracion: false,
        dificultad_respiratoria: false,
        cefalea: false,
        dolor_garganta: false,
        otros_sint: '',

        hipertension: false,
        diabetes: false,
        asma: false,
        obesidad: false,
        insuficiencia_renal: false,
        oncologia: false,
        otros_apps: '',

        fecha_arribo: null,
        pais_procedencia: '',
        lugar_estancia: '',

        fecha_contacto: null,
        tipo_contacto: '',
        lugar_contacto: '',
      },
    }),

    computed: {
      ...mapGetters(['pIndex', 'patient', 'filters', 'editFromFile', 'patientId']),
      provinces () {
        return this.$store.getters.provinces
      },
      municipalities () {
        return this.$store.getters.municipalities
      },
      formTitle () {
        return this.pIndex === -1 ? 'Registrar Paciente' : 'Editar datos de paciente'
      },
      disableRemissionCenterName () {
        return (this.patient.remissionCenter.type !== 'Hospital') && (this.patient.remissionCenter.type !== 'Otro')
      },
      systemStatusesData () {
        return this.$store.getters.systemStatuses
      },
    },

    created () {
      this.loadPatientsData()
    },

    methods: {
      ...mapMutations(['setPIndex', 'setPatient', 'clearPatient', 'setFiltersPage', 'setFilterStatus']),
      showMe () {
      },
      async admit (item) {
        const response = await getPatient(item.id_paciente)
        this.setPatient(response.data.paciente)
        this.$router.push({ name: 'Confirmar' })
      },
      canConfirm (item) {
        if ((item.id_asignado && localStorage.getItem('role') === 'CA') || localStorage.getItem('role') === 'SADM') {
          return true
        }
        return false
      },
      getStatusColor (systemStatus) {
        switch (systemStatus) {
          case 1:
            return 'amber'
          case 2:
            return 'orange'
          case 3:
            return 'red'
          case 4:
            return 'pink'
          case 5:
            return 'yellow'
          case 6:
            return 'blue'
          case 7:
            return 'green'
          case 8:
            return 'lime'
          case 9:
            return 'brown'
          default:
            return 'black'
        }
      },
      statusName (systemStatus) {
        switch (systemStatus) {
          case 1:
            return 'ENCUESTADO'
          case 2:
            return 'PENDIENTE INGRESO'
          case 3:
            return 'REVISADO'
          case 4:
            return 'ASIGNADO UBICACION'
          case 5:
            return 'EN TRANSPORTACION'
          case 6:
            return 'INGRESADO'
          case 7:
            return 'RECUPERADO'
          case 8:
            return 'RECUPERADO SEGUIMIENTO'
          case 9:
            return 'TRASLADO'
          default:
            return 'SIN ESTADO'
        }
      },
      filterData () {
        this.loadPatientsData()
        this.closeFilter()
      },
      closeFilter () {
        this.filterPanel = false
      },
      editFromDetails () {
        this.closeDetails()
        this.editItem(this.patient)
      },
      async detailsItem (id) {
        console.log(id)
        if (id !== null && id !== undefined) {
          this.loadingPatientData = true
          try {
            const patientResponse = await getPatient(id)
            this.setPatient(patientResponse.data.paciente)
            this.setPIndex(1)
            this.infoPatient = true
          } catch (e) {
            errorHandler(e)
          }
          this.loadingPatientData = true
        }
      },
      async loadPatientsData () {
        this.loadingPatientsData = true
        try {
          const patientsResponse = await getPatients(this.filters)
          this.totalPatientsItems = patientsResponse.data.meta.total
          this.patients = patientsResponse.data.pacientes
          this.loadingPatientsData = false
        } catch (e) {
          errorHandler(e)
        }
        this.patientsFirstLoad = false
      },
      async editItem (item) {
        this.loadingPatientData = true
        try {
          let cache = {}
          if (this.editFromFile === true) {
            cache = this.patient
          } else {
            const patientResponse = await getPatient(item.id_paciente)
            cache = patientResponse.data.paciente
            this.setPIndex(this.patients.indexOf(item))
          }
          console.log(cache)
          if (cache.apps !== null) {
            cache.hipertension = cache.apps.hipertension
            cache.diabetes = cache.apps.diabetes
            cache.asma = cache.apps.asma
            cache.obesidad = cache.apps.obesidad
            cache.insuficiencia_renal = cache.apps.insuficiencia_renal
            cache.oncologia = cache.apps.oncologia
            cache.otros_apps = cache.apps.otros
            if (cache.hipertension || cache.diabetes || cache.asma || cache.obesidad || cache.insuficiencia_renal || cache.oncologia || cache.otros_apps) {
              cache.noApp = false
            }
          }
          if (cache.sintomas !== null) {
            cache.fecha_sintomas = cache.sintomas.fecha_sintomas
            cache.fiebre = cache.sintomas.fiebre
            cache.rinorrea = cache.sintomas.rinorrea
            cache.congestion_nasal = cache.sintomas.congestion_nasal
            cache.tos = cache.sintomas.tos
            cache.expectoracion = cache.sintomas.expectoracion
            cache.dificultad_respiratoria = cache.sintomas.dificultad_respiratoria
            cache.cefalea = cache.sintomas.cefalea
            cache.dolor_garganta = cache.sintomas.dolor_garganta
            cache.otros_sint = cache.sintomas.otros
            if (cache.fecha_sintomas || cache.fiebre || cache.rinorrea || cache.congestion_nasal || cache.tos || cache.expectoracion || cache.dificultad_respiratoria || cache.cefalea || cache.dolor_garganta || cache.otros_sint) {
              cache.asymptomatic = false
            }
          }
          if (cache.contacto !== null) {
            cache.fecha_contacto = cache.contacto.fecha_contacto
            cache.lugar_contacto = cache.contacto.lugar_contacto
            cache.tipo_contacto = cache.contacto.tipo_contacto
            if (cache.fecha_contacto || cache.lugar_contacto || cache.tipo_contacto) {
              cache.isContact = true
            }
          }
          if (cache.arribo !== null) {
            cache.pais_procedencia = cache.arribo.pais_procedencia
            cache.lugar_estancia = cache.arribo.lugar_estancia
            cache.fecha_arribo = cache.arribo.fecha_arribo
            if (cache.pais_procedencia || cache.lugar_estancia || cache.fecha_arribo) {
              cache.arrived = true
            }
          }
          this.setPatient(cache)
        } catch (e) {
          errorHandler(e)
        }
        this.loadingPatientData = false
        this.dialog = true
      },
      paginatePatients (pageInfo) {
        if (this.patientsFirstLoad) {
          this.patientsFirstLoad = false
        } else {
          if (this.filters.page !== pageInfo.page) {
            this.setFiltersPage(pageInfo.page)
            this.loadPatientsData()
          }
        }
      },

      deleteItem (item) {
        this.toDeleteId = item.id_paciente
        this.setPIndex(this.patients.indexOf(item))
        this.setPatient(item)
        this.dialogDelete = true
      },
      async deleteItemConfirm () {
        this.loadingPatientsData = true
        try {
          await deletePatient(this.toDeleteId)
          this.$toast.success('Registro eliminado correctamente', {
            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.loadPatientsData()
        } catch (e) {
          errorHandler(e)
        }
        this.closeDelete()
        this.loadingPatientsData = false
      },
      closeSaved () {
        this.dialog = false
        this.$nextTick(() => {
          this.clearPatient()
          this.setPIndex(-1)
        })
        this.loadPatientsData()
        if (this.patientId !== -1) {
          this.detailsItem(this.patientId)
        }
      },
      close () {
        this.dialog = false
        this.$nextTick(() => {
          this.clearPatient()
          this.setPIndex(-1)
        })
      },
      closeDelete () {
        this.dialogDelete = false
        this.$nextTick(() => {
          this.clearPatient()
          this.setPIndex(-1)
        })
      },
      closeDetails () {
        if (this.editFromFile) {
          this.infoPatient = false
        } else {
          this.infoPatient = false
          this.$nextTick(() => {
            this.clearPatient()
            this.setPIndex(-1)
          })
        }
      },
    },

  }
</script>
<style scoped>
.fix-title {
  word-break: normal;
}
.toolbar-btn {
  margin: 4px
}
</style>