Recv/public/src/route/admin/Uploads.vue

<template>
  <div id="uploads">
    <div v-if="uploads !== null">
      <div v-for="upload in uploads" class="list">
        <div class="properties">
          <div class="pure-g">
            <div class="pure-u-1-1"><span class="text codedescription">{{ upload.codedescription || upload.code }}</span></div>
            <div class="pure-u-1-3"><span class="text">{{ upload.code }}</span></div>
            <div class="pure-u-1-3"><span class="text" v-if="hasAuth('viewAllUploads')">{{ upload.username }}</span></div>
            <div class="pure-u-1-3 right"><span class="text">{{ upload.created | formatDateTime }}</span></div>
          </div>
        </div>

        <div class="pure-menu pure-menu-horizontal">
          <ul class="pure-menu-list">
            <li class="pure-menu-item" v-if="confirmDelete == upload.id"><a href="#" class="pure-menu-link" @click.prevent="cancelDelete"><fa icon="ban"></fa> {{ $t('admin.cancel') }}</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link" :class="{ confirmDelete: confirmDelete == upload.id }" @click.prevent="deleteClick(upload.id)"><fa icon="trash-alt"></fa> {{ $t('admin.delete') }}</a></li>
          </ul>
        </div>

        <div class="file" v-for="file in upload.files" :title="file.name">
          <a :href="getDownloadUrl(file)">
            <img :src="getFileIconUrl(file.name)" class="icon">
            <span class="filename">{{ file.name }}</span>
            <span class="size">{{ file.size | formatSizeSI }}</span>
          </a>
        </div>
      </div>

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

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

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

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

  created()
  {
    var self = this;

    if (!shared.adminToken)
    {
      self.$router.push('/admin');
      return;
    }


    axios.get('/admin/uploads', {
      headers: {
        Authorization: 'Bearer ' + shared.adminToken
      }
    })
    .then((response) =>
    {
      self.uploads = _.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;
    },


    getFileIconUrl(filename)
    {
      var ext = this.getExtension(filename);
      if (ext == '')
         ext = '_blank';

      return '/images/fileicons/32px/' + ext + '.png';
    },


    getExtension(filename)
    {
      var parts = filename.split('.');
      return parts.length > 0 ? parts.pop() : '';
    },


    getDownloadUrl(file)
    {
      return '/admin/download/' + encodeURIComponent(file.id) + '/' + encodeURIComponent(file.name);
    },


    deleteClick(uploadId)
    {
      var self = this;

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

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

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

<style lang="scss">
.file
{
  display: inline-block;
  width: 10rem;
  padding: .5rem;
  margin-top: .5rem;
  border: solid 1px transparent;

  font-size: 75%;

  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  a
  {
    color: black;
    text-decoration: none;
  }

  .icon
  {
    display: block;
    margin-bottom: .5rem;
    margin-left: auto;
    margin-right: auto;
  }


  .filename, .size
  {
    display: block;
  }

  .size
  {
    color: #808080;
  }


  &:hover
  {
    background-color: #d3e9f8;
    border: solid 1px #a7d3f1;
  }
}


.properties
{
  background-color: #f4f4f4;
  padding: .2rem;
}


.codedescription
{
  font-weight: bold;
}
</style>