2018-01-07 21:13:44 +00:00
|
|
|
<template>
|
2018-03-30 21:58:16 +00:00
|
|
|
<div v-title="'Radios'">
|
2018-01-07 21:13:44 +00:00
|
|
|
<div class="ui vertical stripe segment">
|
2018-04-15 10:45:56 +00:00
|
|
|
<h2 class="ui header"><i18next path="Browsing radios"/></h2>
|
|
|
|
<router-link class="ui green basic button" to="/library/radios/build" exact>
|
|
|
|
<i18next path="Create your own radio"/>
|
|
|
|
</router-link>
|
2018-01-07 21:13:44 +00:00
|
|
|
<div class="ui hidden divider"></div>
|
|
|
|
<div :class="['ui', {'loading': isLoading}, 'form']">
|
|
|
|
<div class="fields">
|
|
|
|
<div class="field">
|
2018-04-15 10:45:56 +00:00
|
|
|
<i18next tag="label" path="Search"/>
|
2018-01-07 21:13:44 +00:00
|
|
|
<input type="text" v-model="query" placeholder="Enter a radio name..."/>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
2018-04-15 10:45:56 +00:00
|
|
|
<i18next tag="label" path="Ordering"/>
|
2018-01-07 21:13:44 +00:00
|
|
|
<select class="ui dropdown" v-model="ordering">
|
|
|
|
<option v-for="option in orderingOptions" :value="option[0]">
|
|
|
|
{{ option[1] }}
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
2018-04-15 10:45:56 +00:00
|
|
|
<i18next tag="label" path="Ordering direction"/>
|
2018-01-07 21:13:44 +00:00
|
|
|
<select class="ui dropdown" v-model="orderingDirection">
|
2018-04-15 10:45:56 +00:00
|
|
|
<option value=""><i18next path="Ascending"/></option>
|
|
|
|
<option value="-"><i18next path="Descending"/></option>
|
2018-01-07 21:13:44 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="field">
|
2018-04-15 10:45:56 +00:00
|
|
|
<i18next tag="label" path="Results per page"/>
|
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>
|
|
|
|
</div>
|
|
|
|
<div class="ui hidden divider"></div>
|
2018-02-26 19:10:35 +00:00
|
|
|
<div
|
|
|
|
v-if="result"
|
|
|
|
v-masonry
|
|
|
|
transition-duration="0"
|
|
|
|
item-selector=".column"
|
|
|
|
percent-position="true"
|
|
|
|
stagger="0"
|
|
|
|
class="ui stackable three column doubling grid">
|
2018-01-07 21:13:44 +00:00
|
|
|
<div
|
2018-02-26 19:10:35 +00:00
|
|
|
v-masonry-tile
|
2018-01-07 21:13:44 +00:00
|
|
|
v-if="result.results.length > 0"
|
|
|
|
v-for="radio in result.results"
|
|
|
|
:key="radio.id"
|
|
|
|
class="column">
|
|
|
|
<radio-card class="fluid" type="custom" :custom-radio="radio"></radio-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>
|
2018-01-11 20:35:51 +00:00
|
|
|
import axios from 'axios'
|
2018-01-07 21:13:44 +00:00
|
|
|
import _ from 'lodash'
|
|
|
|
import $ from 'jquery'
|
|
|
|
|
|
|
|
import logger from '@/logging'
|
|
|
|
|
|
|
|
import OrderingMixin from '@/components/mixins/Ordering'
|
|
|
|
import PaginationMixin from '@/components/mixins/Pagination'
|
|
|
|
import RadioCard from '@/components/radios/Card'
|
|
|
|
import Pagination from '@/components/Pagination'
|
|
|
|
|
2018-01-11 20:35:51 +00:00
|
|
|
const FETCH_URL = 'radios/radios/'
|
2018-01-07 21:13:44 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
mixins: [OrderingMixin, PaginationMixin],
|
|
|
|
props: {
|
|
|
|
defaultQuery: {type: String, required: false, default: ''}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
RadioCard,
|
|
|
|
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 || 12),
|
|
|
|
orderingDirection: defaultOrdering.direction,
|
|
|
|
ordering: defaultOrdering.field,
|
|
|
|
orderingOptions: [
|
|
|
|
['creation_date', 'Creation date'],
|
|
|
|
['name', 'Name']
|
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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,
|
|
|
|
page_size: this.paginateBy,
|
|
|
|
name__icontains: this.query,
|
|
|
|
ordering: this.getOrderingAsString()
|
|
|
|
}
|
|
|
|
logger.default.debug('Fetching radios')
|
2018-01-11 20:35:51 +00:00
|
|
|
axios.get(url, {params: params}).then((response) => {
|
2018-01-07 21:13:44 +00:00
|
|
|
self.result = response.data
|
|
|
|
self.isLoading = false
|
|
|
|
})
|
|
|
|
}, 500),
|
|
|
|
selectPage: function (page) {
|
|
|
|
this.page = page
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
page () {
|
|
|
|
this.updateQueryString()
|
|
|
|
this.fetchData()
|
|
|
|
},
|
|
|
|
paginateBy () {
|
|
|
|
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>
|