servicio_social_front/components/responsable/inputTable.vue

<template>
  <div class="container">
    <div class="columns">

        <div class="column is-3 mb-0 " @click="obtenerDatos()">
          <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" >
          <b-field>
            <b-select placeholder="Status" icon="information" value="1" expanded rounded v-model="status">
              <optgroup label="Status">
                <option value="1">Pre-registro</option>
                <option value="2">Pre-validado</option>
                <option value="3">Registro</option>
                <option value="4">Pre-término</option>
                <option value="5">Término</option>
                <option value="6">Liberado</option>
                <option value="7">Rechazado</option>
              </optgroup>
            </b-select>
          </b-field>
        </div>

    </div>

    <div>
      <BotonesCarga v-if="id == 1"/>
    </div>

    <p v-text="id"></p>

    <div class="columns">
      <section class="column is-12">
          <b-table
            :data="data"
            :loading="loading"

            paginated
            backend-pagination
            :total="total"
            :per-page="perPage"
            @page-change="onPageChange"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page"
              >

              <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
                  <span @click="cualquiera(props.row.nombre)">{{ datos.servicios[0].Usuario.nombre}}</span>
              </b-table-column>

              <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
                  <span @click="cualquiera(props.row.carrera)">{{ datos.servicios[0].Carrera.carrera}}</span>
              </b-table-column>

              <b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered>
                  <span @click="cualquiera(props.row.numeroCuenta)">{{ datos.servicios[0].Usuario.usuario }}</span>
              </b-table-column>

              <b-table-column field="fechaInicio" label="Inicio" centered v-slot="props">
                  <span @click="cualquiera(props.row.fechaInicio)">{{ datos.servicios[0].fechaInicio }}</span>
              </b-table-column>

              <b-table-column field="fechaFin" label="Final" centered v-slot="props">
                  <span @click="cualquiera(props.row.fechaFin)">{{ datos.servicios[0].fechaFin }}</span>
              </b-table-column>

              <b-table-column field="status" label="Status" v-slot="props" centered>
                  <span @click="cualquiera(props.row.fechaFin)" class="tag" :class="types(datos.servicios[0].Status.status)">{{ datos.servicios[0].Status.status }}</span>
              </b-table-column>

              <b-table-column field="cartaTermino" label="Carta Término" v-slot="props" centered v-if="id == 2">
                  <div v-if="props.row.status === 'Pre-Termino'">
                    <span
                    v-if="props.row.cartaTermino === true"
                    >
                        <b-icon :icon="iconoCarta(props.row.cartaTermino)"
                        class="tag is-success"></b-icon>
                    </span>

                    <b-button
                    v-if="props.row.cartaTermino === false"
                    size="is-small"
                    :class="botonCarta(props.row.cartaTermino)"
                    :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="id == 2">
                  <div
                  v-if="props.row.status === 'Pre-Termino'">
                    <span
                    v-if="props.row.cuestionario === true"
                    >
                        <b-icon :icon="iconoCuestionario(props.row.cuestionario)"
                        class="tag is-success"></b-icon>
                    </span>

                    <b-button
                    v-if="props.row.cuestionario === false"
                    size="is-small"
                    :class="botonCuestionario(props.row.cuestionario)"
                    :icon="iconoCuestionario(props.row.cuestionario)">
                        Cuestionario
                    </b-button>
                  </div>
              </b-table-column>
          </b-table>
      </section>
    </div>
  </div>
</template>

<script>
// import validator from 'validator'
import BotonesCarga from './botonesCarga.vue'
import axios from 'axios'

export default {
  components: {
    BotonesCarga
  },
  data () {
    return {
      total: 0,
      loading: false,
      sortField: 'vote_count',
      sortOrder: 'desc',
      defaultSortOrder: 'desc',
      page: 1,
      perPage: '',
      numeroCuenta: '',
      nombre: '',
      status: 1,
      tipoUsuario: 1,
      data: [
        {
          idRegistro: 1, // span
          nombre: 'Lemuel',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'pre-validado',
          cartaTermino: true,
          cuestionario: false,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Andrés Hernan Saavedra Trejo',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '42008550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'pre-termino',
          cartaTermino: true,
          cuestionario: false,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Marco',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'pre-validado',
          cartaTermino: true,
          cuestionario: true,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Eithan',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'pre-termino',
          cartaTermino: false,
          cuestionario: true,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Brenda',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'registro',
          cartaTermino: true,
          cuestionario: false,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Lemuel',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'pre-termino',
          cartaTermino: false,
          cuestionario: false,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Lemuel',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'termino',
          cartaTermino: true,
          cuestionario: false,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Lemuel',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'liberado',
          cartaTermino: false,
          cuestionario: false,
          idStatus: 1
        },
        {
          idRegistro: 1, // span
          nombre: 'Lemuel',
          carrera: 'Matemáticas Aplicadas y Computación',
          numeroCuenta: '41908550',
          fechaInicio: '1/01/2020',
          fechaFin: '1/06/2020',
          status: 'rechazado',
          cartaTermino: true,
          cuestionario: false,
          idStatus: 1
        }
      ],
      datos: {}
    }
  },
  props: {
    id: {
      type: Number,
      required: false
    }
  },
  methods: {
    onPageChange (page) {
      this.page = page
      this.loadAsyncData()
    },
    types (status) {
      /* const Status = parseFloat(status) Investigar para que sirve :) */
      if (status === 'Pre-Registro') {
        return 'is-dark'
      } else if (status === 'Pre-Validado') {
        return 'is-warning'
      } else if (status === 'Registro') {
        return 'is-info'
      } else if (status === 'Pre-Termino') {
        return 'is-link'
      } else if (status === 'Termino') {
        return 'is-success'
      } else if (status === 'Liberado') {
        return 'is-success'
      } else if (status === 'Rechazado') {
        return 'is-danger'
      }
    },
    botonCarta (cartaTermino) {
      if (cartaTermino === true) {
        return 'is-success'
      } else {
        return 'is-danger'
      }
    },
    botonCuestionario (cuestionario) {
      if (cuestionario === true) {
        return 'is-success'
      } else {
        return 'is-danger'
      }
    },
    iconoCarta (cartaTermino) {
      if (cartaTermino === true) {
        return 'check'
      } else {
        return 'close'
      }
    },
    iconoCuestionario (cuestionario) {
      if (cuestionario === true) {
        return 'check'
      } else {
        return 'close'
      }
    },
    cualquiera (variable) {
      console.log(variable)
      console.log(this.numeroCuenta)
      console.log(this.nombre)
      console.log(this.status)
      console.log(this.datos.faltantes)
      console.log(this.perPage)
    },
    obtenerDatos () {
      axios.get('https://5b3a8798f24a.ngrok.io/servicio/servicios_responsable?idUsuario=2&pagina=1')
        .then(res => {
          console.log(res.data)
          this.datos = res.data
          if (this.datos.faltantes === 0) {
            this.perPage = 1
            console.log(this.perPage)
          }
        })
    },
    addSearch (e) {
      e.preventDefault()
      console.log('Agregando busqueda')
    }
  }
}
</script>

<style>
</style>