It is now possible to add permission to application on creation (#138)

fcv-iteratorIt · web-flow · commit 88e8aff5202d · 2023-06-26T14:08:29.000+02:00
diff --git a/src/app/admin/permission/permission-edit/permission-edit.component.html b/src/app/admin/permission/permission-edit/permission-edit.component.html
@@ -67,9 +67,15 @@
         <mat-form-field>
             <label class="form-label" for="name">{{'PERMISSION.EDIT.APPS' | translate}}</label>
             <div class="col-12">
-                <mat-select [formControl]="applicationMultiCtrl" [multiple]="true"
-                    panelClass="overflow-x-hidden" [(value)]="permission.applicationIds" id="applicationIds"
-                    name="applicationIds" #multiSelect [compareWith]="compare">
+                <mat-select
+                  id="applicationIds"
+                  [formControl]="applicationMultiCtrl"
+                  [multiple]="true"
+                  panelClass="overflow-x-hidden"
+                  [(value)]="permission.applicationIds"
+                  name="applicationIds"
+                  #multiSelect
+                  [compareWith]="compare">
                     <app-mat-select-search [formControl]="applicationMultiFilterCtrl"></app-mat-select-search>
                     <mat-option *ngFor="let app of filteredApplicationsMulti | async" [value]="app.id">
                         {{app.name}}
diff --git a/src/app/applications/application.model.ts b/src/app/applications/application.model.ts
@@ -30,6 +30,7 @@ export class Application {
   public hardware?: string;
   public controlledProperties?: ControlledProperty[];
   public deviceTypes?: ApplicationDeviceType[];
+  public permissionIds: number[];
 }
 
 export class ApplicationRequest {
@@ -48,6 +49,7 @@ export class ApplicationRequest {
   public hardware?: string;
   public controlledProperties?: ControlledPropertyTypes[];
   public deviceTypes?: ApplicationDeviceTypeUnion[];
+  public permissionIds: number[];
 }
 
 export interface ApplicationData {
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.html b/src/app/shared/components/forms/form-body-application/form-body-application.component.html
@@ -24,9 +24,27 @@
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('description'), 'is-valid' : formFailedSubmit && !errorFields.includes('description')}"></textarea>
     </div>
 
+    <div class="form-group mt-3 col-12">
+        <label class="form-label" for="userGroup">{{'QUESTION.APPLICATION.ADD-PERMISSION' | translate}}</label>
+          <mat-select
+            id="userGroup"
+            class="form-control"
+            [formControl]="permissionMultiCtrl"
+            [multiple]="true"
+            panelClass="overflow-x-hidden"
+            [(value)]="application.permissionIds"
+            [compareWith]="compare">
+            <app-mat-select-search [formControl]="permissionMultiFilterCtrl"></app-mat-select-search>
+            <mat-option *ngFor="let permission of filteredPermissionsMulti | async" [value]="permission.id">
+              {{permission.name}}
+            </mat-option>
+          </mat-select>
+          <mat-hint>{{'QUESTION.APPLICATION.PERMISSION-HINT' | translate}}</mat-hint>
+    </div>
+
     <div class="form-group mt-3">
-      <label class="form-label" for="application.status">{{'APPLICATION.METADATA-FIELD.STATUS' | translate}}</label>
-      <mat-select class="form-control" name="application.statusOptions" [(ngModel)]="application.status"
+      <label class="form-label" for="application.statusOptions">{{'APPLICATION.METADATA-FIELD.STATUS' | translate}}</label>
+      <mat-select class="form-control" id="application.statusOptions" name="application.statusOptions" [(ngModel)]="application.status"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.status'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.status')}">
         <mat-option *ngFor="let statusOption of statuses" [value]="statusOption.value">
           {{statusOption.label}}
@@ -37,7 +55,7 @@
     <div class="form-group mt-3">
       <label class="form-label" for="application.startDate">{{'APPLICATION.METADATA-FIELD.START-DATE' |
         translate}}</label>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="fill" id="application.startDate">
         <mat-label>{{'QUESTION.APPLICATION.START-DATE-PLACEHOLDER' | translate}}</mat-label>
         <input matInput [max]="serializedEndDate.value" [matDatepicker]="startDatePicker"
           [formControl]="serializedStartDate"
