Added line linking on each worksheet

4 files changed, 82 insertions, 24 deletions

diff --git a/app/assets/javascripts/blob/xlsx/components/table.js b/app/assets/javascripts/blob/xlsx/components/table.js
index abaec9e926e..2c181f1a9a3 100644
--- a/app/assets/javascripts/blob/xlsx/components/table.js
+++ b/app/assets/javascripts/blob/xlsx/components/table.js
@@ -1,3 +1,5 @@
+import 'vendor/jquery.scrollTo';
+
 export default {
   name: 'XLSXTable',
   props: {
@@ -6,29 +8,77 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      currentLineNumber: -1,
+    };
+  },
+  methods: {
+    linePath(index) {
+      let hash = location.hash.replace('#', '');
+      hash = hash.replace(/-?L(\d+)$/g, '');
+
+      if (hash !== '') {
+        return `#${hash}-L${index + 1}`;
+      } else {
+        return `#L${index + 1}`;
+      }
+    },
+    updateCurrentLineNumber(index) {
+      this.currentLineNumber = index + 1;
+    },
+    getCurrentLineNumberFromUrl() {
+      const hash = location.hash.replace('#', '').split('-');
+      const lineHash = hash[hash.length - 1];
+
+      this.currentLineNumber = parseInt(lineHash.replace('L', ''), 10);
+    },
+  },
+  watch: {
+    sheet: {
+      handler() {
+        this.getCurrentLineNumberFromUrl();
+      },
+      deep: true,
+    }
+  },
+  created() {
+    this.getCurrentLineNumberFromUrl();
+  },
+  mounted() {
+    $.scrollTo(`#${this.currentLineNumber}`);
+  },
   template: `
-    <table
-      class="table">
-      <thead>
-        <tr>
-          <th></th>
-          <th
-            v-for="name in sheet.columns">
-            {{ name }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(row, index) in sheet.rows">
-          <th>
-            {{ index + 1 }}
-          </th>
-          <td v-for="val in row">
-            {{ val }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="table-responsive">
+      <table
+        class="table">
+        <thead>
+          <tr>
+            <th></th>
+            <th
+              v-for="name in sheet.columns">
+              {{ name }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, index) in sheet.rows"
+            :id="index + 1"
+            :class="{ hll: currentLineNumber === index + 1 }">
+            <td>
+              <a
+                :href="linePath(index)"
+                @click="updateCurrentLineNumber(index)">
+                {{ index + 1 }}
+              </a>
+            </td>
+            <td v-for="val in row">
+              {{ val }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   `,
 };
diff --git a/app/assets/javascripts/blob/xlsx/index.js b/app/assets/javascripts/blob/xlsx/index.js
index ccf9f2b5081..6736d41fd8c 100644
--- a/app/assets/javascripts/blob/xlsx/index.js
+++ b/app/assets/javascripts/blob/xlsx/index.js
@@ -28,7 +28,10 @@ export default {
   },
   methods: {
     getInitialSheet() {
-      return decodeURIComponent(location.hash.replace('#', '')) || this.sheetNames[0];
+      let hash = location.hash.split('-');
+      hash = decodeURIComponent(hash[0].replace('#', ''));
+
+      return this.sheetNames.find(sheet => sheet === hash) || this.sheetNames[0];
     },
   },
   created() {
diff --git a/app/assets/stylesheets/framework/xlsx.scss b/app/assets/stylesheets/framework/xlsx.scss
deleted file mode 100644
index e69de29bb2d..00000000000
--- a/app/assets/stylesheets/framework/xlsx.scss
+++ /dev/null
diff --git a/app/assets/stylesheets/pages/xlsx.scss b/app/assets/stylesheets/pages/xlsx.scss
new file mode 100644
index 00000000000..83b3759825e
--- /dev/null
+++ b/app/assets/stylesheets/pages/xlsx.scss
@@ -0,0 +1,5 @@
+.hll {
+  > td {
+    background-color: #f8eec7;
+  }
+}