Skip to content

Commit d61483a

Browse files
nsemetsnsemets
authored
Merge pull request #695 from nsemets/fix/ANG-9250-v2
[ANG-9250] P3.5 - Some registration schema fields not displaying or formatting correctly in Angular UI
2 parents e1e4847 + 2d869b0 commit d61483a

File tree

6 files changed

+216
-207
lines changed

6 files changed

+216
-207
lines changed

‎src/app/features/registries/components/custom-step/custom-step.component.html‎

Lines changed: 135 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h3 class="mb-2">{{ section.title }}</h3>
3030
</div>
3131

3232
@if (section.description) {
33-
<p class="mb-3">{{ section.description }}</p>
33+
<p class="preserve-whitespace mb-3">{{ section.description }}</p>
3434
}
3535
<ng-container *ngTemplateOutlet="questionList; context: { $implicit: section.questions }"></ng-container>
3636
</p-card>
@@ -40,151 +40,150 @@ <h3 class="mb-2">{{ section.title }}</h3>
4040
<ng-template #questionList let-questions>
4141
@for (q of questions; track q.id) {
4242
<form class="mb-4" [formGroup]="stepForm">
43-
<p-card>
44-
<label [for]="q.groupKey">
45-
<div class="flex align-items-baseline gap-1">
46-
<h3 class="mb-2">
47-
{{ q.displayText }}
48-
@if (q.required) {
49-
<span class="text-red-500">*</span>
50-
}
51-
</h3>
52-
</div>
53-
@if (q.paragraphText) {
54-
<p class="mb-3 preserve-whitespace">{{ q.paragraphText }}</p>
55-
}
56-
@if (q.helpText) {
57-
<p class="preserve-whitespace">{{ q.helpText }}</p>
58-
}
59-
</label>
60-
@if (q.exampleText) {
61-
<p-inplace #inplaceRef styleClass="mb-4">
62-
<ng-template #display>
63-
<span class="text-primary font-medium">{{ 'common.links.showExample' | translate }} </span>
64-
</ng-template>
65-
<ng-template #content>
66-
<p-button size="small" (onClick)="inplaceRef.deactivate()" variant="text" styleClass="font-medium">
67-
{{ 'common.links.hideExample' | translate }}
68-
</p-button>
69-
<p class="m-0">{{ q.exampleText }}</p>
70-
</ng-template>
71-
</p-inplace>
43+
<label [for]="q.groupKey">
44+
<div class="flex align-items-baseline gap-1">
45+
<h3 class="mb-2">
46+
{{ q.displayText }}
47+
@if (q.required) {
48+
<span class="text-red-500">*</span>
49+
}
50+
</h3>
51+
</div>
52+
@if (q.paragraphText) {
53+
<p class="mb-3 preserve-whitespace">{{ q.paragraphText }}</p>
54+
}
55+
@if (q.helpText) {
56+
<p class="preserve-whitespace">{{ q.helpText }}</p>
7257
}
58+
</label>
7359

74-
@switch (q.fieldType) {
75-
@case (FieldType.TextArea) {
76-
<textarea
77-
id="{{ q.groupKey }}"
78-
class="w-full"
79-
rows="5"
80-
cols="30"
81-
pTextarea
82-
[formControlName]="q.responseKey!"
83-
></textarea>
84-
@if (
85-
stepForm.controls[q.responseKey!].errors?.['required'] &&
86-
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
87-
) {
88-
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
89-
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
90-
</p-message>
91-
}
92-
}
93-
@case (FieldType.Radio) {
94-
<div class="flex flex-column gap-2 mt-3">
95-
@for (option of q.options; track option) {
96-
<div class="flex align -items-center gap-2">
97-
<p-radioButton
98-
[formControlName]="q.responseKey!"
99-
[inputId]="option.value"
100-
[value]="option.value"
101-
></p-radioButton>
102-
103-
<label [for]="option.value" class="mb-0 cursor-pointer">{{ option.label }}</label>
104-
@if (option.helpText) {
105-
<osf-info-icon [tooltipText]="option.helpText" tooltipPosition="top"></osf-info-icon>
106-
}
107-
</div>
108-
}
109-
</div>
110-
@if (
111-
stepForm.controls[q.responseKey!].errors?.['required'] &&
112-
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
113-
) {
114-
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
115-
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
116-
</p-message>
117-
}
60+
@if (q.exampleText) {
61+
<p-inplace #inplaceRef styleClass="mb-4">
62+
<ng-template #display>
63+
<span class="text-primary font-medium">{{ 'common.links.showExample' | translate }} </span>
64+
</ng-template>
65+
<ng-template #content>
66+
<p-button size="small" (onClick)="inplaceRef.deactivate()" variant="text" styleClass="font-medium">
67+
{{ 'common.links.hideExample' | translate }}
68+
</p-button>
69+
<p class="m-0">{{ q.exampleText }}</p>
70+
</ng-template>
71+
</p-inplace>
72+
}
73+
74+
@switch (q.fieldType) {
75+
@case (FieldType.TextArea) {
76+
<textarea
77+
id="{{ q.groupKey }}"
78+
class="w-full"
79+
rows="5"
80+
cols="30"
81+
pTextarea
82+
[formControlName]="q.responseKey!"
83+
></textarea>
84+
@if (
85+
stepForm.controls[q.responseKey!].errors?.['required'] &&
86+
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
87+
) {
88+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
89+
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
90+
</p-message>
11891
}
119-
@case (FieldType.Checkbox) {
120-
<div class="flex flex-column gap-2 mt-3">
121-
@for (option of q.options; track option) {
122-
<div class="flex align-items-center gap-2">
123-
<p-checkbox
124-
[inputId]="option.value"
125-
[formControlName]="q.responseKey!"
126-
[value]="option.value"
127-
></p-checkbox>
128-
129-
<label [for]="option.value" class="mb-0 cursor-pointer">{{ option.label }}</label>
130-
@if (option.helpText) {
131-
<osf-info-icon [tooltipText]="option.helpText" tooltipPosition="top"></osf-info-icon>
132-
}
133-
</div>
134-
}
135-
</div>
136-
@if (
137-
stepForm.controls[q.responseKey!].errors?.['required'] &&
138-
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
139-
) {
140-
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
141-
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
142-
</p-message>
92+
}
93+
@case (FieldType.Radio) {
94+
<div class="flex flex-column gap-2 mt-3">
95+
@for (option of q.options; track option) {
96+
<div class="flex align -items-center gap-2">
97+
<p-radioButton
98+
[formControlName]="q.responseKey!"
99+
[inputId]="option.value"
100+
[value]="option.value"
101+
></p-radioButton>
102+
103+
<label [for]="option.value" class="mb-0 cursor-pointer">{{ option.label }}</label>
104+
@if (option.helpText) {
105+
<osf-info-icon [tooltipText]="option.helpText" tooltipPosition="top"></osf-info-icon>
106+
}
107+
</div>
143108
}
109+
</div>
110+
@if (
111+
stepForm.controls[q.responseKey!].errors?.['required'] &&
112+
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
113+
) {
114+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
115+
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
116+
</p-message>
144117
}
118+
}
119+
@case (FieldType.Checkbox) {
120+
<div class="flex flex-column gap-2 mt-3">
121+
@for (option of q.options; track option) {
122+
<div class="flex align-items-center gap-2">
123+
<p-checkbox
124+
[inputId]="option.value"
125+
[formControlName]="q.responseKey!"
126+
[value]="option.value"
127+
></p-checkbox>
145128

146-
@case (FieldType.Text) {
147-
<input [formControlName]="q.responseKey!" type="text" class="w-full" pInputText />
148-
@if (
149-
stepForm.controls[q.responseKey!].errors?.['required'] &&
150-
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
151-
) {
152-
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
153-
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
154-
</p-message>
129+
<label [for]="option.value" class="mb-0 cursor-pointer">{{ option.label }}</label>
130+
@if (option.helpText) {
131+
<osf-info-icon [tooltipText]="option.helpText" tooltipPosition="top"></osf-info-icon>
132+
}
133+
</div>
155134
}
135+
</div>
136+
@if (
137+
stepForm.controls[q.responseKey!].errors?.['required'] &&
138+
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
139+
) {
140+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
141+
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
142+
</p-message>
156143
}
157-
@case (FieldType.File) {
158-
<h3 class="mb-2">{{ 'files.actions.uploadFile' | translate }}</h3>
159-
<p class="mb-1">
160-
{{ 'shared.files.limitText' | translate }}
161-
</p>
162-
<p>
163-
{{ 'shared.files.description' | translate }}
164-
</p>
165-
<div class="flex flex-wrap gap-2 mt-3 mb-3">
166-
@for (file of attachedFiles[q.responseKey!] || []; track file) {
167-
<p-chip
168-
[label]="file.name"
169-
severity="info"
170-
removable="true"
171-
(onRemove)="removeFromAttachedFiles(file, q.responseKey!)"
172-
/>
173-
}
174-
</div>
175-
<div class="-ml-3 -mr-3">
176-
<osf-files-control
177-
[attachedFiles]="attachedFiles[q.responseKey!]"
178-
[filesLink]="filesLink()"
179-
[projectId]="projectId()"
180-
[provider]="provider()"
181-
(attachFile)="onAttachFile($event, q.responseKey!)"
182-
[filesViewOnly]="filesViewOnly()"
183-
></osf-files-control>
184-
</div>
144+
}
145+
146+
@case (FieldType.Text) {
147+
<input [formControlName]="q.responseKey!" type="text" class="w-full" pInputText />
148+
@if (
149+
stepForm.controls[q.responseKey!].errors?.['required'] &&
150+
(stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
151+
) {
152+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
153+
{{ INPUT_VALIDATION_MESSAGES.required | translate }}
154+
</p-message>
185155
}
186156
}
187-
</p-card>
157+
@case (FieldType.File) {
158+
<h3 class="mb-2">{{ 'files.actions.uploadFile' | translate }}</h3>
159+
<p class="mb-1">
160+
{{ 'shared.files.limitText' | translate }}
161+
</p>
162+
<p>
163+
{{ 'shared.files.description' | translate }}
164+
</p>
165+
<div class="flex flex-wrap gap-2 mt-3 mb-3">
166+
@for (file of attachedFiles[q.responseKey!] || []; track file) {
167+
<p-chip
168+
[label]="file.name"
169+
severity="info"
170+
removable="true"
171+
(onRemove)="removeFromAttachedFiles(file, q.responseKey!)"
172+
/>
173+
}
174+
</div>
175+
<div class="-ml-3 -mr-3">
176+
<osf-files-control
177+
[attachedFiles]="attachedFiles[q.responseKey!]"
178+
[filesLink]="filesLink()"
179+
[projectId]="projectId()"
180+
[provider]="provider()"
181+
(attachFile)="onAttachFile($event, q.responseKey!)"
182+
[filesViewOnly]="filesViewOnly()"
183+
></osf-files-control>
184+
</div>
185+
}
186+
}
188187
</form>
189188
}
190189
</ng-template>

0 commit comments

Comments
 (0)