128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<template>
|
|
<main
|
|
v-title="labels.title"
|
|
class="main pusher"
|
|
>
|
|
<section class="ui head vertical stripe segment container">
|
|
<h1 class="ui with-actions header">
|
|
{{ labels.title }}
|
|
<div class="actions">
|
|
<a @click.stop.prevent="showSubscribeModal = true">
|
|
<i class="plus icon" />
|
|
<translate translate-context="Content/Profile/Button">Add new</translate>
|
|
</a>
|
|
</div>
|
|
</h1>
|
|
<modal
|
|
class="tiny"
|
|
:show.sync="showSubscribeModal"
|
|
:fullscreen="false"
|
|
>
|
|
<h2 class="header">
|
|
<translate translate-context="*/*/*/Noun">
|
|
Subscription
|
|
</translate>
|
|
</h2>
|
|
<div
|
|
ref="modalContent"
|
|
class="scrolling content"
|
|
>
|
|
<remote-search-form
|
|
initial-type="both"
|
|
:show-submit="false"
|
|
:standalone="false"
|
|
:redirect="true"
|
|
@subscribed="showSubscribeModal = false; reloadWidget()"
|
|
/>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="ui basic deny button">
|
|
<translate translate-context="*/*/Button.Label/Verb">
|
|
Cancel
|
|
</translate>
|
|
</button>
|
|
<button
|
|
form="remote-search"
|
|
type="submit"
|
|
class="ui primary button"
|
|
>
|
|
<i class="bookmark icon" />
|
|
<translate translate-context="*/*/*/Verb">
|
|
Subscribe
|
|
</translate>
|
|
</button>
|
|
</div>
|
|
</modal>
|
|
|
|
<inline-search-bar
|
|
v-model="query"
|
|
:placeholder="labels.searchPlaceholder"
|
|
@search="reloadWidget"
|
|
/>
|
|
<channels-widget
|
|
:key="widgetKey"
|
|
:limit="50"
|
|
:show-modification-date="true"
|
|
:filters="{q: query, subscribed: 'true', ordering: '-modification_date'}"
|
|
/>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import Modal from '@/components/semantic/Modal'
|
|
|
|
import ChannelsWidget from '@/components/audio/ChannelsWidget'
|
|
import RemoteSearchForm from '@/components/RemoteSearchForm'
|
|
|
|
export default {
|
|
components: {
|
|
ChannelsWidget,
|
|
RemoteSearchForm,
|
|
Modal
|
|
},
|
|
props: { defaultQuery: { type: String, required: false, default: '' } },
|
|
data () {
|
|
return {
|
|
query: this.defaultQuery || '',
|
|
channels: [],
|
|
count: 0,
|
|
isLoading: false,
|
|
errors: null,
|
|
previousPage: null,
|
|
nextPage: null,
|
|
widgetKey: String(new Date()),
|
|
showSubscribeModal: false
|
|
}
|
|
},
|
|
computed: {
|
|
labels () {
|
|
return {
|
|
title: this.$pgettext('Content/Subscriptions/Header', 'Subscribed Channels'),
|
|
searchPlaceholder: this.$pgettext('Content/Subscriptions/Form.Placeholder', 'Filter by name…')
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
fetchData () {
|
|
const self = this
|
|
this.isLoading = true
|
|
axios.get('channels/', { params: { subscribed: 'true', q: this.query } }).then(response => {
|
|
self.previousPage = response.data.previous
|
|
self.nextPage = response.data.next
|
|
self.isLoading = false
|
|
self.channels = [...self.channels, ...response.data.results]
|
|
self.count = response.data.count
|
|
})
|
|
},
|
|
reloadWidget () {
|
|
this.widgetKey = String(new Date())
|
|
}
|
|
}
|
|
}
|
|
</script>
|