Library/frontend/src/components/Items.vue

<template>
  <div v-if="user.authenticated">
    <h1 v-lang.items.title></h1>

    <div class="fullscreen-loader-wrapper" v-if="loading">
      <div class="half-circle-spinner">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
      </div>
    </div>

    <div v-if="!loading">

      <router-link to="/items/add" class="ui green labeled icon button" style="float: right;">
        <i class="plus icon"></i>
        <span v-lang.items.newItem></span>
      </router-link>

      <button @click="loadItems()" class="ui teal labeled icon button" style="float: right;">
        <i class="refresh icon"></i>
        <span v-lang.general.refresh></span>
      </button>

      <form id="search">
        <div class="ui icon input">
          <input :placeholder="langGeneral.search" type="text" v-model="searchQuery" v-focus>
          <i class="search icon"></i>
        </div>
      </form>
      <paginate
        name="items"
        :list="filteredData"
        :per="35"
        tag="div"
      >
        <grid
          :data="paginated('items')"
          :columns="gridColumns"
          :buttons="gridButtons"
          :btnclick="gridBtnClicked"
        >
        </grid>
      </paginate>
      <div class="pagination-container">
        <paginate-links
          tag="div"
          for="items"
          :hide-single-page="true"
          :classes="{
            'ul': ['ui', 'pagination', 'menu'],
            'li': 'items',
            'li a': 'pagination-link'
          }"
        >
        </paginate-links>
        <div v-if="$refs.paginator" v-lang.general.searchResultCount="$refs.paginator.pageItemsCount"></div>
      </div>
    </div>
    <modal
      v-if="showModal"
      @close="showModal = false"
      v-on:submit="deleteBtnSuccess()">
      <span slot="header" v-lang.items.deleteHeader></span>
      <p slot="text" v-lang.items.deleteText></p>
    </modal>
  </div>
</template>

<script>
import auth from '../auth'
import {HTTP} from '../http-common'
import router from '../router'

export default {
  name: 'Item',
  data () {
    return {
      user: auth.user,
      items: [],
      searchQuery: '',
      gridColumns: [],
      gridButtons: [
        {
          text: '',
          icon: 'trash',
          action: this.DeleteItem,
          css: 'ui red icon button'
        },
        {
          text: '',
          icon: 'edit',
          action: this.editItem,
          css: 'ui blue icon button'
        }
      ],
      loading: false,
      paginate: ['items'],
      allStatus: [],
      showModal: false
    }
  },
  created () {
    this.loadItems()

    this.gridButtons[0].text = this.translate('general').delete
    let langGrid = this.translate('items').gridColumns
    this.gridColumns = [
      langGrid.title,
      langGrid.price,
      langGrid.quantity
    ]

    // Set the title
    document.title = this.translate('nav').items
  },
  watch: {
    // call again the method if the route changes
    '$route': 'loadItems'
  },
  computed: {
    filteredData: function () {
      let filterKey = this.searchQuery && this.searchQuery.toLowerCase()
      let data = this.items
      if (filterKey) {
        data = data.filter(function (row) {
          return Object.keys(row).some(function (key) {
            if (row[key].content) {
              return String(row[key].content).toLowerCase().indexOf(filterKey) > -1
            } else {
              return String(row[key]).toLowerCase().indexOf(filterKey) > -1
            }
          })
        })
      }
      return data
    },
    langGeneral () {
      return this.translate('general')
    }
  },
  methods: {
    errorNotification (e) {
      // Build the notification text from error response
      let err = e.message
      if (e.response.data.message) {
        err += '<br/>' + e.response.data.message
      }

      // Fire a notification
      this.$notify({
        type: 'error',
        title: this.langGeneral.error,
        text: err
      })
    },
    loadItems () {
      this.loading = true
      this.items = []
      HTTP.get(`items`)
        .then(response => {
          let is = response.data
          let i = 0

          // Loop throught the data we got from our API and prepare an array to display all items
          for (const it in is) {
            this.items[i] = {
              id: {content: is[it].id, hide: true}, // Don't show the ID
              title: {content: is[it].title, link: '/items/' + is[it].id},
              price: is[it].price,
              quantity: is[it].quantity
            }

            // increment dat shit
            i++
          }

          this.loading = false
        })
        .catch(e => {
          this.loading = false
          this.errorNotification(e)
        })
    },
    gridBtnClicked (opt, gridObject) {
      opt.action(gridObject)
    },
    deleteBtnSuccess () { // Event helper function
      this.$emit('delete-submit')
    },
    DeleteItem (obj) {
      this.showModal = true
      this.$on('delete-submit', function () {
        this.loading = true
        // Prevent deleting already deleted item
        if (obj) {
          HTTP.delete('items/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
            .then(response => {
              if (response.status === 200 && response.data.message === 'success') {
                // Fire a notification
                this.$notify({
                  type: 'success',
                  title: this.langGeneral.success,
                  text: this.translate('items').deleteSuccess
                })
                this.loadItems()
              }
            })
            .catch(e => {
              this.errorNotification(e)
              this.loadItems()
            })
        }
        obj = null
        this.showModal = false
      })
    },
    editItem (items) {
      router.push({ name: 'item-edit', params: { id: items.id.content } })
    }
  }
}
</script>

<style>
  a.pagination-link{
    margin: -5px -1.14286em -18px;
    display: block;
    position: absolute;
    cursor: pointer;
    padding: 0.928571em 1.14286em;
    color: rgba(0,0,0,.87);

    -webkit-transition: background-color 200ms; /* Safari */
    transition: background-color 200ms;
  }

  a.pagination-link:hover{
    background: rgba(0,0,0,.02);
  }

  .pagination{
    padding: 0;
  }

  .pagination-container{
    margin-top: 1rem;
    text-align: center;
  }

  #search{
    margin-bottom: 1rem;
  }
</style>