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>

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -12,39 +12,41 @@
         v-if="totalCount"
         class="primary button-group pagination-button-group"
       >
-        <button
+        <woot-button
-          class="button small goto-first"
+          size="small"
-          :class="firstPageButtonClass"
+          class-names="goto-first"
+          :is-disabled="hasFirstPage"
           @click="onFirstPage"
         >
           <i class="ion-chevron-left" />
           <i class="ion-chevron-left" />
-        </button>
+        </woot-button>
-        <button
+        <woot-button
-          class="button small"
+          size="small"
-          :class="prevPageButtonClass"
+          :is-disabled="hasPrevPage"
           @click="onPrevPage"
         >
           <i class="ion-chevron-left" />
-        </button>
+        </woot-button>
-        <button class="button" @click.prevent>
+        <woot-button @click.prevent>
           {{ currentPage }}
-        </button>
+        </woot-button>
-        <button
+        <woot-button
-          class="button small"
+          size="small"
-          :class="nextPageButtonClass"
+          :is-disabled="hasNextPage"
           @click="onNextPage"
         >
           <i class="ion-chevron-right" />
-        </button>
+        </woot-button>
-        <button
+        <woot-button
-          class="button small goto-last"
+          size="small"
-          :class="lastPageButtonClass"
+          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() {

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -17,18 +17,22 @@
             @keyup.enter="onSearchSubmit"
             @input="onInputSearch"
           />
-          <woot-submit-button
+          <woot-button
-            :button-text="$t('CONTACTS_PAGE.SEARCH_BUTTON')"
+            :is-loading="false"
-            :loading="false"
+            :class-names="searchButtonClass"
-            :button-class="searchButtonClass"
             @click="onSearchSubmit"
-          />
+          >
+            {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
+          </woot-button>
         </div>
 
-        <button class="button success icon" @click="onToggleCreate">
+        <woot-button
-          <i class="icon ion-android-add-circle" />
+          color-scheme="success"
+          icon="ion-android-add-circle"
+          @click="onToggleCreate"
+        >
           {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
-        </button>
+        </woot-button>
       </div>
     </div>
   </header>