[web]S Streamline code of pages

owntone · Dec 7, 2023 · d0cd0c4 · d0cd0c4
1 parent 0940950
commit d0cd0c4
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 74 deletions.
diff --git 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
@@ -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
@@ -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,
-
-      show_details_modal: false,
       selected_album: {},
+      show_album_details_modal: false,
 
-      show_artist_details_modal: false
+      show_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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()
     }
   },