[web] Streamline name of component properties to prepare for refactoring

web-src/src/pages/PageAlbum.vue

@@ -33,7 +33,7 @@
           class="heading has-text-centered-mobile mt-5"
           v-text="$t('page.album.track-count', { count: album.track_count })"
         />
-        <list-tracks :tracks="tracks" :uris="album.uri" />
+        <list-tracks :items="tracks" :uris="album.uri" />
         <modal-dialog-album
           :show="show_details_modal"
           :album="album"
@@ -45,9 +45,9 @@
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import webapi from '@/webapi'

web-src/src/pages/PageAlbums.vue

@@ -56,7 +56,7 @@
       </template>
       <template #heading-right />
       <template #content>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
       </template>
     </content-with-heading>
   </div>
@@ -64,9 +64,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -119,7 +119,7 @@ export default {
           id: 2,
           name: this.$t('page.albums.sort.recently-added'),
           options: {
-            criteria: [{ field: 'time_added', type: Date, order: -1 }],
+            criteria: [{ field: 'time_added', order: -1, type: Date }],
             index: { field: 'time_added', type: Date }
           }
         },
@@ -127,7 +127,7 @@ export default {
           id: 3,
           name: this.$t('page.albums.sort.recently-released'),
           options: {
-            criteria: [{ field: 'date_released', type: Date, order: -1 }],
+            criteria: [{ field: 'date_released', order: -1, type: Date }],
             index: { field: 'date_released', type: Date }
           }
         },
@@ -170,20 +170,6 @@ export default {
 
       return this.albums_list
     },
