Home.vue

<template>
  <div class="ui vertical aligned stripe segment">
    <div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
      <div class="ui text loader"><translate :translate-context="'Content/Library/Paragraph'">Loading remote libraries…</translate></div>
    </div>
    <div v-else class="ui text container">
      <h1 class="ui header"><translate :translate-context="'Content/Library/Title/Noun'">Remote libraries</translate></h1>
      <p><translate :translate-context="'Content/Library/Paragraph'">Remote libraries are owned by other users on the network. You can access them as long as they are public or you are granted access.</translate></p>
      <scan-form @scanned="scanResult = $event"></scan-form>
      <div class="ui hidden divider"></div>
      <div v-if="scanResult && scanResult.results.length > 0" class="ui two cards">
        <library-card :library="library" v-for="library in scanResult.results" :key="library.fid" />
      </div>
      <template v-if="existingFollows && existingFollows.count > 0">
        <h2><translate :translate-context="'Content/Library/Title'">Known libraries</translate></h2>
        <i @click="fetch()" :class="['ui', 'circular', 'refresh', 'icon']" /> <translate :translate-context="'Content/Library/Button.Label'">Refresh</translate>
        <div class="ui hidden divider"></div>
        <div class="ui two cards">
          <library-card
            @deleted="fetch()"
            @followed="fetch()"
            :library="getLibraryFromFollow(follow)"
            v-for="follow in existingFollows.results"
            :key="follow.fid" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import ScanForm from './ScanForm'
import LibraryCard from './Card'

export default {
  data () {
    return {
      isLoading: false,
      scanResult: null,
      existingFollows: null
    }
  },
  created () {
    this.fetch()
  },
  components: {
    ScanForm,
    LibraryCard
  },
  methods: {
    fetch () {
      this.isLoading = true
      let self = this
      axios.get('federation/follows/library/', {params: {'page_size': 100, 'ordering': '-creation_date'}}).then((response) => {
        self.existingFollows = response.data
        self.existingFollows.results.forEach(f => {
          f.target.follow = f
        })
        self.isLoading = false
      }, error => {
        self.isLoading = false
      })
    },
    getLibraryFromFollow (follow) {
      let d = follow.target
      d.follow = follow
      return d
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>