Merge pull request #151 from dderbentsov/UC-64

WIP Сделала пагинацию

src/assets/sass/variables.sass

@@ -44,3 +44,5 @@
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
   --bg-white-color-0: rgba(255, 255, 255, 0.3)
   --border-red-color: #ff6565
+  --pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)
+  --pagination-current-item-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%)

src/pages/clients/components/ClientTablePagination.vue

@@ -0,0 +1,138 @@
+<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(
+      v-for="page in pageCount",
+      :key="page",
+      :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,
+    },
+  },
+  computed: {
+    pageCount() {
+      let countArray = [],
+        incompleteCountArray = [];
+      for (let i = 1; i <= this.length; i++) {
+        countArray.push(i);
+      }
+      if (this.length <= this.totalVisible) return countArray;
+      if (
+        this.currentPage <= 2 ||
+        this.currentPage >= countArray[this.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.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.currentPage >= countArray[this.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.currentPage - 2 && index <= this.currentPage)
+          incompleteCountArray.push(elem);
+        if (index === arr.length - 1) incompleteCountArray.push("...", elem);
+      });
+      return incompleteCountArray;
+    },
+    disabledNextButton() {
+      return this.currentPage === this.length;
+    },
+    disabledPreviousButton() {
+      return this.currentPage === 1;
+    },
+  },
+  methods: {
+    currentPageStyle(number) {
+      if (number === this.currentPage)
+        return {
+          "active-theme": true,
+        };
+      return {
+        "default-theme": true,
+      };
+    },
+    previousHandler() {
+      if (this.currentPage !== 1) this.$emit("previous-page");
+    },
+    nextHandler() {
+      if (this.currentPage !== this.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

@@ -1,12 +1,12 @@
 <template lang="pug">
-  .wrapper-table.relative.flex.flex-col.gap-y-8.px-6.py-6.h-full.w-full
+  .wrapper-table.relative.flex.flex-col.px-6.py-6.h-full.w-full
     clients-table-hat(
       :is-open-actions="marked.length",
       :open-form="openForm",
       @search="filterDataClients",
       @reset-search="fetchDataClients"
     )
-    .flex.flex-col.h-full.gap-y-2.table-container.w-full
+    .flex.flex-col.h-full.gap-y-2.table-container.w-full.mt-8.mb-3
       clients-table-header(:check="selectedCheck" :is-check="selectAll")
       .flex.flex-col
         clients-table-row(
@@ -19,6 +19,13 @@
           :fetch-data-clients="fetchDataClients",
           :current-year="currentYear"
         )
+    client-table-pagination(
+      :length=6,
+      :current-page="currentTablePage",
+      @previous-page="switchPreviousPage",
+      @next-page="switchNextPage",
+      @set-current-page="changeCurrentTablePage"
+    )
 </template>
 
 <script>
@@ -28,6 +35,7 @@ import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
 import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
+import ClientTablePagination from "./ClientTablePagination.vue";
 export default {
   name: "ClientsTable",
   components: {
@@ -36,6 +44,7 @@ export default {
     ClientsTableHat,
     ClientsTableHeader,
     BaseClientFormCreate,
+    ClientTablePagination,
   },
   props: {
     openForm: Function,
@@ -48,6 +57,7 @@ export default {
       selectAll: false,
       marked: [],
       dataClients: [],
+      currentTablePage: 1,
     };
   },
   methods: {
@@ -83,6 +93,15 @@ export default {
         }
       }
     },
+    switchPreviousPage() {
+      this.currentTablePage -= 1;
+    },
+    switchNextPage() {
+      this.currentTablePage += 1;
+    },
+    changeCurrentTablePage(value) {
+      this.currentTablePage = value;
+    },
   },
   watch: {
     isOpenForm: {