Skip to content
Snippets Groups Projects
ChannelEntries.vue 2.76 KiB
Newer Older
  • Learn to ignore specific revisions
  • <template>
      <div>
    
    Georg Krause's avatar
    Georg Krause committed
        <slot />
        <div class="ui hidden divider" />
        <div
          v-if="isLoading"
          class="ui inverted active dimmer"
        >
          <div class="ui loader" />
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
        <podcast-table
          v-if="isPodcast"
          :default-cover="defaultCover"
          :is-podcast="isPodcast"
          :show-art="true"
          :show-position="false"
          :tracks="objects"
          :show-artist="false"
          :show-album="false"
          :paginate-results="true"
          :total="count"
          :page="page"
    
    Georg Krause's avatar
    Georg Krause committed
          :paginate-by="limit"
          @page-changed="updatePage"
        />
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
        <track-table
          v-else
          :default-cover="defaultCover"
          :is-podcast="isPodcast"
          :show-art="true"
          :show-position="false"
          :tracks="objects"
          :show-artist="false"
          :show-album="false"
          :paginate-results="true"
          :total="count"
          :page="page"
    
    Georg Krause's avatar
    Georg Krause committed
          :paginate-by="limit"
          @page-changed="updatePage"
        />
    
        <template v-if="!isLoading && objects.length === 0">
    
    Georg Krause's avatar
    Georg Krause committed
          <empty-state
            :refresh="true"
            @refresh="fetchData('tracks/')"
          >
    
    Agate's avatar
    Agate committed
            <p>
    
    Georg Krause's avatar
    Georg Krause committed
              <translate translate-context="Content/Channels/*">
                You may need to subscribe to this channel to see its content.
              </translate>
    
    Agate's avatar
    Agate committed
            </p>
          </empty-state>
    
        </template>
      </div>
    </template>
    
    <script>
    import _ from '@/lodash'
    import axios from 'axios'
    
    Ciaran Ainsworth's avatar
    Ciaran Ainsworth committed
    import PodcastTable from '@/components/audio/podcast/Table.vue'
    import TrackTable from '@/components/audio/track/Table.vue'
    
    
    export default {
      components: {
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
        PodcastTable,
    
    Georg Krause's avatar
    Georg Krause committed
        TrackTable
      },
      props: {
        filters: { type: Object, required: true },
        limit: { type: Number, default: 10 },
        defaultCover: { type: Object, required: true },
        isPodcast: { type: Boolean, required: true }
    
      },
      data () {
        return {
          objects: [],
          count: 0,
          isLoading: false,
    
    Georg Krause's avatar
    Georg Krause committed
          errors: [],
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
          nextPage: null,
          page: 1
    
    Georg Krause's avatar
    Georg Krause committed
      watch: {
        page () {
          this.fetchData('tracks/')
        }
      },
    
      created () {
        this.fetchData('tracks/')
      },
      methods: {
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
        async fetchData (url) {
    
          if (!url) {
            return
          }
          this.isLoading = true
    
    Georg Krause's avatar
    Georg Krause committed
          const self = this
          const params = _.clone(this.filters)
    
          params.page_size = this.limit
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
          params.page = this.page
    
          params.include_channels = true
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
          try {
    
    Georg Krause's avatar
    Georg Krause committed
            const channelsPromise = await axios.get(url, { params: params })
            self.nextPage = channelsPromise.data.next
            self.objects = channelsPromise.data.results
            self.count = channelsPromise.data.count
            self.$emit('fetched', channelsPromise.data)
            self.isLoading = false
          } catch (e) {
    
            self.isLoading = false
    
    Georg Krause's avatar
    Georg Krause committed
            self.errors = e.backendErrors
    
    Georg Krause's avatar
    Georg Krause committed
        updatePage: function (page) {
    
    Ciarán Ainsworth's avatar
    Ciarán Ainsworth committed
          this.page = page
        }