Skip to content

M
mySkill-x
Commit 0b1de934 by Nattana Chaiyamat
Options

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

parent 458c215e
Showing with 28 additions and 175 deletions
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.component.html
......@@ -101,7 +101,7 @@
</tbody>
<tbody *ngIf="dataListFilter().length">
<tr
*ngFor="let data of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
*ngFor="let data of dataListFilter() | slice:((currentPage-1) * pageSize) : (((currentPage-1) * pageSize) + pageSize);let i = index">
<td class="text-center align-center">
{{ data.code }}
</td>
......@@ -149,7 +149,7 @@
class="ti-btn rounded-sm ti-btn-secondary text-center m-0 hs-tooltip ti-main-tooltip flex"
[ngClass]="{'cursor-default [--trigger:click]': m < 3,
' cursor-pointer [--trigger:hover]': m == 3}" style="height: 15px; width: 45px"
(click)="(m < 3 ? null :dataSelectIndex=i);(m < 3 ? null :assessmentToolsSelectIndex=[l,m])"
(click)="searchModal = '';pageSizeModal =10; currentPageModal = 1;assessmentToolsModalSearchChange();(m < 3 ? null :dataSelectIndex=i);(m < 3 ? null :assessmentToolsSelectIndex=[l,m])"
[attr.data-hs-overlay]="m < 3 ? null : '#assessment-tools-modal'">
<ng-container [ngSwitch]="m < 3">
<ng-container *ngSwitchCase="true">
......@@ -179,14 +179,14 @@
<button type="button" class="flex text-start items-center cursor-default"
*ngIf="!seeTab">
<i class="ti ti-circle-plus text-green-500 cursor-pointer"
(click)="dataSelectIndex=i;dataSelect=data;assessmentToolsSelectIndex=[l,data.assessmentTools.length]"
(click)="searchModal = '';pageSizeModal =10; currentPageModal = 1;assessmentToolsModalSearchChange();dataSelectIndex=i;dataSelect=data;assessmentToolsSelectIndex=[l,data.assessmentTools.length]"
data-hs-overlay="#assessment-tools-modal"></i>
</button>
</span>
<button *ngIf="!data.assessmentTools.length&&!seeTab" type="button"
class="flex text-start items-center cursor-default">
<i class="ti ti-circle-plus text-green-500 cursor-pointer"
(click)="dataSelectIndex=i;dataSelect=data;assessmentToolsSelectIndex=[0,data.assessmentTools.length]"
(click)="searchModal = '';pageSizeModal =10; currentPageModal = 1;assessmentToolsModalSearchChange();dataSelectIndex=i;dataSelect=data;assessmentToolsSelectIndex=[0,data.assessmentTools.length]"
data-hs-overlay="#assessment-tools-modal"></i>
</button>
</div>
......@@ -194,7 +194,8 @@
<td class="items-center justify-center">
<div class="flex items-center w-full space-x-2">
<i *ngIf="!seeTab" class="ti ti ti-book cursor-pointer i-gray px-1" style="font-size: 28px;"
(click)="dataSelectIndex=i" data-hs-overlay="#curriculum-modal"></i>
(click)="searchModal = '';pageSizeModal =10; currentPageModal = 1;curriculumModalSearchChange();dataSelectIndex=i"
data-hs-overlay="#curriculum-modal"></i>
<div class="flex flex-col flex-grow" *ngIf="data.curriculum.length">
<div class="grid grid-cols-1 gap-1">
<span *ngFor="let item of data.curriculum;let l=index"
......@@ -227,50 +228,15 @@
</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>
<div id="assessment-tools-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto !max-w-3/4">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
......@@ -299,12 +265,12 @@
</div>
</div>
</div>
<div class="px-1">
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div> -->
</div>
</div>
<div class="page px-rem">
......@@ -343,7 +309,7 @@
</tbody>
<tbody *ngIf="!assessmentToolsLoading&&assessmentToolsListFilter().length">
<tr
*ngFor="let item of assessmentToolsListFilter() | slice:((currentPageModal-1) * 10) : (((currentPageModal-1) * 10) + 10);let i = index">
*ngFor="let item of assessmentToolsListFilter() | slice:((currentPageModal-1) * pageSizeModal) : (((currentPageModal-1) * pageSizeModal) + pageSizeModal);let i = index">
<td class="flex justify-center">{{item.code}}</td>
<td>{{item.name}}</td>
<td>{{item.nameShow}}</td>
......@@ -363,49 +329,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 my-5" *ngIf="pageModal.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal-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&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=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==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<a class="page-link" href="javascript:void(0);"
[class.active]="item==currentPageModal" (click)="currentPageModal=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.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)="currentPageModal = (currentPageModal > pageModal.length-1 ? currentPageModal: currentPageModal+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 {{((currentPageModal-1) * 10)+1}} to {{assessmentToolsListFilter().length<10
?assessmentToolsListFilter().length: (currentPageModal==pageModal.length ?
((currentPageModal * 10) - ((currentPageModal * 10) -
assessmentToolsListFilter().length) ) :(currentPageModal * 10) ) }} of
{{assessmentToolsListFilter().length}} items</span>
</ul>
</nav>
<app-pagination [totalItems]="assessmentToolsListFilter().length" [pageSize]="pageSizeModal"
(pageChange)="currentPageModal = $event"
(pageSizeChange)="pageSizeModal = $event;currentPageModal = 1"></app-pagination>
</div>
</div>
</div>
......@@ -414,7 +340,7 @@
<div id="curriculum-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto !max-w-3/4">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
......@@ -442,12 +368,12 @@
</div>
</div>
</div>
<div class="px-1">
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div> -->
</div>
</div>
<div class="page px-rem">
......@@ -476,7 +402,7 @@
</tbody>
<tbody *ngIf="curriculumListFilter().length">
<tr
*ngFor="let item of curriculumListFilter() | slice:((currentPageModal-1) * 10) : (((currentPageModal-1) * 10) + 10);let i = index">
*ngFor="let item of curriculumListFilter() | slice:((currentPageModal-1) * pageSizeModal) : (((currentPageModal-1) * pageSizeModal) + pageSizeModal);let i = index">
<td class="flex justify-center">{{item.code}}</td>
<td>{{item.name}}</td>
<td class="flex justify-center items-center">
......@@ -493,48 +419,9 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 my-5" *ngIf="pageModal.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal-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&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=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==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<a class="page-link" href="javascript:void(0);"
[class.active]="item==currentPageModal" (click)="currentPageModal=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.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)="currentPageModal = (currentPageModal > pageModal.length-1 ? currentPageModal: currentPageModal+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 {{((currentPageModal-1) * 10)+1}} to {{curriculumListFilter().length<10
?curriculumListFilter().length: (currentPageModal==pageModal.length ?
((currentPageModal * 10) - ((currentPageModal * 10) - curriculumListFilter().length)
) :(currentPageModal * 10) ) }} of {{curriculumListFilter().length}} items</span>
</ul>
</nav>
<app-pagination [totalItems]="curriculumListFilter().length" [pageSize]="pageSizeModal"
(pageChange)="currentPageModal = $event"
(pageSizeChange)="pageSizeModal = $event;currentPageModal = 1"></app-pagination>
</div>
</div>
</div>
......
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({})
......
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