-
-    selected_grouping_option_id: {
-      get() {
-        return this.$store.state.albums_sort
-      },
-      set(value) {
-        this.$store.commit(types.ALBUMS_SORT, value)
-      }
-    },
-
-    spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
-    },
-
     hide_singles: {
       get() {
         return this.$store.state.hide_singles
@@ -192,7 +178,6 @@ export default {
         this.$store.commit(types.HIDE_SINGLES, value)
       }
     },
-
     hide_spotify: {
       get() {
         return this.$store.state.hide_spotify
@@ -200,6 +185,17 @@ export default {
       set(value) {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
+    },
+    selected_grouping_option_id: {
+      get() {
+        return this.$store.state.albums_sort
+      },
+      set(value) {
+        this.$store.commit(types.ALBUMS_SORT, value)
+      }
+    },
+    spotify_enabled() {
+      return this.$store.state.spotify.webapi_token_valid
     }
   }
 }

web-src/src/pages/PageArtist.vue

@@ -59,7 +59,7 @@
             v-text="$t('page.artist.track-count', { count: track_count })"
           />
         </p>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-artist
           :show="show_details_modal"
           :artist="artist"
@@ -72,9 +72,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import webapi from '@/webapi'
@@ -117,8 +117,8 @@ export default {
 
   data() {
     return {
-      artist: {},
       albums_list: new GroupedList(),
+      artist: {},
       grouping_options: [
         {
           id: 1,
@@ -181,7 +181,6 @@ export default {
         params: { id: this.artist.id }
       })
     },
-
     play() {
       webapi.player_play_uri(
         this.albums.items.map((a) => a.uri).join(','),

web-src/src/pages/PageArtistSpotify.vue

@@ -26,7 +26,7 @@
         <list-item-album-spotify
           v-for="album in albums"
           :key="album.id"
-          :album="album"
+          :item="album"
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>
@@ -157,6 +157,17 @@ export default {
   },
 
   methods: {
+    append_albums(data) {
+      this.albums = this.albums.concat(data.items)
+      this.total = data.total
+      this.offset += data.limit
+    },
+    artwork_url(album) {
+      if (album.images && album.images.length > 0) {
+        return album.images[0].url
+      }
+      return ''
+    },
     load_next({ loaded }) {
       const spotifyApi = new SpotifyWebApi()
       spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
@@ -171,35 +182,19 @@ export default {
           loaded(data.items.length, PAGE_SIZE)
         })
     },
-
-    append_albums(data) {
-      this.albums = this.albums.concat(data.items)
-      this.total = data.total
-      this.offset += data.limit
-    },
-
-    play() {
-      this.show_album_details_modal = false
-      webapi.player_play_uri(this.artist.uri, true)
-    },
-
     open_album(album) {
       this.$router.push({
         name: 'music-spotify-album',
         params: { id: album.id }
       })
     },
-
     open_dialog(album) {
       this.selected_album = album
       this.show_album_details_modal = true
     },
-
-    artwork_url(album) {
-      if (album.images && album.images.length > 0) {
-        return album.images[0].url
-      }
-      return ''
+    play() {
+      this.show_album_details_modal = false
+      webapi.player_play_uri(this.artist.uri, true)
     }
   }
 }

web-src/src/pages/PageArtistTracks.vue

@@ -60,7 +60,7 @@
             v-text="$t('page.artist.track-count', { count: tracks.count })"
           />
         </p>
-        <list-tracks :tracks="tracks" :uris="track_uris" />
+        <list-tracks :items="tracks" :uris="track_uris" />
         <modal-dialog-artist
           :show="show_details_modal"
           :artist="artist"
@@ -73,9 +73,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
@@ -168,6 +168,9 @@ export default {
     spotify_enabled() {
       return this.$store.state.spotify.webapi_token_valid
     },
+    track_uris() {
+      return this.tracks_list.items.map((a) => a.uri).join(',')
+    },
     tracks() {
       const grouping = this.grouping_options.find(
         (o) => o.id === this.selected_grouping_option_id
@@ -177,9 +180,6 @@ export default {
       ]
       this.tracks_list.group(grouping.options)
       return this.tracks_list
-    },
-    track_uris() {
-      return this.tracks_list.items.map((a) => a.uri).join(',')
     }
   },
 
@@ -191,7 +191,6 @@ export default {
         params: { id: this.artist.id }
       })
     },
-
     play() {
       webapi.player_play_uri(
         this.tracks_list.items.map((a) => a.uri).join(','),

web-src/src/pages/PageArtists.vue

@@ -56,7 +56,7 @@
       </template>
       <template #heading-right />
       <template #content>
-        <list-artists :artists="artists" />
+        <list-artists :items="artists" />
       </template>
     </content-with-heading>
   </div>
@@ -64,9 +64,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -133,7 +133,6 @@ export default {
       if (!this.artists_list) {
         return []
       }
-
       const grouping = this.grouping_options.find(
         (o) => o.id === this.selected_grouping_option_id
       )
@@ -143,23 +142,8 @@ export default {
         (artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
       ]
       this.artists_list.group(grouping.options)
-
       return this.artists_list
     },
-
-    selected_grouping_option_id: {
-      get() {
-        return this.$store.state.artists_sort
-      },
-      set(value) {
-        this.$store.commit(types.ARTISTS_SORT, value)
-      }
-    },
-
-    spotify_enabled() {
-      return this.$store.state.spotify.webapi_token_valid
-    },
-
     hide_singles: {
       get() {
         return this.$store.state.hide_singles
@@ -168,7 +152,6 @@ export default {
         this.$store.commit(types.HIDE_SINGLES, value)
       }
     },
-
     hide_spotify: {
       get() {
         return this.$store.state.hide_spotify
@@ -176,6 +159,17 @@ export default {
       set(value) {
         this.$store.commit(types.HIDE_SPOTIFY, value)
       }
+    },
+    selected_grouping_option_id: {
+      get() {
+        return this.$store.state.artists_sort
+      },
+      set(value) {
+        this.$store.commit(types.ARTISTS_SORT, value)
+      }
+    },
+    spotify_enabled() {
+      return this.$store.state.spotify.webapi_token_valid
     }
   }
 }

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -37,7 +37,7 @@
             })
           "
         />
-        <list-tracks :tracks="tracks" :uris="album.uri" />
+        <list-tracks :items="tracks" :uris="album.uri" />
         <modal-dialog-album
           :show="show_details_modal"
           :album="album"
@@ -104,7 +104,6 @@ export default {
         params: { id: this.album.artist_id }
       })
     },
-
     play() {
       webapi.player_play_uri(this.album.uri, false)
     }

web-src/src/pages/PageAudiobooksAlbums.vue

@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
@@ -42,10 +42,10 @@ const dataObject = {
 export default {
   name: 'PageAudiobooksAlbums',
   components: {
-    TabsAudiobooks,
     ContentWithHeading,
     IndexButtonList,
-    ListAlbums
+    ListAlbums,
+    TabsAudiobooks
   },
 
   beforeRouteEnter(to, from, next) {

web-src/src/pages/PageAudiobooksArtist.vue

@@ -27,7 +27,7 @@
             })
           "
         />
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-artist
           :show="show_details_modal"
           :artist="artist"

web-src/src/pages/PageAudiobooksArtists.vue

@@ -14,15 +14,15 @@
       </template>
       <template #heading-right />
       <template #content>
-        <list-artists :artists="artists" />
+        <list-artists :items="artists" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
@@ -44,9 +44,9 @@ export default {
   name: 'PageAudiobooksArtists',
   components: {
     ContentWithHeading,
-    TabsAudiobooks,
     IndexButtonList,
-    ListArtists
+    ListArtists,
+    TabsAudiobooks
   },
 
   beforeRouteEnter(to, from, next) {

web-src/src/pages/PageAudiobooksGenres.vue

@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-genres :genres="genres" :media_kind="'audiobook'" />
+        <list-genres :items="genres" :media_kind="'audiobook'" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
 import TabsAudiobooks from '@/components/TabsAudiobooks.vue'

web-src/src/pages/PageComposerAlbums.vue

@@ -34,7 +34,7 @@
             "
           />
         </p>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-composer
           :show="show_details_modal"
           :composer="composer"
@@ -102,7 +102,6 @@ export default {
         params: { name: this.composer.name }
       })
     },
-
     play() {
       webapi.player_play_expression(
         `composer is "${this.composer.name}" and media_kind is music`,

web-src/src/pages/PageComposerTracks.vue

@@ -48,7 +48,7 @@
             "
           />
         </p>
-        <list-tracks :tracks="tracks" :expression="expression" />
+        <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-composer
           :show="show_details_modal"
           :composer="composer"
@@ -61,9 +61,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
@@ -158,7 +158,6 @@ export default {
         params: { name: this.composer.name }
       })
     },
-
     play() {
       webapi.player_play_expression(this.expression, true)
     }

web-src/src/pages/PageComposers.vue

@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-composers :composers="composers" />
+        <list-composers :items="composers" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListComposers from '@/components/ListComposers.vue'
 import TabsMusic from '@/components/TabsMusic.vue'

web-src/src/pages/PageFiles.vue

@@ -21,10 +21,10 @@
       </template>
       <template #content>
         <list-directories :directories="dirs" />
-        <list-playlists :playlists="playlists" />
+        <list-playlists :items="playlists" />
         <list-tracks
-          :tracks="tracks"
           :expression="play_expression"
+          :items="tracks"
           :show_icon="true"
         />
         <modal-dialog-directory
@@ -94,8 +94,8 @@ export default {
     return {
       dirs: [],
       playlists: new GroupedList(),
-      tracks: new GroupedList(),
-      show_details_modal: false
+      show_details_modal: false,
+      tracks: new GroupedList()
     }
   },
 
@@ -106,7 +106,6 @@ export default {
       }
       return '/'
     },
-
     play_expression() {
       return `path starts with "${this.current_directory}" order by path asc`
     }

web-src/src/pages/PageGenreAlbums.vue

@@ -33,7 +33,7 @@
             v-text="$t('page.genre.track-count', { count: genre.track_count })"
           />
         </p>
-        <list-albums :albums="albums" />
+        <list-albums :items="albums" />
         <modal-dialog-genre
           :genre="genre"
           :media_kind="media_kind"
@@ -46,8 +46,8 @@
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
@@ -106,7 +106,6 @@ export default {
         query: { media_kind: this.media_kind }
       })
     },
-
     play() {
       webapi.player_play_expression(
         `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`,

web-src/src/pages/PageGenreTracks.vue

@@ -42,7 +42,7 @@
             v-text="$t('page.genre.track-count', { count: genre.track_count })"
           />
         </p>
-        <list-tracks :tracks="tracks" :expression="expression" />
+        <list-tracks :items="tracks" :expression="expression" />
         <modal-dialog-genre
           :show="show_details_modal"
           :genre="genre"
@@ -56,9 +56,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'

web-src/src/pages/PageGenres.vue

@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-genres :genres="genres" :media_kind="'music'" />
+        <list-genres :items="genres" :media_kind="'music'" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
 import TabsMusic from '@/components/TabsMusic.vue'

web-src/src/pages/PageMusic.vue

@@ -7,7 +7,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-added.title')" />
       </template>
       <template #content>
-        <list-albums :albums="recently_added" />
+        <list-albums :items="recently_added" />
       </template>
       <template #footer>
         <nav class="level">
@@ -27,7 +27,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-played.title')" />
       </template>
       <template #content>
-        <list-tracks :tracks="recently_played" />
+        <list-tracks :items="recently_played" />
       </template>
       <template #footer>
         <nav class="level">
@@ -56,16 +56,16 @@ const dataObject = {
   load(to) {
     return Promise.all([
       webapi.search({
-        type: 'album',
         expression:
           'time_added after 8 weeks ago and media_kind is music having track_count > 3 order by time_added desc',
-        limit: 3
+        limit: 3,
+        type: 'album'
       }),
       webapi.search({
-        type: 'track',
         expression:
           'time_played after 8 weeks ago and media_kind is music order by time_played desc',
-        limit: 3
+        limit: 3,
+        type: 'track'
       })
     ])
   },

web-src/src/pages/PageMusicRecentlyAdded.vue

@@ -6,15 +6,15 @@
         <p class="title is-4" v-text="$t('page.music.recently-added.title')" />
       </template>
       <template #content>
-        <list-albums :albums="recently_added" />
+        <list-albums :items="recently_added" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
 import store from '@/store'
@@ -24,10 +24,10 @@ const dataObject = {
   load(to) {
     const limit = store.getters.settings_option_recently_added_limit
     return webapi.search({
-      type: 'album',
       expression:
         'media_kind is music having track_count > 3 order by time_added desc',
-      limit
+      limit,
+      type: 'album'
     })
   },
 

web-src/src/pages/PageMusicRecentlyPlayed.vue

@@ -6,7 +6,7 @@
         <p class="title is-4" v-text="$t('page.music.recently-played.title')" />
       </template>
       <template #content>
-        <list-tracks :tracks="recently_played" />
+        <list-tracks :items="recently_played" />
       </template>
     </content-with-heading>
   </div>
@@ -22,10 +22,10 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return webapi.search({
-      type: 'track',
       expression:
         'time_played after 8 weeks ago and media_kind is music order by time_played desc',
-      limit: 50
+      limit: 50,
+      type: 'track'
     })
   },
 

web-src/src/pages/PageMusicSpotifyNewReleases.vue

@@ -9,7 +9,7 @@
         <list-item-album-spotify
           v-for="album in new_releases"
           :key="album.id"
-          :album="album"
+          :item="album"
           @click="open_album(album)"
         >
           <template v-if="is_visible_artwork" #artwork>

web-src/src/pages/PagePlaylistFolder.vue

@@ -14,15 +14,15 @@
         />
       </template>
       <template #content>
-        <list-playlists :playlists="playlists" />
+        <list-playlists :items="playlists" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import { GroupedList } from '@/lib/GroupedList'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import webapi from '@/webapi'
 

web-src/src/pages/PagePlaylistTracks.vue

@@ -23,7 +23,7 @@
           class="heading has-text-centered-mobile"
           v-text="$t('page.playlist.track-count', { count: tracks.count })"
         />
-        <list-tracks :tracks="tracks" :uris="uris" />
+        <list-tracks :items="tracks" :uris="uris" />
         <modal-dialog-playlist
           :show="show_details_modal"
           :playlist="playlist"

web-src/src/pages/PagePodcasts.vue

@@ -14,7 +14,7 @@
       </template>
       <template #content>
         <list-tracks
-          :tracks="new_episodes"
+          :items="new_episodes"
           :show_progress="true"
           @play-count-changed="reload_new_episodes"
         />

web-src/src/pages/PageRadioStreams.vue

@@ -9,7 +9,7 @@
         />
       </template>
       <template #content>
-        <list-tracks :tracks="tracks" />
+        <list-tracks :items="tracks" />
       </template>
     </content-with-heading>
   </div>