From d0cd0c4bc7fd3155f2176c7a03f4258a7ff80c49 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Thu, 7 Dec 2023 21:31:10 +0100
Subject: [PATCH] [web]S Streamline code of pages

---
 web-src/src/pages/PageAlbumSpotify.vue        | 16 +++++------
 web-src/src/pages/PageArtist.vue              |  8 +++---
 web-src/src/pages/PageArtistSpotify.vue       | 27 +++++++++----------
 web-src/src/pages/PageArtistTracks.vue        |  8 +++---
 web-src/src/pages/PageAudiobooksAlbum.vue     | 12 ++++-----
 web-src/src/pages/PageAudiobooksArtist.vue    |  9 +++----
 web-src/src/pages/PageComposerAlbums.vue      | 10 +++----
 web-src/src/pages/PageComposerTracks.vue      | 10 +++----
 web-src/src/pages/PageGenreAlbums.vue         | 10 +++----
 web-src/src/pages/PageGenreTracks.vue         |  8 +++---
 .../PageMusicSpotifyFeaturedPlaylists.vue     | 10 +++----
 .../src/pages/PageMusicSpotifyNewReleases.vue |  8 +++---
 web-src/src/pages/PagePlaylistTracks.vue      | 10 +++----
 13 files changed, 72 insertions(+), 74 deletions(-)

diff --git a/web-src/src/pages/PageAlbumSpotify.vue b/web-src/src/pages/PageAlbumSpotify.vue
index 18a5940d..83da5c62 100644
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@@ -17,7 +17,7 @@
           </a>
           <a
             class="button is-small is-light is-rounded"
-            @click="show_album_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -29,7 +29,7 @@
           :artist="album.artist"
           :album="album.name"
           class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
-          @click="show_album_details_modal = true"
+          @click="show_details_modal = true"
         />
       </template>
       <template #content>
@@ -56,17 +56,17 @@
             </a>
           </template>
         </list-item-track-spotify>
+        <modal-dialog-album-spotify
+          :show="show_details_modal"
+          :album="album"
+          @close="show_details_modal = false"
+        />
         <modal-dialog-track-spotify
           :show="show_track_details_modal"
           :track="selected_track"
           :album="album"
           @close="show_track_details_modal = false"
         />
-        <modal-dialog-album-spotify
-          :show="show_album_details_modal"
-          :album="album"
-          @close="show_album_details_modal = false"
-        />
       </template>
     </content-with-hero>
   </div>
@@ -126,7 +126,7 @@ export default {
       show_track_details_modal: false,
       selected_track: {},
 
-      show_album_details_modal: false
+      show_details_modal: false
     }
   },
 
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 4b31df5e..3e38be0e 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -19,7 +19,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_artist_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -47,9 +47,9 @@
         </p>
         <list-albums :albums="albums" :hide_group_title="true" />
         <modal-dialog-artist
-          :show="show_artist_details_modal"
+          :show="show_details_modal"
           :artist="artist"
-          @close="show_artist_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -119,7 +119,7 @@ export default {
           })
         }
       ],
-      show_artist_details_modal: false
+      show_details_modal: false
     }
   },
 
diff --git a/web-src/src/pages/PageArtistSpotify.vue b/web-src/src/pages/PageArtistSpotify.vue
index 26c8025b..a86aa851 100644
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@@ -8,7 +8,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_artist_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -52,15 +52,15 @@
         <VueEternalLoading v-if="offset < total" :load="load_next">
           <template #no-more> . </template>
         </VueEternalLoading>
-        <modal-dialog-album-spotify
+        <modal-dialog-artist-spotify
           :show="show_details_modal"
-          :album="selected_album"
+          :artist="artist"
           @close="show_details_modal = false"
         />
-        <modal-dialog-artist-spotify
-          :show="show_artist_details_modal"
-          :artist="artist"
-          @close="show_artist_details_modal = false"
+        <modal-dialog-album-spotify
+          :show="show_album_details_modal"
+          :album="selected_album"
+          @close="show_album_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -131,15 +131,14 @@ export default {
 
   data() {
     return {
-      artist: {},
       albums: [],
-      total: 0,
+      artist: {},
       offset: 0,
+      selected_album: {},
+      show_album_details_modal: false,
 
       show_details_modal: false,
-      selected_album: {},
-
-      show_artist_details_modal: false
+      total: 0
     }
   },
 
