From 5b3fb0d41fdedad626aa01d813623c5eb3434ac3 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 10 May 2017 08:00:50 +0000
Subject: Use vue file for table pagination component

---
 .../environments/components/environment.vue        |   8 +-
 .../folder/environments_folder_view.vue            |   8 +-
 app/assets/javascripts/pipelines/pipelines.js      |   9 +-
 .../vue_shared/components/table_pagination.js      | 135 --------------------
 .../vue_shared/components/table_pagination.vue     | 137 +++++++++++++++++++++
 .../vue_shared/components/table_pagination_spec.js |   2 +-
 6 files changed, 151 insertions(+), 148 deletions(-)
 delete mode 100644 app/assets/javascripts/vue_shared/components/table_pagination.js
 create mode 100644 app/assets/javascripts/vue_shared/components/table_pagination.vue

diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index e0088d496eb..ed8df0f3a54 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -1,17 +1,17 @@
 <script>
 /* global Flash */
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from './environments_table.vue';
+import environmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import '../../lib/utils/common_utils';
 import eventHub from '../event_hub';
 
 export default {
 
   components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
+    environmentTable,
+    tablePagination,
   },
 
   data() {
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index f4a0c390c91..1fc0ce818e9 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -1,16 +1,16 @@
 <script>
 /* global Flash */
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from '../components/environments_table.vue';
+import environmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 
 export default {
   components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
+    environmentTable,
+    tablePagination,
   },
 
   data() {
diff --git a/app/assets/javascripts/pipelines/pipelines.js b/app/assets/javascripts/pipelines/pipelines.js
index 934bd7deb31..511f10b66f1 100644
--- a/app/assets/javascripts/pipelines/pipelines.js
+++ b/app/assets/javascripts/pipelines/pipelines.js
@@ -2,7 +2,7 @@ import Visibility from 'visibilityjs';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
-import TablePaginationComponent from '../vue_shared/components/table_pagination';
+import tablePagination from '../vue_shared/components/table_pagination.vue';
 import EmptyState from './components/empty_state.vue';
 import ErrorState from './components/error_state.vue';
 import NavigationTabs from './components/navigation_tabs';
@@ -18,7 +18,7 @@ export default {
   },
 
   components: {
-    'gl-pagination': TablePaginationComponent,
+    tablePagination,
     'pipelines-table-component': PipelinesTableComponent,
     'empty-state': EmptyState,
     'error-state': ErrorState,
@@ -275,12 +275,13 @@ export default {
             />
         </div>
 
-        <gl-pagination
+        <table-pagination
           v-if="shouldRenderPagination"
           :pagenum="pagenum"
           :change="change"
           :count="state.count.all"
-          :pageInfo="state.pageInfo"/>
+          :pageInfo="state.pageInfo"
+          />
       </div>
     </div>
   `,
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.js b/app/assets/javascripts/vue_shared/components/table_pagination.js
deleted file mode 100644
index ebb14912b00..00000000000
--- a/app/assets/javascripts/vue_shared/components/table_pagination.js
+++ /dev/null
@@ -1,135 +0,0 @@
-const PAGINATION_UI_BUTTON_LIMIT = 4;
-const UI_LIMIT = 6;
-const SPREAD = '...';
-const PREV = 'Prev';
-const NEXT = 'Next';
-const FIRST = '« First';
-const LAST = 'Last »';
-
-export default {
-  props: {
-    /**
-      This function will take the information given by the pagination component
-
-      Here is an example `change` method:
-
-      change(pagenum) {
-        gl.utils.visitUrl(`?page=${pagenum}`);
-      },
-    */
-    change: {
-      type: Function,
-      required: true,
-    },
-
-    /**
-      pageInfo will come from the headers of the API call
-      in the `.then` clause of the VueResource API call
-      there should be a function that contructs the pageInfo for this component
-
-      This is an example:
-
-      const pageInfo = headers => ({
-        perPage: +headers['X-Per-Page'],
-        page: +headers['X-Page'],
-        total: +headers['X-Total'],
-        totalPages: +headers['X-Total-Pages'],
-        nextPage: +headers['X-Next-Page'],
-        previousPage: +headers['X-Prev-Page'],
-      });
-    */
-    pageInfo: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    changePage(e) {
-      const text = e.target.innerText;
-      const { totalPages, nextPage, previousPage } = this.pageInfo;
-
-      switch (text) {
-        case SPREAD:
-          break;
-        case LAST:
-          this.change(totalPages);
-          break;
-        case NEXT:
-          this.change(nextPage);
-          break;
-        case PREV:
-          this.change(previousPage);
-          break;
-        case FIRST:
-          this.change(1);
-          break;
-        default:
-          this.change(+text);
-          break;
-      }
-    },
-  },
-  computed: {
-    prev() {
-      return this.pageInfo.previousPage;
-    },
-    next() {
-      return this.pageInfo.nextPage;
-    },
-    getItems() {
-      const total = this.pageInfo.totalPages;
-      const page = this.pageInfo.page;
-      const items = [];
-
-      if (page > 1) items.push({ title: FIRST });
-
-      if (page > 1) {
-        items.push({ title: PREV, prev: true });
-      } else {
-        items.push({ title: PREV, disabled: true, prev: true });
-      }
-
-      if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
-
-      const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
-      const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
-
-      for (let i = start; i <= end; i += 1) {
-        const isActive = i === page;
-        items.push({ title: i, active: isActive, page: true });
-      }
-
-      if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
-        items.push({ title: SPREAD, separator: true, page: true });
-      }
-
-      if (page === total) {
-        items.push({ title: NEXT, disabled: true, next: true });
-      } else if (total - page >= 1) {
-        items.push({ title: NEXT, next: true });
-      }
-
-      if (total - page >= 1) items.push({ title: LAST, last: true });
-
-      return items;
-    },
-  },
-  template: `
-    <div class="gl-pagination">
-      <ul class="pagination clearfix">
-        <li v-for='item in getItems'
-          :class='{
-            page: item.page,
-            prev: item.prev,
-            next: item.next,
-            separator: item.separator,
-            active: item.active,
-            disabled: item.disabled
-          }'
-        >
-          <a @click="changePage($event)">{{item.title}}</a>
-        </li>
-      </ul>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
new file mode 100644
index 00000000000..5e7df22dd83
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -0,0 +1,137 @@
+<script>
+const PAGINATION_UI_BUTTON_LIMIT = 4;
+const UI_LIMIT = 6;
+const SPREAD = '...';
+const PREV = 'Prev';
+const NEXT = 'Next';
+const FIRST = '« First';
+const LAST = 'Last »';
+
+export default {
+  props: {
+    /**
+      This function will take the information given by the pagination component
+
+      Here is an example `change` method:
+
+      change(pagenum) {
+        gl.utils.visitUrl(`?page=${pagenum}`);
+      },
+    */
+    change: {
+      type: Function,
+      required: true,
+    },
+
+    /**
+      pageInfo will come from the headers of the API call
+      in the `.then` clause of the VueResource API call
+      there should be a function that contructs the pageInfo for this component
+
+      This is an example:
+
+      const pageInfo = headers => ({
+        perPage: +headers['X-Per-Page'],
+        page: +headers['X-Page'],
+        total: +headers['X-Total'],
+        totalPages: +headers['X-Total-Pages'],
+        nextPage: +headers['X-Next-Page'],
+        previousPage: +headers['X-Prev-Page'],
+      });
+    */
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    changePage(e) {
+      const text = e.target.innerText;
+      const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+      switch (text) {
+        case SPREAD:
+          break;
+        case LAST:
+          this.change(totalPages);
+          break;
+        case NEXT:
+          this.change(nextPage);
+          break;
+        case PREV:
+          this.change(previousPage);
+          break;
+        case FIRST:
+          this.change(1);
+          break;
+        default:
+          this.change(+text);
+          break;
+      }
+    },
+  },
+  computed: {
+    prev() {
+      return this.pageInfo.previousPage;
+    },
+    next() {
+      return this.pageInfo.nextPage;
+    },
+    getItems() {
+      const total = this.pageInfo.totalPages;
+      const page = this.pageInfo.page;
+      const items = [];
+
+      if (page > 1) items.push({ title: FIRST });
+
+      if (page > 1) {
+        items.push({ title: PREV, prev: true });
+      } else {
+        items.push({ title: PREV, disabled: true, prev: true });
+      }
+
+      if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
+
+      const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+      const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
+
+      for (let i = start; i <= end; i += 1) {
+        const isActive = i === page;
+        items.push({ title: i, active: isActive, page: true });
+      }
+
+      if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
+        items.push({ title: SPREAD, separator: true, page: true });
+      }
+
+      if (page === total) {
+        items.push({ title: NEXT, disabled: true, next: true });
+      } else if (total - page >= 1) {
+        items.push({ title: NEXT, next: true });
+      }
+
+      if (total - page >= 1) items.push({ title: LAST, last: true });
+
+      return items;
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-pagination">
+    <ul class="pagination clearfix">
+      <li
+        v-for="item in getItems"
+        :class="{
+          page: item.page,
+          prev: item.prev,
+          next: item.next,
+          separator: item.separator,
+          active: item.active,
+          disabled: item.disabled
+        }">
+        <a @click="changePage($event)">{{item.title}}</a>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js
index 96038718191..895e1c585b4 100644
--- a/spec/javascripts/vue_shared/components/table_pagination_spec.js
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import paginationComp from '~/vue_shared/components/table_pagination';
+import paginationComp from '~/vue_shared/components/table_pagination.vue';
 import '~/lib/utils/common_utils';
 
 describe('Pagination component', () => {
-- 
cgit v1.2.1