admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
megavrilinvv
2023-01-26 12:10:13 +03:00
parent cd01915419
commit ad08a6b4d5
3 changed files with 23 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/pages/clients/components/ClientTablePagination.vue
View File

@@ -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>

27
src/pages/clients/components/ClientsTable.vue
View File

@@ -36,18 +36,14 @@
:created-client-name="createdClientName",
@recover-client="clearDeletedRowId",
)
client-table-pagination(
base-pagination(
v-if="paginationInfo.length > 1"
:pagination-info="paginationInfo"
@previous-page="switchPreviousPage",
@next-page="switchNextPage",
@set-current-page="changeCurrentTablePage"
:max="paginationInfo.length",
:value="currentTablePage",
:size="18"
@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;
},