feat(admin): change GUI to incorporate moduleClassNames

michalberky · xflord · commit 8353592b1da0 · 2023-09-29T15:02:39.000+02:00
* Changed all uses of moduleClassName to moduleClassNames * Added functionality to add multiple module names in 'Change application form settings' dialog (cherry picked from commit c7fad76)
diff --git a/apps/admin-gui/src/app/shared/components/dialogs/update-application-form-dialog/update-application-form-dialog.component.html b/apps/admin-gui/src/app/shared/components/dialogs/update-application-form-dialog/update-application-form-dialog.component.html
@@ -5,10 +5,36 @@
   <div *perunWebAppsLoader="loading; indicator: spinner">
     <h1 mat-dialog-title>{{'DIALOGS.UPDATE_APPLICATION_FORM.TITLE' | translate}}</h1>
     <div class="dialog-container" mat-dialog-content>
-      <mat-form-field>
-        <mat-label>{{'DIALOGS.UPDATE_APPLICATION_FORM.MODULE_NAME' | translate}}</mat-label>
-        <input matInput [(ngModel)]="moduleName" />
-      </mat-form-field>
+      <div
+        *ngFor="let control of formArray.controls; let i = index; trackBy: trackByIndex"
+        class="d-flex flex-row align-items-center">
+        <mat-form-field class="w-100 mb-n2">
+          <mat-label>{{'DIALOGS.UPDATE_APPLICATION_FORM.MODULE_NAME' | translate}}</mat-label>
+          <input [formControl]="control" matInput />
+          <mat-error
+            *ngIf="control.hasError('pattern')"
+            >{{'DIALOGS.UPDATE_APPLICATION_FORM.COMMA_ERROR' | translate}}</mat-error
+          >
+        </mat-form-field>
+        <button
+          *ngIf="formArray.length > 1"
+          color="warn"
+          (click)="removeModule(i)"
+          [matTooltip]="'DIALOGS.UPDATE_APPLICATION_FORM.REMOVE_MODULE_TOOLTIP' | translate"
+          mat-icon-button>
+          <mat-icon>remove_circle</mat-icon>
+        </button>
+      </div>
+
+      <div class="d-flex justify-content-center mb-3">
+        <button
+          color="accent"
+          (click)="addModule()"
+          [matTooltip]="'DIALOGS.UPDATE_APPLICATION_FORM.ADD_MODULE_TOOLTIP' | translate"
+          mat-icon-button>
+          <mat-icon>add_circle</mat-icon>
+        </button>
+      </div>
 
       <mat-form-field class="w-100">
         <mat-label>{{'DIALOGS.UPDATE_APPLICATION_FORM.INITIAL' | translate}}:</mat-label>
@@ -58,7 +84,12 @@ <h1 mat-dialog-title>{{'DIALOGS.UPDATE_APPLICATION_FORM.TITLE' | translate}}</h1
       <button (click)="onCancel()" class="ms-auto" mat-stroked-button>
         {{'DIALOGS.UPDATE_APPLICATION_FORM.CANCEL_BUTTON' | translate}}
       </button>
-      <button (click)="submit()" [disabled]="loading" class="ms-2" color="accent" mat-flat-button>
+      <button
+        (click)="submit()"
+        [disabled]="formArray.invalid"
+        class="ms-2"
+        color="accent"
+        mat-flat-button>
         {{'DIALOGS.UPDATE_APPLICATION_FORM.SUBMIT_BUTTON' | translate}}
       </button>
     </div>
