servicio_social_front/components/responsable/inputTable.vue

<template>
  <div class="section">
    <div class="columns">
      <b-field class="column" label="Número de Cuenta">
        <b-input
          type="text"
          placeholder="No.Cuenta"
          icon="school"
          rounded
          v-model="numeroCuenta"
          maxlength="9"
        ></b-input>
      </b-field>

      <b-field class="column" label="Nombre">
        <b-input
          type="name"
          placeholder="Nombre"
          icon="account"
          rounded
          v-model="nombre"
        ></b-input>
      </b-field>

      <b-field class="column" label="Status">
        <b-select icon="information" expanded rounded v-model="idStatus">
          <option value="" disabled>Status</option>
          <option
            v-for="(s, i) in status"
            :key="i"
            :value="s.idStatus"
            v-show="i < 9"
          >
            {{ s.status }}
          </option>
        </b-select>
      </b-field>

      <b-button
        type="is-info"
        class="column is-align-self-center"
        expanded
        @click="obtenerDatos(idStatus)"
      >
        Buscar
      </b-button>
    </div>

    <b-table
      :data="data"
      :loading="isLoading"
      hoverable
      striped
      paginated
      backend-pagination
      :total="total"
      :per-page="perPage"
      @page-change="onPageChange"
    >
      <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
        <span>{{ props.row.Usuario.nombre }}</span>
      </b-table-column>

      <b-table-column
        field="numeroCuenta"
        label="Número de Cuenta"
        v-slot="props"
        centered
      >
        <span>{{ props.row.Usuario.usuario }}</span>
      </b-table-column>

      <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
        <span>{{ props.row.Carrera.carrera }}</span>
      </b-table-column>

      <b-table-column
        field="fechaInicio"
        label="Fecha Inicio"
        v-slot="props"
        centered
      >
        <span>{{ fecha(props.row.fechaInicio) }}</span>
      </b-table-column>

      <b-table-column
        field="fechaFin"
        label="Fecha Fin"
        v-slot="props"
        centered
      >
        <span>{{ fecha(props.row.fechaFin) }}</span>
      </b-table-column>

      <b-table-column field="status" label="Status" v-slot="props" centered>
        <span :class="types(props.row.Status.idStatus)">{{
          props.row.Status.status
        }}</span>
      </b-table-column>

      <b-table-column
        field="cartaTermino"
        label="Carta Término"
        v-slot="props"
        centered
        v-if="idTipoUsuario == 2"
      >
        <div
          v-if="
            props.row.Status.idStatus >= 4 && props.row.Status.idStatus != 7
          "
        >
          <span v-if="props.row.cartaTermino">
            <b-icon
              :icon="iconoCarta(props.row.cartaTermino)"
              class="tag is-success"
            ></b-icon>
          </span>

          <b-button
            v-else
            size="is-small"
            @click="botonCarta(props.row.cartaTermino, props.row.idServicio)"
            class="tag is-danger"
            :icon="iconoCarta(props.row.cartaTermino)"
          >
            Carta Término
          </b-button>
        </div>
      </b-table-column>

      <b-table-column
        field="cuestionario"
        label="Cuestionario"
        v-slot="props"
        centered
        v-if="idTipoUsuario == 2"
      >
        <div v-if="props.row.idStatus >= 4 && props.row.idStatus != 7">
          <span v-if="props.row.cuestionario != null">
            <b-icon
              :icon="iconoCuestionario(props.row.cuestionario)"
              class="tag is-success"
            ></b-icon>
          </span>

          <b-button
            v-if="props.row.cuestionario === null"
            size="is-small"
            @click="
              botonCuestionario(props.row.cuestionario, props.row.idServicio)
            "
            class="tag is-danger"
            :icon="iconoCuestionario(props.row.cuestionario)"
          >
            Cuestionario
          </b-button>
        </div>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'

