From be9cbfb9e60abec872ad10340b12a6d5ecc4b614 Mon Sep 17 00:00:00 2001
From: GGrandma <elliot.sanbower@gmail.com>
Date: Sun, 19 Dec 2021 14:37:52 -0600
Subject: [PATCH 1/5] add recentlyadded view & update sorting function

---
 src/renderer/index.js                         | 72 ++++++++-----------
 src/renderer/views/main.ejs                   |  6 +-
 src/renderer/views/pages/library-albums.ejs   |  4 +-
 .../views/pages/library-recentlyadded.ejs     | 49 +++++++++++++
 4 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 1a743a6a..d18e0453 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -172,11 +172,12 @@ const app = new Vue({
                     "artistName": "Artist",
                     "name": "Name",
                     "genre": "Genre",
-                    "releaseDate": "Release Date"
+                    "releaseDate": "Release Date",
+                    "dateAdded": "Date Added"
                 },
                 viewAs: 'covers',
-                sorting: "name",
-                sortOrder: "asc",
+                sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page
+                sortOrder: ["desc", "asc"], // [0] = recentlyadded page, [1] = albums page
                 listing: [],
                 meta: {total: 0, progress: 0},
                 search: "",
@@ -847,58 +848,45 @@ const app = new Vue({
             }
         },
         // make a copy of searchLibrarySongs except use Albums instead of Songs
-        searchLibraryAlbums() {
+        searchLibraryAlbums(index) {
             let self = this
 
             function sortAlbums() {
-                if (self.library.albums.sortOrder == "asc") {
-                    // sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in ascending order based on alphabetical order and numeric order
-                    // check if album.attributes[self.library.albums.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
-                    self.library.albums.displayListing.sort((a, b) => {
-                        let aa = null;
-                        let bb = null;
-                        if (self.library.albums.sorting == "genre") {
-                            aa = a.attributes.genreNames[0]
-                            bb = b.attributes.genreNames[0]
-                        }
-                        aa = a.attributes[self.library.albums.sorting]
-                        bb = b.attributes[self.library.albums.sorting]
-                        if (aa == null) {
-                            aa = ""
-                        }
-                        if (bb == null) {
-                            bb = ""
-                        }
+                // sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting[index]] in descending or ascending order based on alphabetical order and numeric order
+                // check if album.attributes[self.library.albums.sorting[index]] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
+                let aa = null;
+                let bb = null;
+                self.library.albums.displayListing.sort((a, b) => {
+                    if (self.library.albums.sorting[index] == "genre") {
+                        aa = a.attributes.genreNames[0]
+                        bb = b.attributes.genreNames[0]
+                    }
+                    if (self.library.albums.sorting[index] == "dateAdded") {
+                        aa = new Date(a.attributes.dateAdded).getTime()
+                        bb = new Date(b.attributes.dateAdded).getTime()
+                    }
+                    aa = a.attributes[self.library.albums.sorting[index]]
+                    bb = b.attributes[self.library.albums.sorting[index]]
+                    if (aa == null) {
+                        aa = ""
+                    }
+                    if (bb == null) {
+                        bb = ""
+                    }
+                    if (self.library.albums.sortOrder[index] == "asc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return aa - bb
                         } else {
                             return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
                         }
-                    })
-                }
-                if (self.library.albums.sortOrder == "desc") {
-                    // sort this.library.albums.displayListing by album.attributes[self.library.albums.sorting] in descending order based on alphabetical order and numeric order
-                    // check if album.attributes[self.library.albums.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
-                    self.library.albums.displayListing.sort((a, b) => {
-                        if (self.library.albums.sorting == "genre") {
-                            aa = a.attributes.genreNames[0]
-                            bb = b.attributes.genreNames[0]
-                        }
-                        let aa = a.attributes[self.library.albums.sorting]
-                        let bb = b.attributes[self.library.albums.sorting]
-                        if (aa == null) {
-                            aa = ""
-                        }
-                        if (bb == null) {
-                            bb = ""
-                        }
+                    } else if (self.library.albums.sortOrder[index] == "desc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return bb - aa
                         } else {
                             return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
                         }
-                    })
-                }
+                    }
+                })
             }
 
             if (this.library.albums.search == "") {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 950b07d9..ddcd15dd 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -366,12 +366,16 @@
                         <cider-search :search="search"></cider-search>
                     </template>
                 </transition>
+                <!-- Library - Recently Added -->
+                <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(0);">
+                    <%- include('pages/library-recentlyadded') %>');
+                </transition>
                 <!-- Library - Songs -->
                 <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
                     <%- include('pages/library-songs') %>
                 </transition>
                 <!-- Library - Albums -->
-                <transition name="wpfade" v-on:enter="getLibraryAlbumsFull()">
+                <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(1);">
                     <%- include('pages/library-albums') %>');
                     %>
                 </transition>
diff --git a/src/renderer/views/pages/library-albums.ejs b/src/renderer/views/pages/library-albums.ejs
index c5951034..cdacfe65 100644
--- a/src/renderer/views/pages/library-albums.ejs
+++ b/src/renderer/views/pages/library-albums.ejs
@@ -23,14 +23,14 @@
             <div class="col-auto flex-center">
                 <div class="row">
                     <div class="col">
-                        <select class="md-select" v-model="library.albums.sorting" @change="searchLibraryAlbums()">
+                        <select class="md-select" v-model="library.albums.sorting[1]" @change="searchLibraryAlbums(1)">
                             <optgroup label="Sort By">
                                 <option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option>
                             </optgroup>
                         </select>
                     </div>
                     <div class="col">
-                        <select class="md-select" v-model="library.albums.sortOrder" @change="searchLibraryAlbums()">
+                        <select class="md-select" v-model="library.albums.sortOrder[1]" @change="searchLibraryAlbums(1)">
                             <optgroup label="Sort Order">
                                 <option value="asc">Ascending</option>
                                 <option value="desc">Descending</option>
diff --git a/src/renderer/views/pages/library-recentlyadded.ejs b/src/renderer/views/pages/library-recentlyadded.ejs
index e69de29b..f4426eed 100644
--- a/src/renderer/views/pages/library-recentlyadded.ejs
+++ b/src/renderer/views/pages/library-recentlyadded.ejs
@@ -0,0 +1,49 @@
+<template v-if="page == 'library-recentlyadded'">
+    <div class="content-inner">
+        <div class="row">
+            <div class="col" style="padding:0px;">
+                <h1 class="header-text">Recently Added</h1>
+            </div>
+            <div class="col-auto">
+                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col" style="padding:0px;">
+                <div class="search-input-container" style="width:100%;margin: 16px 0px;">
+                    <div class="search-input--icon"></div>
+                    <input type="search"
+                           style="width:100%;"
+                           spellcheck="false"
+                           placeholder="Search..."
+                           @input="searchLibraryAlbums"
+                           v-model="library.albums.search" class="search-input">
+                </div>
+            </div>
+            <div class="col-auto flex-center">
+                <div class="row">
+                    <div class="col">
+                        <select class="md-select" v-model="library.albums.sortOrder[0]" @change="searchLibraryAlbums(0)">
+                            <optgroup label="Sort Order">
+                                <option value="asc">Ascending</option>
+                                <option value="desc">Descending</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                    <div class="col">
+                        <select class="md-select" v-model="library.albums.viewAs">
+                            <optgroup label="View As">
+                                <option value="covers">Cover Art</option>
+                                <option value="list">List</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <mediaitem-square-large v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
+        </mediaitem-square-large>
+        <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
+        </mediaitem-list-item>
+    </div>
+</template>
\ No newline at end of file

From 32cb85481d9472b81852f68fc571c64423434e24 Mon Sep 17 00:00:00 2001
From: GGrandma <elliot.sanbower@gmail.com>
Date: Sun, 19 Dec 2021 14:55:13 -0600
Subject: [PATCH 2/5] fix album sorting on refresh

---
 src/renderer/index.js                              | 8 ++++----
 src/renderer/views/pages/library-albums.ejs        | 2 +-
 src/renderer/views/pages/library-recentlyadded.ejs | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index d18e0453..42c1ffbe 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1030,7 +1030,7 @@ const app = new Vue({
             downloadChunk()
         },
         // copy the getLibrarySongsFull function except change Songs to Albums
-        async getLibraryAlbumsFull(force = false) {
+        async getLibraryAlbumsFull(force = false, index) {
             let self = this
             let library = []
             let downloaded = null;
@@ -1039,7 +1039,7 @@ const app = new Vue({
             }
             if (localStorage.getItem("libraryAlbums") != null) {
                 this.library.albums.listing = JSON.parse(localStorage.getItem("libraryAlbums"))
-                this.searchLibraryAlbums()
+                this.searchLibraryAlbums(index)
             }
             if (this.songstest) {
                 return
@@ -1078,7 +1078,7 @@ const app = new Vue({
                     self.library.albums.downloadState = 2
                     self.library.downloadNotification.show = false
                     localStorage.setItem("libraryAlbums", JSON.stringify(library))
-                    self.searchLibraryAlbums()
+                    self.searchLibraryAlbums(index)
                 }
                 if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
                     console.log(`downloading next chunk - ${library.length
@@ -1089,7 +1089,7 @@ const app = new Vue({
                     self.library.albums.downloadState = 2
                     self.library.downloadNotification.show = false
                     localStorage.setItem("libraryAlbums", JSON.stringify(library))
-                    self.searchLibraryAlbums()
+                    self.searchLibraryAlbums(index)
                     console.log(library)
                 }
             }
diff --git a/src/renderer/views/pages/library-albums.ejs b/src/renderer/views/pages/library-albums.ejs
index cdacfe65..643da2e1 100644
--- a/src/renderer/views/pages/library-albums.ejs
+++ b/src/renderer/views/pages/library-albums.ejs
@@ -5,7 +5,7 @@
                 <h1 class="header-text">Albums</h1>
             </div>
             <div class="col-auto">
-                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
             </div>
         </div>
         <div class="row">
diff --git a/src/renderer/views/pages/library-recentlyadded.ejs b/src/renderer/views/pages/library-recentlyadded.ejs
index f4426eed..ed1b33e1 100644
--- a/src/renderer/views/pages/library-recentlyadded.ejs
+++ b/src/renderer/views/pages/library-recentlyadded.ejs
@@ -5,7 +5,7 @@
                 <h1 class="header-text">Recently Added</h1>
             </div>
             <div class="col-auto">
-                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
             </div>
         </div>
         <div class="row">

From 27471f95b3ccda32319fe6d76aef266d0807c866 Mon Sep 17 00:00:00 2001
From: GGrandma <elliot.sanbower@gmail.com>
Date: Sun, 19 Dec 2021 15:04:48 -0600
Subject: [PATCH 3/5] correctly sort albums on initial refresh

---
 src/renderer/views/main.ejs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index ddcd15dd..6bd2eeac 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -367,7 +367,7 @@
                     </template>
                 </transition>
                 <!-- Library - Recently Added -->
-                <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(0);">
+                <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
                     <%- include('pages/library-recentlyadded') %>');
                 </transition>
                 <!-- Library - Songs -->
@@ -375,7 +375,7 @@
                     <%- include('pages/library-songs') %>
                 </transition>
                 <!-- Library - Albums -->
-                <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(); searchLibraryAlbums(1);">
+                <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
                     <%- include('pages/library-albums') %>');
                     %>
                 </transition>

From a9feb88dbaf79c3202b738b818867197df68d9a8 Mon Sep 17 00:00:00 2001
From: GGrandma <elliot.sanbower@gmail.com>
Date: Sun, 19 Dec 2021 23:09:18 -0600
Subject: [PATCH 4/5] remove redundancy

---
 src/renderer/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 42c1ffbe..b5d568d7 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -172,8 +172,7 @@ const app = new Vue({
                     "artistName": "Artist",
                     "name": "Name",
                     "genre": "Genre",
-                    "releaseDate": "Release Date",
-                    "dateAdded": "Date Added"
+                    "releaseDate": "Release Date"
                 },
                 viewAs: 'covers',
                 sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page

From e3a6a0cca0e7fa3c09d7f866451475192edf195d Mon Sep 17 00:00:00 2001
From: GGrandma <elliot.sanbower@gmail.com>
Date: Sun, 19 Dec 2021 23:34:45 -0600
Subject: [PATCH 5/5] update song sorting function

---
 src/renderer/index.js | 59 +++++++++++++++----------------------------
 1 file changed, 21 insertions(+), 38 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index b5d568d7..66937e2d 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -767,54 +767,37 @@ const app = new Vue({
             let self = this
 
             function sortSongs() {
-                if (self.library.songs.sortOrder == "asc") {
-                    // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in ascending order based on alphabetical order and numeric order
-                    // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
-                    self.library.songs.displayListing.sort((a, b) => {
-                        let aa = null;
-                        let bb = null;
-                        if (self.library.songs.sorting == "genre") {
-                            aa = a.attributes.genreNames[0]
-                            bb = b.attributes.genreNames[0]
-                        }
-                        aa = a.attributes[self.library.songs.sorting]
-                        bb = b.attributes[self.library.songs.sorting]
-                        if (aa == null) {
-                            aa = ""
-                        }
-                        if (bb == null) {
-                            bb = ""
-                        }
+                // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending or ascending order based on alphabetical order and numeric order
+                // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
+                self.library.songs.displayListing.sort((a, b) => {
+                    let aa = null;
+                    let bb = null;
+                    if (self.library.songs.sorting == "genre") {
+                        aa = a.attributes.genreNames[0]
+                        bb = b.attributes.genreNames[0]
+                    }
+                    aa = a.attributes[self.library.songs.sorting]
+                    bb = b.attributes[self.library.songs.sorting]
+                    if (aa == null) {
+                        aa = ""
+                    }
+                    if (bb == null) {
+                        bb = ""
+                    }
+                    if (self.library.songs.sortOrder == "asc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return aa - bb
                         } else {
                             return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
                         }
-                    })
-                }
-                if (self.library.songs.sortOrder == "desc") {
-                    // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order
-                    // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
-                    self.library.songs.displayListing.sort((a, b) => {
-                        if (self.library.songs.sorting == "genre") {
-                            aa = a.attributes.genreNames[0]
-                            bb = b.attributes.genreNames[0]
-                        }
-                        let aa = a.attributes[self.library.songs.sorting]
-                        let bb = b.attributes[self.library.songs.sorting]
-                        if (aa == null) {
-                            aa = ""
-                        }
-                        if (bb == null) {
-                            bb = ""
-                        }
+                    } else if (self.library.songs.sortOrder == "desc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return bb - aa
                         } else {
                             return bb.toString().toLowerCase().localeCompare(aa.toString().toLowerCase())
                         }
-                    })
-                }
+                    }
+                })
             }
 
             if (this.library.songs.search == "") {