From 4ee30dc5bd0d3e4c067077847a2f2e578a28044b Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 8 Jul 2020 12:23:02 +0200
Subject: [PATCH] Added table header data to member import mapping

no refs.
- added counter ("x of y") to "Data" header for member import mapping table
- set disabled style to prev/next buttons in "Data" header for first/last records
---
 .../components/gh-members-import-table.hbs    |  6 ++---
 .../app/components/gh-members-import-table.js | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-import-table.hbs b/ghost/admin/app/components/gh-members-import-table.hbs
index f23722a065..3161f89529 100644
--- a/ghost/admin/app/components/gh-members-import-table.hbs
+++ b/ghost/admin/app/components/gh-members-import-table.hbs
@@ -4,10 +4,10 @@
             <th class="table-cell-field"><span class="f-small midgrey ttu fw5">Field</span></th>
             <th class="table-cell-data">
                 <div class="flex items-center justify-between">
-                    <span class="f-small midgrey ttu fw5 nudge-top--1">Data</span>
+                    <span class="f-small midgrey ttu fw5 nudge-top--1">Data <span class="midlightgrey fw4">({{this.currentRecord}} of {{this.allRecords}})</span></span>
                     <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
-                        <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
-                        <a href="#" {{action "next"}} class="pa1 flex items-center justify-center" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
+                        <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey {{unless this.hasPrevRecord "o-30"}}" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
+                        <a href="#" {{action "next"}} class="pa1 flex items-center justify-center {{unless this.hasNextRecord "o-30"}}" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
                     </div>
                 </div>
             </th>
diff --git a/ghost/admin/app/components/gh-members-import-table.js b/ghost/admin/app/components/gh-members-import-table.js
index 350f034d46..b0ab64d919 100644
--- a/ghost/admin/app/components/gh-members-import-table.js
+++ b/ghost/admin/app/components/gh-members-import-table.js
@@ -23,6 +23,30 @@ export default class GhMembersImportTable extends Component {
         return rows;
     }
 
+    get hasNextRecord() {
+        const nextValue = this.dataPreviewIndex + 1;
+        if (this.args.importData[nextValue]) {
+            return true;
+        }
+        return false;
+    }
+
+    get hasPrevRecord() {
+        const nextValue = this.dataPreviewIndex - 1;
+        if (this.args.importData[nextValue]) {
+            return true;
+        }
+        return false;
+    }
+
+    get currentRecord() {
+        return this.dataPreviewIndex + 1;
+    }
+
+    get allRecords() {
+        return this.args.importData.length;
+    }
+
     @action
     updateMapping(mapFrom, mapTo) {
         this.args.updateMapping(mapFrom, mapTo);