CST-11048 Spaced form updated error behaviour

This commit is contained in:
Mattia Vianelli
2023-10-06 13:04:52 +02:00
parent f893c6f2f3
commit c75f61840f
5 changed files with 59 additions and 18 deletions

View File

@@ -143,7 +143,13 @@
</div>
<span (click)="addOutboundPattern()" class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<span
(click)="addOutboundPattern()" class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
</span>
<div class="mb-2">
&nbsp;
</div>
<button class="btn btn-primary" type="submit">{{ 'ldn-new-service.form.label.submit' | translate }}</button>
</form>

View File

@@ -51,7 +51,6 @@ textarea {
.invalid-field {
border: 1px solid red;
background-color: #e89f9f;
color: #000000;
}

View File

@@ -9,6 +9,10 @@
type="text">
</div>
<div class="mb-4">
&nbsp;
</div>
<!-- In the description section -->
<div class="mb-2 d-flex flex-column">
<label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
@@ -16,6 +20,10 @@
formControlName="description" id="description" name="description"></textarea>
</div>
<div class="mb-4">
&nbsp;
</div>
<!-- In the url section -->
<div class="mb-2">
<label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
@@ -25,6 +33,10 @@
type="text">
</div>
<div class="mb-4">
&nbsp;
</div>
<!-- In the ldnUrl section -->
<div class="mb-2">
<label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
@@ -34,6 +46,10 @@
type="text">
</div>
<div class="mb-4">
&nbsp;
</div>
<!-- In the Inbound Patterns section -->
<div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
class="mb-2 d-flex align-content-center" formGroupName="notifyServiceInboundPatterns">
@@ -41,7 +57,7 @@
<ng-container [formGroupName]="i">
<div class="flex-grow-1">
<label for="additionalInboundPattern{{i}}">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} {{ i + 1 }}</label>
<label *ngIf="i === 0" for="additionalInboundPattern{{i}}">{{ 'ldn-new-service.form.label.inboundPattern' | translate }}</label>
<select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
name="additionalInboundPattern{{i}}" required>
@@ -55,7 +71,7 @@
<ng-container *ngIf="inboundPattern.value">
<div class="ml-2 flex-grow-1">
<label for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<label *ngIf="i === 0" for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
<option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
@@ -65,7 +81,7 @@
</div>
<div class="ml-2 d-flex flex-column align-content-center">
<label for="automatic{{i}}">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
<label *ngIf="i === 0" for="automatic{{i}}">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
<div class="d-flex flex-grow-1 align-content-center justify-content-center">
<input formControlName="automatic" id="automatic{{i}}" name="automatic{{i}}" type="checkbox" hidden>
<div class="toggle-switch" [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value" (click)="toggleAutomatic(i)">
@@ -91,6 +107,10 @@
<span (click)="addInboundPattern()"
class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<div class="mb-4">
&nbsp;
</div>
<!-- In the Outbound Patterns section -->
<div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
class="mb-2 d-flex align-content-center" formGroupName="notifyServiceOutboundPatterns">
@@ -98,7 +118,7 @@
<ng-container [formGroupName]="i">
<div class="flex-grow-1">
<label for="additionalOutboundPattern{{i}}">{{ 'ldn-new-service.form.label.outboundPattern' | translate }} {{ i + 1 }}</label>
<label *ngIf="i === 0" for="additionalOutboundPattern{{i}}">{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
<select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
name="additionalOutboundPattern{{i}}"
@@ -113,7 +133,7 @@
<div *ngIf="outboundPattern.value" class="ml-2 flex-grow-1">
<label for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<label *ngIf="i === 0" for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
<option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
@@ -135,7 +155,9 @@
<span (click)="addOutboundPattern()"
class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
</span>
<button class="btn btn-primary" type="submit">Submit</button>
</span>
<div class="mb-2">
&nbsp;
</div>
<button class="btn btn-primary" type="submit">{{ 'ldn-new-service.form.label.submit' | translate }}</button>
</form>

View File

@@ -7,7 +7,7 @@ form {
margin-left: 300px;
& > * {
width: 100%;
width: 100%;
}
}
@@ -23,10 +23,6 @@ option:not(:first-child) {
font-weight: bold;
}
select {
width: 90%;
}
.trash-button {
width: 40px;
height: 40px;
@@ -58,7 +54,6 @@ textarea {
color: #000000;
}
.toggle-switch {
display: flex;
align-items: center;
@@ -98,3 +93,22 @@ textarea {
transform: translateX(30px);
}
.toggle-switch-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
margin-top: 10px;
}
.toggle-switch {
cursor: pointer;
}

View File

@@ -928,12 +928,12 @@
"ldn-new-service.form.placeholder.description": "Please provide a description regarding your service",
"ldn-new-service.form.placeholder.url": "Please input the URL for users to check out more information about the service",
"ldn-new-service.form.placeholder.ldnUrl": "Please specify the URL of the LDN Inbox",
"ldn-new-service.form.label.inboundPattern": "Inbound Pattern",
"ldn-new-service.form.label.inboundPattern": "Inbound Patterns",
"ldn-new-service.form.label.placeholder.inboundPattern": "Select an Inbound Pattern",
"ldn-new-service.form.label.placeholder.selectedItemFilter": "No Item Filter Selected",
"ldn-new-service.form.label.ItemFilter": "Item Filter",
"ldn-new-service.form.label.automatic": "Automatic",
"ldn-new-service.form.label.outboundPattern": "Outbound Pattern",
"ldn-new-service.form.label.outboundPattern": "Outbound Patterns",
"ldn-new-service.form.label.placeholder.outboundPattern": "Select an Outbound Pattern",
"ldn-new-service.form.label.addPattern": "+ Add more",
"ldn-new-service.form.label.removeItemFilter": "Remove",