Skip to content
Snippets Groups Projects
LibraryList.vue 4.87 KiB
Newer Older
  • Learn to ignore specific revisions
  •   <div v-title="'Libraries'">
    
        <div class="ui vertical stripe segment">
    
    Bat's avatar
    Bat committed
          <h2 class="ui header">{{ $t('Browsing libraries') }}</h2>
    
          <router-link
            class="ui basic green button"
            :to="{name: 'federation.libraries.scan'}">
            <i class="plus icon"></i>
    
    Bat's avatar
    Bat committed
            {{ $t('Add a new library') }}
    
          </router-link>
          <div class="ui hidden divider"></div>
          <div :class="['ui', {'loading': isLoading}, 'form']">
            <div class="fields">
              <div class="field">
    
    Bat's avatar
    Bat committed
                <label>{{ $t('Search') }}</label>
    
                <input type="text" v-model="query" placeholder="Enter an library domain name..."/>
              </div>
              <div class="field">
    
    Bat's avatar
    Bat committed
                <label>{{ $t('Ordering') }}</label>
    
                <select class="ui dropdown" v-model="ordering">
                  <option v-for="option in orderingOptions" :value="option[0]">
                    {{ option[1] }}
                  </option>
                </select>
              </div>
              <div class="field">
    
    Bat's avatar
    Bat committed
                <label>{{ $t('Ordering direction') }}</label>
    
                <select class="ui dropdown" v-model="orderingDirection">
    
    Bat's avatar
    Bat committed
                  <option value="">{{ $t('Ascending') }}</option>
                  <option value="-">{{ $t('Descending') }}</option>
    
                </select>
              </div>
              <div class="field">
    
    Bat's avatar
    Bat committed
                <label>{{ $t('Results per page') }}</label>
    
                <select class="ui dropdown" v-model="paginateBy">
                  <option :value="parseInt(12)">12</option>
                  <option :value="parseInt(25)">25</option>
                  <option :value="parseInt(50)">50</option>
                </select>
              </div>
            </div>
          </div>
          <div class="ui hidden divider"></div>
          <div
            v-if="result"
            v-masonry
            transition-duration="0"
            item-selector=".column"
            percent-position="true"
            stagger="0"
            class="ui stackable three column doubling grid">
            <div
              v-masonry-tile
              v-if="result.results.length > 0"
              v-for="library in result.results"
              :key="library.id"
              class="column">
              <library-card class="fluid" :library-instance="library"></library-card>
            </div>
          </div>
          <div class="ui center aligned basic segment">
            <pagination
              v-if="result && result.results.length > 0"
              @page-changed="selectPage"
              :current="page"
              :paginate-by="paginateBy"
              :total="result.count"
              ></pagination>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    import _ from 'lodash'
    import $ from 'jquery'
    
    import logger from '@/logging'
    
    import OrderingMixin from '@/components/mixins/Ordering'
    import PaginationMixin from '@/components/mixins/Pagination'
    import LibraryCard from '@/components/federation/LibraryCard'
    import Pagination from '@/components/Pagination'
    
    const FETCH_URL = 'federation/libraries/'
    
    export default {
      mixins: [OrderingMixin, PaginationMixin],
      props: {
        defaultQuery: {type: String, required: false, default: ''}
      },
      components: {
        LibraryCard,
        Pagination
      },
      data () {
        let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
        return {
          isLoading: true,
          result: null,
          page: parseInt(this.defaultPage),
          query: this.defaultQuery,
          paginateBy: parseInt(this.defaultPaginateBy || 50),
          orderingDirection: defaultOrdering.direction,
          ordering: defaultOrdering.field,
          orderingOptions: [
            ['creation_date', 'Creation date'],
            ['tracks_count', 'Available tracks']
          ]
        }
      },
      created () {
        this.fetchData()
      },
      mounted () {
        $('.ui.dropdown').dropdown()
      },
      methods: {
        updateQueryString: _.debounce(function () {
          this.$router.replace({
            query: {
              query: this.query,
              page: this.page,
              paginateBy: this.paginateBy,
              ordering: this.getOrderingAsString()
            }
          })
        }, 500),
        fetchData: _.debounce(function () {
          var self = this
          this.isLoading = true
          let url = FETCH_URL
          let params = {
            page: this.page,
            q: this.query,
            ordering: this.getOrderingAsString()
          }
          logger.default.debug('Fetching libraries')
          axios.get(url, {params: params}).then((response) => {
            self.result = response.data
            self.isLoading = false
          })
        }, 500),
        selectPage: function (page) {
          this.page = page
        }
      },
      watch: {
        page () {
          this.updateQueryString()
          this.fetchData()
        },
        ordering () {
          this.updateQueryString()
          this.fetchData()
        },
        orderingDirection () {
          this.updateQueryString()
          this.fetchData()
        },
        query () {
          this.updateQueryString()
          this.fetchData()
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>