Merge from stage prior to release v.1.1.0

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

src/app/admin/admin-routing.module.ts

@@ -12,6 +12,9 @@ import { UserDetailComponent } from './users/user-detail/user-detail.component';
 import { UserEditComponent } from './users/user-edit/user-edit.component';
 import { UserListComponent } from './users/user-list/user-list.component';
 import { UsersComponent } from './users/users.component';
+import { ApiKeyComponent } from './api-key/api-key.component';
+import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
+import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
 
 
 const adminRoutes: Routes = [
@@ -44,6 +47,18 @@ const adminRoutes: Routes = [
             },
         ],
     },
+    {
+        path: 'api-key',
+        component: ApiKeyComponent,
+        children: [
+            { path: '', component: ApiKeyListComponent },
+            { path: 'new-api-key', component: ApiKeyEditComponent },
+            {
+                path: ':api-key-id/edit-api-key',
+                component: ApiKeyEditComponent,
+            },
+        ],
+    },
 
 
 ];

src/app/admin/admin.module.ts

@@ -28,6 +28,10 @@ import { UsersComponent } from './users/users.component';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-select-search.module';
+import { ApiKeyComponent } from './api-key/api-key.component';
+import { ApiKeyListComponent } from './api-key/api-key-list/api-key-list.component';
+import { ApiKeyTableComponent } from './api-key/api-key-list/api-key-table/api-key-table.component';
+import { ApiKeyEditComponent } from './api-key/api-key-edit/api-key-edit.component';
 
 @NgModule({
   declarations: [
@@ -46,6 +50,10 @@ import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-
     OrganisationDetailComponent,
     OrganisationEditComponent,
     OrganisationListComponent,
+    ApiKeyComponent,
+    ApiKeyListComponent,
+    ApiKeyTableComponent,
+    ApiKeyEditComponent,
   ],
   imports: [
     AdminRoutingModule,
@@ -79,6 +87,10 @@ import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-
     OrganisationDetailComponent,
     OrganisationEditComponent,
     OrganisationListComponent,
+    ApiKeyComponent,
+    ApiKeyListComponent,
+    ApiKeyTableComponent,
+    ApiKeyEditComponent,
   ],
 })
 export class AdminModule {}

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

@@ -0,0 +1,66 @@
+<app-form-header [backButton]="backButton" [title]="title"></app-form-header>
+
+<form (ngSubmit)="onSubmit()" class="os2-form p-3 mt-4">
+  <div *ngIf="errorMessages" class="error-messages p-3">
+    <ul class="mb-0">
+      <li *ngFor="let error of errorMessages">
+        {{ error | translate }}
+      </li>
+    </ul>
+  </div>
+
+  <div class="row mb-5">
+    <div class="form-group mt-3 col-12">
+      <label class="form-label" for="name">{{
+        'API-KEY.EDIT.NAME' | translate
+      }}</label
+      >*
+      <input
+        type="text"
+        class="form-control"
+        id="name"
+        name="name"
+        [placeholder]="'API-KEY.EDIT.NAME-PLACEHOLDER' | translate"
+        maxlength="50"
+        required
+        [(ngModel)]="apiKeyRequest.name"
+        [ngClass]="{
+          'is-invalid': formFailedSubmit && errorFields.includes('name'),
+          'is-valid': formFailedSubmit && !errorFields.includes('name')
+        }"
+      />
+    </div>
+  </div>
+
+  <div class="row mb-5">
+    <div class="form-group mt-3 col-12">
+      <label class="form-label" for="permissions">{{
+        'QUESTION.PERMISSION.SELECT-PERMISSION' | translate
+      }}</label
+      >*
+      <mat-select
+        class="form-control"
+        name="permissions"
+        [compareWith]="compare"
+        [(ngModel)]="apiKeyRequest.permissionIds"
+        [multiple]="true"
+      >
+        <mat-option
+          *ngFor="let permission of permissions"
+          [value]="permission.id"
+        >
+          {{ permission.name }}
+        </mat-option>
+      </mat-select>
+    </div>
+  </div>
+
+  <div class="form-group mt-5">
+    <button (click)="routeBack()" class="btn btn-secondary" type="button">
+      {{ 'GEN.CANCEL' | translate }}
+    </button>
+    <button class="btn btn-primary ml-2" type="submit">
+      {{ 'GEN.SAVE' | translate }}
+    </button>
+  </div>
+</form>

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

