Skip to content
Snippets Groups Projects
Artists.vue 7 KiB
Newer Older
  • Learn to ignore specific revisions
  • Eliot Berriot's avatar
    Eliot Berriot committed
    <template>
    
      <main v-title="labels.title">
        <section class="ui vertical stripe segment">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          <h2 class="ui header">
    
            <translate translate-context="Content/Artist/Title">Browsing artists</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          </h2>
    
          <div :class="['ui', {'loading': isLoading}, 'form']">
            <div class="fields">
              <div class="field">
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                <label>
    
    jovuit's avatar
    jovuit committed
                  <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
                </label>
    
                <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
    
              <div class="field">
                <label><translate translate-context="*/*/*/Noun">Tags</translate></label>
                <tags-selector v-model="tags"></tags-selector>
              </div>
    
                <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
    
                <select class="ui dropdown" v-model="ordering">
                  <option v-for="option in orderingOptions" :value="option[0]">
    
                    {{ sharedLabels.filters[option[1]] }}
    
                  </option>
                </select>
              </div>
              <div class="field">
    
                <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
    
                <select class="ui dropdown" v-model="orderingDirection">
    
                  <option value="+"><translate translate-context="Content/Search/Dropdown">Ascending</translate></option>
                  <option value="-"><translate translate-context="Content/Search/Dropdown">Descending</translate></option>
    
                </select>
              </div>
              <div class="field">
    
    jovuit's avatar
    jovuit committed
                <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
    
                <select class="ui dropdown" v-model="paginateBy">
                  <option :value="parseInt(12)">12</option>
    
                  <option :value="parseInt(30)">30</option>
    
                  <option :value="parseInt(50)">50</option>
                </select>
              </div>
            </div>
          </div>
          <div class="ui hidden divider"></div>
    
          <div v-if="result && result.results.length > 0" class="ui three cards">
            <div v-if="isLoading" class="ui inverted active dimmer">
              <div class="ui loader"></div>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            </div>
    
            <artist-card :artist="artist" v-for="artist in result.results" :key="artist.id"></artist-card>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          </div>
    
          <div v-else-if="!isLoading" class="ui placeholder segment sixteen wide column" style="text-align: center; display: flex; align-items: center">
            <div class="ui icon header">
              <i class="compact disc icon"></i>
              <translate translate-context="Content/Artists/Placeholder">
                No results matching your query
              </translate>
            </div>
            <router-link
              v-if="$store.state.auth.authenticated"
              :to="{name: 'content.index'}"
              class="ui green button labeled icon">
              <i class="upload icon"></i>
              <translate translate-context="Content/*/Verb">
                  Add some music
              </translate>
            </router-link>
          </div>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          <div class="ui center aligned basic segment">
            <pagination
    
              v-if="result && result.count > paginateBy"
    
    Eliot Berriot's avatar
    Eliot Berriot committed
              @page-changed="selectPage"
              :current="page"
              :paginate-by="paginateBy"
              :total="result.count"
              ></pagination>
          </div>
    
    Eliot Berriot's avatar
    Eliot Berriot committed
    </template>
    
    <script>
    
    import _ from "@/lodash"
    
    import OrderingMixin from "@/components/mixins/Ordering"
    import PaginationMixin from "@/components/mixins/Pagination"
    import TranslationsMixin from "@/components/mixins/Translations"
    import ArtistCard from "@/components/audio/artist/Card"
    import Pagination from "@/components/Pagination"
    
    import TagsSelector from '@/components/library/TagsSelector'
    
    Eliot Berriot's avatar
    Eliot Berriot committed
    
    export default {
    
      mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
    
        defaultQuery: { type: String, required: false, default: "" },
        defaultTags: { type: Array, required: false, default: () => { return [] } },
    
    Eliot Berriot's avatar
    Eliot Berriot committed
      components: {
        ArtistCard,
    
    Eliot Berriot's avatar
    Eliot Berriot committed
      },
    
    Eliot Berriot's avatar
    Eliot Berriot committed
        return {
          isLoading: true,
          result: null,
    
          page: parseInt(this.defaultPage),
          query: this.defaultQuery,
    
          tags: (this.defaultTags || []).filter((t) => { return t.length > 0 }),
    
          orderingOptions: [["creation_date", "creation_date"], ["name", "name"]]
    
    Eliot Berriot's avatar
    Eliot Berriot committed
        this.fetchData()
      },
    
      mounted() {
        $(".ui.dropdown").dropdown()
    
    Eliot Berriot's avatar
    Eliot Berriot committed
      computed: {
    
          let searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', "Enter artist name…")
    
    jovuit's avatar
    jovuit committed
          let title = this.$pgettext('*/*/*/Noun', "Artists")
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          return {
            searchPlaceholder,
            title
          }
        }
      },
    
    Eliot Berriot's avatar
    Eliot Berriot committed
      methods: {
    
        updateQueryString: _.debounce(function() {
    
          history.pushState(
            {},
            null,
            this.$route.path + '?' + new URLSearchParams(
              {
    
              query: this.query,
              page: this.page,
    
              paginateBy: this.paginateBy,
    
              ordering: this.getOrderingAsString()
    
        }, 500),
    
        fetchData: _.debounce(function() {
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          var self = this
          this.isLoading = true
          let url = FETCH_URL
          let params = {
            page: this.page,
            page_size: this.paginateBy,
    
            ordering: this.getOrderingAsString(),
    
            playable: "true",
            tag: this.tags,
    
          logger.default.debug("Fetching artists")
    
          axios.get(
            url,
            {
              params: params,
              paramsSerializer: function(params) {
                return qs.stringify(params, { indices: false })
              }
            }
          ).then(response => {
    
    Eliot Berriot's avatar
    Eliot Berriot committed
            self.result = response.data
            self.isLoading = false
    
          }, error => {
            self.result = null
            self.isLoading = false
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          })
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          this.page = page
        }
      },
      watch: {
    
          this.updateQueryString()
          this.fetchData()
        },
    
          this.updateQueryString()
          this.fetchData()
        },
    
          this.updateQueryString()
          this.fetchData()
        },
    
          this.updateQueryString()
          this.fetchData()
        },
    
    Eliot Berriot's avatar
    Eliot Berriot committed
          this.fetchData()
    
        tags() {
          this.updateQueryString()
          this.fetchData()
        },
    
        "$store.state.moderation.lastUpdate": function () {
          this.fetchData()
    
    Eliot Berriot's avatar
    Eliot Berriot committed
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    
    <style scoped lang="scss">
    @import "../../style/vendor/media";
    
    .wrapper {
      width: 100%;
    }
    .ui.cards {
      justify-content: flex-start;
    }
    
    .ui.three.cards .card {
      width: 100%;
    }
    @include media(">tablet") {
      .ui.three.cards .card {
        width: 25em;
      }
    }
    
    Eliot Berriot's avatar
    Eliot Berriot committed
    </style>