pcpuma-front/src/layout/Equipo.vue

<template lang="pug">
  main
    .modal#modal
      .modal-background
      .modal-card
        header.modal-card-head
          p.modal-card-title Actualizar Equipo
          button.delete(v-on:click="toggleModal()")
        section.modal-card-body
          .field
            label.label No serie
            .control
              input.input(type="text" v-model="equipo.no_serie" placeholder="Numero de serie")
          .field
            label.label No inventario
            .control
              input.input( v-model="equipo.no_inventario" placeholder="Numero de inventario")
              br
          .field
            br
            input#switch2.switch.is-danger(type="checkbox" v-model="equipo.bateria")
            label(for="switch2") Bateria
          .field
            br
            input#switch.switch.is-danger(type="checkbox" v-model="equipo.baja")
            label(for="switch") Suspender equipo
          .field
            label.label Nota
            .control
              textarea.textarea( v-model="equipo.nota" placeholder="Descripcion de la suspencion")
              br
        footer.modal-card-foot
          button.button.is-success(v-on:click="update()") Guardar
          button.button(v-on:click="toggleModal()") Cancelar
    .pageloader.is-u-blue#pageloader
      span.title.is-size-3 Puma trabajando
    .container
      .columns
        .column.is-8
          br
          h1.is-size-1 Equipos
      .columns
        .column.is-3
          .field
            .control.has-icons-left
              input.input(v-model="search" placeholder="Buscar")
              span.icon.is-small.is-left
                font-awesome-icon(icon="search")
        //- .columns.is-3
        //-   .field
        //-     .control
        //-       label.checkbox
        //-         input(type="checkbox" value="Choromebook")  
        //-         span Chrome
        //-       label.checkbox
        //-         input(type="checkbox" value="Choromebook")  
        //-         span Chrome
        //-       label.checkbox
        //-         input(type="checkbox" value="Choromebook")  
        //-         span Chrome
        //- .column.is-2
        //-   .field
        //-     p.control.has-icons-left
        //-       span.select.is-fullwidth
        //-         select.is-fullwidth(v-model="tipo")
        //-           option laptop
        //-           option ipad
        //-           option chromebook
        //-       span.icon.is-small.is-left
        //-         font-awesome-icon(icon="laptop") 
          
        //- .column.is-3
        //-   .field
        //-     .file.is-u-blue.is-right
        //-       label.file-label
        //-         input#file.file-input(type="file" ref="file" v-on:change="changeFile()")
        //-         span.file-cta
        //-           span.file-icon
        //-             i
        //-               font-awesome-icon(icon="upload")
        //-           span.file-label Elige un Archivo csv
        //- .column.is-1
        //-   .field.has-text-right
            .button.is-link(v-on:click="upload()") subir  
        
      .columns
        .column.is-12
          br
          br
          table.table.is-fullwidth.is-hoverable.is-narrow.is-striped
            thead
              tr
                th Carrito
                th Equipo
                th No Serie
                th No Inventario
                th Tipo
                th Bateria
                th Estado
                th Editar
            tbody
              tr(v-for="dt in filteredEquipo")
                td {{dt.Carrito.alias}}
                td {{dt.equipo_carrito}}
                td {{dt.no_serie}}
                td {{dt.no_inventario}}
                td {{dt.Tipo.nombre}}
                td
                  span.tag.is-success(v-if="dt.bateria == '0'")
                    b Cargada
                  span.tag.is-warning(v-else)
                    b Descargada
                td
                  span.tag.is-success(v-if="dt.baja == '0'")
                    b Activo
                  span.tag.is-warning(v-else)
                    b Inactivo
                td
                  a.button.is-u-blue.is-outlined(v-on:click="setUpdate(dt)")
                    span.icon.is-small
                      font-awesome-icon(icon="pen")
</template>

<script>
import UmHeader from './Header.vue'
import UmFooter from './Footer.vue'
import swal from 'sweetalert'
import api from '../api'
const axios = require('axios')

export default {
  components: {
    UmFooter,
    UmHeader
  },
  data () {
    return {
      search: '',
      msg: 'hola',
      data: [],
      carrito: [],
      tipo: '',
      car: '',
      equipo: {}
    }
  },
  computed: {
    filteredEquipo: function () {
      return this.data.filter(dat => {
        if (this.car !== '') {
          if (parseInt(this.car) !== dat.carrito) {
            return false
          }
        }
        let reg = new RegExp(this.search)
        if (reg.test(dat.no_serie) || reg.test(dat.no_inventario) || reg.test(dat.id)) {
          return true
        }
        return false
      })
    }
  },
  mounted () {
    axios.get(api.url + '/equipo?kiosko=1', {
      headers: {
        'token': this.$store.getters.token
      }
    })
      .then(response => {
        console.log(response.data)
        this.data = response.data
      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    update: function () {
      this.toggleModal()
      axios({
        method: 'put',
        url: api.url + '/equipo',
        data: this.equipo,
        headers: {
          'token': this.$store.getters.token
        }
      })
        .then(response => {
          swal('Exito', 'Se actualizo', 'success')
          axios.get(api.url + '/equipo', {
            headers: {
              'token': this.$store.getters.token
            }
          })
            .then(response => {
              // console.log(response)
              this.data = response.data.data
              swal('Exito', 'Se actualizarón los datos', 'success')
            })
            .catch(error => {
              swal('Error', error.response.data.err, 'error')
            })
        })
        .catch(error => {
          swal('Error', error.response.data.err, 'error')
        })
    },
    setUpdate: function (dt) {
      console.log(dt)
      this.toggleModal()
      this.equipo = dt
    },
    toggleModal: function () {
      let modal = document.getElementById('modal')
      if (!modal.classList.contains('is-active')) {
        modal.classList.add('is-active')
      } else {
        modal.classList.remove('is-active')
      }
    },
    count: function (arr) {
      return `${arr.length}`
    }
  }

}
</script>

<style lang="scss" scoped>

tr {
  td{
    text-align: center;
  }
  th{
    text-align: center !important;
  }
}

</style>