@@ -50,7 +68,7 @@
 
     <div class="form-group mt-3">
       <label class="form-label" for="application.endDate">{{'APPLICATION.METADATA-FIELD.END-DATE' | translate}}</label>
-      <mat-form-field appearance="fill">
+      <mat-form-field appearance="fill" id="application.endDate">
         <mat-label>{{'QUESTION.APPLICATION.END-DATE-PLACEHOLDER' | translate}}</mat-label>
         <input matInput [min]="serializedStartDate.value" [matDatepicker]="endDatePicker"
           [formControl]="serializedEndDate"
@@ -62,23 +80,23 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.category">{{'APPLICATION.METADATA-FIELD.CATEGORY' | translate}}</label>
+      <label class="form-label" for="category">{{'APPLICATION.METADATA-FIELD.CATEGORY' | translate}}</label>
       <input type="text" class="form-control" id="category" name="category"
         [placeholder]="'QUESTION.APPLICATION.CATEGORY-PLACEHOLDER' | translate" maxlength="100"
         [(ngModel)]="application.category"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.category'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.category')}">
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.owner">{{'APPLICATION.METADATA-FIELD.OWNER' | translate}}</label>
+      <label class="form-label" for="owner">{{'APPLICATION.METADATA-FIELD.OWNER' | translate}}</label>
       <input type="text" class="form-control" id="owner" name="owner"
         [placeholder]="'QUESTION.APPLICATION.OWNER-PLACEHOLDER' | translate" maxlength="100"
         [(ngModel)]="application.owner"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.owner'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.owner')}">
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.contactPerson">{{'APPLICATION.METADATA-FIELD.CONTACT-PERSON' |
+      <label class="form-label" for="contactPerson">{{'APPLICATION.METADATA-FIELD.CONTACT-PERSON' |
         translate}}</label>
       <input type="text" class="form-control" id="contactPerson" name="contactPerson"
         [placeholder]="'QUESTION.APPLICATION.CONTACT-PERSON-PLACEHOLDER' | translate" maxlength="100"
@@ -87,7 +105,7 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.contactEmail">{{'APPLICATION.METADATA-FIELD.CONTACT-EMAIL' |
+      <label class="form-label" for="contactEmail">{{'APPLICATION.METADATA-FIELD.CONTACT-EMAIL' |
         translate}}</label>
       <input type="email" class="form-control" id="contactEmail" name="contactEmail"
         [placeholder]="'QUESTION.APPLICATION.CONTACT-EMAIL-PLACEHOLDER' | translate" maxlength="50" [email]="true"
@@ -96,7 +114,7 @@
     </div>
 
     <div class="form-group mt-3">
-      <label class="form-label" for="application.contactPhone">{{'APPLICATION.METADATA-FIELD.CONTACT-PHONE' |
+      <label class="form-label" for="contactPhone">{{'APPLICATION.METADATA-FIELD.CONTACT-PHONE' |
         translate}}</label>
       <input type="text" class="form-control" id="contactPhone" name="contactPhone" [formControl]="phoneCtrl"
         [placeholder]="'QUESTION.APPLICATION.CONTACT-PHONE-PLACEHOLDER' | translate" maxlength="12"
@@ -126,7 +144,7 @@
       <label class="form-label" for="application.controlledProperty">{{'APPLICATION.METADATA-FIELD.CONTROLLED-PROPERTY'
         |
         translate}}</label>
-      <mat-select class="form-control" name="application.controlledProperty" multiple="true"
+      <mat-select class="form-control" name="application.controlledProperty" id="application.controlledProperty" multiple="true"
         [(ngModel)]="application.controlledProperties"
         [placeholder]="'QUESTION.APPLICATION.CONTROLLED-PROPERTY-PLACEHOLDER' | translate"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.controlledProperty'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.controlledProperty')}">
