Commit 4bda1cd8 authored by Ciaran Ainsworth's avatar Ciaran Ainsworth
Browse files

Initial idea for sliders

parent 56b1358f
......@@ -178,6 +178,7 @@
<translate translate-context="*/*/*">New channels</translate>
</h3>
<channels-widget :show-modification-date="true" :limit="10" :filters="{ordering: '-creation_date', external: 'false'}"></channels-widget>
<album-slider :filters="{playable: true, ordering: '-creation_date'}" :limit="10"></album-slider>
</section>
</main>
......@@ -189,6 +190,7 @@ import _ from '@/lodash'
import {mapState} from 'vuex'
import showdown from 'showdown'
import AlbumWidget from "@/components/audio/album/Widget"
import AlbumSlider from "@/components/audio/album/Slider"
import ChannelsWidget from "@/components/audio/ChannelsWidget"
import LoginForm from "@/components/auth/LoginForm"
import SignupForm from "@/components/auth/SignupForm"
......@@ -200,6 +202,7 @@ export default {
ChannelsWidget,
LoginForm,
SignupForm,
AlbumSlider,
},
data () {
return {
......
<template>
<div class="wrapper">
<div class="ui two column grid">
<div class="column">
<h3 v-if="!!this.$slots.title" class="ui header">
<slot name="title"></slot>
</h3>
<slot></slot>
</div>
<div class="column">
<button :class="['right', 'floated', 'circular', 'icon', 'ui', {'disabled': !nextPage}, 'button',]" @click.prevent="fetchData(nextPage)">
<i class="right arrow icon"></i>
</button>
<button :class="['right', 'floated', 'circular', 'icon', 'ui', {'disabled': !previousPage}, 'button',]" @click.prevent="fetchData(previousPage)">
<i class="left arrow icon"></i>
</button>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="ui app-cards cards">
<div v-if="isLoading" class="ui inverted active dimmer">
<div class="ui loader"></div>
</div>
<album-card v-for="album in albums" :album="album" :key="album.id" />
</div>
<template v-if="!isLoading && albums.length === 0">
<empty-state @refresh="fetchData('albums/')" :refresh="true"></empty-state>
</template>
</div>
</template>
<script>
import axios from 'axios'
import AlbumCard from '@/components/audio/album/Card'
import $ from 'jquery'
export default {
components: {
AlbumCard,
},
props: {
limit: {type: Number, default: 4},
filters: {type: Object, required: true},
},
data() {
return {
albums: [],
count: 0,
isLoading: false,
errors: null,
previousPage: null,
nextPage: null,
}
},
created() {
this.fetchData()
},
methods: {
fetchData (url) {
url = url || 'albums/'
this.isLoading = true
let self = this
let params = {q: this.query, ...this.filters}
params.page_size = this.limit
params.offset = this.offset
axios.get(url, {params: params}).then((response) => {
self.previousPage = response.data.previous
self.nextPage = response.data.next
self.isLoading = false
self.albums = [...response.data.results]
self.count = response.data.count
}, error => {
self.isLoading = false
self.errors = error.backendErrors
})
},
},
mounted() {
$('.component-album-card')
.transition('scale')
}
}
</script>
\ No newline at end of file
......@@ -19,21 +19,15 @@
</div>
</div>
<div class="ui section hidden divider"></div>
<div class="ui stackable one column grid">
<div class="column">
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
<template slot="title"><translate translate-context="Content/Home/Title">Recently added</translate></template>
</album-widget>
</div>
</div>
<album-slider :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
<template slot="title"><translate translate-context="Content/Home/Title">Recently added</translate></template>
</album-slider>
<template v-if="scope === 'all'">
<h3 class="ui header" >
<translate translate-context="*/*/*">New channels</translate>
</h3>
<channels-widget :show-modification-date="true" :limit="12" :filters="{ordering: '-creation_date', external: 'false'}"></channels-widget>
</template>
</section>
</main>
</template>
......@@ -46,6 +40,7 @@ import ChannelsWidget from "@/components/audio/ChannelsWidget"
import ArtistCard from "@/components/audio/artist/Card"
import TrackWidget from "@/components/audio/track/Widget"
import AlbumWidget from "@/components/audio/album/Widget"
import AlbumSlider from "@/components/audio/album/Slider"
import PlaylistWidget from "@/components/playlists/Widget"
const ARTISTS_URL = "artists/"
......@@ -62,6 +57,7 @@ export default {
AlbumWidget,
PlaylistWidget,
ChannelsWidget,
AlbumSlider,
},
data() {
return {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment