Add 'go to' page

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">
+                    v-for="page in pagesToShow"
-                    {{ page }}
+                >{{ page }}</button>
-                </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;
             },