@@ -139,7 +157,7 @@
     <div class="form-group mt-3">
       <label class="form-label" for="application.deviceType">{{'APPLICATION.METADATA-FIELD.DEVICE-TYPE' |
         translate}}</label>
-      <mat-select class="form-control" name="application.deviceType" multiple="true"
+      <mat-select class="form-control" name="application.deviceType" id="application.deviceType" multiple="true"
         [(ngModel)]="application.deviceTypes" [placeholder]="'QUESTION.APPLICATION.DEVICE-TYPE-PLACEHOLDER' | translate"
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('application.deviceType'), 'is-valid' : formFailedSubmit && !errorFields.includes('application.deviceType')}">
         <mat-option *ngFor="let deviceType of deviceTypes" [value]="deviceType.value">
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.ts b/src/app/shared/components/forms/form-body-application/form-body-application.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { ReplaySubject, Subject, Subscription } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { RestService } from '@shared/services/rest.service';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -21,6 +21,10 @@ import {
   ApplicationDeviceTypeEntries,
 } from '@shared/enums/device-type';
 import { isPhoneNumberValid } from '@shared/validators/phone-number.validator';
+import { PermissionResponse } from '@app/admin/permission/permission.model';
+import { takeUntil } from 'rxjs/operators';
+import { PermissionService } from '@app/admin/permission/permission.service';
+import { MeService } from '@shared/services/me.service';
 
 export class User {
   public name: string;
@@ -58,13 +62,25 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
   controlledProperties = Object.values(ControlledPropertyTypes);
   deviceTypes: DropdownOption[] = [];
 
+  permissionsSubscription: Subscription;
+  public permissions: PermissionResponse[];
+  public permissionMultiCtrl: UntypedFormControl = new UntypedFormControl();
+  public permissionMultiFilterCtrl: UntypedFormControl = new UntypedFormControl();
+  public filteredPermissionsMulti: ReplaySubject<
+    PermissionResponse[]
+  > = new ReplaySubject<PermissionResponse[]>(1);
+
+  private _onDestroy = new Subject<void>();
+
   constructor(
     private restService: RestService,
     private applicationService: ApplicationService,
     private route: ActivatedRoute,
     public translate: TranslateService,
     private router: Router,
-    private sharedVariableService: SharedVariableService
+    private permissionService: PermissionService,
+    private sharedVariableService: SharedVariableService,
+    private meService: MeService
   ) {
     this.fillDefaultMetadata();
     this.phoneCtrl = new UntypedFormControl(this.application.contactPhone, [
@@ -78,6 +94,7 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
     if (this.id) {
       this.getApplication(this.id);
     }
+    this.getPermissions(this.sharedVariableService.getUserInfo().user.id);
 
     const statusTranslationPrefix = 'APPLICATION.STATUS.';
     const statusTranslationKeys = ApplicationStatusEntries.map(
@@ -111,6 +128,28 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
         }));
         this.deviceTypes.push(...deviceTypeOptions);
       });
+
+    this.permissionMultiFilterCtrl.valueChanges
+      .pipe(takeUntil(this._onDestroy))
+      .subscribe(() => {
+        this.filterPermissionsMulti();
+      });
+  }
+
+  filterPermissionsMulti() {
+    if (!this.permissions) {
+      return;
+    }
+    let search = this.permissionMultiFilterCtrl.value;
+    if (!search) {
+      this.filteredPermissionsMulti.next(this.permissions.slice());
+      return;
+    }
+
+    search = search.toLowerCase();
+    this.filteredPermissionsMulti.next(
+      this.permissions.filter((p) => p.name.toLowerCase().indexOf(search) > -1)
+    );
   }
 
   fillDefaultMetadata() {
@@ -152,6 +191,8 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
         this.application.deviceTypes = application.deviceTypes.map(
           (deviceType) => deviceType.type
         );
+        this.application.permissionIds = application.permissionIds;
+        this.permissionMultiCtrl.setValue(this.application.permissionIds);
 
         this.fillDefaultMetadata();
       });
@@ -256,10 +297,37 @@ export class FormBodyApplicationComponent implements OnInit, OnDestroy {
     this.router.navigateByUrl('/applications');
   }
 
