From 5e85e0b024a418e795551fecaa60a356f53baeae Mon Sep 17 00:00:00 2001 From: chme Date: Sat, 15 Dec 2018 09:56:09 +0100 Subject: [PATCH] [web-src] Refactor details modal dialogs into separate components This will allow to open a dialog outside of the ListItem component. Also reduces the size of the generated DOM tree by only including one dialog per page (per object type) and not for each list item. --- web-src/src/components/ListItemAlbum.vue | 69 +--------- web-src/src/components/ListItemArtist.vue | 69 +--------- web-src/src/components/ListItemGenre.vue | 76 +--------- web-src/src/components/ListItemPlaylist.vue | 64 +-------- web-src/src/components/ListItemQueueItem.vue | 70 +--------- web-src/src/components/ListItemTrack.vue | 113 +-------------- web-src/src/components/ModalDialogAlbum.vue | 93 +++++++++++++ web-src/src/components/ModalDialogArtist.vue | 78 +++++++++++ web-src/src/components/ModalDialogGenre.vue | 74 ++++++++++ .../src/components/ModalDialogPlaylist.vue | 74 ++++++++++ .../src/components/ModalDialogQueueItem.vue | 84 +++++++++++ web-src/src/components/ModalDialogTrack.vue | 130 ++++++++++++++++++ web-src/src/pages/PageAlbum.vue | 22 ++- web-src/src/pages/PageAlbums.vue | 22 ++- web-src/src/pages/PageArtist.vue | 22 ++- web-src/src/pages/PageArtists.vue | 22 ++- web-src/src/pages/PageAudiobook.vue | 22 ++- web-src/src/pages/PageAudiobooks.vue | 24 +++- web-src/src/pages/PageBrowse.vue | 40 +++++- web-src/src/pages/PageBrowseRecentlyAdded.vue | 24 +++- .../src/pages/PageBrowseRecentlyPlayed.vue | 24 +++- web-src/src/pages/PageGenre.vue | 24 +++- web-src/src/pages/PageGenreTracks.vue | 22 ++- web-src/src/pages/PageGenres.vue | 22 ++- web-src/src/pages/PagePlaylist.vue | 22 ++- web-src/src/pages/PagePlaylists.vue | 24 +++- web-src/src/pages/PagePodcast.vue | 22 ++- web-src/src/pages/PagePodcasts.vue | 24 +++- web-src/src/pages/PageQueue.vue | 29 +++- web-src/src/pages/PageSearch.vue | 76 +++++++++- web-src/src/pages/PageTracks.vue | 22 ++- 31 files changed, 997 insertions(+), 506 deletions(-) create mode 100644 web-src/src/components/ModalDialogAlbum.vue create mode 100644 web-src/src/components/ModalDialogArtist.vue create mode 100644 web-src/src/components/ModalDialogGenre.vue create mode 100644 web-src/src/components/ModalDialogPlaylist.vue create mode 100644 web-src/src/components/ModalDialogQueueItem.vue create mode 100644 web-src/src/components/ModalDialogTrack.vue diff --git a/web-src/src/components/ListItemAlbum.vue b/web-src/src/components/ListItemAlbum.vue index 8d2d033e..4c9fa269 100644 --- a/web-src/src/components/ListItemAlbum.vue +++ b/web-src/src/components/ListItemAlbum.vue @@ -5,56 +5,15 @@

{{ album.artist }}

