From 368bab25534a26cfda2b7b7ce266425b5d3b7406 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 13 May 2021 12:05:24 +0530
Subject: [PATCH] chore: Refactor contact page button with button component
 (#2234)

* chore: Refactor contact page buttons with woot-button component


Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
---
 .../components/widgets/TableFooter.vue        | 54 +++++++------------
 .../dashboard/contacts/components/Header.vue  | 20 ++++---
 2 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index b4123f433..c951aad60 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -12,39 +12,41 @@
         v-if="totalCount"
         class="primary button-group pagination-button-group"
       >
-        <button
-          class="button small goto-first"
-          :class="firstPageButtonClass"
+        <woot-button
+          size="small"
+          class-names="goto-first"
+          :is-disabled="hasFirstPage"
           @click="onFirstPage"
         >
           <i class="ion-chevron-left" />
           <i class="ion-chevron-left" />
-        </button>
-        <button
-          class="button small"
-          :class="prevPageButtonClass"
+        </woot-button>
+        <woot-button
+          size="small"
+          :is-disabled="hasPrevPage"
           @click="onPrevPage"
         >
           <i class="ion-chevron-left" />
-        </button>
-        <button class="button" @click.prevent>
+        </woot-button>
+        <woot-button @click.prevent>
           {{ currentPage }}
-        </button>
-        <button
-          class="button small"
-          :class="nextPageButtonClass"
+        </woot-button>
+        <woot-button
+          size="small"
+          :is-disabled="hasNextPage"
           @click="onNextPage"
         >
           <i class="ion-chevron-right" />
-        </button>
-        <button
-          class="button small goto-last"
-          :class="lastPageButtonClass"
+        </woot-button>
+        <woot-button
+          size="small"
+          class-names="goto-last"
+          :is-disabled="hasLastPage"
           @click="onLastPage"
         >
           <i class="ion-chevron-right" />
           <i class="ion-chevron-right" />
-        </button>
+        </woot-button>
       </div>
     </div>
   </footer>
@@ -91,35 +93,19 @@ export default {
         this.currentPage === Math.ceil(this.totalCount / this.pageSize);
       return isDisabled;
     },
-    lastPageButtonClass() {
-      const className = this.hasLastPage ? 'disabled' : '';
-      return className;
-    },
     hasFirstPage() {
       const isDisabled = this.currentPage === 1;
       return isDisabled;
     },
-    firstPageButtonClass() {
-      const className = this.hasFirstPage ? 'disabled' : '';
-      return className;
-    },
     hasNextPage() {
       const isDisabled =
         this.currentPage === Math.ceil(this.totalCount / this.pageSize);
       return isDisabled;
     },
-    nextPageButtonClass() {
-      const className = this.hasNextPage ? 'disabled' : '';
-      return className;
-    },
     hasPrevPage() {
       const isDisabled = this.currentPage === 1;
       return isDisabled;
     },
-    prevPageButtonClass() {
-      const className = this.hasPrevPage ? 'disabled' : '';
-      return className;
-    },
   },
   methods: {
     onNextPage() {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index 2c6b2d63b..f96e75077 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -17,18 +17,22 @@
             @keyup.enter="onSearchSubmit"
             @input="onInputSearch"
           />
-          <woot-submit-button
-            :button-text="$t('CONTACTS_PAGE.SEARCH_BUTTON')"
-            :loading="false"
-            :button-class="searchButtonClass"
+          <woot-button
+            :is-loading="false"
+            :class-names="searchButtonClass"
             @click="onSearchSubmit"
-          />
+          >
+            {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
+          </woot-button>
         </div>
 
-        <button class="button success icon" @click="onToggleCreate">
-          <i class="icon ion-android-add-circle" />
+        <woot-button
+          color-scheme="success"
+          icon="ion-android-add-circle"
+          @click="onToggleCreate"
+        >
           {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
-        </button>
+        </woot-button>
       </div>
     </div>
   </header>