Skip to content

Commit 21f728f

Browse files
AramAlsabtiAramAlsabti
committed
Show api keys
1 parent 8a1dba2 commit 21f728f

File tree

12 files changed

+499
-21
lines changed

12 files changed

+499
-21
lines changed

‎src/app/admin/api-key/api-key-edit/api-key-edit.component.html‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,65 @@
1-
<p>api-key-edit works!</p>
1+
<app-form-header [backButton]="backButton" [title]="title"></app-form-header>
2+
3+
<form (ngSubmit)="onSubmit()" class="os2-form p-3 mt-4">
4+
<div *ngIf="errorMessages" class="error-messages p-3">
5+
<ul class="mb-0">
6+
<li *ngFor="let error of errorMessages">
7+
{{ error | translate }}
8+
</li>
9+
</ul>
10+
</div>
11+
12+
<div class="row mb-5">
13+
<div class="form-group mt-3 col-12">
14+
<label class="form-label" for="name">{{
15+
'API-KEY.EDIT.NAME' | translate
16+
}}</label
17+
>*
18+
<input
19+
type="text"
20+
class="form-control"
21+
id="name"
22+
name="name"
23+
[placeholder]="'API-KEY.EDIT.NAME-PLACEHOLDER' | translate"
24+
maxlength="50"
25+
required
26+
[(ngModel)]="apiKeyRequest.name"
27+
[ngClass]="{
28+
'is-invalid': formFailedSubmit && errorFields.includes('name'),
29+
'is-valid': formFailedSubmit && !errorFields.includes('name')
30+
}"
31+
/>
32+
</div>
33+
</div>
34+
35+
<div class="row mb-5">
36+
<div class="form-group mt-3 col-12">
37+
<label class="form-label" for="permissions">{{
38+
'QUESTION.PERMISSION.SELECT-PERMISSION' | translate
39+
}}</label
40+
>*
41+
<mat-select
42+
class="form-control"
43+
name="permissions"
44+
[compareWith]="compare"
45+
[(ngModel)]="apiKeyRequest.permissions"
46+
>
47+
<mat-option
48+
*ngFor="let permission of permissions"
49+
[value]="permission.id"
50+
>
51+
{{ permission.name }}
52+
</mat-option>
53+
</mat-select>
54+
</div>
55+
</div>
56+
57+
<div class="form-group mt-5">
58+
<button (click)="routeBack()" class="btn btn-secondary" type="button">
59+
{{ 'GEN.CANCEL' | translate }}
60+
</button>
61+
<button class="btn btn-primary ml-2" type="submit">
62+
{{ 'GEN.SAVE' | translate }}
63+
</button>
64+
</div>
65+
</form>

‎src/app/admin/api-key/api-key-edit/api-key-edit.component.ts‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,81 @@
1+
import { Location } from '@angular/common';
12
import { Component, OnInit } from '@angular/core';
3+
import { ActivatedRoute } from '@angular/router';
4+
import { PermissionResponse } from '@app/admin/permission/permission.model';
5+
import { TranslateService } from '@ngx-translate/core';
6+
import { BackButton } from '@shared/models/back-button.model';
7+
import { ApiKeyRequest } from '../api-key.model';
8+
import { ApiKeyService } from '../api-key.service';
29

310
@Component({
411
selector: 'app-api-key-edit',
512
templateUrl: './api-key-edit.component.html',
6-
styleUrls: ['./api-key-edit.component.scss']
13+
styleUrls: ['./api-key-edit.component.scss'],
714
})
815
export class ApiKeyEditComponent implements OnInit {
16+
apiKeyRequest = new ApiKeyRequest();
17+
public backButton: BackButton = {
18+
label: '',
19+
routerLink: ['admin', 'api-key'],
20+
};
21+
public title = '';
22+
public submitButton = '';
23+
private apiKeyId: number;
24+
public errorMessage: string;
25+
public errorMessages: string[];
26+
public errorFields: string[];
27+
public formFailedSubmit = false;
28+
public isEditMode = false;
29+
public permissions: PermissionResponse[] = [];
930

10-
constructor() { }
31+
constructor(
32+
private translate: TranslateService,
33+
private route: ActivatedRoute,
34+
private location: Location,
35+
private apiKeyService: ApiKeyService
36+
) {
37+
translate.use('da');
38+
}
1139

1240
ngOnInit(): void {
41+
this.translate
42+
.get(['NAV.API-KEY', 'FORM.EDIT-API-KEY', 'API-KEY.EDIT.SAVE'])
43+
.subscribe((translations) => {
44+
this.backButton.label = translations['NAV.API-KEY'];
45+
this.title = translations['FORM.EDIT-API-KEY'];
46+
this.submitButton = translations['API-KEY.EDIT.SAVE'];
47+
});
48+
49+
this.apiKeyId = +this.route.snapshot.paramMap.get('api-key-id');
50+
51+
if (this.apiKeyId > 0) {
52+
// TODO: Fetch current api key
53+
this.isEditMode = true;
54+
}
55+
}
56+
57+
onSubmit(): void {
58+
if (this.apiKeyId) {
59+
this.update();
60+
} else {
61+
this.create();
62+
}
63+
}
64+
65+
private create(): void {
66+
// TODO: CREATE
67+
}
68+
69+
private update(): void {
70+
// TODO: UPDATE
71+
this.routeBack();
1372
}
1473

74+
public compare(o1: any, o2: any): boolean {
75+
return o1 === o2;
76+
}
77+
78+
routeBack(): void {
79+
this.location.back();
80+
}
1581
}

