[web] Fix modal dialogs not closing when opening artist or album page and renaming of views

Whenever an artist or album page is opened from a modal dialog, the latter is properly closed. Moreover, the views have been renamed for better maintainability.
2024-12-27 15:45:56 -05:00 · 2023-07-18 15:19:24 +02:00 · 2023-07-18 15:19:24 +02:00 · 9d62c94d86
commit 9d62c94d86
parent 34ea8115a8
12 changed files with 81 additions and 76 deletions
--- a/web-src/src/components/ListItemAlbumSpotify.vue
+++ b/web-src/src/components/ListItemAlbumSpotify.vue
@ -23,7 +23,7 @@

 <script>
 export default {
-  name: 'SpotifyListItemAlbum',
+  name: 'ListItemAlbumSpotify',
  props: ['album']
 }
 </script>
--- a/web-src/src/components/ListItemArtistSpotify.vue
+++ b/web-src/src/components/ListItemArtistSpotify.vue
@ -11,7 +11,7 @@

 <script>
 export default {
-  name: 'SpotifyListItemArtist',
+  name: 'ListItemArtistSpotify',
  props: ['artist'],

  methods: {
--- a/web-src/src/components/ListItemTrackSpotify.vue
+++ b/web-src/src/components/ListItemTrackSpotify.vue
@ -43,7 +43,7 @@
 import webapi from '@/webapi'

 export default {
-  name: 'SpotifyListItemTrack',
+  name: 'ListItemTrackSpotify',
  props: ['track', 'position', 'context_uri'],
  methods: {
    play() {
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@ -92,7 +92,7 @@ import CoverArtwork from '@/components/CoverArtwork.vue'
 import webapi from '@/webapi'

 export default {
-  name: 'SpotifyModalDialogAlbum',
+  name: 'ModalDialogAlbumSpotify',
  components: { CoverArtwork },
  props: ['show', 'album'],
  emits: ['close'],
@ -129,6 +129,7 @@ export default {
    },

    open_album() {
+      this.$emit('close')
      this.$router.push({
        name: 'music-spotify-album',
        params: { id: this.album.id }
@ -136,6 +137,7 @@ export default {
    },

    open_artist() {
+      this.$emit('close')
      this.$router.push({
        name: 'music-spotify-artist',
        params: { id: this.album.artists[0].id }
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@ -74,7 +74,7 @@
 import webapi from '@/webapi'

 export default {
-  name: 'SpotifyModalDialogArtist',
+  name: 'ModalDialogArtistSpotify',
  props: ['show', 'artist'],
  emits: ['close'],

@ -95,6 +95,7 @@ export default {
    },

    open_artist() {
+      this.$emit('close')
      this.$router.push({
        name: 'music-spotify-artist',
        params: { id: this.artist.id }
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@ -109,7 +109,7 @@
 import webapi from '@/webapi'

 export default {
-  name: 'SpotifyModalDialogTrack',
+  name: 'ModalDialogTrackSpotify',
  props: ['show', 'track', 'album'],
  emits: ['close'],

@ -130,6 +130,7 @@ export default {
    },

    open_album() {
+      this.$emit('close')
      this.$router.push({
        name: 'music-spotify-album',
        params: { id: this.album.id }
@ -137,6 +138,7 @@ export default {
    },

    open_artist() {
+      this.$emit('close')
      this.$router.push({
        name: 'music-spotify-artist',
        params: { id: this.album.artists[0].id }
--- a/web-src/src/pages/PageAlbumSpotify.vue
+++ b/web-src/src/pages/PageAlbumSpotify.vue
@ -39,7 +39,7 @@
            $t('page.spotify.album.track-count', { count: album.tracks.total })
          "
        />
-        <spotify-list-item-track
+        <list-item-track-spotify
          v-for="(track, index) in album.tracks.items"
          :key="track.id"
          :track="track"
@ -55,14 +55,14 @@
              />
            </a>
          </template>
-        </spotify-list-item-track>
-        <spotify-modal-dialog-track
+        </list-item-track-spotify>
+        <modal-dialog-track-spotify
          :show="show_track_details_modal"
          :track="selected_track"
          :album="album"
          @close="show_track_details_modal = false"
        />
-        <spotify-modal-dialog-album
+        <modal-dialog-album-spotify
          :show="show_album_details_modal"
          :album="album"
          @close="show_album_details_modal = false"
@ -75,9 +75,9 @@
 <script>
 import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
-import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
-import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
+import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
+import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
+import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import store from '@/store'
 import webapi from '@/webapi'
@ -101,9 +101,9 @@ export default {
  components: {
    ContentWithHero,
    CoverArtwork,
-    SpotifyListItemTrack,
-    SpotifyModalDialogTrack,
-    SpotifyModalDialogAlbum
+    ListItemTrackSpotify,
+    ModalDialogAlbumSpotify,
+    ModalDialogTrackSpotify
  },

  beforeRouteEnter(to, from, next) {
--- a/web-src/src/pages/PageArtistSpotify.vue
+++ b/web-src/src/pages/PageArtistSpotify.vue
@ -23,7 +23,7 @@
          class="heading has-text-centered-mobile"
          v-text="$t('page.spotify.artist.album-count', { count: total })"
        />
-        <spotify-list-item-album
+        <list-item-album-spotify
          v-for="album in albums"
          :key="album.id"
          :album="album"
@ -48,16 +48,16 @@
              />
            </a>
          </template>
-        </spotify-list-item-album>
+        </list-item-album-spotify>
        <VueEternalLoading v-if="offset < total" :load="load_next">
          <template #no-more> . </template>
        </VueEternalLoading>
-        <spotify-modal-dialog-album
+        <modal-dialog-album-spotify
          :show="show_details_modal"
          :album="selected_album"
          @close="show_details_modal = false"
        />
-        <spotify-modal-dialog-artist
+        <modal-dialog-artist-spotify
          :show="show_artist_details_modal"
          :artist="artist"
          @close="show_artist_details_modal = false"
@ -70,9 +70,9 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
-import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
-import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
+import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
+import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
+import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import store from '@/store'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
@ -110,9 +110,9 @@ export default {
  components: {
    ContentWithHeading,
    CoverArtwork,
-    SpotifyListItemAlbum,
-    SpotifyModalDialogAlbum,
-    SpotifyModalDialogArtist,
+    ListItemAlbumSpotify,
+    ModalDialogAlbumSpotify,
+    ModalDialogArtistSpotify,
    VueEternalLoading
  },

--- a/web-src/src/pages/PageBrowseSpotify.vue
+++ b/web-src/src/pages/PageBrowseSpotify.vue
@ -7,7 +7,7 @@
        <p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" />
      </template>
      <template #content>
-        <spotify-list-item-album
+        <list-item-album-spotify
          v-for="album in new_releases"
          :key="album.id"
          :album="album"
@ -32,8 +32,8 @@
              />
            </a>
          </template>
-        </spotify-list-item-album>
-        <spotify-modal-dialog-album
+        </list-item-album-spotify>
+        <modal-dialog-album-spotify
          :show="show_album_details_modal"
          :album="selected_album"
          @close="show_album_details_modal = false"
@ -100,10 +100,10 @@
 import * as types from '@/store/mutation_types'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
 import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
+import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
-import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
-import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import store from '@/store'
 import TabsMusic from '@/components/TabsMusic.vue'
@ -147,10 +147,10 @@ export default {
  components: {
    ContentWithHeading,
    CoverArtwork,
+    ListItemAlbumSpotify,
    ListItemPlaylistSpotify,
+    ModalDialogAlbumSpotify,
    ModalDialogPlaylistSpotify,
-    SpotifyListItemAlbum,
-    SpotifyModalDialogAlbum,
    TabsMusic
  },

--- a/web-src/src/pages/PageBrowseSpotifyNewReleases.vue
+++ b/web-src/src/pages/PageBrowseSpotifyNewReleases.vue
@ -6,7 +6,7 @@
        <p class="title is-4" v-text="$t('page.spotify.browse.new-releases')" />
      </template>
      <template #content>
-        <spotify-list-item-album
+        <list-item-album-spotify
          v-for="album in new_releases"
          :key="album.id"
          :album="album"
@ -31,8 +31,8 @@
              />
            </a>
          </template>
-        </spotify-list-item-album>
-        <spotify-modal-dialog-album
+        </list-item-album-spotify>
+        <modal-dialog-album-spotify
          :show="show_album_details_modal"
          :album="selected_album"
          @close="show_album_details_modal = false"
@ -43,14 +43,14 @@
 </template>

 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
-import TabsMusic from '@/components/TabsMusic.vue'
-import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
-import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
-import CoverArtwork from '@/components/CoverArtwork.vue'
-import store from '@/store'
 import * as types from '@/store/mutation_types'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import CoverArtwork from '@/components/CoverArtwork.vue'
+import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
+import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
+import store from '@/store'
+import TabsMusic from '@/components/TabsMusic.vue'

 const dataObject = {
  load(to) {
@ -74,12 +74,12 @@ const dataObject = {
 }

 export default {
-  name: 'SpotifyPageBrowseNewReleases',
+  name: 'PageBrowseSpotifyNewReleases',
  components: {
    ContentWithHeading,
    CoverArtwork,
-    SpotifyListItemAlbum,
-    SpotifyModalDialogAlbum,
+    ListItemAlbumSpotify,
+    ModalDialogAlbumSpotify,
    TabsMusic
  },

--- a/web-src/src/pages/PagePlaylistTracksSpotify.vue
+++ b/web-src/src/pages/PagePlaylistTracksSpotify.vue
@ -25,7 +25,7 @@
            $t('page.spotify.playlist.count', { count: playlist.tracks.total })
          "
        />
-        <spotify-list-item-track
+        <list-item-track-spotify
          v-for="track in tracks"
          :key="track.id"
          :track="track"
@ -41,11 +41,11 @@
              />
            </a>
          </template>
-        </spotify-list-item-track>
+        </list-item-track-spotify>
        <VueEternalLoading v-if="offset < total" :load="load_next">
          <template #no-more> . </template>
        </VueEternalLoading>
-        <spotify-modal-dialog-track
+        <modal-dialog-track-spotify
          :show="show_track_details_modal"
          :track="selected_track"
          :album="selected_track.album"
@ -63,9 +63,9 @@

 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
-import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
-import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
+import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import store from '@/store'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
@ -100,9 +100,9 @@ export default {
  name: 'PagePlaylistTracksSpotify',
  components: {
    ContentWithHeading,
+    ListItemTrackSpotify,
    ModalDialogPlaylistSpotify,
-    SpotifyListItemTrack,
-    SpotifyModalDialogTrack,
+    ModalDialogTrackSpotify,
    VueEternalLoading
  },

--- a/web-src/src/pages/PageSearchSpotify.vue
+++ b/web-src/src/pages/PageSearchSpotify.vue
@ -40,7 +40,7 @@
        <p class="title is-4" v-text="$t('page.spotify.search.tracks')" />
      </template>
      <template #content>
-        <spotify-list-item-track
+        <list-item-track-spotify
          v-for="track in tracks.items"
          :key="track.id"
          :track="track"
@ -56,14 +56,14 @@
              />
            </a>
          </template>
-        </spotify-list-item-track>
+        </list-item-track-spotify>
        <VueEternalLoading
          v-if="query.type === 'track'"
          :load="search_tracks_next"
        >
          <template #no-more> . </template>
        </VueEternalLoading>
-        <spotify-modal-dialog-track
+        <modal-dialog-track-spotify
          :show="show_track_details_modal"
          :track="selected_track"
          :album="selected_track.album"
@ -97,7 +97,7 @@
        <p class="title is-4" v-text="$t('page.spotify.search.artists')" />
      </template>
      <template #content>
-        <spotify-list-item-artist
+        <list-item-artist-spotify
          v-for="artist in artists.items"
          :key="artist.id"
          :artist="artist"
@ -111,14 +111,14 @@
              />
            </a>
          </template>
-        </spotify-list-item-artist>
+        </list-item-artist-spotify>
        <VueEternalLoading
          v-if="query.type === 'artist'"
          :load="search_artists_next"
        >
          <template #no-more> . </template>
        </VueEternalLoading>
-        <spotify-modal-dialog-artist
+        <modal-dialog-artist-spotify
          :show="show_artist_details_modal"
          :artist="selected_artist"
          @close="show_artist_details_modal = false"
@ -151,7 +151,7 @@
        <p class="title is-4" v-text="$t('page.spotify.search.albums')" />
      </template>
      <template #content>
-        <spotify-list-item-album
+        <list-item-album-spotify
          v-for="album in albums.items"
          :key="album.id"
          :album="album"
@ -176,14 +176,14 @@
              />
            </a>
          </template>
-        </spotify-list-item-album>
+        </list-item-album-spotify>
        <VueEternalLoading
          v-if="query.type === 'album'"
          :load="search_albums_next"
        >
          <template #no-more> . </template>
        </VueEternalLoading>
-        <spotify-modal-dialog-album
+        <modal-dialog-album-spotify
          :show="show_album_details_modal"
          :album="selected_album"
          @close="show_album_details_modal = false"
@ -272,18 +272,18 @@ import * as types from '@/store/mutation_types'
 import ContentText from '@/templates/ContentText.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import ListItemAlbumSpotify from '@/components/ListItemAlbumSpotify.vue'
+import ListItemArtistSpotify from '@/components/ListItemArtistSpotify.vue'
 import ListItemPlaylistSpotify from '@/components/ListItemPlaylistSpotify.vue'
+import ListItemTrackSpotify from '@/components/ListItemTrackSpotify.vue'
+import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
+import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
 import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
-import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum.vue'
-import SpotifyListItemArtist from '@/components/SpotifyListItemArtist.vue'
-import SpotifyListItemTrack from '@/components/SpotifyListItemTrack.vue'
-import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum.vue'
-import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist.vue'
-import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack.vue'
+import ModalDialogTrackSpotify from '@/components/ModalDialogTrackSpotify.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
+import TabsSearch from '@/components/TabsSearch.vue'
 import { VueEternalLoading } from '@ts-pro/vue-eternal-loading'
 import webapi from '@/webapi'
-import TabsSearch from '@/components/TabsSearch.vue'

 const PAGE_SIZE = 50

@ -293,16 +293,16 @@ export default {
    ContentText,
    ContentWithHeading,
    CoverArtwork,
+    ListItemAlbumSpotify,
+    ListItemArtistSpotify,
    ListItemPlaylistSpotify,
+    ListItemTrackSpotify,
+    ModalDialogAlbumSpotify,
+    ModalDialogArtistSpotify,
    ModalDialogPlaylistSpotify,
-    SpotifyListItemAlbum,
-    SpotifyListItemArtist,
-    SpotifyListItemTrack,
-    SpotifyModalDialogAlbum,
-    SpotifyModalDialogArtist,
-    SpotifyModalDialogTrack,
-    VueEternalLoading,
-    TabsSearch
+    ModalDialogTrackSpotify,
+    TabsSearch,
+    VueEternalLoading
  },

  data() {