2018-01-07 21:13:44 +00:00
|
|
|
<template>
|
2018-11-19 22:33:22 +00:00
|
|
|
<main v-title="labels.title">
|
|
|
|
<section class="ui vertical stripe segment">
|
2018-06-30 13:28:47 +00:00
|
|
|
<h2 class="ui header">
|
2019-03-08 11:37:02 +00:00
|
|
|
<translate translate-context="Content/Radio/Title">Browsing radios</translate>
|
2018-06-30 13:28:47 +00:00
|
|
|
</h2>
|
2018-07-17 11:09:13 +00:00
|
|
|
<div class="ui hidden divider"></div>
|
|
|
|
<div class="ui row">
|
|
|
|
<h3 class="ui header">
|
2019-03-08 11:37:02 +00:00
|
|
|
<translate translate-context="Content/Radio/Title">Instance radios</translate>
|
2018-07-17 11:09:13 +00:00
|
|
|
</h3>
|
|
|
|
<div class="ui cards">
|
2020-07-28 09:26:39 +00:00
|
|
|
<radio-card v-if="isAuthenticated" :type="'actor-content'" :object-id="$store.state.auth.fullUsername"></radio-card>
|
2019-06-24 11:30:56 +00:00
|
|
|
<radio-card v-if="isAuthenticated && hasFavorites" :type="'favorites'"></radio-card>
|
2018-07-17 11:09:13 +00:00
|
|
|
<radio-card :type="'random'"></radio-card>
|
2019-05-02 08:01:02 +00:00
|
|
|
<radio-card v-if="$store.state.auth.authenticated" :type="'less-listened'"></radio-card>
|
2018-07-17 11:09:13 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="ui hidden divider"></div>
|
|
|
|
<h3 class="ui header">
|
2019-03-08 11:37:02 +00:00
|
|
|
<translate translate-context="Content/Radio/Title">User radios</translate>
|
2018-07-17 11:09:13 +00:00
|
|
|
</h3>
|
2020-05-15 12:12:36 +00:00
|
|
|
<router-link class="ui success basic button" to="/library/radios/build" exact>
|
2019-03-08 11:37:02 +00:00
|
|
|
<translate translate-context="Content/Radio/Button.Label/Verb">Create your own radio</translate>
|
2018-04-15 10:45:56 +00:00
|
|
|
</router-link>
|
2018-01-07 21:13:44 +00:00
|
|
|
<div class="ui hidden divider"></div>
|
2020-07-06 11:21:07 +00:00
|
|
|
<form :class="['ui', {'loading': isLoading}, 'form']" @submit.prevent="updateQueryString();fetchData()">
|
2018-01-07 21:13:44 +00:00
|
|
|
<div class="fields">
|
|
|
|
<div class="field">
|
2019-03-18 09:07:58 +00:00
|
|
|
<label><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
|
2020-07-06 11:21:07 +00:00
|
|
|
<div class="ui action input">
|
|
|
|
<input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
|
|
|
|
<button class="ui icon button" type="submit" :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')">
|
|
|
|
<i class="search icon"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
2018-01-07 21:13:44 +00:00
|
|
|
</div>
|
|
|
|
<div class="field">
|
2019-03-18 09:07:58 +00:00
|
|
|
<label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
|
2018-01-07 21:13:44 +00:00
|
|
|
<select class="ui dropdown" v-model="ordering">
|
|
|
|
<option v-for="option in orderingOptions" :value="option[0]">
|
2018-10-05 17:31:30 +00:00
|
|
|
{{ sharedLabels.filters[option[1]] }}
|
2018-01-07 21:13:44 +00:00
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
2019-03-18 09:07:58 +00:00
|
|
|
<label><translate translate-context="Content/Search/Dropdown.Label/Noun">Order</translate></label>
|
2018-01-07 21:13:44 +00:00
|
|
|
<select class="ui dropdown" v-model="orderingDirection">
|
2018-06-30 13:28:47 +00:00
|
|
|
<option value="+">
|
2019-03-08 11:37:02 +00:00
|
|
|
<translate translate-context="Content/Search/Dropdown">Ascending</translate>
|
2018-06-30 13:28:47 +00:00
|
|
|
</option>
|
|
|
|
<option value="-">
|
2019-03-08 11:37:02 +00:00
|
|
|
<translate translate-context="Content/Search/Dropdown">Descending</translate>
|
2018-06-30 13:28:47 +00:00
|
|
|
</option>
|
2018-01-07 21:13:44 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
2019-03-18 09:07:58 +00:00
|
|
|
<label><translate translate-context="Content/Search/Dropdown.Label/Noun">Results per page</translate></label>
|
2018-01-07 21:13:44 +00:00
|
|
|
<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>
|
2020-07-06 11:21:07 +00:00
|
|
|
</form>
|
2018-01-07 21:13:44 +00:00
|
|
|
<div class="ui hidden divider"></div>
|
2019-10-17 12:15:33 +00:00
|
|
|
<div v-if="result && !result.results.length > 0" class="ui placeholder segment">
|
|
|
|
<div class="ui icon header">
|
|
|
|
<i class="feed icon"></i>
|
|
|
|
<translate translate-context="Content/Radios/Placeholder">
|
|
|
|
No results matching your query
|
|
|
|
</translate>
|
|
|
|
</div>
|
|
|
|
<router-link
|
|
|
|
v-if="$store.state.auth.authenticated"
|
|
|
|
:to="{name: 'library.radios.build'}"
|
2020-05-15 12:12:36 +00:00
|
|
|
class="ui success button labeled icon">
|
2019-10-17 12:15:33 +00:00
|
|
|
<i class="rss icon"></i>
|
|
|
|
<translate translate-context="Content/*/Verb">
|
|
|
|
Create a radio
|
|
|
|
</translate>
|
|
|
|
</router-link>
|
|
|
|
</div>
|
2018-02-26 19:10:35 +00:00
|
|
|
<div
|
2020-05-07 16:33:58 +00:00
|
|
|
v-if="result && result.results.length > 0"
|
|
|
|
class="ui cards">
|
|
|
|
<radio-card
|
|
|
|
type="custom"
|
|
|
|
v-for="radio in result.results"
|
|
|
|
:key="radio.id"
|
|
|
|
:custom-radio="radio"></radio-card>
|
2018-01-07 21:13:44 +00:00
|
|
|
</div>
|
|
|
|
<div class="ui center aligned basic segment">
|
|
|
|
<pagination
|
2018-07-11 17:15:03 +00:00
|
|
|
v-if="result && result.count > paginateBy"
|
2018-01-07 21:13:44 +00:00
|
|
|
@page-changed="selectPage"
|
|
|
|
:current="page"
|
|
|
|
:paginate-by="paginateBy"
|
|
|
|
:total="result.count"
|
|
|
|
></pagination>
|
|
|
|
</div>
|
2018-11-19 22:33:22 +00:00
|
|
|
</section>
|
|
|
|
</main>
|
2018-01-07 21:13:44 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-11-19 22:33:22 +00:00
|
|
|
import axios from "axios"
|
2018-12-20 10:21:15 +00:00
|
|
|
import _ from "@/lodash"
|
2018-11-19 22:33:22 +00:00
|
|
|
import $ from "jquery"
|
2018-01-07 21:13:44 +00:00
|
|
|
|
2018-11-19 22:33:22 +00:00
|
|
|
import logger from "@/logging"
|
2018-01-07 21:13:44 +00:00
|
|
|
|
2018-11-19 22:33:22 +00:00
|
|
|
import OrderingMixin from "@/components/mixins/Ordering"
|
|
|
|
import PaginationMixin from "@/components/mixins/Pagination"
|
|
|
|
import TranslationsMixin from "@/components/mixins/Translations"
|
|
|
|
import RadioCard from "@/components/radios/Card"
|
|
|
|
import Pagination from "@/components/Pagination"
|
2018-01-07 21:13:44 +00:00
|
|
|
|
2018-11-19 22:33:22 +00:00
|
|
|
const FETCH_URL = "radios/radios/"
|
2018-01-07 21:13:44 +00:00
|
|
|
|
|
|
|
export default {
|
2018-10-05 17:31:30 +00:00
|
|
|
mixins: [OrderingMixin, PaginationMixin, TranslationsMixin],
|
2018-01-07 21:13:44 +00:00
|
|
|
props: {
|
2019-12-26 10:38:26 +00:00
|
|
|
defaultQuery: { type: String, required: false, default: "" },
|
|
|
|
scope: { type: String, required: false, default: "all" },
|
2018-01-07 21:13:44 +00:00
|
|
|
},
|
|
|
|
components: {
|
|
|
|
RadioCard,
|
|
|
|
Pagination
|
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
data() {
|
2018-01-07 21:13:44 +00:00
|
|
|
return {
|
|
|
|
isLoading: true,
|
|
|
|
result: null,
|
|
|
|
page: parseInt(this.defaultPage),
|
|
|
|
query: this.defaultQuery,
|
2018-11-19 22:33:22 +00:00
|
|
|
orderingOptions: [["creation_date", "creation_date"], ["name", "name"]]
|
2018-01-07 21:13:44 +00:00
|
|
|
}
|
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
created() {
|
2018-01-07 21:13:44 +00:00
|
|
|
this.fetchData()
|
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
mounted() {
|
|
|
|
$(".ui.dropdown").dropdown()
|
2018-01-07 21:13:44 +00:00
|
|
|
},
|
2018-07-01 19:50:50 +00:00
|
|
|
computed: {
|
2018-11-19 22:33:22 +00:00
|
|
|
labels() {
|
2019-02-14 09:40:20 +00:00
|
|
|
let searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', "Enter a radio name…")
|
2019-03-18 09:07:58 +00:00
|
|
|
let title = this.$pgettext('*/*/*', "Radios")
|
2018-07-01 19:50:50 +00:00
|
|
|
return {
|
|
|
|
searchPlaceholder,
|
|
|
|
title
|
|
|
|
}
|
2019-06-24 11:30:56 +00:00
|
|
|
},
|
|
|
|
isAuthenticated () {
|
|
|
|
return this.$store.state.auth.authenticated
|
|
|
|
},
|
|
|
|
hasFavorites () {
|
|
|
|
return this.$store.state.favorites.count > 0
|
|
|
|
},
|
2018-07-01 19:50:50 +00:00
|
|
|
},
|
2018-01-07 21:13:44 +00:00
|
|
|
methods: {
|
2020-07-06 11:21:07 +00:00
|
|
|
updateQueryString: function() {
|
2019-09-15 18:17:22 +00:00
|
|
|
history.pushState(
|
|
|
|
{},
|
|
|
|
null,
|
|
|
|
this.$route.path + '?' + new URLSearchParams(
|
|
|
|
{
|
2018-01-07 21:13:44 +00:00
|
|
|
query: this.query,
|
|
|
|
page: this.page,
|
|
|
|
paginateBy: this.paginateBy,
|
|
|
|
ordering: this.getOrderingAsString()
|
2019-09-15 18:17:22 +00:00
|
|
|
}).toString()
|
|
|
|
)
|
2020-07-06 11:21:07 +00:00
|
|
|
},
|
|
|
|
fetchData: function() {
|
2018-01-07 21:13:44 +00:00
|
|
|
var self = this
|
|
|
|
this.isLoading = true
|
|
|
|
let url = FETCH_URL
|
|
|
|
let params = {
|
2019-12-26 10:38:26 +00:00
|
|
|
scope: this.scope,
|
2018-01-07 21:13:44 +00:00
|
|
|
page: this.page,
|
|
|
|
page_size: this.paginateBy,
|
|
|
|
name__icontains: this.query,
|
2019-12-26 10:38:26 +00:00
|
|
|
ordering: this.getOrderingAsString(),
|
2018-01-07 21:13:44 +00:00
|
|
|
}
|
2018-11-19 22:33:22 +00:00
|
|
|
logger.default.debug("Fetching radios")
|
|
|
|
axios.get(url, { params: params }).then(response => {
|
2018-01-07 21:13:44 +00:00
|
|
|
self.result = response.data
|
|
|
|
self.isLoading = false
|
|
|
|
})
|
2020-07-06 11:21:07 +00:00
|
|
|
},
|
2018-11-19 22:33:22 +00:00
|
|
|
selectPage: function(page) {
|
2018-01-07 21:13:44 +00:00
|
|
|
this.page = page
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
2018-11-19 22:33:22 +00:00
|
|
|
page() {
|
2018-01-07 21:13:44 +00:00
|
|
|
this.updateQueryString()
|
|
|
|
this.fetchData()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|