-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[🖥️+⚡️] - Beginning pagination logic. some DB model creation
Signed-off-by: Binyamin Yawitz <[email protected]>
- Loading branch information
Showing
21 changed files
with
294 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <template> | ||
| <Container :isXL="true"> | ||
| <div class="row"> | ||
| <div class="col"> | ||
| <div class="card"> | ||
| <div class="card-body"> | ||
| <div class="table-responsive"> | ||
| <div class="table-loading" v-if="tableLoading"> | ||
| <div class="tl-inner-text"> | ||
| <div class="spinner-border text-blue" role="status"></div> | ||
| <p>{{ $t('Just a moment') }}</p> | ||
| </div> | ||
| </div> | ||
| <table class="table table-vcenter card-table"> | ||
| <thead> | ||
| <tr> | ||
| <th v-for="heading in headings" :key="heading.title" :class="{ 'w-1': heading.isNarrow }">{{ heading.title }}</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <slot></slot> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Container> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import Container from '@/components/layouts/Container.vue'; | ||
| import { type PropType } from 'vue'; | ||
| interface Heading { | ||
| title: string; | ||
| isNarrow: boolean; | ||
| } | ||
| defineProps({ | ||
| tableLoading: { default: false, type: Boolean }, | ||
| headings: { type: Array as PropType<Heading[]> } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <template> | ||
| <Container :isXL="true" class="mt-3"> | ||
| <div class="row"> | ||
| <div class="col d-flex justify-content-between"> | ||
| <Button @click="hasPrev && emit('prev')" width="w-25" :class="{ disabled: !hasPrev }">{{ $t('tr-Prev') }}</Button> | ||
| <Button @click="hasNext && emit('next')" width="w-25" :class="{ disabled: !hasNext }">{{ $t('tr-Next') }}</Button> | ||
| </div> | ||
| </div> | ||
| </Container> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import Container from '@/components/layouts/Container.vue'; | ||
| import Button from '@/components/form/Button.vue'; | ||
| const emit = defineEmits(['prev', 'next']); | ||
| defineProps({ | ||
| hasPrev: { default: false, type: Boolean }, | ||
| hasNext: { default: true, type: Boolean } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import type { Ref } from 'vue'; | ||
| import NetworkHelper from '@/heplers/NetworkHelper'; | ||
| import type { Router } from 'vue-router'; | ||
|
|
||
| export default class CursorPaginator { | ||
| private items: Ref<any[]>; | ||
| private readonly url: string; | ||
| private hasNext: Ref<boolean>; | ||
| private hasPrev: Ref<boolean>; | ||
| private tableLoading: Ref<boolean>; | ||
| private router: Router; | ||
|
|
||
| constructor(url: string, items: Ref<any[]>, tableLoading: Ref<boolean>, hasNext: Ref<boolean>, hasPrev: Ref<boolean>, router: Router) { | ||
| this.url = url; | ||
| this.items = items; | ||
| this.tableLoading = tableLoading; | ||
| this.hasPrev = hasPrev; | ||
| this.hasNext = hasNext; | ||
| this.router = router; | ||
| } | ||
|
|
||
| public async next() { | ||
| this.tableLoading.value = true; | ||
|
|
||
| await this.loadData(CursorPaginator.getURLParam('next')); | ||
|
|
||
| this.tableLoading.value = false; | ||
| } | ||
|
|
||
| public async prev() { | ||
| this.tableLoading.value = true; | ||
| const id = parseInt(CursorPaginator.getURLParam('prev')) + parseInt(CursorPaginator.getURLParam('size')); | ||
|
|
||
| await this.loadData(id); | ||
|
|
||
| this.tableLoading.value = false; | ||
| } | ||
|
|
||
| public async loadData(lastId: any = 0) { | ||
| try { | ||
| const res = await NetworkHelper.get(`${this.url}${lastId}/`); | ||
|
|
||
| if (res.success) { | ||
| const data = res.data; | ||
|
|
||
| this.items.value = data.items; | ||
| this.hasPrev.value = data.hasPrev; | ||
| this.hasNext.value = data.hasNext; | ||
| const next = data.items[data.items.length - 1].id; | ||
| const size = data.size; | ||
|
|
||
| await this.router.replace(`${this.router.currentRoute.value.path}?next=${next}&prev=${lastId}&size=${size}`); | ||
| } | ||
| } catch (e) { | ||
| // TODO: Toast for error | ||
| } | ||
| } | ||
|
|
||
| private static getURLParam(param: string) { | ||
| const url = new URL(window.location.href.replace('#', '')); | ||
|
|
||
| return url.searchParams.get(param) ?? '0'; | ||
| } | ||
|
|
||
| async init() { | ||
| await this.loadData(CursorPaginator.getURLParam('prev')); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.