<template>
  <div id="codes">
    <router-link to="codes/add" class="pure-button pure-button-primary">{{ $t('admin.codes.add') }}</router-link>

    <div v-if="codes !== null">
      <div class="pure-g list-header">
        <div class="pure-u-9-24"><span class="text">{{ $t('admin.codes.list.code') }}</span></div>
        <div class="pure-u-9-24"><span class="text" v-if="hasAuth('viewAllCodes')">{{ $t('admin.codes.list.owner') }}</span></div>
        <div class="pure-u-1-4"><span class="text">{{ $t('admin.codes.list.actions') }}</span></div>
      </div>

      <div v-for="code in codes" class="list">
        <div class="pure-g row">
          <div class="pure-u-9-24">
            <span class="text code"><router-link :to="'codes/edit/' + encodeURIComponent(code.id)">{{ code.id }}</router-link></span>
            <span class="text description" v-if="code.description">{{ code.description }}</span>
          </div>
          <div class="pure-u-9-24">
            <span class="text" v-if="hasAuth('viewAllCodes')" :class="{ userDeleted: !code.username }">
              {{ code.username || $t('admin.codes.list.userDeleted') }}
            </span>
          </div>
          <div class="pure-u-1-4">
            <button class="pure-button"v-if="confirmDelete == code.id" @click.prevent="cancelDelete"><fa icon="ban"></fa></button>
            <button class="pure-button" :class="{ confirmDelete: confirmDelete == code.id }" @click.prevent="deleteClick(code.id)"><fa icon="trash-alt"></fa></button>
          </div>
        </div>
      </div>

      <div v-if="codes.length == 0" class="nodata">
        {{ $t('admin.empty') }}
      </div>
    </div>

    <div v-else class="loading">
      {{ $t('admin.loading') }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import shared from '../../shared';
import orderBy from 'lodash/orderBy';
import findIndex from 'lodash/findIndex';

export default {
  data()
  {
    return {
      codes: null,
      confirmDelete: null
    };
  },

  created()
  {
    var self = this;

    axios.get('/admin/codes', {
      headers: {
        Authorization: 'Bearer ' + shared.adminToken
      }
    })
    .then((response) =>
    {
      self.codes = orderBy(response.data, ['created'], ['desc']);
    })
    .catch((error) => { shared.$emit('apiError', error, this.$router) });
  },


  methods: {
    hasAuth(token)
    {
      return shared.user !== null && shared.user.auth.indexOf(token) > -1;
    },


    deleteClick(codeId)
    {
      var self = this;

      if (self.confirmDelete == codeId)
      {
        self.confirmDelete = null;

        axios.delete('/admin/codes/' + encodeURIComponent(codeId), {
          headers: {
            Authorization: 'Bearer ' + shared.adminToken
          }})
          .then((response) =>
          {
            var index = findIndex(self.codes, (item) => { return item.id == codeId; });
            if (index > -1)
              self.codes.splice(index, 1);
          })
          .catch((error) => { shared.$emit('apiError', error, this.$router) });
      }
      else
      {
        self.confirmDelete = codeId;
      }
    },

    cancelDelete()
    {
      var self = this;
      self.confirmDelete = null;
    }
  }
}
</script>

<style lang="scss">
.description
{
  display: block;
}
</style>