+  public compare(o1: any, o2: any): boolean {
+    return o1 === o2;
+  }
+
+  getPermissions(userId: number) {
+    this.permissionsSubscription = this.permissionService
+      .getPermissions(
+        1000,
+        0,
+        undefined,
+        undefined,
+        this.meService.hasGlobalAdmin() ? undefined : userId
+      )
+      .subscribe((res) => {
+        this.permissions = res.data.sort((a, b) =>
+          a.name.localeCompare(b.name, 'da-DK', { numeric: true })
+        );
+        this.filteredPermissionsMulti.next(this.permissions.slice());
+        if (!this.id) {
+          this.application.permissionIds = [this.permissions[0].id];
+          this.permissionMultiCtrl.setValue(this.application.permissionIds);
+        }
+      });
+  }
+
   ngOnDestroy() {
     // prevent memory leak by unsubscribing
     if (this.applicationsSubscription) {
       this.applicationsSubscription.unsubscribe();
     }
+    this._onDestroy.next();
+    this._onDestroy.complete();
   }
 }
diff --git a/src/app/shared/components/forms/form.module.ts b/src/app/shared/components/forms/form.module.ts
@@ -9,7 +9,7 @@ import { FormBodyApplicationComponent } from './form-body-application/form-body-
 import { FormHeaderComponent } from './form-header/form-header.component';
 import { FormKeyValuePairComponent } from './form-key-value/form-key-value-pair/form-key-value-pair.component';
 import { FormKeyValueListComponent } from './form-key-value/form-key-value-list/form-key-value-list.component';
-
+import { MatSelectSearchModule } from '@shared/components/mat-select-search/mat-select-search.module';
 
 @NgModule({
   declarations: [
@@ -25,15 +25,15 @@ import { FormKeyValueListComponent } from './form-key-value/form-key-value-list/
     FormsModule,
     ReactiveFormsModule,
     TranslateModule,
-    NGMaterialModule
+    NGMaterialModule,
+    MatSelectSearchModule,
   ],
   exports: [
     FormHeaderComponent,
     FormBodyApplicationComponent,
     FormKeyValuePairComponent,
     FormKeyValueListComponent,
   ],
-  providers: [
-  ]
+  providers: [],
 })
-export class FormModule { }
+export class FormModule {}
diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
@@ -742,7 +742,9 @@
       "PERSONAL-DATA-PLACEHOLDER": "Markér, hvis data i applikationen indeholder personoplysninger. Berører ikke funktionalitet i OS2iot",
       "HARDWARE-PLACEHOLDER": "Angiv hvad der bruges af sensorer/hardware, samt model",
       "CONTROLLED-PROPERTY-PLACEHOLDER": "Angiv hvilke datatyper der opsamles",
-      "DEVICE-TYPE-PLACEHOLDER": "Angiv hvilke forbindelsesteknologier, der benyttes"
+      "DEVICE-TYPE-PLACEHOLDER": "Angiv hvilke forbindelsesteknologier, der benyttes",
+      "PERMISSION-HINT": "Husk at alle med adgang til brugergruppen vil kunne se applikationen",
+      "ADD-PERMISSION": "Tilføj til brugergruppe"
     },
     "MQTT": {
       "TITLE": "MQTT specifik opsætning",

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ export class Application {`
`30`	`30`	`public hardware?: string;`
`31`	`31`	`public controlledProperties?: ControlledProperty[];`
`32`	`32`	`public deviceTypes?: ApplicationDeviceType[];`
	`33`	`+ public permissionIds: number[];`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`export class ApplicationRequest {`
`@@ -48,6 +49,7 @@ export class ApplicationRequest {`
`48`	`49`	`public hardware?: string;`
`49`	`50`	`public controlledProperties?: ControlledPropertyTypes[];`
`50`	`51`	`public deviceTypes?: ApplicationDeviceTypeUnion[];`
	`52`	`+ public permissionIds: number[];`
`51`	`53`	`}`
`52`	`54`
`53`	`55`	`export interface ApplicationData {`