From 36842dfc0490f3354b798498f5400f3a5930fe60 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Mon, 25 Mar 2024 18:03:52 +0100
Subject: [PATCH] [web] Refactor library search page

---
 web-src/src/pages/PageSearchLibrary.vue | 446 +++++++-----------------
 1 file changed, 127 insertions(+), 319 deletions(-)

diff --git a/web-src/src/pages/PageSearchLibrary.vue b/web-src/src/pages/PageSearchLibrary.vue
index fd04a9c3..38ff22c2 100644
--- a/web-src/src/pages/PageSearchLibrary.vue
+++ b/web-src/src/pages/PageSearchLibrary.vue
@@ -1,262 +1,82 @@
 <template>
-  <div>
-    <!-- Search field + recent searches -->
-    <section class="section pb-0">
-      <div class="container">
-        <div class="columns is-centered">
-          <div class="column is-four-fifths">
-            <form @submit.prevent="new_search">
-              <div class="field">
-                <p class="control has-icons-left">
-                  <input
-                    ref="search_field"
-                    v-model="search_query"
-                    class="input is-rounded is-shadowless"
-                    type="text"
-                    :placeholder="$t('page.search.placeholder')"
-                    autocomplete="off"
-                  />
-                  <mdicon class="icon is-left" name="magnify" size="16" />
-                </p>
-                <i18n-t
-                  tag="p"
-                  class="help has-text-centered"
-                  keypath="page.search.help"
-                  scope="global"
-                >
-                  <template #query><code>query:</code></template>
-                  <template #help
-                    ><a
-                      href="https://owntone.github.io/owntone-server/smart-playlists/"
-                      target="_blank"
-                      v-text="$t('page.search.expression')"
-                  /></template>
-                </i18n-t>
-              </div>
-            </form>
-            <div class="tags mt-4">
-              <a
-                v-for="recent_search in recent_searches"
-                :key="recent_search"
-                class="tag"
-                @click="open_recent_search(recent_search)"
-                v-text="recent_search"
-              />
+  <section class="section pb-0">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <form @submit.prevent="new_search">
+            <div class="field">
+              <p class="control has-icons-left">
+                <input
+                  ref="search_field"
+                  v-model="search_query"
+                  class="input is-rounded is-shadowless"
+                  type="text"
+                  :placeholder="$t('page.search.placeholder')"
+                  autocomplete="off"
+                />
+                <mdicon class="icon is-left" name="magnify" size="16" />
+              </p>
+              <i18n-t
+                tag="p"
+                class="help has-text-centered"
+                keypath="page.search.help"
+                scope="global"
+              >
+                <template #query><code>query:</code></template>
+                <template #help
+                  ><a
+                    href="https://owntone.github.io/owntone-server/smart-playlists/"
+                    target="_blank"
+                    v-text="$t('page.search.expression')"
+                /></template>
+              </i18n-t>
             </div>
+          </form>
+          <div class="tags mt-4">
+            <a
+              v-for="recent_search in recent_searches"
+              :key="recent_search"
+              class="tag"
+              @click="open_recent_search(recent_search)"
+              v-text="recent_search"
+            />
           </div>
         </div>
       </div>
-    </section>
-    <tabs-search :query="search_query" />
-    <!-- Tracks -->
-    <content-with-heading v-if="show('track') && tracks.total" class="pt-0">
+    </div>
+  </section>
+  <tabs-search :query="search_query" />
+  <template v-for="type in search_types" :key="type">
+    <content-with-heading v-if="show(type)" class="pt-0">
       <template #heading-left>
-        <p class="title is-4" v-text="$t('page.search.tracks')" />
+        <p class="title is-4" v-text="$t(`page.search.${type}s`)" />
       </template>
       <template #content>
-        <list-tracks :items="tracks" />
+        <component :is="components[type]" :items="results[type]" />
       </template>
       <template #footer>
-        <nav v-if="show_all_button(tracks)" class="level">
+        <nav v-if="show_all_button(type)" class="level">
           <p class="level-item">
             <a
               class="button is-light is-small is-rounded"