@@ -175,7 +174,7 @@ export default {
     },
 
     play() {
-      this.show_details_modal = false
+      this.show_album_details_modal = false
       webapi.player_play_uri(this.artist.uri, true)
     },
 
@@ -188,7 +187,7 @@ export default {
 
     open_dialog(album) {
       this.selected_album = album
-      this.show_details_modal = true
+      this.show_album_details_modal = true
     },
 
     artwork_url(album) {
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index ebdd2e85..84b1119a 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -20,7 +20,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_artist_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -48,9 +48,9 @@
         </p>
         <list-tracks :tracks="tracks" :uris="track_uris" />
         <modal-dialog-artist
-          :show="show_artist_details_modal"
+          :show="show_details_modal"
           :artist="artist"
-          @close="show_artist_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -121,7 +121,7 @@ export default {
           })
         }
       ],
-      show_artist_details_modal: false,
+      show_details_modal: false,
       tracks_list: new GroupByList()
     }
   },
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index ba618f12..74caa585 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -13,7 +13,7 @@
           </a>
           <a
             class="button is-small is-light is-rounded"
-            @click="show_album_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -25,7 +25,7 @@
           :artist="album.artist"
           :album="album.name"
           class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
-          @click="show_album_details_modal = true"
+          @click="show_details_modal = true"
         />
       </template>
       <template #content>
@@ -39,10 +39,10 @@
         />
         <list-tracks :tracks="tracks" :uris="album.uri" />
         <modal-dialog-album
-          :show="show_album_details_modal"
+          :show="show_details_modal"
           :album="album"
           :media_kind="'audiobook'"
-          @close="show_album_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-hero>
@@ -91,8 +91,8 @@ export default {
   data() {
     return {
       album: {},
-      tracks: new GroupByList(),
-      show_album_details_modal: false
+      show_details_modal: false,
+      tracks: new GroupByList()
     }
   },
 
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index 0e02ba73..d78d75b5 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -8,7 +8,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_artist_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -29,9 +29,9 @@
         />
         <list-albums :albums="albums" />
         <modal-dialog-artist
-          :show="show_artist_details_modal"
+          :show="show_details_modal"
           :artist="artist"
-          @close="show_artist_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -85,8 +85,7 @@ export default {
     return {
       artist: {},
       albums: new GroupByList(),
-
-      show_artist_details_modal: false
+      show_details_modal: false
     }
   },
 
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index 8cc39d16..32b30509 100644
--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -8,7 +8,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_composer_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -36,9 +36,9 @@
         </p>
         <list-albums :albums="albums_list" :hide_group_title="true" />
         <modal-dialog-composer
-          :show="show_composer_details_modal"
+          :show="show_details_modal"
           :composer="composer"
-          @close="show_composer_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -89,9 +89,9 @@ export default {
 
   data() {
     return {
-      composer: {},
       albums_list: new GroupByList(),
-      show_composer_details_modal: false
+      composer: {},
+      show_details_modal: false
     }
   },
 
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 85a768e5..0127f641 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -20,7 +20,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_composer_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -50,9 +50,9 @@
         </p>
         <list-tracks :tracks="tracks" :expression="expression" />
         <modal-dialog-composer
-          :show="show_composer_details_modal"
+          :show="show_details_modal"
           :composer="composer"
-          @close="show_composer_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -108,6 +108,7 @@ export default {
 
   data() {
     return {
+      composer: {},
       groupby_options: [
         {
           id: 1,
@@ -122,8 +123,7 @@ export default {
           })
         }
       ],
-      composer: {},
-      show_composer_details_modal: false,
+      show_details_modal: false,
       tracks_list: new GroupByList()
     }
   },
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index 7da43213..405f96b8 100644
--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -11,7 +11,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_genre_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -37,8 +37,8 @@
         <modal-dialog-genre
           :genre="genre"
           :media_kind="media_kind"
