Skip to content
Snippets Groups Projects
LibraryCard.vue 3.21 KiB
Newer Older
  • Learn to ignore specific revisions
  • <template>
      <div class="ui card">
        <div class="content">
          <div class="header">
    
          </div>
        </div>
        <div class="content">
    
          <span class="right floated" v-if="following">
            <i class="check icon"></i> Following
          </span>
          <span class="right floated" v-else-if="manuallyApprovesFollowers">
    
            <i class="lock icon"></i> Followers only
          </span>
    
          <span class="right floated" v-else>
            <i class="open lock icon"></i> Open
          </span>
    
          <span>
            <i class="music icon"></i>
    
          </span>
        </div>
        <div class="extra content">
    
          <template v-if="awaitingApproval">
    
            <i class="clock icon"></i>
            Follow request pending approval
          </template>
    
          <template v-else-if="following">
    
            <i class="check icon"></i>
            Already following this library
          </template>
          <div
    
            @click="follow"
            :disabled="isLoading"
            :class="['ui', 'basic', {loading: isLoading}, 'green', 'button']">
    
            <template v-if="manuallyApprovesFollowers">
    
              Send a follow request
            </template>
            <template v-else>
              Follow
            </template>
          </div>
          <router-link
            v-else
            class="ui basic button"
            :to="{name: 'federation.libraries.detail', params: {id: library.uuid }}">
            Detail
          </router-link>
        </div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    
    export default {
    
      props: ['libraryData', 'libraryInstance'],
    
          library: this.libraryInstance,
    
          isLoading: false,
          data: null,
    
        }
      },
      methods: {
        follow () {
          let params = {
            'actor': this.libraryData['actor']['id'],
            'autoimport': false,
            'download_files': false,
            'federation_enabled': true
          }
          let self = this
          self.isLoading = true
          axios.post('/federation/libraries/', params).then((response) => {
            self.$emit('follow', {data: self.libraryData, library: response.data})
            self.library = response.data
            self.isLoading = false
          }, error => {
            self.isLoading = false
            self.errors = error.backendErrors
          })
        }
    
      },
      computed: {
        displayName () {
          if (this.libraryData) {
            return this.libraryData.display_name
          } else {
            return `${this.library.actor.preferred_username}@${this.library.actor.domain}`
          }
        },
        manuallyApprovesFollowers () {
          if (this.libraryData) {
            return this.libraryData.actor.manuallyApprovesFollowers
          } else {
            return this.library.actor.manually_approves_followers
          }
        },
        totalItems () {
          if (this.libraryData) {
            return this.libraryData.library.totalItems
          } else {
            return this.library.tracks_count
          }
        },
        awaitingApproval () {
          if (this.libraryData) {
            return this.libraryData.local.awaiting_approval
          } else {
            return this.library.follow.approved === null
          }
        },
        following () {
          if (this.libraryData) {
            return this.libraryData.local.following
          } else {
            return this.library.follow.approved
          }
        }