servicio_social_front/components/responsable/inputTable.vue

<template>
  <div class="container">
    <div class="columns">
      <div class="column is-3 mb-0">
        <b-field>
          <b-input
            placeholder="No.Cuenta"
            icon="school"
            rounded
            v-model="numeroCuenta"
            maxlength="9"
          ></b-input>
        </b-field>
      </div>

      <div class="column is-3 mb-4 pb-4">
        <b-field>
          <b-input
            type="name"
            placeholder="Nombre"
            icon="account"
            rounded
            v-model="nombre"
          ></b-input>
        </b-field>
      </div>

      <div class="column is-3 mb-4 pb-4 ">
        <b-field>
          <b-select icon="information" expanded rounded v-model="idStatus">
            <optgroup>
              <option value="">Status</option>
              <option value="1">Pre-registro</option>
              <option value="2">Registro</option>
              <option value="3">Registro Validado</option>
              <option value="4">Pre-Término</option>
              <option value="5">Término</option>
              <option value="6">Liberación</option>
              <option value="7">Carta Aceptacion Rechazada</option>
              <option value="8">Carta Termino Rechazada</option>
              <option value="9">Informe Global Rechazado</option>
            </optgroup>
          </b-select>
        </b-field>
      </div>

      <div class="buttons section pt-3 pl-5">
        <b-button type="is-info" @click="obtenerDatos(idStatus)">
          Buscar
        </b-button>
      </div>
    </div>

    <div class="columns">
      <section class="column is-12">
        <b-table
          :data="data"
          :loading="loading"
          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
              class="cursorR"
              v-if="props.row.idStatus == 7"
              @click="cartaAceptacion(props.row.idServicio)"
              >{{ props.row.nombre }}</span
            >
            <span v-else>{{ props.row.nombre }}</span>
          </b-table-column>
          <b-table-column
            field="numeroCuenta"
            label="Número de Cuenta"
            v-slot="props"
            centered
            width="100"
          >
            <span
              class="cursorR"
              v-if="props.row.idStatus == 7"
              @click="cartaAceptacion(props.row.idServicio)"
              >{{ props.row.numeroCuenta }}</span
            >
            <span v-else>{{ props.row.numeroCuenta }}</span>
          </b-table-column>
          <b-table-column
            field="carrera"
            label="Carrera"
            v-slot="props"
            centered
          >
            <span
              class="cursorR"
              v-if="props.row.idStatus == 7"
              @click="cartaAceptacion(props.row.idServicio)"
              >{{ props.row.carrera }}</span
            >
            <span v-else>{{ props.row.carrera }}</span>
          </b-table-column>
          <b-table-column
            field="fechaInicio"
            truncate="10"
            label="Fecha Inicio"
            v-slot="props"
            centered
          >
            <span
              class="cursorR"
              v-if="props.row.idStatus == 7"
              @click="cartaAceptacion(props.row.idServicio)"
              >{{ props.row.fechaInicio }}</span
            >
            <span v-else>{{ fecha(props.row.fechaInicio) }}</span>
          </b-table-column>
          <b-table-column
            field="fechaFin"
            label="Fecha Fin"
            v-slot="props"
            centered
          >
            <span
              class="cursorR"
              v-if="props.row.idStatus == 7"
              @click="cartaAceptacion(props.row.idServicio)"
              >{{ props.row.fechaFin }}</span
            >
            <span v-else>{{ fecha(props.row.fechaFin) }}</span>
          </b-table-column>
          <b-table-column field="status" label="Status" v-slot="props" centered>
            <span
              class="cursorR"
              v-if="props.row.idStatus == 7"
              @click="cartaAceptacion(props.row.idServicio)"
              >{{ props.row.status }}</span
            >
            <span v-else class="tag" :class="types(props.row.idStatus)">{{
              props.row.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.idStatus >= 4 && props.row.idStatus <= 7) ||
                  props.row.idStatus == 9
              "
            >
              <span v-if="props.row.cartaTermino != null">
                <b-icon
                  :icon="iconoCarta(props.row.cartaTermino)"
                  class="tag is-success"
                ></b-icon>
              </span>

              <b-button
                v-if="props.row.cartaTermino === null"
                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) ||
                  props.row.idStatus == 9
              "
            >
              <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>
      </section>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  data() {
    return {
      idTipoUsuario: "",
      idUsuario: "",
      data: [],
      total: "",
      loading: true,
      page: 1,
      perPage: 25,
      numeroCuenta: "",
      nombre: "",
      idStatus: "",
      idServicio: "",
    };
  },
  methods: {
    onPageChange(page) {
      this.page = page;
      this.obtenerDatos();
      console.log(this.page);
    },
    types(idStatus) {
      if (idStatus === 1) {
        return "is-dark";
      } else if (idStatus === 2) {
        return "is-info";
      } else if (idStatus === 3) {
        return "is-link";
      } else if (idStatus === 4) {
        return "is-warning";
      } else if (idStatus === 5) {
        return "is-success";
      } else if (idStatus === 6) {
        return "is-link";
      } else if (idStatus === 7) {
        return "is-danger";
      } else if (idStatus === 8) {
        return "is-danger";
      } else if (idStatus === 9) {
        return "is-danger";
      } else if (idStatus === 10) {
        // admin
        return "is-danger";
      }
    },
    botonCarta(cartaTermino, idServicio) {
      window.localStorage.setItem("idServicio", idServicio);
      this.$router.push("/responsable/carta_termino");
      if (cartaTermino === 1) {
        return "is-success";
      } else {
        return "is-danger";
      }
    },
    botonCuestionario(cuestionario, idServicio) {
      window.localStorage.setItem("idServicio", idServicio);
      this.$router.push("/responsable/cuestionario");
      if (cuestionario === 1) {
        return "is-success";
      } else {
        return "is-danger";
      }
    },
    iconoCarta(cartaTermino) {
      if (cartaTermino != null) {
        return "check";
      } else {
        return "close";
      }
    },
    iconoCuestionario(cuestionario) {
      if (cuestionario != null) {
        return "check";
      } else {
        return "close";
      }
    },
    fecha(date) {
      const fecha = moment(date.substr(0, 10));
      return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`;
    },
    obtenerDatos(idStatus) {
      this.loading = true;
      this.data = [];
      axios
        .get(
          `${process.env.api}/servicio/servicios_responsable?idUsuario=${this.idUsuario}&pagina=${this.page}&idStatus=${idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`
        )
        .then((res) => {
          const servicios = res.data.servicios;
          console.log(res);

          if (servicios.length !== 0) {
            for (let i = 0; i < servicios.length; i++) {
              this.data.push({
                nombre: servicios[i].Usuario.nombre,
                numeroCuenta: servicios[i].Usuario.usuario,
                carrera: servicios[i].Carrera.carrera,
                fechaInicio: servicios[i].fechaInicio,
                fechaFin: servicios[i].fechaFin,
                status: servicios[i].Status.status,
                idStatus: servicios[i].Status.idStatus,
                cuestionario: servicios[i].idCuestionarioPrograma,
                cartaTermino: servicios[i].cartaTermino,
                idServicio: servicios[i].idServicio,
              });
            }
          }
          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;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err.response.data.message);
          this.loading = false;
        });
    },
    cartaAceptacion(idServicio) {
      window.localStorage.setItem("idServicio", idServicio);
      this.$router.push("/responsable/carta_aceptacion");
    },
    insertIdLocal() {
      this.idUsuario = localStorage.getItem("idUsuario");
    },
    getIdLocal() {
      this.idTipoUsuario = localStorage.getItem("idTipoUsuario");
      this.idUsuario = localStorage.getItem("idUsuario");
    },
  },
  created() {
    this.getIdLocal();
    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;
}
.cursorR {
  cursor: pointer;
}
</style>