@@ -0,0 +1,128 @@
+import { Location } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PermissionResponse } from '@app/admin/permission/permission.model';
+import { PermissionService } from '@app/admin/permission/permission.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ErrorMessageService } from '@shared/error-message.service';
+import { BackButton } from '@shared/models/back-button.model';
+import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
+import { ApiKeyRequest } from '../api-key.model';
+import { ApiKeyService } from '../api-key.service';
+
+@Component({
+  selector: 'app-api-key-edit',
+  templateUrl: './api-key-edit.component.html',
+  styleUrls: ['./api-key-edit.component.scss'],
+})
+export class ApiKeyEditComponent implements OnInit {
+  apiKeyRequest = new ApiKeyRequest();
+  public backButton: BackButton = {
+    label: '',
+    routerLink: ['admin', 'api-key'],
+  };
+  public title = '';
+  public submitButton = '';
+  public errorMessage: string;
+  public errorMessages: string[];
+  public errorFields: string[];
+  public formFailedSubmit = false;
+  public permissions: PermissionResponse[] = [];
+  private organizationId: number;
+  private id: number;
+
+  constructor(
+    private translate: TranslateService,
+    private route: ActivatedRoute,
+    private location: Location,
+    private apiKeyService: ApiKeyService,
+    private permissionService: PermissionService,
+    private errorMessageService: ErrorMessageService,
+    private sharedVariableService: SharedVariableService
+  ) {}
+
+  ngOnInit(): void {
+    this.getPermissions();
+    this.translate.use('da');
+    this.translate
+      .get(['NAV.API-KEY', 'FORM.EDIT-API-KEY', 'API-KEY.EDIT.SAVE'])
+      .subscribe((translations) => {
+        this.backButton.label = translations['NAV.API-KEY'];
+        this.title = translations['FORM.EDIT-API-KEY'];
+        this.submitButton = translations['API-KEY.EDIT.SAVE'];
+      });
+
+    this.id = +this.route.snapshot.paramMap.get('api-key-id');
+
+    if (this.id > 0) {
+      this.getApiKey(this.id);
+    }
+    this.organizationId = this.sharedVariableService.getSelectedOrganisationId();
+  }
+
+  private getPermissions() {
+    this.permissionService
+      .getPermissions(
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        this.organizationId
+      )
+      .subscribe(
+        (permissionsResponse) => {
+          this.permissions = permissionsResponse.data.filter(
+            (x) => x.organization?.id === this.organizationId
+          );
+        },
+        (error: HttpErrorResponse) => {
+          this.showError(error);
+        }
+      );
+  }
+
+  private getApiKey(id: number) {
+    this.apiKeyService.get(id).subscribe((key) => {
+      this.apiKeyRequest.id = key.id;
+      this.apiKeyRequest.name = key.name;
+      this.apiKeyRequest.permissionIds = key.permissions.map((pm) => pm.id);
+    });
+  }
+
+  onSubmit(): void {
+    this.id ? this.update() : this.create();
+  }
+
+  private create(): void {
+    this.apiKeyService.create(this.apiKeyRequest).subscribe(
+      () => this.routeBack(),
+      (err) => this.showError(err)
+    );
+  }
+
+  private update(): void {
+    this.apiKeyService.update(this.apiKeyRequest, this.id).subscribe(
+      () => this.routeBack(),
+      (err) => this.showError(err)
+    );
+  }
+
+  public compare(
+    matOptionValue: number,
+    ngModelObject: number
+  ): boolean {
+    return matOptionValue === ngModelObject;
+  }
+
+  showError(err: HttpErrorResponse) {
+    const result = this.errorMessageService.handleErrorMessageWithFields(err);
+    this.errorFields = result.errorFields;
+    this.errorMessages = result.errorMessages;
+  }
+
+  routeBack(): void {
+    this.location.back();
+  }
+}

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

@@ -0,0 +1,17 @@
+<app-top-bar
+  [title]="'NAV.API-KEY' | translate"
+  [ctaLabel]="'API-KEY.CREATE-NEW-API-KEY' | translate"
+  [ctaRouterLink]="'new-api-key'"
+>
+</app-top-bar>
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <div class="jumbotron--table">
+        <app-api-key-table
+          [organisationId]="organisationId"
+        ></app-api-key-table>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { SharedVariableService } from '@shared/shared-variable/shared-variable.service';
+
+@Component({
+  selector: 'app-api-key-list',
+  templateUrl: './api-key-list.component.html',
+  styleUrls: ['./api-key-list.component.scss'],
+})
+export class ApiKeyListComponent implements OnInit {
+  @Input() organisationId: number;
+
+  constructor(
+    public translate: TranslateService,
+    private titleService: Title,
+    private globalService: SharedVariableService
+  ) {
+    translate.use('da');
+  }
+
+  ngOnInit(): void {
+    this.translate.get(['TITLE.API-KEY']).subscribe((translations) => {
+      this.titleService.setTitle(translations['TITLE.API-KEY']);
+    });
+    this.organisationId = this.globalService.getSelectedOrganisationId();
+  }
+}