‎src/app/admin/api-key/api-key-list/api-key-list.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="row">
55
<div class="col-12">
66
<div class="jumbotron--table">
7-
<app-api-key-table></app-api-key-table>
7+
<app-api-key-table [organisationId]="organisationId"></app-api-key-table>
88
</div>
99
</div>
1010
</div>

‎src/app/admin/api-key/api-key-list/api-key-list.component.ts‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, Input, OnInit } from '@angular/core';
2+
import { Title } from '@angular/platform-browser';
3+
import { TranslateService } from '@ngx-translate/core';
4+
import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
25

36
@Component({
47
selector: 'app-api-key-list',
58
templateUrl: './api-key-list.component.html',
6-
styleUrls: ['./api-key-list.component.scss']
9+
styleUrls: ['./api-key-list.component.scss'],
710
})
811
export class ApiKeyListComponent implements OnInit {
12+
@Input() organisationId: number;
913

10-
constructor() { }
14+
constructor(
15+
public translate: TranslateService,
16+
private titleService: Title,
17+
private globalService: SharedVariableService
18+
) {
19+
translate.use('da');
20+
}
1121

1222
ngOnInit(): void {
23+
this.translate.get(['TITLE.API-KEY']).subscribe((translations) => {
24+
this.titleService.setTitle(translations['TITLE.API-KEY']);
25+
});
26+
this.organisationId = this.globalService.getSelectedOrganisationId();
1327
}
14-
1528
}

‎src/app/admin/api-key/api-key-list/api-key-table/api-key-table.component.html‎

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,98 @@
1-
<p>api-key-table works!</p>
1+
<div class="mat-elevation-z8">
2+
<div class="loading-shade" *ngIf="isLoadingResults">
3+
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
4+
</div>
5+
<table
6+
mat-table
7+
[dataSource]="data"
8+
matSort
9+
matSortActive="name"
10+
matSortDirection="asc"
11+
matSortDisableClear
12+
>
13+
<!-- Name Column -->
14+
<ng-container matColumnDef="name">
15+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
16+
{{ 'API-KEY.NAME' | translate }}
17+
</th>
18+
<td mat-cell *matCellDef="let element">
19+
<!-- <a *ngIf="canAccess(element); else justText"
20+
(click)="routeToPermissions(element)"
21+
routerLinkActive="active" class="permission-link">
22+
{{element.name}}
23+
</a> -->
24+
<!-- <ng-template #justText> -->
25+
{{ element.name }}
26+
<!-- </ng-template> -->
27+
</td>
28+
</ng-container>
29+
30+
<!-- User Groups Column -->
31+
<ng-container matColumnDef="permissions">
32+
<th mat-header-cell *matHeaderCellDef>
33+
{{ 'API-KEY.PERMISSIONS' | translate }}
34+
</th>
35+
<td mat-cell *matCellDef="let element">
36+
<div *ngIf="element.users; else noUsers">
37+
{{ element.users.length }}
38+
</div>
39+
<ng-template #noUsers>{{ 'NoUsersAdded' | translate }}</ng-template>
40+
</td>
41+
</ng-container>
42+
43+
<!-- Key Column -->
44+
<ng-container matColumnDef="key">
45+
<th mat-header-cell *matHeaderCellDef>
46+
{{ 'API-KEY.KEY' | translate }}
47+
</th>
48+
<td mat-cell *matCellDef="let element">
49+
{{ element.key }}
50+
</td>
51+
</ng-container>
52+
53+
<!-- Menu Column -->
54+
<ng-container matColumnDef="menu">
55+
<th mat-header-cell *matHeaderCellDef></th>
56+
<td mat-cell *matCellDef="let element">
57+
<div class="dropdown" *ngIf="canAccess(element)">
58+
<a
59+
href="#"
60+
role="button"
61+
id="tableRowDropdown-{{ element.id }}"
62+
class="applicationRow__edit dropdown-toggle"
63+
data-toggle="dropdown"
64+
aria-expanded="false"
65+
[attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
66+
></a>
67+
<ul
68+
class="dropdown-menu dropdown-menu--table"
69+
attr.aria-labelledby="tableRowDropdown-{{ element.id }}"
70+
>
71+
<li class="dropdown-item">
72+
<a
73+
[routerLink]="['/admin/api-key', element.id, 'edit-api-key']"
74+
routerLinkActive="active"
75+
>{{ 'API-KEY.TABLE-ROW.EDIT' | translate }}
76+
</a>
77+
</li>
78+
<li class="dropdown-item">
79+
<a (click)="deleteApiKey(element.id)" [routerLink]=""
80+
>{{ 'API-KEY.TABLE-ROW.DELETE' | translate }}
81+
</a>
82+
</li>
83+
</ul>
84+
</div>
85+
</td>
86+
</ng-container>
87+
88+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
89+
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
90+
</table>
91+
<mat-paginator
92+
[pageSizeOptions]="[5, 10, 20]"
93+
[pageSize]="pageSize"
94+
[length]="resultsLength"
95+
showFirstLastButtons
96+
>
97+
</mat-paginator>
98+
</div>

0 commit comments

Comments
 (0)