การจัดการตัวชี้วัดเเละหลักสูตร

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.component.ts

@@ -38,6 +38,7 @@ export class EditGroupIndicators implements OnInit {
 	@Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
 	search = ""
 	currentPage = 1
+	pageSize = 10
 	page = Array.from({ length: 1 }, (_, i) => i + 1);
 	dataList: DataModel[] = []
 	dataSelect: DataModel = {
@@ -51,6 +52,7 @@ export class EditGroupIndicators implements OnInit {
 	dataSelectAssessmentToolsIndex: number = -1
 	searchModal = ""
 	currentPageModal = 1
+	pageSizeModal = 10
 	pageModal = Array.from({ length: 1 }, (_, i) => i + 1);
 	assessmentToolsLoading = false
 	assessmentToolsList: AssessmentToolsModal[] = []
@@ -60,7 +62,6 @@ export class EditGroupIndicators implements OnInit {
 	curriculumSelectIndex: number = -1
 	dataLoading = false
 
-
 	constructor(private assessmentService: AssessmentService,
 		private cdr: ChangeDetectorRef,
 		private toastr: ToastrService,

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html

@@ -62,7 +62,7 @@
         </tbody>
         <tbody *ngIf="!dataLoading&&dataListFilter().length">
           <tr
-            *ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
+            *ngFor="let item of dataListFilter() | slice:((currentPage-1) * pageSize) : (((currentPage-1) * pageSize) + pageSize);let i = index">
             <td class="text-center">
               {{item.code}}
             </td>
@@ -80,43 +80,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 !pl-0" 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>
 </ng-container>
 

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.ts

@@ -21,7 +21,7 @@ export class IndicatorsAndCurriculumComponent {
   currentPage = 1
   search = ""
   page = Array.from({ length: 1 }, (_, i) => i + 1);
-
+  pageSize = 10
   dataList: DataModel[] = []
   indicatorsCoursesList: CompetencytopicModel[] = []
   indicatorsCourses: CompetencytopicModel = new MyCompetencytopicModel({})