[web-src] Refactor "recently added" - group in JS instead of doing 3 queries against the back end

web-src/src/components/SettingsIntfield.vue

@@ -10,7 +10,11 @@
             }"> {{ info }}</i>
       </label>
       <div class="control">
-        <input class="input" type="number" min="0" :placeholder="placeholder"
+        <input class="input"
+            type="number"
+            min="0"
+            style="width: 10em;"
+            :placeholder="placeholder"
             :value="value"
             @input="set_update_timer"
             ref="settings_number">

web-src/src/lib/Albums.js

@@ -19,6 +19,8 @@ export default class Albums {
   getAlbumIndex (album) {
     if (this.options.sort === 'Recently added') {
       return album.time_added.substring(0, 4)
+    } else if (this.options.sort === 'Recently added (browse)') {
+      return this.getRecentlyAddedBrowseIndex(album.time_added)
     } else if (this.options.sort === 'Recently released') {
       return album.date_released ? album.date_released.substring(0, 4) : '0000'
     } else if (this.options.sort === 'Release date') {
@@ -27,6 +29,23 @@ export default class Albums {
     return album.name_sort.charAt(0).toUpperCase()
   }
 
+  getRecentlyAddedBrowseIndex (recentlyAdded) {
+    if (!recentlyAdded) {
+      return '0000'
+    }
+
+    const diff = new Date().getTime() - new Date(recentlyAdded).getTime()
+
+    if (diff < 86400000) { // 24h
+      return 'Today'
+    } else if (diff < 604800000) { // 7 days
+      return 'Last week'
+    } else if (diff < 2592000000) { // 30 days
+      return 'Last month'
+    }
+    return recentlyAdded.substring(0, 4)
+  }
+
   isAlbumVisible (album) {
     if (this.options.hideSingles && album.track_count <= 2) {
       return false
@@ -47,7 +66,7 @@ export default class Albums {
     if (this.options.hideSingles || this.options.hideSpotify || this.options.hideOther) {
       albumsSorted = albumsSorted.filter(album => this.isAlbumVisible(album))
     }
-    if (this.options.sort === 'Recently added') {
+    if (this.options.sort === 'Recently added' || this.options.sort === 'Recently added (browse)') {
       albumsSorted = [...albumsSorted].sort((a, b) => b.time_added.localeCompare(a.time_added))
     } else if (this.options.sort === 'Recently released') {
       albumsSorted = [...albumsSorted].sort((a, b) => {

web-src/src/pages/PageBrowseRecentlyAdded.vue

@@ -5,79 +5,10 @@
     <content-with-heading>
       <template slot="heading-left">
         <p class="title is-4">Recently added</p>
-        <p class="heading">{{ recently_added }} albums</p>
+        <p class="heading">albums</p>
-      </template>
-    </content-with-heading>
-
-    <content-with-heading v-if="show_recent_today && recently_added_today.items.length">
-      <template slot="heading-left">
-        <p class="title is-6">Today</p>
-        <p class="heading">{{ recently_added_today.items.length }} albums</p>
-      </template>
-      <template slot="heading-right">
-        <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_modal_today = true">
-            <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
-          </a>
-        </div>
       </template>
       <template slot="content">
-        <list-albums :albums="recently_added_today.items"></list-albums>
+        <list-albums :albums="albums_list"></list-albums>
-        <modal-dialog-albums :show="show_modal_today" title='Recently Added - Today' :albums="recently_added_today" @close="show_modal_today = false" />
-      </template>
-    </content-with-heading>
-
-    <content-with-heading v-if="show_recent_week && recently_added_week.items.length">
-      <template slot="heading-left">
-        <p class="title is-6">This Week</p>
-        <p class="heading">{{ recently_added_week.items.length }} albums</p>
-      </template>
-      <template slot="heading-right">
-        <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_modal_week = true">
-            <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
-          </a>
-        </div>
-      </template>
-      <template slot="content">
-        <list-albums :albums="recently_added_week.items"></list-albums>
-        <modal-dialog-albums :show="show_modal_week" title='Recently Added - Past Week' :albums="recently_added_week" @close="show_modal_week = false" />
-      </template>
-    </content-with-heading>
-
-    <content-with-heading v-if="show_recent_month && recently_added_month.items.length">
-      <template slot="heading-left">
-        <p class="title is-6">This Month </p>
-        <p class="heading">{{ recently_added_month.items.length }} albums</p>
-      </template>
-      <template slot="heading-right">
-        <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_modal_month = true">
-            <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
-          </a>
-        </div>
-      </template>
-      <template slot="content">
-        <list-albums :albums="recently_added_month.items"></list-albums>
-        <modal-dialog-albums :show="show_modal_month" title='Recently Added - Past Month' :albums="recently_added_month" @close="show_modal_month = false" />
-      </template>
-    </content-with-heading>
-
-    <content-with-heading v-if="show_recent_older && recently_added_older.items.length">
-      <template slot="heading-left">
-        <p class="title is-6">Older</p>
-        <p class="heading">{{ recently_added_older.items.length }} albums</p>
-      </template>
-      <template slot="heading-right">
-        <div class="buttons is-centered">
-          <a class="button is-small is-light is-rounded" @click="show_modal_older = true">
-            <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
-          </a>
-        </div>
-      </template>
-      <template slot="content">
-        <list-albums :albums="recently_added_older.items"></list-albums>
-        <modal-dialog-albums :show="show_modal_older" title='Recently Added - Older than Month' :albums="recently_added_older" @close="show_modal_older = false" />
       </template>
     </content-with-heading>
   </div>
@@ -88,86 +19,44 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import ListAlbums from '@/components/ListAlbums'
-import ModalDialogAlbums from '@/components/ModalDialogAlbums'
 import webapi from '@/webapi'
 import store from '@/store'
+import Albums from '@/lib/Albums'
 
 const browseData = {
   load: function (to) {
-    const recentlyAddedLimit = store.getters.settings_option_recently_added_limit
+    const limit = store.getters.settings_option_recently_added_limit
-    return Promise.all([
+    return webapi.search({
-      webapi.search({
       type: 'album',
-        expression: 'time_added after today and media_kind is music order by time_added desc',
+      expression: 'media_kind is music having track_count > 3 order by time_added desc',
-        limit: recentlyAddedLimit
+      limit: limit
-      }),
-      webapi.search({
-        type: 'album',
-        expression: 'time_added after this week and media_kind is music order by time_added desc',
-        limit: recentlyAddedLimit
-      }),
-      webapi.search({
-        type: 'album',
-        expression: 'time_added after last month and media_kind is music order by time_added desc',
-        limit: recentlyAddedLimit
     })
-    ])
   },
 
   set: function (vm, response) {
-    vm.recently_added_today = response[0].data.albums
+    vm.recently_added = response.data.albums
-    vm.recently_added_week = response[1].data.albums
-    vm.recently_added_month = response[2].data.albums
   }
 }
 
 export default {
   name: 'PageBrowseType',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, ListAlbums, ModalDialogAlbums },
+  components: { ContentWithHeading, TabsMusic, ListAlbums },
 
   data () {
     return {
-      recently_added_today: { items: [] },
+      recently_added: { items: [] }
-      recently_added_week: { items: [] },
-      recently_added_month: { items: [] },
-      recently_added_older: { items: [] },
-
-      show_modal_today: false,
-      show_modal_week: false,
-      show_modal_month: false,
-      show_modal_older: false
-    }
-  },
-
-  mounted () {
-    const more = store.getters.settings_option_recently_added_limit - this.recently_added_month.items.length
-    if (more) {
-      webapi.search({
-        type: 'album',
-        expression: 'time_added before last month and media_kind is music order by time_added desc',
-        limit: more
-      }).then(({ data }) => {
-        this.recently_added_older = data.albums
-      })
     }
   },
 
   computed: {
-    show_recent_today () {
+    albums_list () {
-      return this.recently_added_today.items.length > 0
+      return new Albums(this.recently_added.items, {
-    },
+        hideSingles: false,
-    show_recent_week () {
+        hideSpotify: false,
-      return this.recently_added_week.items.length > 0
+        sort: 'Recently added (browse)',
-    },
+        group: true
-    show_recent_month () {
+      })
-      return this.recently_added_month.items.length > 0
-    },
-    show_recent_older () {
-      return this.recently_added_older.items.length > 0
-    },
-    recently_added () {
-      return this.recently_added_older.items.length + this.recently_added_month.items.length
     }
   }
 }

web-src/src/pages/SettingsPageWebinterface.vue

@@ -83,12 +83,12 @@
 
     <content-with-heading>
       <template slot="heading-left">
-        <div class="title is-4">Recently Added</div>
+        <div class="title is-4">Recently added page</div>
       </template>
 
       <template slot="content">
         <settings-intfield category_name="webinterface" option_name="recently_added_limit">
-          <template slot="label"> Limit on number of albums to show on 'Recently Added' page</template>
+          <template slot="label">Limit the number of albums shown on the "Recently Added" page</template>
         </settings-intfield>
       </template>
     </content-with-heading>