MaDgIK
/
developers
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

[develop | DONE | ADDED]: Add paging in admin panel.

This commit is contained in:
Konstantinos Triantafyllou 2023-10-25 10:41:04 +03:00
parent 79c198518b
commit 46759a8715
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/admin/admin.component.ts
View File

@ -25,8 +25,14 @@ import {Option} from "../openaireLibrary/sharedComponents/input/input.component"
<loading class="uk-position-center"></loading> <loading class="uk-position-center"></loading>
</div> </div>
<div *ngIf="!loading"> <div *ngIf="!loading">
<div *ngIf="apisByIssuers.length > 0" class="uk-margin-medium-bottom uk-width-1-2@m"> <div class="uk-flex uk-flex-middle uk-flex-wrap uk-margin-medium-bottom">
<div input type="select" placeholder="Issuer" [options]="issuers" [value]="issuer" (valueChange)="changeIssuer($event)"></div> <div *ngIf="apisByIssuers.length > 0" class="uk-width-1-2@m">
<div input type="select" placeholder="Issuer" [options]="issuers" [value]="issuer" (valueChange)="changeIssuer($event)"></div>
</div>
<div class="uk-width-1-2@m">
<paging-no-load [currentPage]="page" customClasses="uk-flex-right"
[totalResults]="apis.length" (pageChange)="page = $event.value"></paging-no-load>
</div>
</div> </div>
<div *ngIf="apis.length === 0" <div *ngIf="apis.length === 0"
class="uk-margin-large-top uk-card uk-card-default uk-height-small uk-position-relative"> class="uk-margin-large-top uk-card uk-card-default uk-height-small uk-position-relative">
@ -42,7 +48,7 @@ import {Option} from "../openaireLibrary/sharedComponents/input/input.component"
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let api of apis; let i=index"> <tr *ngFor="let api of apis.slice((page-1)*10, (page)*10 - 1); let i=index">
<td>{{api.service.name}}</td> <td>{{api.service.name}}</td>
<td>{{api.service.clientId}}</td> <td>{{api.service.clientId}}</td>
<td>{{api.service.owner}}</td> <td>{{api.service.owner}}</td>
@ -174,6 +180,7 @@ export class AdminComponent implements OnInit, OnDestroy{
availableIssuers: Option[] = []; availableIssuers: Option[] = [];
index: number = -1; index: number = -1;
activeIssuerIndex = 0; activeIssuerIndex = 0;
page = 1;
copyServicesForm: FormGroup; copyServicesForm: FormGroup;
@ViewChild("copyModal") copyModal: AlertModal; @ViewChild("copyModal") copyModal: AlertModal;
@ViewChild("deleteModal") deleteModal: AlertModal; @ViewChild("deleteModal") deleteModal: AlertModal;
@ -245,6 +252,7 @@ export class AdminComponent implements OnInit, OnDestroy{
this.issuer = issuer; this.issuer = issuer;
let apisByIssuer = this.apisByIssuers.find(apisByIssuer => apisByIssuer.issuer == issuer); let apisByIssuer = this.apisByIssuers.find(apisByIssuer => apisByIssuer.issuer == issuer);
this.apis = apisByIssuer.apis; this.apis = apisByIssuer.apis;
this.page = 1;
} }
openDeleteModal(index: number) { openDeleteModal(index: number) {

3
src/app/admin/admin.module.ts
View File

@ -7,11 +7,12 @@ import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module"; import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module";
import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module"; import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module";
import {PagingModule} from "../openaireLibrary/utils/paging.module";
@NgModule({ @NgModule({
imports: [CommonModule, RouterModule.forChild([ imports: [CommonModule, RouterModule.forChild([
{path: '', component: AdminComponent} {path: '', component: AdminComponent}
]), IconsModule, LoadingModule, PageContentModule, AlertModalModule, InputModule], ]), IconsModule, LoadingModule, PageContentModule, AlertModalModule, InputModule, PagingModule],
declarations: [AdminComponent], declarations: [AdminComponent],
exports: [AdminComponent] exports: [AdminComponent]
}) })