refactor(admin): visually update edit form item dialog

xflord · HejdaJakub · commit 840577b198d0 · 2023-10-16T01:42:18.000+02:00
* updated the dialog for editing application form items to match the vertical layout of other dialogs
diff --git a/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-dialog.component.html b/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-dialog.component.html
diff --git a/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-dialog.component.ts b/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-dialog.component.ts
@@ -40,7 +40,7 @@ export class EditApplicationFormItemDialogComponent implements OnInit {
   itemType = ItemType;
   options: { [key: string]: [string, string][] };
   theme: string;
-  loading = false;
+  loading = true;
   hiddenValues: HiddenEnum[] = ['NEVER', 'ALWAYS', 'IF_EMPTY', 'IF_PREFILLED'];
   disabledValues: DisabledEnum[] = ['NEVER', 'ALWAYS', 'IF_EMPTY', 'IF_PREFILLED'];
   possibleDependencyItems: ApplicationFormItem[] = [];
diff --git a/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-line/edit-application-form-item-line.component.css b/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-line/edit-application-form-item-line.component.css
diff --git a/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-line/edit-application-form-item-line.component.html b/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-line/edit-application-form-item-line.component.html
diff --git a/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-line/edit-application-form-item-line.component.ts b/apps/admin-gui/src/app/shared/components/dialogs/edit-application-form-item-dialog/edit-application-form-item-line/edit-application-form-item-line.component.ts
diff --git a/apps/admin-gui/src/app/shared/shared.module.ts b/apps/admin-gui/src/app/shared/shared.module.ts
@@ -148,7 +148,6 @@ import { StatisticsCardComponent } from './components/statistics-card/statistics
 import { ApplicationFormItemDisabledPipe } from './pipes/application-form-item-disabled.pipe';
 import { ApplicationFormItemHiddenPipe } from './pipes/application-form-item-hidden.pipe';
 import { MatListModule } from '@angular/material/list';
-import { EditApplicationFormItemLineComponent } from './components/dialogs/edit-application-form-item-dialog/edit-application-form-item-line/edit-application-form-item-line.component';
 import { AddGroupToRegistrationComponent } from './components/dialogs/add-group-to-registration/add-group-to-registration.component';
 import { OneEntityAttributePageComponent } from './components/one-entity-attribute-page/one-entity-attribute-page.component';
 import { PerunUtilsModule } from '@perun-web-apps/perun/utils';
@@ -437,7 +436,6 @@ import { ApplicationsBulkOperationDialogComponent } from './components/dialogs/a
     StatisticsCardComponent,
     ApplicationFormItemDisabledPipe,
     ApplicationFormItemHiddenPipe,
-    EditApplicationFormItemLineComponent,
     AddGroupToRegistrationComponent,
     OneEntityAttributePageComponent,
     AddResourceTagToResourceDialogComponent,
diff --git a/apps/admin-gui/src/assets/i18n/en.json b/apps/admin-gui/src/assets/i18n/en.json
@@ -1423,7 +1423,8 @@
       "DISPLAY_ON_APPLICATION": "Display on application",
       "INITIAL": "Initial",
       "EXTENSION": "Extension",
-      "DISPLAY_ON_APPLICATION_DESCRIPTION": "Define on which application types is this item displayed.",
+      "DISPLAY_ON_APPLICATION_INITIAL": "This item will be displayed on INITIAL applications",
+      "DISPLAY_ON_APPLICATION_EXTENSION": "This item will be displayed on EXTENSION applications",
       "CONTENT": "Content",
       "CONTENT_DESCRIPTION": "HTML formatted content of form item. It spans through all columns to full form width.",
       "LABEL": "Label",
@@ -1448,6 +1449,10 @@
       "NO_SELECTED_ITEM": "No item selected (empty value)",
       "CUSTOM_VALUE": " -- custom value -- ",
       "OPTIONS": "Options",
+      "USER_ACTION": "User action",
+      "ATTRIBUTES": "Attributes",
+      "INTERACTIVITY": "Interactivity",
+      "VALIDATION": "Validation",
       "OPTIONS_DESCRIPTION": "Define possible options for selection in SELECTIONBOX, COMBOBOX, CHECKBOX, RADIO widgets. Empty options are not used.",
       "ADD_OPTION": "Add option",
       "REMOVE_OPTION": "Remove",
diff --git a/libs/perun/components/src/lib/app-form-item-search-select/app-form-item-search-select.component.html b/libs/perun/components/src/lib/app-form-item-search-select/app-form-item-search-select.component.html
@@ -6,7 +6,8 @@
   [entity]="item"
   (entitySelected)="itemSelected.emit($event)"
   [disableAutoSelect]="true"
-  [selectPlaceholder]="'SHARED_LIB.PERUN.COMPONENTS.APP_FORM_ITEM_SEARCH_SELECT.SELECT_ITEM' | translate"
+  [selectPlaceholder]="label ?? 'SHARED_LIB.PERUN.COMPONENTS.APP_FORM_ITEM_SEARCH_SELECT.SELECT_ITEM' | translate"
+  [hint]="hint"
   [findPlaceholder]="'SHARED_LIB.PERUN.COMPONENTS.APP_FORM_ITEM_SEARCH_SELECT.FIND_ITEM' | translate"
   [noEntriesText]="'SHARED_LIB.PERUN.COMPONENTS.APP_FORM_ITEM_SEARCH_SELECT.NO_ITEM_FOUND' | translate">
 </perun-web-apps-entity-search-select>
diff --git a/libs/perun/components/src/lib/app-form-item-search-select/app-form-item-search-select.component.ts b/libs/perun/components/src/lib/app-form-item-search-select/app-form-item-search-select.component.ts
@@ -12,6 +12,8 @@ export const NO_FORM_ITEM: ApplicationFormItem = {};
 export class AppFormItemSearchSelectComponent {
   @Input() items: ApplicationFormItem[];
   @Input() item: ApplicationFormItem = null;
+  @Input() label: string;
+  @Input() hint = '';
   @Output() itemSelected = new EventEmitter<ApplicationFormItem>();
   constructor(private translate: TranslateService) {}
 
diff --git a/libs/perun/components/src/lib/entity-search-select/entity-search-select.component.html b/libs/perun/components/src/lib/entity-search-select/entity-search-select.component.html
@@ -50,7 +50,7 @@
         </mat-option>
       </cdk-virtual-scroll-viewport>
     </mat-select>
-    <mat-hint *ngIf="warning?.length !== 0" class="warning">{{warning}}</mat-hint>
+    <mat-hint *ngIf="hint?.length !== 0">{{hint}}</mat-hint>
   </mat-form-field>
 
   <perun-web-apps-deselect-button
diff --git a/libs/perun/components/src/lib/entity-search-select/entity-search-select.component.ts b/libs/perun/components/src/lib/entity-search-select/entity-search-select.component.ts
@@ -38,7 +38,7 @@ export class EntitySearchSelectComponent<T extends PerunBean>
   @Input() highlightOption = false;
   @Input() theme = '';
   @Input() required = false;
-  @Input() warning: string;
+  @Input() hint: string;
   @Output() entitySelected = new EventEmitter<T | T[]>();
   @Output() selectClosed = new EventEmitter<boolean>();
   @ViewChild('scrollViewport', { static: false }) scrollViewport: CdkVirtualScrollViewport;
diff --git a/libs/perun/components/src/lib/selection-item-search-select/selection-item-search-select.component.html b/libs/perun/components/src/lib/selection-item-search-select/selection-item-search-select.component.html
@@ -5,8 +5,8 @@
   [searchFunction]="searchFunction"
   [mainTextFunction]="nameFunction"
   [secondaryTextFunction]="shortNameFunction"
-  [warning]="warning"
-  [selectPlaceholder]="'SHARED_LIB.PERUN.COMPONENTS.SELECTION_ITEM_SEARCH_SELECT.SELECT_ITEM' | translate"
+  [hint]="hint"
+  [selectPlaceholder]="label | translate"
   [findPlaceholder]="'SHARED_LIB.PERUN.COMPONENTS.SELECTION_ITEM_SEARCH_SELECT.FIND_ITEM' | translate"
   [noEntriesText]="'SHARED_LIB.PERUN.COMPONENTS.SELECTION_ITEM_SEARCH_SELECT.NO_ITEM_FOUND' | translate">
 </perun-web-apps-entity-search-select>
diff --git a/libs/perun/components/src/lib/selection-item-search-select/selection-item-search-select.component.ts b/libs/perun/components/src/lib/selection-item-search-select/selection-item-search-select.component.ts
@@ -28,11 +28,12 @@ export class SelectionItemSearchSelectComponent implements OnInit {
   @Input() selectedAttribute: string;
   @Input() type: ItemType;
   @Input() asGroup = false;
-  @Input() warning: string;
+  @Input() hint: string;
   @Output() itemSelected = new EventEmitter<SelectionItem>();
 
   items: SelectionItem[] = [];
   item: SelectionItem;
+  label = 'SHARED_LIB.PERUN.COMPONENTS.SELECTION_ITEM_SEARCH_SELECT.SELECT_ITEM';
 
   constructor(private translateService: TranslateService) {}
 
@@ -45,6 +46,7 @@ export class SelectionItemSearchSelectComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.getLabel();
     if (this.type === ItemType.FEDERATION) {
       this.getFederationAttributes();
       this.getFederationAttribute();
@@ -109,7 +111,7 @@ export class SelectionItemSearchSelectComponent implements OnInit {
         this.translateService
           .get('DIALOGS.APPLICATION_FORM_EDIT_ITEM.CUSTOM_VALUE')
           .subscribe((custom: string) => {
-            this.items.push(new SelectionItem(custom, 'custom'));
+            this.items.push(new SelectionItem(custom, ''));
             this.items.push(new SelectionItem('Display name', 'displayName'));
             this.items.push(new SelectionItem('Common name', 'cn'));
             this.items.push(new SelectionItem('Mail', 'mail'));
@@ -133,6 +135,20 @@ export class SelectionItemSearchSelectComponent implements OnInit {
       });
   }
 
+  getLabel(): void {
+    switch (this.type) {
+      case ItemType.DESTINATION:
+        this.label = 'DIALOGS.APPLICATION_FORM_EDIT_ITEM.DESTINATION_ATTRIBUTE';
+        break;
+      case ItemType.FEDERATION:
+        this.label = 'DIALOGS.APPLICATION_FORM_EDIT_ITEM.FEDERATION_ATTRIBUTE';
+        break;
+      case ItemType.SOURCE:
+        this.label = 'DIALOGS.APPLICATION_FORM_EDIT_ITEM.SOURCE_ATTRIBUTE';
+        break;
+    }
+  }
+
   getFederationAttribute(): void {
     for (const item of this.items) {
       if (item.value === this.selectedAttribute) {
