Library/frontend/src/components/PublisherOverview.vue

<template>
  <div v-if="user.authenticated">
    <h1>{{ publisher.name }}</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="{ name: 'publisher-edit', params: { id: publisherID} }" class="ui teal labeled icon button" style="float: right;">
        <i class="edit icon"></i>
        <span v-lang.general.edit></span>
      </router-link>

      <list :infos="publisherList"/>
      <p class="grey">
        <span v-lang.general.created="this.createdTime"></span><br/>
        <span v-if="this.publisher.created !== this.publisher.updated" v-lang.general.lastEdit="this.editedTime"></span>
      </p>
    </div>
  </div>
</template>

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

  export default {
    name: 'Publisher',
    data () {
      return {
        user: auth.user,
        publisher: {},
        publisherID: this.$route.params.id,
        publisherList: [],
        createdTime: {
          date: '',
          time: ''
        },
        editedTime: {
          date: '',
          time: ''
        }
      }
    },
    created () {
      this.loadPublisher()

      // Set the title
      document.title = this.translate('nav').publishers
    },
    watch: {
      // call again the method if the route changes
      '$route': 'loadPublisher'
    },
    computed: {
      langGeneral () {
        return this.translate('general')
      }
    },
    methods: {
      loadPublisher () {
        this.loading = true
        this.publisher = {}
        HTTP.get(`publishers/` + this.publisherID)
          .then(response => {
            this.publisher = response.data

            // Make a list
            this.publisherList = [
              {
                header: this.translate('general').name,
                content: this.publisher.name
              }
            ]

            // Beautify the date
            let c = new Date(this.publisher.created * 1000)
            // c.setSeconds()
            this.createdTime = {
              date: ('0' + c.getDate()).slice(-2) + '.' + ('0' + (c.getMonth() + 1)).slice(-2) + '.' + c.getFullYear(),
              time: ('0' + c.getHours()).slice(-2) + ':' + ('0' + c.getMinutes()).slice(-2)
            }

            let e = new Date(this.publisher.updated * 1000)
            // e.setSeconds()
            this.editedTime = {
              date: ('0' + e.getDate()).slice(-2) + '.' + ('0' + (e.getMonth() + 1)).slice(-2) + '.' + e.getFullYear(),
              time: ('0' + e.getHours()).slice(-2) + ':' + ('0' + e.getMinutes()).slice(-2)
            }

            // Set the title
            document.title = this.publisher.name + ' | ' + this.translate('nav').publishers

            this.loading = false
          })
          .catch(e => {
            this.loading = false
            // 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
            })
          })
      }
    }
  }
</script>