Skip to content

M
mySkill-x
Commit 8fb9b643 by Nattana Chaiyamat
Options

pagination

parent 70bbdb4d
Showing with 103 additions and 400 deletions
src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.html
......@@ -123,40 +123,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu2Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu2Table.currentPage = (bu2Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu2Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu2Table.currentPage!=1&&bu2Table.currentPage!=2&&bu2Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu2Table.currentPage-1||item==bu2Table.currentPage||item==bu2Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu2Table.currentPage"
(click)="bu2Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu2Table.page.length-2&&bu2Table.currentPage!=bu2Table.page.length&&bu2Table.currentPage!=bu2Table.page.length-1&&bu2Table.currentPage!=bu2Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu2Table.currentPage = (bu2Table.currentPage > bu2Table.page.length-1 ? bu2Table.currentPage: bu2Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu2Table().length" [pageSize]="bu2Table.pageSize"
(pageChange)="bu2Table.currentPage = $event"
(pageSizeChange)="bu2Table.pageSize = $event;bu2Table.currentPage = 1"></app-pagination>
</div>
......@@ -439,29 +408,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu1Modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu1Modal.currentPage = (bu1Modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu1Modal.page">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu1Modal.currentPage"
(click)="bu1Modal.currentPage=item">{{item}}
</a>
<!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> -->
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu1Modal.currentPage = (bu1Modal.currentPage > bu1Modal.page.length-1 ? bu1Modal.currentPage: bu1Modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu1Modal().length" [pageSize]="bu1Modal.pageSize"
(pageChange)="bu1Modal.currentPage = $event"
(pageSizeChange)="bu1Modal.pageSize = $event;bu1Modal.currentPage = 1"></app-pagination>
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" *ngIf="currentModal=='add'"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......
src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.ts
......@@ -8,7 +8,8 @@ import { FileService } from 'src/app/shared/services/file.service';
interface table {
currentPage: number,
page: number[],
search: string
search: string,
pageSize: number
}
@Component({
selector: 'app-department-list',
......@@ -16,13 +17,15 @@ interface table {
styleUrls: ['./department-list.component.scss']
})
export class DepartmentListComponent implements OnInit {
bu2List: { check: boolean, data: Bu2Model }[] = []
bu2ListLoading = false
bu2: Bu2Model = new MyBu2Model()
bu2Table: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
selectedFile: File | null = null;
......@@ -31,14 +34,16 @@ export class DepartmentListComponent implements OnInit {
bu2Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
bu1List: Bu1Model[] = []
bu1: Bu1Model = new MyBu1Model()
bu1Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
currentModal: 'add' | 'edit' | 'delete' = "add"
......
src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.html
......@@ -123,38 +123,8 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="bu1ListFilter().length" [pageSize]="pageSize" (pageChange)="currentPage = $event"
(pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.ts
......@@ -11,6 +11,7 @@ import { FileService } from 'src/app/shared/services/file.service';
})
export class DepartmentRegisterComponent implements OnInit {
currentPage = 1
pageSize = 10
page = Array.from({ length: 1 }, (_, i) => i + 1);
bu1List: { check: boolean, data: Bu1Model }[] = []
bu1ListLoading = false
......
src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.html
......@@ -124,40 +124,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu3Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu3Table.currentPage = (bu3Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu3Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu3Table.currentPage!=1&&bu3Table.currentPage!=2&&bu3Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu3Table.currentPage-1||item==bu3Table.currentPage||item==bu3Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu3Table.currentPage"
(click)="bu3Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu3Table.page.length-2&&bu3Table.currentPage!=bu3Table.page.length&&bu3Table.currentPage!=bu3Table.page.length-1&&bu3Table.currentPage!=bu3Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu3Table.currentPage = (bu3Table.currentPage > bu3Table.page.length-1 ? bu3Table.currentPage: bu3Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu3Table().length" [pageSize]="bu3Table.pageSize"
(pageChange)="bu3Table.currentPage = $event"
(pageSizeChange)="bu3Table.pageSize = $event;bu3Table.currentPage = 1"></app-pagination>
</div>
......@@ -455,29 +424,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu2Modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu2Modal.currentPage = (bu2Modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu2Modal.page">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu2Modal.currentPage"
(click)="bu2Modal.currentPage=item">{{item}}
</a>
<!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> -->
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu2Modal.currentPage = (bu2Modal.currentPage > bu2Modal.page.length-1 ? bu2Modal.currentPage: bu2Modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu2Modal().length" [pageSize]="bu2Modal.pageSize"
(pageChange)="bu2Modal.currentPage = $event"
(pageSizeChange)="bu2Modal.pageSize = $event;bu2Modal.currentPage = 1"></app-pagination>
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" *ngIf="currentModal=='add'"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......
src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.ts
......@@ -8,7 +8,8 @@ import { FileService } from 'src/app/shared/services/file.service';
interface table {
currentPage: number,
page: number[],
search: string
search: string,
pageSize: number
}
@Component({
selector: 'app-section-registration',
......@@ -22,7 +23,8 @@ export class SectionRegistrationComponent implements OnInit {
bu3Table: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
selectedFile: File | null = null;
......@@ -31,14 +33,16 @@ export class SectionRegistrationComponent implements OnInit {
bu3Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
bu2List: Bu2Model[] = []
bu2: Bu2Model = new MyBu2Model()
bu2Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
currentModal: 'add' | 'edit' | 'delete' = "add"
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.html
......@@ -123,40 +123,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu7Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu7Table.currentPage = (bu7Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu7Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu7Table.currentPage!=1&&bu7Table.currentPage!=2&&bu7Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu7Table.currentPage-1||item==bu7Table.currentPage||item==bu7Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu7Table.currentPage"
(click)="bu7Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu7Table.page.length-2&&bu7Table.currentPage!=bu7Table.page.length&&bu7Table.currentPage!=bu7Table.page.length-1&&bu7Table.currentPage!=bu7Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu7Table.currentPage = (bu7Table.currentPage > bu7Table.page.length-1 ? bu7Table.currentPage: bu7Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu7Table().length" [pageSize]="bu7Table.pageSize"
(pageChange)="bu7Table.currentPage = $event"
(pageSizeChange)="bu7Table.pageSize = $event;bu7Table.currentPage = 1"></app-pagination>
</div>
......@@ -455,29 +424,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu6Modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu6Modal.currentPage = (bu6Modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu6Modal.page">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu6Modal.currentPage"
(click)="bu6Modal.currentPage=item">{{item}}
</a>
<!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> -->
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu6Modal.currentPage = (bu6Modal.currentPage > bu6Modal.page.length-1 ? bu6Modal.currentPage: bu6Modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu6Modal().length" [pageSize]="bu6Modal.pageSize"
(pageChange)="bu6Modal.currentPage = $event"
(pageSizeChange)="bu6Modal.pageSize = $event;bu6Modal.currentPage = 1"></app-pagination>
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" *ngIf="currentModal=='add'"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.ts
......@@ -9,7 +9,8 @@ import { FileService } from 'src/app/shared/services/file.service';
interface table {
currentPage: number,
page: number[],
search: string
search: string,
pageSize: number
}
@Component({
selector: 'app-sub-department-four',
......@@ -23,7 +24,8 @@ export class SubDepartmentFourComponent implements OnInit {
bu7Table: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
selectedFile: File | null = null;
......@@ -32,14 +34,16 @@ export class SubDepartmentFourComponent implements OnInit {
bu7Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
bu6List: Bu6Model[] = []
bu6: Bu6Model = new MyBu6Model()
bu6Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
currentModal: 'add' | 'edit' | 'delete' = "add"
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html
......@@ -15,7 +15,7 @@
</button>
<label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
......@@ -124,40 +124,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu4Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu4Table.currentPage = (bu4Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu4Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu4Table.currentPage!=1&&bu4Table.currentPage!=2&&bu4Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu4Table.currentPage-1||item==bu4Table.currentPage||item==bu4Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu4Table.currentPage"
(click)="bu4Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu4Table.page.length-2&&bu4Table.currentPage!=bu4Table.page.length&&bu4Table.currentPage!=bu4Table.page.length-1&&bu4Table.currentPage!=bu4Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu4Table.currentPage = (bu4Table.currentPage > bu4Table.page.length-1 ? bu4Table.currentPage: bu4Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu4Table().length" [pageSize]="bu4Table.pageSize"
(pageChange)="bu4Table.currentPage = $event"
(pageSizeChange)="bu4Table.pageSize = $event;bu4Table.currentPage = 1"></app-pagination>
</div>
......@@ -457,29 +426,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu3Modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu3Modal.currentPage = (bu3Modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu3Modal.page">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu3Modal.currentPage"
(click)="bu3Modal.currentPage=item">{{item}}
</a>
<!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> -->
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu3Modal.currentPage = (bu3Modal.currentPage > bu3Modal.page.length-1 ? bu3Modal.currentPage: bu3Modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu3Modal().length" [pageSize]="bu3Modal.pageSize"
(pageChange)="bu3Modal.currentPage = $event"
(pageSizeChange)="bu3Modal.pageSize = $event;bu3Modal.currentPage = 1"></app-pagination>
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" *ngIf="currentModal=='add'"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts
......@@ -8,7 +8,8 @@ import { FileService } from 'src/app/shared/services/file.service';
interface table {
currentPage: number,
page: number[],
search: string
search: string,
pageSize: number
}
@Component({
selector: 'app-sub-department-one',
......@@ -22,7 +23,8 @@ export class SubDepartmentOneComponent implements OnInit {
bu4Table: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
selectedFile: File | null = null;
......@@ -31,14 +33,16 @@ export class SubDepartmentOneComponent implements OnInit {
bu4Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
bu3List: Bu3Model[] = []
bu3: Bu3Model = new MyBu3Model()
bu3Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
currentModal: 'add' | 'edit' | 'delete' = "add"
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.html
......@@ -15,7 +15,7 @@
</button>
<label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
......@@ -123,40 +123,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu6Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu6Table.currentPage = (bu6Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu6Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu6Table.currentPage!=1&&bu6Table.currentPage!=2&&bu6Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu6Table.currentPage-1||item==bu6Table.currentPage||item==bu6Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu6Table.currentPage"
(click)="bu6Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu6Table.page.length-2&&bu6Table.currentPage!=bu6Table.page.length&&bu6Table.currentPage!=bu6Table.page.length-1&&bu6Table.currentPage!=bu6Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu6Table.currentPage = (bu6Table.currentPage > bu6Table.page.length-1 ? bu6Table.currentPage: bu6Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu5Modal().length" [pageSize]="bu5Modal.pageSize"
(pageChange)="bu5Modal.currentPage = $event"
(pageSizeChange)="bu5Modal.pageSize = $event;bu5Modal.currentPage = 1"></app-pagination>
</div>
......@@ -456,6 +425,9 @@
</tbody>
</table>
</div>
<app-pagination [totalItems]="filterBu6Table().length" [pageSize]="bu6Table.pageSize"
(pageChange)="bu6Table.currentPage = $event"
(pageSizeChange)="bu6Table.pageSize = $event;bu6Table.currentPage = 1"></app-pagination>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu5Modal.page.length">
<ul class="ti-pagination">
<li>
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts
......@@ -9,7 +9,8 @@ import { FileService } from 'src/app/shared/services/file.service';
interface table {
currentPage: number,
page: number[],
search: string
search: string,
pageSize: number
}
@Component({
selector: 'app-sub-department-three',
......@@ -23,7 +24,8 @@ export class SubDepartmentThreeComponent implements OnInit {
bu6Table: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
selectedFile: File | null = null;
......@@ -32,14 +34,16 @@ export class SubDepartmentThreeComponent implements OnInit {
bu6Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
bu5List: Bu5Model[] = []
bu5: Bu5Model = new MyBu5Model()
bu5Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
currentModal: 'add' | 'edit' | 'detele' = "add"
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.html
......@@ -123,40 +123,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu5Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu5Table.currentPage = (bu5Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu5Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu5Table.currentPage!=1&&bu5Table.currentPage!=2&&bu5Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu5Table.currentPage-1||item==bu5Table.currentPage||item==bu5Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu5Table.currentPage"
(click)="bu5Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu5Table.page.length-2&&bu5Table.currentPage!=bu5Table.page.length&&bu5Table.currentPage!=bu5Table.page.length-1&&bu5Table.currentPage!=bu5Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu5Table.currentPage = (bu5Table.currentPage > bu5Table.page.length-1 ? bu5Table.currentPage: bu5Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<app-pagination [totalItems]="filterBu5Table().length" [pageSize]="bu5Table.pageSize"
(pageChange)="bu5Table.currentPage = $event"
(pageSizeChange)="bu5Table.pageSize = $event;bu5Table.currentPage = 1"></app-pagination>
</div>
......@@ -455,6 +424,9 @@
</tbody>
</table>
</div>
<app-pagination [totalItems]="filterBu4Modal().length" [pageSize]="bu4Modal.pageSize"
(pageChange)="bu4Modal.currentPage = $event"
(pageSizeChange)="bu4Modal.pageSize = $event;bu4Modal.currentPage = 1"></app-pagination>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu4Modal.page.length">
<ul class="ti-pagination">
<li>
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.ts
......@@ -8,7 +8,8 @@ import { FileService } from 'src/app/shared/services/file.service';
interface table {
currentPage: number,
page: number[],
search: string
search: string,
pageSize: number
}
@Component({
selector: 'app-sub-department-two',
......@@ -22,7 +23,8 @@ export class SubDepartmentTwoComponent implements OnInit {
bu5Table: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
selectedFile: File | null = null;
......@@ -31,18 +33,20 @@ export class SubDepartmentTwoComponent implements OnInit {
bu5Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
bu4List: Bu4Model[] = []
bu4: Bu4Model = new MyBu4Model()
bu4Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
currentModal: 'add' | 'edit' | 'delete' = "add"
numDataListChecked = 0
isDataListChecked = false
isDataListCheckedAll = false
......
src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html
......@@ -119,43 +119,8 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
<app-pagination [totalItems]="dataListFilter().length" [pageSize]="pageSize" (pageChange)="currentPage = $event"
(pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
</div>
......
src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.ts
......@@ -16,6 +16,7 @@ export interface DataModel {
styleUrls: ['./company-registration-page.component.scss']
})
export class CompanyRegistrationPageComponent {
pageSize = 10
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
......
src/app/components/pagination/pagination.component.ts
......@@ -11,14 +11,15 @@ export class PaginationComponent {
currentPage = 1;
@Output() pageChange = new EventEmitter<number>();
@Output() pageSizeChange = new EventEmitter<number>();
constructor(private cdr: ChangeDetectorRef) { }
pageSizes = [10, 20, 50, 100];
ngOnChanges() {
this.changePage(1)
this.cdr.detectChanges();
}
constructor(private cdr: ChangeDetectorRef) { }
ngOnChanges() {
this.changePage(1)
this.cdr.detectChanges();
}
get totalPages(): number {
return Math.ceil(this.totalItems / this.pageSize);
}
......@@ -33,7 +34,7 @@ ngOnChanges() {
}
pages.push(1);
if (current > 3) pages.push('...');
const middlePages = [current - 1, current, current + 1].filter(p => p > 1 && p < total);
pages.push(...middlePages);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment