From bd69b5fc32a17e086b06f3ae16447ad97f7551e5 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Fri, 1 Jul 2022 03:46:11 -0400
Subject: [PATCH] Add 'go to' page

---
 src/renderer/views/pages/library-songs.ejs | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/renderer/views/pages/library-songs.ejs b/src/renderer/views/pages/library-songs.ejs
index 54a6b5a1..17ff2913 100644
--- a/src/renderer/views/pages/library-songs.ejs
+++ b/src/renderer/views/pages/library-songs.ejs
@@ -74,9 +74,8 @@
                 <button
                     :class="`col md-btn page-btn${ isCurrentPage(page) ? ' md-btn-primary': ''}`"
                     @click="goToPage(page)"
-                    v-for="page in pagesToShow">
-                    {{ page }}
-                </button>
+                    v-for="page in pagesToShow"
+                >{{ page }}</button>
                 <button
                     class="col md-btn page-btn next"
                     :disabled="currentPage === numPages"
@@ -91,6 +90,10 @@
                 >
                     <img class="md-ico-last"/>
                 </button>
+                <div class="col page-btn" style="min-width: 12em;">
+                    <input type="number" min="1" :max="numPages" :value="currentPage" @change="changePage" />
+                    <span>/ {{ numPages }}</span>
+                </div>
             </div>
         </div>
 
@@ -164,6 +167,13 @@
                 return idx === this.currentPage ||
                     idx === this.numPages && this.currentPage > this.numPages;
             },
+            changePage: function (event) {
+                const value = event.target.valueAsNumber;
+
+                if (!isNaN(value) && value >= 1 && value <= this.numPages) {
+                    this.currentPage = value;
+                }
+            },
             goToPage: function (page) {
                 this.currentPage = page;
             },