see all on search now functional

resources/cider-ui-tests/index.js

@@ -155,7 +155,8 @@ const app = new Vue({
         },
         collectionList: {
             response: {},
-            title: ""
+            title: "",
+            type: ""
         },
         page: "artist-page",
         pageHistory: [],
@@ -280,15 +281,51 @@ const app = new Vue({
             })
             document.body.removeAttribute("loading")
         },
-        async showCollection (response, title) {
+        async showCollection (response, title, type) {
             let self = this
             this.collectionList.response = response
             this.collectionList.title = title
+            this.collectionList.type = type
             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)
+            await this.showCollection(response, title, "artists")
+        },
+        async showSearchView(term, group, title) {
+            let response = await this.mk.api.search(term, {
+                platform: "web",
+                groups: group,
+                types: "activities,albums,apple-curators,artists,curators,editorial-items,music-movies,music-videos,playlists,songs,stations,tv-episodes,uploaded-videos,record-labels",
+                limit: 25,
+                relate: {
+                    editorialItems: ["contents"]
+                },
+                include: {
+                    albums: ["artists"],
+                    songs: ["artists"],
+                    "music-videos": ["artists"]
+                },
+                extend: "artistUrl",
+                fields: {
+                    artists: "url,name,artwork,hero",
+                    albums: "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url"
+                },
+                with: "serverBubbles,lyricHighlights",
+                art: {
+                    "url": "cf"
+                },
+                omit: {
+                    resource: ["autos"]
+                }
+            }, {groups: group, includeResponseMeta: !0})
+            console.log(response)
+            let responseFormat = {
+                data: response[group].data.data,
+                next: response[group].next,
+                groups: group
+            }
+            await this.showCollection(responseFormat, title, "search")
         },
         async getPlaylistFromID(id) {
             const params = {include: "tracks",

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

@@ -242,7 +242,7 @@
                 <!-- Collection List -->
                 <transition name="wpfade">
                     <template v-if="page == 'collection-list'">
-                        <cider-collection-list :data="collectionList.response" :title="collectionList.title"></cider-collection-list>
+                        <cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list>
                     </template>
                 </transition>
                 <!-- Playlist / Album page-->

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

@@ -14,7 +14,7 @@
                     <mediaitem-square-large v-else :item="item"></mediaitem-square-large>
                 </template>
             </template>
-            <button v-if="triggerEnabled" style="opacity:0;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
+            <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">Show More</button>
         </div>
 
     </div>
@@ -22,7 +22,21 @@
 <script>
     Vue.component('cider-collection-list', {
         template: "#cider-collection-list",
-        props: ["data", "title"],
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+            title: {
+                type: String,
+                required: false
+            },
+            type: {
+                type: String,
+                required: false,
+                default: "artists"
+            }
+        },
         data: function () {
             return {
                 triggerEnabled: true,
@@ -32,18 +46,38 @@
         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 && this.triggerEnabled) {
+                switch(this.type) {
-                    this.triggerEnabled = false;
+                    default:
-                    this.data.next().then(data => {
+                    case "artists":
-                        console.log(data);
+                        if (this.data.next && this.triggerEnabled) {
-                        this.data.next = data.next;
+                            this.triggerEnabled = false;
-                        this.data.data = this.data.data.concat(data.data);
+                            this.data.next().then(data => {
-                        this.triggerEnabled = true;
+                                console.log(data);
-                    });
+                                this.data.next = data.next;
-                }else{
+                                this.data.data = this.data.data.concat(data.data);
-                    console.log("No next page");
+                                this.triggerEnabled = true;
-                    this.triggerEnabled = false;
+                            });
+                        }else{
+                            console.log("No next page");
+                            this.triggerEnabled = false;
+                        }
+                        break;
+                    case "search":
+                        if (this.data.next && this.triggerEnabled) {
+                            this.triggerEnabled = false;
+                            this.data.next().then(data => {
+                                console.log(data);
+                                this.data.next = data[this.data.groups].next;
+                                this.data.data = this.data.data.concat(data[this.data.groups].data.data);
+                                this.triggerEnabled = true;
+                            });
+                        }else{
+                            console.log("No next page");
+                            this.triggerEnabled = false;
+                        }
+                        break;
                 }
+
             },
             visibilityChanged: function (isVisible, entry) {
                 if(isVisible) {

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

@@ -4,7 +4,7 @@
             <div class="col-sm" style="width: auto;" v-if="getTopResult()">
                 <template>
                     <h3>Top Result</h3>
-                    <mediaitem-square-large :item="getTopResult()"></mediaitem-square>
+                    <mediaitem-square-large :item="getTopResult()"></mediaitem-square-large>
                 </template>
             </div>
             <div class="col" v-if="search.results.song">
@@ -12,7 +12,7 @@
                     <div class="col">
                         <h3>Songs</h3>
                     </div>
-                    <div class="col-auto flex-center" v-if="search.results.song.data.length >= 6">
+                    <div class="col-auto flex-center" @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))" v-if="search.results.song.data.length >= 6">
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
@@ -31,7 +31,7 @@
                         <h3>{{ app.friendlyTypes(section) }}</h3>
                     </div>
                     <div class="col-auto flex-center" v-if="search.results[section].data.length >= 10">
-                        <button class="cd-btn-seeall">See All</button>
+                        <button class="cd-btn-seeall" @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See All</button>
                     </div>
                 </div>
                 <template v-if="!app.friendlyTypes(section).includes('Video')">