[WIP] Заменил пагинацию на квазаровскую

src/components/base/BasePagination.vue

@@ -3,9 +3,12 @@
     q-pagination(
       v-model="value",
       :max="max",
+      :min="min",
       :max-pages="maxPages",
+      :size="`${size}px`",
       :boundary-numbers="boundaryNumbers",
-      :direction-links="directionLinks"
+      :direction-links="directionLinks",
+      @click="chCurrentPage"
     )
 </template>
 
@@ -18,6 +21,10 @@ export default {
       default: 1,
       type: Number,
     },
+    min: {
+      default: 1,
+      type: Number,
+    },
     maxPages: {
       default: 6,
       type: Number,
@@ -30,6 +37,12 @@ export default {
       default: false,
       type: Boolean,
     },
+    size: Number,
+  },
+  methods: {
+    chCurrentPage() {
+      this.$emit("st-current-page", this.value);
+    },
   },
 };
 </script>

src/pages/clients/components/ClientTablePagination.vue

@@ -1,147 +0,0 @@
-<template lang="pug">
-  .flex.items-center.gap-2.text-base.w-full.justify-center
-    button.item.default-theme.flex.items-center.justify-center.pr-1(
-      @click="previousHandler",
-      :disabled="disabledPreviousButton"
-    )
-      .icon-down-arrow.arrow-left
-    button.item.flex.items-center.justify-center.transition.duration-100.ease-linear(
-      v-for="page, index in pageCount",
-      :key="index",
-      :id="page",
-      :class="currentPageStyle(page)",
-      :disabled="disabledMissingPages(page)"
-      @click="changeCurrentPage"
-    ) {{ page }}
-    button.item.default-theme.flex.items-center.justify-center.pl-1(
-      @click="nextHandler",
-      :disabled="disabledNextButton"
-    )
-      .icon-down-arrow.arrow-right
-</template>
-
-<script>
-export default {
-  name: "ClientTablePagination",
-  props: {
-    length: Number,
-    currentPage: Number,
-    totalVisible: {
-      type: Number,
-      default: 7,
-    },
-    paginationInfo: Object,
-  },
-  computed: {
-    pageCount() {
-      let countArray = [];
-      for (let i = 1; i <= this.paginationInfo.length; i++) {
-        countArray.push(i);
-      }
-      if (this.paginationInfo.length <= this.totalVisible) return countArray;
-      let incompleteCountArray = [];
-      if (
-        this.paginationInfo.currentPage <= 2 ||
-        this.paginationInfo.currentPage >=
-          countArray[this.paginationInfo.length - 2]
-      ) {
-        countArray.forEach((elem, index, arr) => {
-          if (index <= 2 || index >= arr.length - 3)
-            incompleteCountArray.push(elem);
-          else if (!incompleteCountArray.includes("..."))
-            incompleteCountArray.push("...");
-        });
-        return incompleteCountArray;
-      }
-      if (this.paginationInfo.currentPage <= 4) {
-        countArray.forEach((elem, index, arr) => {
-          if (index <= 4 || index === arr.length - 1)
-            incompleteCountArray.push(elem);
-          else if (!incompleteCountArray.includes("..."))
-            incompleteCountArray.push("...");
-        });
-        return incompleteCountArray;
-      }
-      if (
-        this.paginationInfo.currentPage >=
-        countArray[this.paginationInfo.length - 4]
-      ) {
-        countArray.forEach((elem, index, arr) => {
-          if (index === 0 || index >= arr.length - 5)
-            incompleteCountArray.push(elem);
-          else if (!incompleteCountArray.includes("..."))
-            incompleteCountArray.push("...");
-        });
-        return incompleteCountArray;
-      }
-      countArray.forEach((elem, index, arr) => {
-        if (index === 0) incompleteCountArray.push(elem, "...");
-        if (
-          index >= this.paginationInfo.currentPage - 2 &&
-          index <= this.paginationInfo.currentPage
-        )
-          incompleteCountArray.push(elem);
-        if (index === arr.length - 1) incompleteCountArray.push("...", elem);
-      });
-      return incompleteCountArray;
-    },
-    disabledNextButton() {
-      return this.paginationInfo.currentPage === this.paginationInfo.length;
-    },
-    disabledPreviousButton() {
-      return this.paginationInfo.currentPage === 1;
-    },
-  },
-  methods: {
-    currentPageStyle(number) {
-      if (number === this.paginationInfo.currentPage)
-        return {
-          "active-theme": true,
-        };
-      return {
-        "default-theme": true,
-      };
-    },
-    previousHandler() {
-      if (this.paginationInfo.currentPage !== 1) this.$emit("previous-page");
-    },
-    nextHandler() {
-      if (this.paginationInfo.currentPage !== this.paginationInfo.length)
-        this.$emit("next-page");
-    },
-    changeCurrentPage(e) {
-      this.$emit("set-current-page", parseInt(e.target.id));
-    },
-    disabledMissingPages(page) {
-      return isNaN(parseInt(page));
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.item
-  width: 32px
-  height: 32px
-  border-radius: 4px
-  &:disabled
-    opacity: 0.5
-
-.default-theme
-  background-color: var(--default-white)
-  color: var(--font-black-color)
-  box-shadow: var(--pagination-item-shadow)
-
-.active-theme
-  background-color: var(--btn-blue-color)
-  color: var(--default-white)
-  box-shadow: var(--pagination-current-item-shadow)
-
-.arrow-left
-  transform: rotate(90deg)
-  color: var(--font-grey-color)
-
-.arrow-right
-  transform: rotate(270deg)
-  color: var(--font-grey-color)
-</style>

src/pages/clients/components/ClientsTable.vue

@@ -36,18 +36,14 @@
               :created-client-name="createdClientName",
               @recover-client="clearDeletedRowId",
             )
-        client-table-pagination(
+        base-pagination(
           v-if="paginationInfo.length > 1"
-          :pagination-info="paginationInfo"
+          :max="paginationInfo.length",
-          @previous-page="switchPreviousPage",
+          :value="currentTablePage",
-          @next-page="switchNextPage",
+          :size="18"
-          @set-current-page="changeCurrentTablePage"
+          @st-current-page="changeCurrentTablePage",
+          directionLinks
         )
-        //- base-pagination(
-        //-   :max="paginationInfo.length",
-        //-   :value="currentTablePage",
-        //-   directionLinks
-        //- )
         base-modal(
           v-model="showModal",
           :title="titleModal"
@@ -68,12 +64,13 @@ import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
 import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
-import ClientTablePagination from "./ClientTablePagination.vue";
+import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 import BaseModal from "@/components/base/BaseModal.vue";
 import ClientTableModal from "./ClientTableModal.vue";
 import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
 import BasePagination from "@/components/base/BasePagination.vue";
+
 export default {
   name: "ClientsTable",
   components: {
@@ -81,7 +78,7 @@ export default {
     ClientsTableRow,
     ClientsTableHat,
     ClientsTableHeader,
-    ClientTablePagination,
+    BaseClientFormCreate,
     BaseModal,
     ClientTableModal,
     FormCreateMedicalCard,
@@ -250,12 +247,6 @@ export default {
         }
       }
     },
-    switchPreviousPage() {
-      this.currentTablePage -= 1;
-    },
-    switchNextPage() {
-      this.currentTablePage += 1;
-    },
     changeCurrentTablePage(value) {
       this.currentTablePage = value;
     },