Merge pull request #64 from OS2iot/feature/1247_edit-api-key

Edit API key

Author: AramAlsabti

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

@@ -42,7 +42,7 @@
         class="form-control"
         name="permissions"
         [compareWith]="compare"
-        [(ngModel)]="apiKeyRequest.permissions"
+        [(ngModel)]="apiKeyRequest.permissionIds"
         [multiple]="true"
       >
         <mat-option

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

@@ -30,6 +30,7 @@ export class ApiKeyEditComponent implements OnInit {
   public formFailedSubmit = false;
   public permissions: PermissionResponse[] = [];
   private organizationId: number;
+  private id: number;
 
   constructor(
     private translate: TranslateService,
@@ -39,9 +40,7 @@ export class ApiKeyEditComponent implements OnInit {
     private permissionService: PermissionService,
     private errorMessageService: ErrorMessageService,
     private sharedVariableService: SharedVariableService
-  ) {
-    translate.use('da');
-  }
+  ) {}
 
   ngOnInit(): void {
     this.getPermissions();
@@ -54,6 +53,11 @@ export class ApiKeyEditComponent implements OnInit {
         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();
   }
 
@@ -68,8 +72,8 @@ export class ApiKeyEditComponent implements OnInit {
         this.organizationId
       )
       .subscribe(
-        (permissions) => {
-          this.permissions = permissions.data.filter(
+        (permissionsResponse) => {
+          this.permissions = permissionsResponse.data.filter(
             (x) => x.organization?.id === this.organizationId
           );
         },
@@ -79,8 +83,16 @@ export class ApiKeyEditComponent implements OnInit {
       );
   }
 
+  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.create();
+    this.id ? this.update() : this.create();
   }
 
   private create(): void {
@@ -90,11 +102,21 @@ export class ApiKeyEditComponent implements OnInit {
     );
   }
 
-  public compare(o1: any, o2: any): boolean {
-    return o1 === o2;
+  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;
   }
 
-  private showError(err: HttpErrorResponse) {
+  showError(err: HttpErrorResponse) {
     const result = this.errorMessageService.handleErrorMessageWithFields(err);
     this.errorFields = result.errorFields;
     this.errorMessages = result.errorMessages;

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

@@ -50,12 +50,34 @@
     <ng-container matColumnDef="menu">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let element">
-        <a
-          *ngIf="canAccess(element)"
-          (click)="deleteApiKey(element.id)"
-          [routerLink]=""
-          >{{ 'API-KEY.TABLE-ROW.DELETE' | translate }}
-        </a>
+        <div *ngIf="canAccess(element)" class="dropdown">
+          <a
+            href="#"
+            role="button"
+            id="tableRowDropdown-{{ element.id }}"
+            class="applicationRow__edit dropdown-toggle"
+            data-toggle="dropdown"
+            aria-expanded="false"
+            [attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"
+          ></a>
+          <ul
+            class="dropdown-menu dropdown-menu--table"
+            attr.aria-labelledby="tableRowDropdown-{{ element.id }}"
+          >
+            <li class="dropdown-item">
+              <a
+                [routerLink]="[element.id, 'edit-api-key']"
+                routerLinkActive="active"
+                >{{ 'ORGANISATION-TABLE-ROW.EDIT' | translate }}
+              </a>
+            </li>
+            <li class="dropdown-item">
+              <a (click)="deleteApiKey(element.id)" [routerLink]=""
+                >{{ 'API-KEY.TABLE-ROW.DELETE' | translate }}
+              </a>
+            </li>
+          </ul>
+        </div>
       </td>
     </ng-container>
 

src/app/admin/api-key/api-key.model.ts

@@ -3,7 +3,7 @@ import { PermissionResponse } from '../permission/permission.model';
 export class ApiKeyRequest {
   id: number;
   name: string;
-  permissions?: PermissionResponse[];
+  permissionIds?: number[];
 }
 
 export interface ApiKeyResponse {

src/app/admin/api-key/api-key.service.ts

@@ -25,6 +25,12 @@ export class ApiKeyService {
     });
   }
 
+  update(body: ApiKeyRequest, id: number): Observable<ApiKeyResponse> {
+    return this.restService.put(this.endpoint, body, id, {
+      observe: 'response',
+    });
+  }
+
   get(id: number): Observable<ApiKeyResponse> {
     return this.restService.get(this.endpoint, {}, id).pipe(
       map((response: ApiKeyResponse) => {