See All is now functional on artist pages

resources/cider-ui-tests/index.js

@@ -153,6 +153,10 @@ const app = new Vue({
             drawerState: "queue",
             topChromeVisible: true
         },
+        collectionList: {
+            response: {},
+            title: ""
+        },
         page: "artist-page",
         pageHistory: [],
         songstest: false
@@ -276,6 +280,16 @@ const app = new Vue({
             })
             document.body.removeAttribute("loading")
         },
+        async showCollection (response, title) {
+            let self = this
+            this.collectionList.response = response
+            this.collectionList.title = title
+            this.page = "collection-list"
+        },
+        async showArtistView (artist, title, view) {
+            let response = await this.mk.api.artistView(artist, view, {}, {view: view, includeResponseMeta: !0})
+            await this.showCollection(response, title)
+        },
         async getPlaylistFromID(id) {
             const params = {include: "tracks",
                 platform: "web",
@@ -306,6 +320,7 @@ const app = new Vue({
                 "limit[artists:top-songs]": 20,
                 "art[url]": "f"
             }, {includeResponseMeta: !0})
+            console.log(artistData)
             this.artistPage.data = artistData.data[0]
             this.page = "artist-page"
         },

resources/cider-ui-tests/style.less

@@ -1611,6 +1611,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+// Collection Page
+.collection-page {
+  .header-text {
+    margin-bottom: 32px;
+  }
+}
 
 /* Artist Page */
 

resources/cider-ui-tests/views/main.ejs

@@ -239,6 +239,12 @@
                 <transition name="wpfade">
                     <%- include('pages/webview') %>
                 </transition>
+                <!-- Collection List -->
+                <transition name="wpfade">
+                    <template v-if="page == 'collection-list'">
+                        <cider-collection-list :data="collectionList.response" :title="collectionList.title"></cider-collection-list>
+                    </template>
+                </transition>
                 <!-- Playlist / Album page-->
                 <transition name="wpfade">
                     <template v-if="page.includes('playlist_')">
@@ -420,6 +426,9 @@
 <!-- Playlists / Albums -->
 <%- include('pages/cider-playlist') %>
 
+<!-- Collection List -->
+<%- include('pages/collection-list') %>
+
 <!-- Artist Page -->
 <%- include('pages/artist') %>
 

resources/cider-ui-tests/views/pages/artist.ejs

@@ -62,7 +62,7 @@
                                 </h3>
                             </div>
                             <div class="col-auto flex-center" v-if="data.views[view].data.length >= 10">
-                                <button class="cd-btn-seeall">See All</button>
+                                <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - ' + data.views[view].attributes.title, view)">See All</button>
                             </div>
                         </div>
                         <template v-if="!((data.views[view].attributes.title ?

resources/cider-ui-tests/views/pages/collection-list.ejs

@@ -1,25 +1,43 @@
-<script type="text/x-template" id="collection-list">
-    <div class="content-inner">
-        <h1 class="header-text">{{ title }}</h1>
-        <button v-observe-visibility="{callback: visibilityChanged}">Dummy Button</button>
+<script type="text/x-template" id="cider-collection-list">
+    <div class="content-inner collection-page">
+        <h3 class="header-text">{{ title }}</h3>
+        <div v-if="data['data'] != 'null'">
+            <template v-for="item in data.data">
+                <mediaitem-list-item
+                        v-if="item.attributes.playParams.kind == 'song'"
+                        :item="song"></mediaitem-list-item>
+                <mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
+                <mediaitem-square-large v-else :item="item"></mediaitem-square-large>
+            </template>
+
+        </div>
+        <button v-if="triggerEnabled" v-observe-visibility="{callback: visibilityChanged}">Dummy Button</button>
     </div>
 </script>
 <script>
     Vue.component('cider-collection-list', {
         template: "#cider-collection-list",
-        props: ["data", "title", "kind"],
+        props: ["data", "title"],
         data: function () {
             return {
+                triggerEnabled: true,
                 canSeeTrigger: false
             }
         },
         methods: {
             getNext() {
                 // if this.data.next is not null, then we can run this.data.next() and concat to this.data.data to get the next page
-                if (this.data.next) {
+                if (this.data.next && this.triggerEnabled) {
+                    this.triggerEnabled = false;
                     this.data.next().then(data => {
+                        console.log(data);
+                        this.data.next = data.next;
                         this.data.data = this.data.data.concat(data.data);
+                        this.triggerEnabled = true;
                     });
+                }else{
+                    console.log("No next page");
+                    this.triggerEnabled = false;
                 }
             },
             visibilityChanged: function (isVisible, entry) {