export default {
  data() {
    return {
      status: [],
      idTipoUsuario: '',
      idUsuario: '',
      tipoUsuario: '',
      data: [],
      total: '',
      isLoading: false,
      page: 1,
      perPage: 25,
      numeroCuenta: '',
      nombre: '',
      idStatus: '',
      idServicio: '',
      token: {
        headers: {
          token: window.localStorage.getItem('token'),
        },
      },
    }
  },
  methods: {
    onPageChange(page) {
      this.page = page
      this.obtenerDatos()
    },
    types(idStatus) {
      let style = 'tag'

      if (idStatus === 1) style += ' is-dark'
      else if (idStatus === 2) style += ' is-info'
      else if (idStatus === 3) style += ' is-warning'
      else if (idStatus === 4) style += ' is-link'
      else if (idStatus === 5) style += ' is-success'
      else if (idStatus === 6) style += ' is-success is-light'
      else if (idStatus === 7) style += ' is-danger'
      else if (idStatus === 8) style += ' is-danger'
      else if (idStatus === 9) style += ' is-danger'
      return style
    },
    botonCarta(cartaTermino, idServicio) {
      window.localStorage.setItem('idServicio', idServicio)
      window.localStorage.setItem('cartaTermino', cartaTermino)
      this.$router.push('/responsable/carta_termino')
      if (cartaTermino === 1) {
        return 'is-success'
      } else {
        return 'is-danger'
      }
    },
    botonCuestionario(cuestionario, idServicio) {
      window.localStorage.setItem('idServicio', idServicio)
      window.localStorage.setItem('cuestionario', cuestionario)
      this.$router.push('/responsable/cuestionario')
      if (cuestionario === 1) {
        return 'is-success'
      } else {
        return 'is-danger'
      }
    },
    iconoCarta(cartaTermino) {
      if (cartaTermino != null) {
        return 'check'
      }
    },
    iconoCuestionario(cuestionario) {
      if (cuestionario != null) {
        return 'check'
      }
    },
    fecha(date) {
      const fecha = moment(date.substr(0, 10))
      return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
    },
    obtenerDatos(idStatus) {
      this.isLoading = true
      this.data = []
      axios
        .get(
          `${process.env.api}/servicio/servicios_responsable?idUsuario=${this.idUsuario}&pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`,
          this.token
        )
        .then((res) => {
          const servicios = res.data.serviciosResponsable

          this.data = res.data.serviciosResponsable
          console.log(this.data)

          let currentTotal = servicios.length
          let contador

          for (let i = 0; i < res.data.registros / 25 + 1; i++) {
            contador = i
          }
          currentTotal = this.perPage * contador
          this.total = currentTotal
        })
        .catch((error) => {
          this.error(error.response.data.message)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    cartaAceptacion(idServicio, idStatus) {
      window.localStorage.setItem('idServicio', idServicio)
      window.localStorage.setItem('cartaAceptacion', idStatus)
      this.$router.push('/responsable/carta_aceptacion')
    },
    getIdLocal() {
      this.idUsuario = localStorage.getItem('idUsuario')
      this.idTipoUsuario = localStorage.getItem('idTipoUsuario')
      this.tipoUsuario = localStorage.getItem('tipoUsuario')

      if (this.idTipoUsuario != 2 && this.tipoUsuario != 'responsable') {
        localStorage.clear()
        this.$router.push('/')
      }
    },
    error(msj) {
      this.$buefy.dialog.alert({
        title: 'Error',
        message: msj,
        type: 'is-danger',
        hasIcon: true,
        icon: 'alert-circle',
        iconPack: 'mdi',
        ariaRole: 'alertdialog',
        ariaModal: true,
      })
        localStorage.clear()
        this.$router.push(`/`)
    },
    obtenerStatus() {
      axios
        .get(`${process.env.api}/status`, this.token)
        .then((res) => {
          this.status = res.data
        })
        .catch((err) => {})
    },
  },
  created() {
    this.getIdLocal()
    this.obtenerStatus()
    this.obtenerDatos(0)
  },
}
</script>

<style>
.input:focus {
  border: #1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}

.select select:focus {
  border-color: #1b3d70;
  box-shadow: 0 0 8px 0 #1b3d70;
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #1b3d70;
}

.pagination-link.is-current {
  background-color: #1b3d70;
  border-color: #1b3d70;
}
</style>