From c75f61840fc319f21d8d2f42e3d33a1560a26cbf Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <vianellimattia@icloud.com>
Date: Fri, 6 Oct 2023 13:04:52 +0200
Subject: [PATCH] CST-11048 Spaced form updated error behaviour

---
 .../ldn-service-form-edit.component.html      |  8 +++-
 .../ldn-service-form-edit.component.scss      |  1 -
 .../ldn-service-form.component.html           | 38 +++++++++++++++----
 .../ldn-service-form.component.scss           | 26 ++++++++++---
 src/assets/i18n/en.json5                      |  4 +-
 5 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
index f887eb2a2a..6402e0b953 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
@@ -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>
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
index 9a35ee9ad2..92ac744aed 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
@@ -51,7 +51,6 @@ textarea {
 
 .invalid-field {
   border: 1px solid red;
-  background-color: #e89f9f;
   color: #000000;
 }
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
index db55ec285a..d1f13baf32 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
@@ -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>
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
index ade0744d4c..92ac744aed 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
@@ -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;
+}
+
+
+
+
+
+
+
+
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 67ccaa0320..7a68fc60c8 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -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",