Skip to content

Commit 8593718

Browse files
enyachokeenyachoke
committed
O3-957:Restyle Ampath forms repeating fields
1 parent e152208 commit 8593718

File tree

2 files changed

+67
-46
lines changed

2 files changed

+67
-46
lines changed

‎projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.css.ts

+11
Original file line numberDiff line numberDiff line change
@@ -162,5 +162,16 @@ export const DEFAULT_STYLES = `a {
162162
}
163163
[hidden] {
164164
display: none !important;
165+
}
166+
.repeating {
167+
position: relative;
168+
padding: 16px;
169+
background-color: #f4f4f4;
170+
margin-bottom: 16px;
171+
}
172+
.repeating button {
173+
position: absolute;
174+
top: 5px;
175+
right: 5px;
165176
}
166177
`;

‎projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html

+56-46
Original file line numberDiff line numberDiff line change
@@ -162,56 +162,66 @@
162162
[ngClass]="{ disabled: node.control.disabled }">
163163
<!--ARRAY CONTROL-->
164164
<div [ngSwitch]="node.question.renderingType">
165-
<div class="well" style="padding: 2px" *ngSwitchCase="'repeating'">
166-
<h4 style="margin: 2px; font-weight: bold">{{ node.question.label }}</h4>
167-
<hr style="
168-
margin-left: -2px;
169-
margin-right: -2px;
170-
margin-bottom: 4px;
171-
margin-top: 8px;
172-
border-width: 2px;
173-
" />
174-
<div [ngSwitch]="node.question.extras.type">
175-
<div *ngSwitchCase="'testOrder'">
176-
<div *ngFor="let child of node.children; let i = index">
177-
<form-renderer *ngFor="let question of child.question.questions" [parentComponent]="this"
178-
[node]="child.children[question.key]" [parentGroup]="child.control"></form-renderer>
179-
<div>{{ child.orderNumber }}</div>
180-
<button type="button " class="bx--btn bx--btn--danger bx--btn--sm" (click)="node.removeAt(i)">
181-
Remove
182-
</button>
183-
<br />
184-
<hr style="
185-
margin-left: -2px;
186-
margin-right: -2px;
187-
margin-bottom: 4px;
188-
margin-top: 8px;
189-
border-width: 1px;
190-
" />
165+
<div *ngSwitchCase="'repeating'">
166+
<fieldset>
167+
<legend style="font-weight: bold; padding-left: 0px; padding-bottom: 16px;">{{ node.question.label }}</legend>
168+
<div [ngSwitch]="node.question.extras.type">
169+
<div *ngSwitchCase="'testOrder'">
170+
<div *ngFor="let child of node.children; let i = index">
171+
<div class="repeating">
172+
<form-renderer *ngFor="let question of child.question.questions" [parentComponent]="this"
173+
[node]="child.children[question.key]" [parentGroup]="child.control"></form-renderer>
174+
<span style="position: absolute; bottom: 16px;">{{ child.orderNumber }}</span>
175+
<button type="button" class="bx--btn bx--btn--danger-ghost" (click)="node.removeAt(i)">
176+
Remove
177+
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;"
178+
xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16"
179+
aria-hidden="true">
180+
<g id="surface1">
181+
<path d="M 6 6 L 7 6 L 7 12 L 6 12 Z M 6 6 " />
182+
<path d="M 9 6 L 10 6 L 10 12 L 9 12 Z M 9 6 " />
183+
<path
184+
d="M 2 3 L 2 4 L 3 4 L 3 14 C 3 14.550781 3.449219 15 4 15 L 12 15 C 12.550781 15 13 14.550781 13 14 L 13 4 L 14 4 L 14 3 Z M 4 14 L 4 4 L 12 4 L 12 14 Z M 4 14 " />
185+
<path d="M 6 1 L 10 1 L 10 2 L 6 2 Z M 6 1 " />
186+
</g>
187+
</svg>
188+
</button>
189+
</div>
190+
</div>
191191
</div>
192-
</div>
193192

194-
<div *ngSwitchCase="'obsGroup'" style="margin-bottom: 20px">
195-
<div *ngFor="let child of node.children; let i = index">
196-
<form-renderer *ngFor="let question of child.question.questions" [parentComponent]="this"
197-
[node]="child.children[question.key]" [parentGroup]="child.control"></form-renderer>
198-
<button type="button " class="bx--btn bx--btn--danger bx--btn--sm" (click)="node.removeAt(i)">
199-
Remove
200-
</button>
201-
<br />
202-
<hr style="
203-
margin-left: -2px;
204-
margin-right: -2px;
205-
margin-bottom: 4px;
206-
margin-top: 8px;
207-
border-width: 1px;
208-
" />
193+
<div *ngSwitchCase="'obsGroup'">
194+
<div class="repeating" *ngFor="let child of node.children; let i = index">
195+
<div class="repeating">
196+
<form-renderer *ngFor="let question of child.question.questions" [parentComponent]="this"
197+
[node]="child.children[question.key]" [parentGroup]="child.control"></form-renderer>
198+
<button type="button" class="bx--btn bx--btn--danger-ghost" (click)="node.removeAt(i)">
199+
Remove
200+
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;"
201+
xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16"
202+
aria-hidden="true">
203+
<g id="surface1">
204+
<path d="M 6 6 L 7 6 L 7 12 L 6 12 Z M 6 6 " />
205+
<path d="M 9 6 L 10 6 L 10 12 L 9 12 Z M 9 6 " />
206+
<path
207+
d="M 2 3 L 2 4 L 3 4 L 3 14 C 3 14.550781 3.449219 15 4 15 L 12 15 C 12.550781 15 13 14.550781 13 14 L 13 4 L 14 4 L 14 3 Z M 4 14 L 4 4 L 12 4 L 12 14 Z M 4 14 " />
208+
<path d="M 6 1 L 10 1 L 10 2 L 6 2 Z M 6 1 " />
209+
</g>
210+
</svg>
211+
</button>
212+
</div>
213+
</div>
209214
</div>
210215
</div>
211-
</div>
212-
<button type="button" class="bx--btn bx--btn--primary" (click)="node.createChildNode()">
213-
Add
214-
</button>
216+
<button class="bx--btn bx--btn--ghost" type="button" (click)="node.createChildNode()">
217+
Add
218+
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;"
219+
xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16"
220+
aria-hidden="true">
221+
<path d="M9 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path>
222+
</svg>
223+
</button>
224+
</fieldset>
215225
</div>
216226
</div>
217227
</div>

0 commit comments

Comments
 (0)