-          :show="show_genre_details_modal"
-          @close="show_genre_details_modal = false"
+          :show="show_details_modal"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -94,10 +94,10 @@ export default {
   },
   data() {
     return {
-      genre: {},
       albums_list: new GroupByList(),
+      genre: {},
       media_kind: this.$route.query.media_kind,
-      show_genre_details_modal: false
+      show_details_modal: false
     }
   },
   methods: {
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index c0ca69f8..7339d552 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -20,7 +20,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_genre_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -44,10 +44,10 @@
         </p>
         <list-tracks :tracks="tracks" :expression="expression" />
         <modal-dialog-genre
-          :show="show_genre_details_modal"
+          :show="show_details_modal"
           :genre="genre"
           :media_kind="media_kind"
-          @close="show_genre_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -123,7 +123,7 @@ export default {
         }
       ],
       media_kind: this.$route.query.media_kind,
-      show_genre_details_modal: false,
+      show_details_modal: false,
       tracks_list: new GroupByList()
     }
   },
diff --git a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
index 8015050e..13f0f193 100644
--- a/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
+++ b/web-src/src/pages/PageMusicSpotifyFeaturedPlaylists.vue
@@ -25,9 +25,9 @@
           </template>
         </list-item-playlist-spotify>
         <modal-dialog-playlist-spotify
-          :show="show_playlist_details_modal"
+          :show="show_details_modal"
           :playlist="selected_playlist"
-          @close="show_playlist_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -88,8 +88,8 @@ export default {
 
   data() {
     return {
-      show_playlist_details_modal: false,
-      selected_playlist: {}
+      selected_playlist: {},
+      show_details_modal: false
     }
   },
 
@@ -102,7 +102,7 @@ export default {
   methods: {
     open_playlist_dialog(playlist) {
       this.selected_playlist = playlist
-      this.show_playlist_details_modal = true
+      this.show_details_modal = true
     }
   }
 }
diff --git a/web-src/src/pages/PageMusicSpotifyNewReleases.vue b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
index 897bebbe..4732ce72 100644
--- a/web-src/src/pages/PageMusicSpotifyNewReleases.vue
+++ b/web-src/src/pages/PageMusicSpotifyNewReleases.vue
@@ -33,9 +33,9 @@
           </template>
         </list-item-album-spotify>
         <modal-dialog-album-spotify
-          :show="show_album_details_modal"
+          :show="show_details_modal"
           :album="selected_album"
-          @close="show_album_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -98,7 +98,7 @@ export default {
 
   data() {
     return {
-      show_album_details_modal: false,
+      show_details_modal: false,
       selected_album: {}
     }
   },
@@ -126,7 +126,7 @@ export default {
 
     open_album_dialog(album) {
       this.selected_album = album
-      this.show_album_details_modal = true
+      this.show_details_modal = true
     },
 
     artwork_url(album) {
diff --git a/web-src/src/pages/PagePlaylistTracks.vue b/web-src/src/pages/PagePlaylistTracks.vue
index 9dd41346..4f4702cc 100644
--- a/web-src/src/pages/PagePlaylistTracks.vue
+++ b/web-src/src/pages/PagePlaylistTracks.vue
@@ -8,7 +8,7 @@
         <div class="buttons is-centered">
           <a
             class="button is-small is-light is-rounded"
-            @click="show_playlist_details_modal = true"
+            @click="show_details_modal = true"
           >
             <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
@@ -25,10 +25,10 @@
         />
         <list-tracks :tracks="tracks" :uris="uris" />
         <modal-dialog-playlist
-          :show="show_playlist_details_modal"
+          :show="show_details_modal"
           :playlist="playlist"
           :uris="uris"
-          @close="show_playlist_details_modal = false"
+          @close="show_details_modal = false"
         />
       </template>
     </content-with-heading>
@@ -76,8 +76,8 @@ export default {
   data() {
     return {
       playlist: {},
-      tracks: new GroupByList(),
-      show_playlist_details_modal: false
+      show_details_modal: false,
+      tracks: new GroupByList()
     }
   },