- - - - - - +
+ + diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue new file mode 100644 index 00000000..b89ac3f8 --- /dev/null +++ b/web-src/src/components/ModalDialogArtist.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue new file mode 100644 index 00000000..ec81f2e0 --- /dev/null +++ b/web-src/src/components/ModalDialogGenre.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue new file mode 100644 index 00000000..8d7df91f --- /dev/null +++ b/web-src/src/components/ModalDialogPlaylist.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue new file mode 100644 index 00000000..3c43f67b --- /dev/null +++ b/web-src/src/components/ModalDialogQueueItem.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue new file mode 100644 index 00000000..47e197a2 --- /dev/null +++ b/web-src/src/components/ModalDialogTrack.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue index 4992e870..889c75bd 100644 --- a/web-src/src/pages/PageAlbum.vue +++ b/web-src/src/pages/PageAlbum.vue @@ -18,7 +18,14 @@ @@ -27,6 +34,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' +import ModalDialogTrack from '@/components/ModalDialogTrack' import webapi from '@/webapi' const albumData = { @@ -46,12 +54,15 @@ const albumData = { export default { name: 'PageAlbum', mixins: [ LoadDataBeforeEnterMixin(albumData) ], - components: { ContentWithHeading, ListItemTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, data () { return { album: {}, - tracks: [] + tracks: [], + + show_details_modal: false, + selected_track: {} } }, @@ -63,6 +74,11 @@ export default { play: function () { webapi.player_play_uri(this.album.uri, true) + }, + + open_dialog: function (track) { + this.selected_track = track + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue index e41b108d..d44657d5 100644 --- a/web-src/src/pages/PageAlbums.vue +++ b/web-src/src/pages/PageAlbums.vue @@ -19,7 +19,14 @@ @@ -31,6 +38,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading' import TabsMusic from '@/components/TabsMusic' import IndexButtonList from '@/components/IndexButtonList' import ListItemAlbum from '@/components/ListItemAlbum' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' import * as types from '@/store/mutation_types' @@ -47,11 +55,14 @@ const albumsData = { export default { name: 'PageAlbums', mixins: [ LoadDataBeforeEnterMixin(albumsData) ], - components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemAlbum }, + components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemAlbum, ModalDialogAlbum }, data () { return { - albums: { items: [] } + albums: { items: [] }, + + show_details_modal: false, + selected_album: {} } }, @@ -74,6 +85,11 @@ export default { anchor: function (album, index) { return album.name_sort.charAt(0).toUpperCase() + }, + + open_dialog: function (album) { + this.selected_album = album + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue index f6ac1b54..5249832d 100644 --- a/web-src/src/pages/PageArtist.vue +++ b/web-src/src/pages/PageArtist.vue @@ -10,7 +10,14 @@ @@ -19,6 +26,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemAlbum from '@/components/ListItemAlbum' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' const artistData = { @@ -38,12 +46,15 @@ const artistData = { export default { name: 'PageArtist', mixins: [ LoadDataBeforeEnterMixin(artistData) ], - components: { ContentWithHeading, ListItemAlbum }, + components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum }, data () { return { artist: {}, - albums: {} + albums: {}, + + show_details_modal: false, + selected_album: {} } }, @@ -54,6 +65,11 @@ export default { play: function () { webapi.player_play_uri(this.albums.items.map(a => a.uri).join(','), true) + }, + + open_dialog: function (album) { + this.selected_album = album + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue index 9ddabea8..114f2e3d 100644 --- a/web-src/src/pages/PageArtists.vue +++ b/web-src/src/pages/PageArtists.vue @@ -19,7 +19,14 @@ @@ -31,6 +38,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading' import TabsMusic from '@/components/TabsMusic' import IndexButtonList from '@/components/IndexButtonList' import ListItemArtist from '@/components/ListItemArtist' +import ModalDialogArtist from '@/components/ModalDialogArtist' import webapi from '@/webapi' import * as types from '@/store/mutation_types' @@ -47,11 +55,14 @@ const artistsData = { export default { name: 'PageArtists', mixins: [ LoadDataBeforeEnterMixin(artistsData) ], - components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemArtist }, + components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemArtist, ModalDialogArtist }, data () { return { - artists: { items: [] } + artists: { items: [] }, + + show_details_modal: false, + selected_artist: {} } }, @@ -74,6 +85,11 @@ export default { anchor: function (artist, index) { return artist.name_sort.charAt(0).toUpperCase() + }, + + open_dialog: function (artist) { + this.selected_artist = artist + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageAudiobook.vue b/web-src/src/pages/PageAudiobook.vue index d54adf6a..0cfc188c 100644 --- a/web-src/src/pages/PageAudiobook.vue +++ b/web-src/src/pages/PageAudiobook.vue @@ -14,7 +14,14 @@ @@ -23,6 +30,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' +import ModalDialogTrack from '@/components/ModalDialogTrack' import webapi from '@/webapi' const albumData = { @@ -42,18 +50,26 @@ const albumData = { export default { name: 'PageAudiobook', mixins: [ LoadDataBeforeEnterMixin(albumData) ], - components: { ContentWithHeading, ListItemTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, data () { return { album: {}, - tracks: [] + tracks: [], + + show_details_modal: false, + selected_track: {} } }, methods: { play: function () { webapi.player_play_uri(this.album.uri, false) + }, + + open_dialog: function (track) { + this.selected_track = track + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageAudiobooks.vue b/web-src/src/pages/PageAudiobooks.vue index cc05e895..a51d580b 100644 --- a/web-src/src/pages/PageAudiobooks.vue +++ b/web-src/src/pages/PageAudiobooks.vue @@ -6,7 +6,14 @@

{{ albums.total }} audiobooks

@@ -16,6 +23,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemAlbum from '@/components/ListItemAlbum' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' const albumsData = { @@ -31,11 +39,21 @@ const albumsData = { export default { name: 'PageAudiobooks', mixins: [ LoadDataBeforeEnterMixin(albumsData) ], - components: { ContentWithHeading, ListItemAlbum }, + components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum }, data () { return { - albums: {} + albums: {}, + + show_details_modal: false, + selected_album: {} + } + }, + + methods: { + open_dialog: function (album) { + this.selected_album = album + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageBrowse.vue b/web-src/src/pages/PageBrowse.vue index a5568d85..be205f6c 100644 --- a/web-src/src/pages/PageBrowse.vue +++ b/web-src/src/pages/PageBrowse.vue @@ -9,7 +9,14 @@

albums

@@ -19,6 +26,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import TabsMusic from '@/components/TabsMusic' import ListItemAlbum from '@/components/ListItemAlbum' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' const browseData = { @@ -38,11 +46,21 @@ const browseData = { export default { name: 'PageBrowseType', mixins: [ LoadDataBeforeEnterMixin(browseData) ], - components: { ContentWithHeading, TabsMusic, ListItemAlbum }, + components: { ContentWithHeading, TabsMusic, ListItemAlbum, ModalDialogAlbum }, data () { return { - recently_added: {} + recently_added: {}, + + show_details_modal: false, + selected_album: {} + } + }, + + methods: { + open_dialog: function (album) { + this.selected_album = album + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageBrowseRecentlyPlayed.vue b/web-src/src/pages/PageBrowseRecentlyPlayed.vue index 6699b695..95af467b 100644 --- a/web-src/src/pages/PageBrowseRecentlyPlayed.vue +++ b/web-src/src/pages/PageBrowseRecentlyPlayed.vue @@ -8,7 +8,14 @@

tracks

@@ -19,6 +26,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import TabsMusic from '@/components/TabsMusic' import ListItemTrack from '@/components/ListItemTrack' +import ModalDialogTrack from '@/components/ModalDialogTrack' import webapi from '@/webapi' const browseData = { @@ -38,11 +46,21 @@ const browseData = { export default { name: 'PageBrowseType', mixins: [ LoadDataBeforeEnterMixin(browseData) ], - components: { ContentWithHeading, TabsMusic, ListItemTrack }, + components: { ContentWithHeading, TabsMusic, ListItemTrack, ModalDialogTrack }, data () { return { - recently_played: {} + recently_played: {}, + + show_details_modal: false, + selected_track: {} + } + }, + + methods: { + open_dialog: function (track) { + this.selected_track = track + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageGenre.vue b/web-src/src/pages/PageGenre.vue index fc216d9e..387ef764 100644 --- a/web-src/src/pages/PageGenre.vue +++ b/web-src/src/pages/PageGenre.vue @@ -10,8 +10,15 @@ @@ -22,6 +29,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import TabsMusic from '@/components/TabsMusic' import ListItemAlbums from '@/components/ListItemAlbum' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' const genreData = { @@ -52,13 +60,16 @@ const genreData = { export default { name: 'PageGenre', mixins: [ LoadDataBeforeEnterMixin(genreData) ], - components: { ContentWithHeading, TabsMusic, ListItemAlbums }, + components: { ContentWithHeading, TabsMusic, ListItemAlbums, ModalDialogAlbum }, data () { return { name: '', genreAlbums: {}, - links: [] + links: [], + + show_details_modal: false, + selected_album: {} } }, @@ -70,6 +81,11 @@ export default { play: function () { webapi.player_play_uri(this.genreAlbums.items.map(a => a.uri).join(','), true) + }, + + open_dialog: function (album) { + this.selected_album = album + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue index bf57c6a8..ef77362f 100644 --- a/web-src/src/pages/PageGenreTracks.vue +++ b/web-src/src/pages/PageGenreTracks.vue @@ -11,7 +11,14 @@ @@ -21,6 +28,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' +import ModalDialogTrack from '@/components/ModalDialogTrack' import webapi from '@/webapi' const tracksData = { @@ -37,13 +45,16 @@ const tracksData = { export default { name: 'PageGenreTracks', mixins: [ LoadDataBeforeEnterMixin(tracksData) ], - components: { ContentWithHeading, ListItemTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, data () { return { tracks: {}, genre: '', - links: [] + links: [], + + show_details_modal: false, + selected_track: {} } }, @@ -55,6 +66,11 @@ export default { play: function () { webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true) + }, + + open_dialog: function (track) { + this.selected_track = track + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue index e44ee948..eb98f378 100644 --- a/web-src/src/pages/PageGenres.vue +++ b/web-src/src/pages/PageGenres.vue @@ -11,7 +11,14 @@

{{ genres.total }} genres

@@ -23,6 +30,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading' import TabsMusic from '@/components/TabsMusic' import IndexButtonList from '@/components/IndexButtonList' import ListItemGenre from '@/components/ListItemGenre' +import ModalDialogGenre from '@/components/ModalDialogGenre' import webapi from '@/webapi' const genresData = { @@ -38,11 +46,14 @@ const genresData = { export default { name: 'PageGenres', mixins: [ LoadDataBeforeEnterMixin(genresData) ], - components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemGenre }, + components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemGenre, ModalDialogGenre }, data () { return { - genres: { items: [] } + genres: { items: [] }, + + show_details_modal: false, + selected_genre: {} } }, @@ -56,6 +67,11 @@ export default { methods: { anchor: function (genre, index) { return genre.name.charAt(0).toUpperCase() + }, + + open_dialog: function (genre) { + this.selected_genre = genre + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PagePlaylist.vue b/web-src/src/pages/PagePlaylist.vue index bdddadd4..35dbed91 100644 --- a/web-src/src/pages/PagePlaylist.vue +++ b/web-src/src/pages/PagePlaylist.vue @@ -10,7 +10,14 @@ @@ -19,6 +26,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' +import ModalDialogTrack from '@/components/ModalDialogTrack' import webapi from '@/webapi' const playlistData = { @@ -38,18 +46,26 @@ const playlistData = { export default { name: 'PagePlaylist', mixins: [ LoadDataBeforeEnterMixin(playlistData) ], - components: { ContentWithHeading, ListItemTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, data () { return { playlist: {}, - tracks: [] + tracks: [], + + show_details_modal: false, + selected_track: {} } }, methods: { play: function () { webapi.player_play_uri(this.playlist.uri, true) + }, + + open_dialog: function (track) { + this.selected_track = track + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PagePlaylists.vue b/web-src/src/pages/PagePlaylists.vue index 578251ad..7497980e 100644 --- a/web-src/src/pages/PagePlaylists.vue +++ b/web-src/src/pages/PagePlaylists.vue @@ -5,7 +5,14 @@

{{ playlists.total }} playlists

@@ -15,6 +22,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import TabsMusic from '@/components/TabsMusic' import ListItemPlaylist from '@/components/ListItemPlaylist' +import ModalDialogPlaylist from '@/components/ModalDialogPlaylist' import webapi from '@/webapi' const playlistsData = { @@ -30,11 +38,21 @@ const playlistsData = { export default { name: 'PagePlaylists', mixins: [ LoadDataBeforeEnterMixin(playlistsData) ], - components: { ContentWithHeading, TabsMusic, ListItemPlaylist }, + components: { ContentWithHeading, TabsMusic, ListItemPlaylist, ModalDialogPlaylist }, data () { return { - playlists: {} + playlists: {}, + + show_details_modal: false, + selected_playlist: {} + } + }, + + methods: { + open_dialog: function (playlist) { + this.selected_playlist = playlist + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue index d5b111a2..3ad77b16 100644 --- a/web-src/src/pages/PagePodcast.vue +++ b/web-src/src/pages/PagePodcast.vue @@ -13,7 +13,14 @@ @@ -22,6 +29,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemTrack from '@/components/ListItemTrack' +import ModalDialogTrack from '@/components/ModalDialogTrack' import webapi from '@/webapi' const albumData = { @@ -41,18 +49,26 @@ const albumData = { export default { name: 'PagePodcast', mixins: [ LoadDataBeforeEnterMixin(albumData) ], - components: { ContentWithHeading, ListItemTrack }, + components: { ContentWithHeading, ListItemTrack, ModalDialogTrack }, data () { return { album: {}, - tracks: [] + tracks: [], + + show_details_modal: false, + selected_track: {} } }, methods: { play: function () { webapi.player_play_uri(this.album.uri, false) + }, + + open_dialog: function (track) { + this.selected_track = track + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue index 4d8a15cd..743b1ce1 100644 --- a/web-src/src/pages/PagePodcasts.vue +++ b/web-src/src/pages/PagePodcasts.vue @@ -6,7 +6,14 @@

{{ albums.total }} podcasts

@@ -16,6 +23,7 @@ import { LoadDataBeforeEnterMixin } from './mixin' import ContentWithHeading from '@/templates/ContentWithHeading' import ListItemAlbum from '@/components/ListItemAlbum' +import ModalDialogAlbum from '@/components/ModalDialogAlbum' import webapi from '@/webapi' const albumsData = { @@ -31,11 +39,21 @@ const albumsData = { export default { name: 'PagePodcasts', mixins: [ LoadDataBeforeEnterMixin(albumsData) ], - components: { ContentWithHeading, ListItemAlbum }, + components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum }, data () { return { - albums: {} + albums: {}, + + show_details_modal: false, + selected_album: {} + } + }, + + methods: { + open_dialog: function (album) { + this.selected_album = album + this.show_details_modal = true } } } diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue index 542b2bc4..2fccd500 100644 --- a/web-src/src/pages/PageQueue.vue +++ b/web-src/src/pages/PageQueue.vue @@ -40,8 +40,18 @@ :key="item.id" :item="item" :position="index" :current_position="current_position" :show_only_next_items="show_only_next_items" - :edit_mode="edit_mode"> + :edit_mode="edit_mode"> + + + @@ -49,17 +59,21 @@