Skip to content

Commit 6753b9a

Browse files
xkostka2xkostka2
committed
fix(admin): form item description overlapping with subsequent element
* margin changes depending on the number of lines in input widget description * unified layout of the AddApplicationFormItemDialog to match other dialogs * refactored pipes for getting form item texts
1 parent 266905f commit 6753b9a

File tree

7 files changed

+22
-308
lines changed

7 files changed

+22
-308
lines changed

‎apps/admin-gui/src/app/shared/components/dialogs/add-application-form-item-dialog/add-application-form-item-dialog.component.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
<h1 mat-dialog-title>{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.TITLE' | translate}}</h1>
22
<div class="dialog-container" mat-dialog-content>
3-
{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.SHORT_NAME' | translate}}:
43
<mat-form-field>
4+
<mat-label>{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.SHORT_NAME' | translate}}:</mat-label>
55
<input [formControl]="nameCtrl" data-cy="item-short-name" matInput required />
66
<mat-error>
77
{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.FILL_NAME' | translate}}
88
</mat-error>
99
</mat-form-field>
10-
{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.INPUT_WIDGET' | translate}}:
11-
<mat-form-field class="mb-4">
10+
<mat-form-field
11+
[ngStyle]="{'height.rem': setInputWidgetHeight(('VO_DETAIL.SETTINGS.APPLICATION_FORM.WIDGET_DESCRIPTION.'+selectedWidget | translate).length)}">
12+
<mat-label>{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.INPUT_WIDGET' | translate}}:</mat-label>
1213
<mat-select [(ngModel)]="selectedWidget" disableOptionCentering>
1314
<mat-option *ngFor="let widget of widgets" [value]="widget">
1415
{{widget | applicationFormItemType}}
1516
</mat-option>
1617
</mat-select>
17-
<mat-hint>{{selectedWidget | applicationFormWidgetDescription}} </mat-hint>
18+
<mat-hint
19+
>{{'VO_DETAIL.SETTINGS.APPLICATION_FORM.WIDGET_DESCRIPTION.'+selectedWidget | translate}}
20+
</mat-hint>
1821
</mat-form-field>
19-
{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.INSERT_AFTER' | translate}}:
2022
<mat-form-field>
23+
<mat-label>{{'DIALOGS.APPLICATION_FORM_ADD_ITEM.INSERT_AFTER' | translate}}:</mat-label>
2124
<mat-select [(ngModel)]="selectedItem" disableOptionCentering>
2225
<mat-option *ngFor="let item of items" [value]="item">
2326
{{item}}

‎apps/admin-gui/src/app/shared/components/dialogs/add-application-form-item-dialog/add-application-form-item-dialog.component.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
mat-form-field {
2+
margin-bottom: 1rem;
3+
}

‎apps/admin-gui/src/app/shared/components/dialogs/add-application-form-item-dialog/add-application-form-item-dialog.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@ export class AddApplicationFormItemDialogComponent implements OnInit {
7171
});
7272
}
7373

74+
setInputWidgetHeight(textLength: number): number {
75+
return Math.ceil(textLength / 80) + 2.5;
76+
}
77+
7478
cancel(): void {
7579
this.dialogRef.close(undefined);
7680
}

‎apps/admin-gui/src/app/shared/pipes/application-form-item-type.pipe.ts

Lines changed: 5 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -11,147 +11,11 @@ export class ApplicationFormItemTypePipe implements PipeTransform {
1111
constructor(private translateService: TranslateService) {}
1212

1313
transform(value: Type): string {
14-
switch (value) {
15-
case 'HEADING': {
16-
this.translateService
17-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.HEADER')
18-
.subscribe((text: string) => {
19-
this.returnData = text;
20-
});
21-
break;
22-
}
23-
case 'HTML_COMMENT': {
24-
this.translateService
25-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.HTML_COMMENT')
26-
.subscribe((text: string) => {
27-
this.returnData = text;
28-
});
29-
break;
30-
}
31-
case 'TEXTFIELD': {
32-
this.translateService
33-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.TEXTFIELD')
34-
.subscribe((text: string) => {
35-
this.returnData = text;
36-
});
37-
break;
38-
}
39-
case 'VALIDATED_EMAIL': {
40-
this.translateService
41-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.VALIDATED_EMAIL')
42-
.subscribe((text: string) => {
43-
this.returnData = text;
44-
});
45-
break;
46-
}
47-
case 'USERNAME': {
48-
this.translateService
49-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.USERNAME')
50-
.subscribe((text: string) => {
51-
this.returnData = text;
52-
});
53-
break;
54-
}
55-
case 'PASSWORD': {
56-
this.translateService
57-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.PASSWORD')
58-
.subscribe((text: string) => {
59-
this.returnData = text;
60-
});
61-
break;
62-
}
63-
case 'SELECTIONBOX': {
64-
this.translateService
65-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.SELECTIONBOX')
66-
.subscribe((text: string) => {
67-
this.returnData = text;
68-
});
69-
break;
70-
}
71-
case 'TEXTAREA': {
72-
this.translateService
73-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.TEXTAREA')
74-
.subscribe((text: string) => {
75-
this.returnData = text;
76-
});
77-
break;
78-
}
79-
case 'COMBOBOX': {
80-
this.translateService
81-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.COMBOBOX')
82-
.subscribe((text: string) => {
83-
this.returnData = text;
84-
});
85-
break;
86-
}
87-
case 'CHECKBOX': {
88-
this.translateService
89-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.CHECKBOX')
90-
.subscribe((text: string) => {
91-
this.returnData = text;
92-
});
93-
break;
94-
}
95-
case 'SUBMIT_BUTTON': {
96-
this.translateService
97-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.SUBMIT_BUTTON')
98-
.subscribe((text: string) => {
99-
this.returnData = text;
100-
});
101-
break;
102-
}
103-
case 'RADIO': {
104-
this.translateService
105-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.RADIO')
106-
.subscribe((text: string) => {
107-
this.returnData = text;
108-
});
109-
break;
110-
}
111-
case 'TIMEZONE': {
112-
this.translateService
113-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.TIMEZONE')
114-
.subscribe((text: string) => {
115-
this.returnData = text;
116-
});
117-
break;
118-
}
119-
case 'AUTO_SUBMIT_BUTTON': {
120-
this.translateService
121-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.AUTO_SUBMIT_BUTTON')
122-
.subscribe((text: string) => {
123-
this.returnData = text;
124-
});
125-
break;
126-
}
127-
case 'EMBEDDED_GROUP_APPLICATION': {
128-
this.translateService
129-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.EMBEDDED_GROUP_APPLICATION')
130-
.subscribe((text: string) => {
131-
this.returnData = text;
132-
});
133-
break;
134-
}
135-
case 'LIST_INPUT_BOX': {
136-
this.translateService
137-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.LIST_INPUT_BOX')
138-
.subscribe((text: string) => {
139-
this.returnData = text;
140-
});
141-
break;
142-
}
143-
case 'MAP_INPUT_BOX': {
144-
this.translateService
145-
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.MAP_INPUT_BOX')
146-
.subscribe((text: string) => {
147-
this.returnData = text;
148-
});
149-
break;
150-
}
151-
default: {
152-
return value;
153-
}
154-
}
14+
this.translateService
15+
.get('VO_DETAIL.SETTINGS.APPLICATION_FORM.TYPES.' + value)
16+
.subscribe((text: string) => {
17+
this.returnData = text;
18+
});
15519
return this.returnData;
15620
}
15721
}

‎apps/admin-gui/src/app/shared/pipes/application-form-widget-description.pipe.ts

Lines changed: 0 additions & 157 deletions
This file was deleted.

‎apps/admin-gui/src/app/shared/shared.module.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ import { DeleteApplicationFormItemDialogComponent } from './components/dialogs/d
6060
import { ApplicationFormCopyItemsDialogComponent } from './components/dialogs/application-form-copy-items-dialog/application-form-copy-items-dialog.component';
6161
import { AddApplicationFormItemDialogComponent } from './components/dialogs/add-application-form-item-dialog/add-application-form-item-dialog.component';
6262
import { EditApplicationFormItemDialogComponent } from './components/dialogs/edit-application-form-item-dialog/edit-application-form-item-dialog.component';
63-
import { ApplicationFormWidgetDescriptionPipe } from './pipes/application-form-widget-description.pipe';
6463
import { AddMemberDialogComponent } from './components/dialogs/add-member-dialog/add-member-dialog.component';
6564
import { MembersCandidatesListComponent } from './components/members-candidates-list/members-candidates-list.component';
6665
import { CreateResourceTagDialogComponent } from './components/dialogs/create-resource-tag-dialog/create-resource-tag-dialog.component';
@@ -277,7 +276,6 @@ import { CopyMembersDialogComponent } from './components/dialogs/copy-members-di
277276
NameSpaceToDefPipe,
278277
ApplicationFormItemTypePipe,
279278
DragDropModule,
280-
ApplicationFormWidgetDescriptionPipe,
281279
RemoveManagerDialogComponent,
282280
AddManagerDialogComponent,
283281
AddGroupManagerDialogComponent,
@@ -345,7 +343,6 @@ import { CopyMembersDialogComponent } from './components/dialogs/copy-members-di
345343
ApplicationFormCopyItemsDialogComponent,
346344
AddApplicationFormItemDialogComponent,
347345
EditApplicationFormItemDialogComponent,
348-
ApplicationFormWidgetDescriptionPipe,
349346
SideMenuRootItemComponent,
350347
AnyToStringPipe,
351348
DeleteAttributeDialogComponent,

‎apps/admin-gui/src/assets/i18n/en.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@
401401
"CLEAR": "Clear form",
402402
"CLEAR_TOOLTIP": "Removes all form items",
403403
"TYPES": {
404-
"HEADER": "Header",
404+
"HEADING": "Header",
405405
"SUBMIT_BUTTON": "Submit button",
406406
"HTML_COMMENT": "Custom HTML text",
407407
"TEXTFIELD": "Input text field",
@@ -432,7 +432,7 @@
432432
"IF_EMPTY": "If empty (self or other item)"
433433
},
434434
"WIDGET_DESCRIPTION": {
435-
"HEADER": "Item is used to display customizable heading of the form. Can have any HTML content.",
435+
"HEADING": "Item is used to display customizable heading of the form. Can have any HTML content.",
436436
"SUBMIT_BUTTON": "Button used to submit the form with a custom label. All other form items are checked on valid input before submission. If it fails, form is not sent.",
437437
"HTML_COMMENT": "Item is used to display custom HTML content anywhere on the form. Useful for explanation descriptions, dividing parts of form, etc.",
438438
"TEXTFIELD": "Editable text field useful to gather short text input, e.g. name, phone.",

0 commit comments

Comments
 (0)