Skip to content

Commit

Permalink
feat(admin): change GUI to incorporate moduleClassNames
Browse files Browse the repository at this point in the history
* 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)
  • Loading branch information
michalberky authored and xflord committed Sep 29, 2023
1 parent dcfbdcd commit 8353592
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>,
Expand All @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 6 additions & 3 deletions apps/admin-gui/src/assets/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion libs/perun/openapi/src/lib/model/applicationForm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,5 @@ export interface ApplicationForm {
automaticApproval?: boolean;
automaticApprovalExtension?: boolean;
automaticApprovalEmbedded?: boolean;
moduleClassName?: string;
moduleClassNames?: string[];
}

0 comments on commit 8353592

Please sign in to comment.