-              @click="open_search('track')"
+              @click="open_search(type)"
               v-text="
-                $t('page.search.show-tracks', tracks.total, {
-                  count: $filters.number(tracks.total)
+                $t(`page.search.show-${type}s`, results[type].total, {
+                  count: $filters.number(results[type].total)
                 })
               "
             />
           </p>
         </nav>
+        <p v-if="!results[type].total" class="has-text-centered-mobile">
+          <i v-text="$t('page.search.no-tracks')" />
+        </p>
       </template>
     </content-with-heading>
-    <content-text v-if="show('track') && !tracks.total" class="pt-0">
-      <template #content>
-        <p><i v-text="$t('page.search.no-tracks')" /></p>
-      </template>
-    </content-text>
-    <!-- Artists -->
-    <content-with-heading v-if="show('artist') && artists.total">
-      <template #heading-left>
-        <p class="title is-4" v-text="$t('page.search.artists')" />
-      </template>
-      <template #content>
-        <list-artists :items="artists" />
-      </template>
-      <template #footer>
-        <nav v-if="show_all_button(artists)" class="level">
-          <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_search('artist')"
-              v-text="
-                $t('page.search.show-artists', artists.total, {
-                  count: $filters.number(artists.total)
-                })
-              "
-            />
-          </p>
-        </nav>
-      </template>
-    </content-with-heading>
-    <content-text v-if="show('artist') && !artists.total">
-      <template #content>
-        <p><i v-text="$t('page.search.no-artists')" /></p>
-      </template>
-    </content-text>
-    <!-- Albums -->
-    <content-with-heading v-if="show('album') && albums.total">
-      <template #heading-left>
-        <p class="title is-4" v-text="$t('page.search.albums')" />
-      </template>
-      <template #content>
-        <list-albums :items="albums" />
-      </template>
-      <template #footer>
-        <nav v-if="show_all_button(albums)" class="level">
-          <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_search('album')"
-              v-text="
-                $t('page.search.show-albums', albums.total, {
-                  count: $filters.number(albums.total)
-                })
-              "
-            />
-          </p>
-        </nav>
-      </template>
-    </content-with-heading>
-    <content-text v-if="show('album') && !albums.total">
-      <template #content>
-        <p><i v-text="$t('page.search.no-albums')" /></p>
-      </template>
-    </content-text>
-    <!-- Composers -->
-    <content-with-heading v-if="show('composer') && composers.total">
-      <template #heading-left>
-        <p class="title is-4" v-text="$t('page.search.composers')" />
-      </template>
-      <template #content>
-        <list-composers :items="composers" />
-      </template>
-      <template #footer>
-        <nav v-if="show_all_button(composers)" class="level">
-          <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_search('composer')"
-              v-text="
-                $t('page.search.show-composers', composers.total, {
-                  count: $filters.number(composers.total)
-                })
-              "
-            />
-          </p>
-        </nav>
-      </template>
-    </content-with-heading>
-    <content-text v-if="show('composer') && !composers.total">
-      <template #content>
-        <p><i v-text="$t('page.search.no-composers')" /></p>
-      </template>
-    </content-text>
-    <!-- Playlists -->
-    <content-with-heading v-if="show('playlist') && playlists.total">
-      <template #heading-left>
-        <p class="title is-4" v-text="$t('page.search.playlists')" />
-      </template>
-      <template #content>
-        <list-playlists :items="playlists" />
-      </template>
-      <template #footer>
-        <nav v-if="show_all_button(playlists)" class="level">
-          <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_search('playlist')"
-              v-text="
-                $t('page.search.show-playlists', playlists.total, {
-                  count: $filters.number(playlists.total)
-                })
-              "
-            />
-          </p>
-        </nav>
-      </template>
-    </content-with-heading>
-    <content-text v-if="show('playlist') && !playlists.total">
-      <template #content>
-        <p><i v-text="$t('page.search.no-playlists')" /></p>
-      </template>
-    </content-text>
-    <!-- Podcasts -->
-    <content-with-heading v-if="show('podcast') && podcasts.total">
-      <template #heading-left>
-        <p class="title is-4" v-text="$t('page.search.podcasts')" />
-      </template>
-      <template #content>
-        <list-albums :items="podcasts" />
-      </template>
-      <template #footer>
-        <nav v-if="show_all_button(podcasts)" class="level">
-          <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_search('podcast')"
-              v-text="
-                $t('page.search.show-podcasts', podcasts.total, {
-                  count: $filters.number(podcasts.total)
-                })
-              "
-            />
-          </p>
-        </nav>
-      </template>
-    </content-with-heading>
-    <content-text v-if="show('podcast') && !podcasts.total">
-      <template #content>
-        <p><i v-text="$t('page.search.no-podcasts')" /></p>
-      </template>
-    </content-text>
-
-    <!-- Audiobooks -->
-    <content-with-heading v-if="show('audiobook') && audiobooks.total">
-      <template #heading-left>
-        <p class="title is-4" v-text="$t('page.search.audiobooks')" />
-      </template>
-      <template #content>
-        <list-albums :items="audiobooks" />
-      </template>
-      <template #footer>
-        <nav v-if="show_all_button(audiobooks)" class="level">
-          <p class="level-item">
-            <a
-              class="button is-light is-small is-rounded"
-              @click="open_search('audiobook')"
-              v-text="
-                $t('page.search.show-audiobooks', audiobooks.total, {
-                  count: $filters.number(audiobooks.total)
-                })
-              "
-            />
-          </p>
-        </nav>
-      </template>
-    </content-with-heading>
-    <content-text v-if="show('audiobook') && !audiobooks.total">
-      <template #content>
-        <p><i v-text="$t('page.search.no-audiobooks')" /></p>
-      </template>
-    </content-text>
-  </div>
+  </template>
 </template>
 
 <script>
-import ContentText from '@/templates/ContentText.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -270,7 +90,6 @@ import webapi from '@/webapi'
 export default {
   name: 'PageSearchLibrary',
   components: {
-    ContentText,
     ContentWithHeading,
     ListAlbums,
     ListArtists,
@@ -282,13 +101,34 @@ export default {
 
   data() {
     return {
-      albums: new GroupedList(),
-      artists: new GroupedList(),
-      audiobooks: new GroupedList(),
-      composers: new GroupedList(),
-      playlists: new GroupedList(),
-      podcasts: new GroupedList(),
+      components: {
+        album: ListAlbums.name,
+        artist: ListArtists.name,
+        audiobook: ListAlbums.name,
+        composer: ListComposers.name,
+        playlist: ListPlaylists.name,
+        podcast: ListAlbums.name,
+        track: ListTracks.name
+      },
+      results: {
+        album: new GroupedList(),
+        artist: new GroupedList(),
+        audiobook: new GroupedList(),
+        composer: new GroupedList(),
+        playlist: new GroupedList(),
+        podcast: new GroupedList(),
+        track: new GroupedList()
+      },
       search_query: '',
+      search_types: [
+        'track',
+        'artist',
+        'album',
+        'composer',
+        'playlist',
+        'audiobook',
+        'podcast'
+      ],
       tracks: new GroupedList()
     }
   },
@@ -310,6 +150,31 @@ export default {
   },
 
   methods: {
+    new_search() {
+      if (!this.search_query) {
+        return
+      }
+      this.$router.push({
+        name: 'search-library',
+        query: {
+          limit: 3,
+          offset: 0,
+          query: this.search_query,
+          type: this.search_types.join()
+        }
+      })
+      this.$refs.search_field.blur()
+    },
+    open_recent_search(query) {
+      this.search_query = query
+      this.new_search()
+    },
+    open_search(type) {
+      this.$router.push({
+        name: 'search-library',
+        query: { query: this.$route.query.query, type }
+      })
+    },
     search(route) {
       this.search_query = route.query.query?.trim()
       if (!this.search_query || !this.search_query.replace(/^query:/u, '')) {
@@ -318,11 +183,10 @@ export default {
       }
       route.query.query = this.search_query
       this.searchMusic(route.query)
-      this.searchAudiobooks(route.query)
-      this.searchPodcasts(route.query)
+      this.searchType(route.query, 'audiobook')
+      this.searchType(route.query, 'podcast')
       this.$store.dispatch('add_recent_search', this.search_query)
     },
-
     searchMusic(query) {
       if (
         !query.type.includes('track') &&
@@ -333,30 +197,29 @@ export default {
       ) {
         return
       }
-      const searchParams = {
+      const parameters = {
         type: query.type
       }
       if (query.query.startsWith('query:')) {
-        searchParams.expression = `(${query.query.replace(/^query:/u, '').trim()}) and media_kind is music`
+        parameters.expression = `(${query.query.replace(/^query:/u, '').trim()}) and media_kind is music`
       } else {
-        searchParams.query = query.query
-        searchParams.media_kind = 'music'
+        parameters.query = query.query
+        parameters.media_kind = 'music'
       }
       if (query.limit) {
-        searchParams.limit = query.limit
-        searchParams.offset = query.offset
+        parameters.limit = query.limit
+        parameters.offset = query.offset
       }
-      webapi.search(searchParams).then(({ data }) => {
-        this.tracks = new GroupedList(data.tracks)
-        this.artists = new GroupedList(data.artists)
-        this.albums = new GroupedList(data.albums)
-        this.composers = new GroupedList(data.composers)
-        this.playlists = new GroupedList(data.playlists)
+      webapi.search(parameters).then(({ data }) => {
+        this.results.track = new GroupedList(data.tracks)
+        this.results.artist = new GroupedList(data.artists)
+        this.results.album = new GroupedList(data.albums)
+        this.results.composer = new GroupedList(data.composers)
+        this.results.playlist = new GroupedList(data.playlists)
       })
     },
-
-    searchAudiobooks(query) {
-      if (!query.type.includes('audiobook')) {
+    searchType(query, type) {
+      if (!query.type.includes(type)) {
         return
       }
       const parameters = {
@@ -367,76 +230,21 @@ export default {
       } else {
         parameters.expression = `album includes "${query.query}" or artist includes "${query.query}"`
       }
-      parameters.expression = `(${parameters.expression}) and media_kind is audiobook`
+      parameters.expression = `(${parameters.expression}) and media_kind is ${type}`
       if (query.limit) {
         parameters.limit = query.limit
         parameters.offset = query.offset
       }
       webapi.search(parameters).then(({ data }) => {
-        this.audiobooks = new GroupedList(data.albums)
+        this.results[type] = new GroupedList(data.albums)
       })
     },
-
-    searchPodcasts(query) {
-      if (!query.type.includes('podcast')) {
-        return
-      }
-      const parameters = {
-        type: 'album'
-      }
-      if (query.query.startsWith('query:')) {
-        parameters.expression = query.query.replace(/^query:/u, '').trim()
-      } else {
-        parameters.expression = `album includes "${query.query}" or artist includes "${query.query}"`
-      }
-      parameters.expression = `(${parameters.expression}) and media_kind is podcast`
-      if (query.limit) {
-        parameters.limit = query.limit
-        parameters.offset = query.offset
-      }
-      webapi.search(parameters).then(({ data }) => {
-        this.podcasts = new GroupedList(data.albums)
-      })
-    },
-
-    new_search() {
-      if (!this.search_query) {
-        return
-      }
-
-      this.$router.push({
-        name: 'search-library',
-        query: {
-          limit: 3,
-          offset: 0,
-          query: this.search_query,
-          type: 'track,artist,album,playlist,audiobook,podcast,composer'
-        }
-      })
-      this.$refs.search_field.blur()
-    },
-
     show(type) {
       return this.$route.query.type?.includes(type) ?? false
     },
-
-    show_all_button(items) {
+    show_all_button(type) {
+      const items = this.results[type]
       return items.total > items.items.length
-    },
-
-    open_search(type) {
-      this.$router.push({
-        name: 'search-library',
-        query: {
-          query: this.$route.query.query,
-          type: type
-        }
-      })
-    },
-
-    open_recent_search(query) {
-      this.search_query = query
-      this.new_search()
     }
   }
 }