diff --git a/apps/admin-gui/src/app/shared/components/dialogs/update-application-form-dialog/update-application-form-dialog.component.ts b/apps/admin-gui/src/app/shared/components/dialogs/update-application-form-dialog/update-application-form-dialog.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ApplicationForm, RegistrarManagerService } from '@perun-web-apps/perun/openapi';
+import { FormControl, FormArray, Validators } from '@angular/forms';
 
 export interface UpdateApplicationFormDialogData {
   entity: string;
@@ -17,13 +18,13 @@ export interface UpdateApplicationFormDialogData {
 export class UpdateApplicationFormDialogComponent implements OnInit {
   entity: string;
   applicationForm: ApplicationForm;
-  moduleName: string;
   initialState: string;
   extensionState: string;
   embeddedState: string;
   loading = false;
   theme: string;
   autoRegistrationEnabled: boolean;
+  formArray: FormArray<FormControl<string>>;
 
   constructor(
     private dialogRef: MatDialogRef<UpdateApplicationFormDialogComponent>,
@@ -34,21 +35,47 @@ export class UpdateApplicationFormDialogComponent implements OnInit {
   ngOnInit(): void {
     this.theme = this.data.theme;
     this.applicationForm = this.data.applicationForm;
-    this.moduleName = this.applicationForm.moduleClassName;
+    this.formArray = new FormArray<FormControl<string>>([]);
+    for (const moduleName of this.applicationForm.moduleClassNames) {
+      this.addModule(moduleName);
+    }
+    if (this.formArray.length === 0) {
+      this.addModule();
+    }
     this.initialState = this.applicationForm.automaticApproval ? 'auto' : 'manual';
     this.extensionState = this.applicationForm.automaticApprovalExtension ? 'auto' : 'manual';
     this.embeddedState = this.applicationForm.automaticApprovalEmbedded ? 'auto' : 'manual';
     this.entity = this.data.entity;
     this.autoRegistrationEnabled = this.data.autoRegistrationEnabled;
   }
 
+  addModule(name = ''): void {
+    const commaControl = new FormControl(name, {
+      validators: [Validators.pattern(/^[^,]*$/)],
+      updateOn: 'change',
+    });
+    commaControl.markAsTouched(); // This helps show the mat-error message immediately when a comma is typed
+    this.formArray.push(commaControl);
+  }
+
+  removeModule(index: number): void {
+    this.formArray.removeAt(index);
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+
   onCancel(): void {
     this.dialogRef.close();
   }
 
   submit(): void {
     this.loading = true;
-    this.applicationForm.moduleClassName = this.moduleName;
+    const moduleNamesWithoutEmptyStrings: string[] = this.formArray.controls
+      .map((control) => control.value)
+      .filter((name: string) => name.trim() !== '');
+    this.applicationForm.moduleClassNames = moduleNamesWithoutEmptyStrings;
     this.applicationForm.automaticApproval = this.initialState === 'auto';
     this.applicationForm.automaticApprovalExtension = this.extensionState === 'auto';
     this.applicationForm.automaticApprovalEmbedded = this.embeddedState === 'auto';
diff --git a/apps/admin-gui/src/app/vos/pages/group-detail-page/group-settings/group-settings-application-form/group-settings-application-form.component.html b/apps/admin-gui/src/app/vos/pages/group-detail-page/group-settings/group-settings-application-form/group-settings-application-form.component.html
@@ -6,8 +6,8 @@ <h1 class="page-subtitle">
   <div *ngIf="!loading" class="d-flex w-75">
     <div>
       <div class="fw-bold">
-        {{'GROUP_DETAIL.SETTINGS.APPLICATION_FORM.MODULE_NAME' | translate}}:
-        {{applicationForm.moduleClassName}}
+        {{'GROUP_DETAIL.SETTINGS.APPLICATION_FORM.MODULE_NAMES' | translate}}:
+        {{applicationForm.moduleClassNames}}
       </div>
       <div>
         <span
diff --git a/apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-settings/vo-settings-application-form/vo-settings-application-form.component.html b/apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-settings/vo-settings-application-form/vo-settings-application-form.component.html
@@ -6,8 +6,8 @@ <h1 class="page-subtitle">
   <div *ngIf="!loading" class="d-flex w-75">
     <div>
       <div class="fw-bold">
-        {{'VO_DETAIL.SETTINGS.APPLICATION_FORM.MODULE_NAME' | translate}}:
-        {{applicationForm.moduleClassName}}
+        {{'VO_DETAIL.SETTINGS.APPLICATION_FORM.MODULE_NAMES' | translate}}:
+        {{applicationForm.moduleClassNames}}
       </div>
       <div>
         <span
diff --git a/apps/admin-gui/src/assets/i18n/en.json b/apps/admin-gui/src/assets/i18n/en.json
@@ -396,7 +396,7 @@
         "EDIT": "Edit",
         "MANAGE_GROUPS": "Manage groups",
         "DELETE": "Delete",
-        "MODULE_NAME": "Module name",
+        "MODULE_NAMES": "Module names",
         "APPLICATION_TYPE": "Approval style",
         "MANUAL": "Manual",
         "AUTOMATIC": "Automatic",
@@ -790,7 +790,7 @@
       },
       "APPLICATION_FORM": {
         "TITLE": "Application form",
-        "MODULE_NAME": "Module name",
+        "MODULE_NAMES": "Module names",
         "APPLICATION_TYPE": "Approval style",
         "AUTOMATIC": "Automatic",
         "MANUAL": "Manual",
@@ -1367,7 +1367,10 @@
       "MANUAL": "Manual",
       "AUTOMATIC": "Automatic",
       "SUBMIT_BUTTON": "Submit",
-      "CANCEL_BUTTON": "Cancel"
+      "CANCEL_BUTTON": "Cancel",
+      "REMOVE_MODULE_TOOLTIP": "Remove module name",
+      "ADD_MODULE_TOOLTIP": "Add module name",
+      "COMMA_ERROR": "Commas are not allowed."
     },
     "DELETE_APPLICATION_FORM_ITEM": {
       "TITLE": "Delete confirm",
diff --git a/libs/perun/openapi/src/lib/model/applicationForm.ts b/libs/perun/openapi/src/lib/model/applicationForm.ts
@@ -19,5 +19,5 @@ export interface ApplicationForm {
   automaticApproval?: boolean;
   automaticApprovalExtension?: boolean;
   automaticApprovalEmbedded?: boolean;
-  moduleClassName?: string;
+  moduleClassNames?: string[];
 }

Original file line number	Diff line number	Diff line change
`@@ -19,5 +19,5 @@ export interface ApplicationForm {`
`19`	`19`	`automaticApproval?: boolean;`
`20`	`20`	`automaticApprovalExtension?: boolean;`
`21`	`21`	`automaticApprovalEmbedded?: boolean;`
`22`		`- moduleClassName?: string;`
	`22`	`+ moduleClassNames?: string[];`
`23`	`23`	`}`