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

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

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

      <div v-if="users.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 {
      users: null,
      confirmDelete: null
    };
  },

  created()
  {
    var self = this;

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


  methods: {
    deleteClick(userId)
    {
      var self = this;

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

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

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

<style lang="scss">
.row.inactive .text
{
  color: #808080;
}

.name
{
  display: block;
}
</style>