From ea726a7dba11a2852da5fed104b5d9a37184fb74 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <Mattia.Vianelli@4science.com>
Date: Thu, 2 Nov 2023 14:16:14 +0100
Subject: [PATCH 01/21] CST-12455 Moved patterns to be using i18n, added id to
 represent the string to send to the rest when doing operations

---
 .../ldn-service-form-edit.component.html      |   4 +-
 .../ldn-service-form.component.html           |   4 +-
 .../ldn-service-coar-patterns.ts              | 137 +++++++++---------
 src/assets/i18n/en.json5                      |  53 +++++++
 4 files changed, 129 insertions(+), 69 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 568f3ed46f..8b086ceead 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
@@ -90,7 +90,7 @@
                                 name="additionalInboundPattern{{i}}" required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of inboundPatterns"
-                                    [ngValue]="pattern.name">{{ pattern.name }}</option>
+                                    [ngValue]="pattern.id">{{ pattern.name | translate }} </option>
                         </select>
                     </div>
 
@@ -167,7 +167,7 @@
                                 required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of outboundPatterns"
-                                    [ngValue]="pattern.name">{{ pattern.name }}</option>
+                                    [ngValue]="pattern.id">{{ pattern.name | translate }} </option>
                         </select>
                     </div>
                     <div class="col">
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 f1afa886f1..23287ea671 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
@@ -81,7 +81,7 @@
                                 name="additionalInboundPattern{{i}}" required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of inboundPatterns"
-                                    [ngValue]="pattern.name">{{ pattern.name }}</option>
+                                    [ngValue]="pattern.id">{{ pattern.name | translate }} </option>
                         </select>
                     </div>
 
@@ -150,7 +150,7 @@
                                 required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of outboundPatterns"
-                                    [ngValue]="pattern.name">{{ pattern.name }}</option>
+                                    [ngValue]="pattern.id ">{{ pattern.name | translate }}</option>
                         </select>
                     </div>
                     <div class="col">
diff --git a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
index 7b0c25e832..dca0fd8daf 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
@@ -1,69 +1,76 @@
 export const notifyPatterns = [
-    {
-        name: 'Acknowledge and Accept',
-        description: 'This pattern is used to acknowledge and accept a request (offer). It implies an intention to act on the request.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Acknowledge and Reject',
-        description: 'This pattern is used to acknowledge and reject a request (offer). It signifies no further action regarding the request.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Acknowledge and Tentatively Accept',
-        description: 'This pattern is used to acknowledge and tentatively accept a request (offer). It implies an intention to act, which may change.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Acknowledge and Tentatively Reject',
-        description: 'This pattern is used to acknowledge and tentatively reject a request (offer). It signifies no further action, subject to change.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Announce Endorsement',
-        description: 'This pattern is used to announce the existence of an endorsement, referencing the endorsed resource.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Ingest',
-        description: 'This pattern is used to announce that a resource has been ingested.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Relationship',
-        description: 'This pattern is used to announce a relationship between two resources.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Review',
-        description: 'This pattern is used to announce the existence of a review, referencing the reviewed resource.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Service Result',
-        description: 'This pattern is used to announce the existence of a "service result", referencing the relevant resource.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Request Endorsement',
-        description: 'This pattern is used to request endorsement of a resource owned by the origin system.',
-        category: 'Requests'
-    },
-    {
-        name: 'Request Ingest',
-        description: 'This pattern is used to request that the target system ingest a resource.',
-        category: 'Requests'
-    },
-    {
-        name: 'Request Review',
-        description: 'This pattern is used to request a review of a resource owned by the origin system.',
-        category: 'Requests'
-    },
-    {
-        name: 'Undo Offer',
-        description: 'This pattern is used to undo (retract) an offer previously made.',
-        category: 'Undo'
-    }
+  {
+    id: 'ask-accept',
+    name: 'ldn-service.form.label.pattern.acknowledge-and-accept.name',
+    description: 'ldn-service.form.label.pattern.acknowledge-and-accept.description',
+    category: 'ldn-service.form.label.pattern.acknowledge-and-accept.category'
+  },
+  {
+    id: 'ask-reject',
+    name: 'ldn-service.form.label.pattern.acknowledge-and-reject.name',
+    description: 'ldn-service.form.label.pattern.acknowledge-and-reject.description',
+    category: 'Acknowledgements'
+  },
+  {
+    id: 'ask-tentative',
+    name: 'ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.name',
+    description: 'ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.description',
+    category: 'Acknowledgements'
+  },
+  {
+    id: 'announce-endorsement',
+    name: 'ldn-service.form.label.pattern.announce-endorsement.name',
+    description: 'ldn-service.form.label.pattern.announce-endorsement.description',
+    category: 'Announcements'
+  },
+  {
+    id: 'announce-ingest',
+    name: 'ldn-service.form.label.pattern.announce-ingest.name',
+    description: 'ldn-service.form.label.pattern.announce-ingest.description',
+    category: 'Announcements'
+  },
+  {
+    id: 'announce-relationship',
+    name: 'ldn-service.form.label.pattern.announce-relationship.name',
+    description: 'ldn-service.form.label.pattern.announce-relationship.description',
+    category: 'Announcements'
+  },
+  {
+    id: 'announce-review',
+    name: 'ldn-service.form.label.pattern.announce-review.name',
+    description: 'ldn-service.form.label.pattern.announce-review.description',
+    category: 'Announcements'
+  },
+  {
+    id: 'announce-service-result',
+    name: 'ldn-service.form.label.pattern.announce-service-result.name',
+    description: 'ldn-service.form.label.pattern.announce-service-result.description',
+    category: 'Announcements'
+  },
+  {
+    id: 'request-endorsement',
+    name: 'ldn-service.form.label.pattern.request-endorsement.name',
+    description: 'ldn-service.form.label.pattern.request-endorsement.description',
+    category: 'Requests'
+  },
+  {
+    id: 'request-ingest',
+    name: 'ldn-service.form.label.pattern.request-ingest.name',
+    description: 'ldn-service.form.label.pattern.request-ingest.description',
+    category: 'Requests'
+  },
+  {
+    id: 'request-review',
+    name: 'ldn-service.form.label.pattern.request-review.name',
+    description: 'ldn-service.form.label.pattern.request-review.description',
+    category: 'Requests'
+  },
+  {
+    id: 'undo',
+    name: 'ldn-service.form.label.pattern.undo-offer.name',
+    description: 'ldn-service.form.label.pattern.undo-offer.description',
+    category: 'Undo'
+  }
 ];
 
 
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 108433de21..7cda0e603b 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -936,6 +936,59 @@
   "ldn-new-service.form.placeholder.ldnUrl": "Please specify the URL of the LDN Inbox",
   "ldn-new-service.form.label.inboundPattern": "Inbound Patterns",
   "ldn-new-service.form.label.placeholder.inboundPattern": "Select an Inbound Pattern",
+
+  "ldn-service.form.label.pattern.acknowledge-and-accept.name": "Acknowledge and Accept",
+  "ldn-service.form.label.pattern.acknowledge-and-accept.description": "This pattern is used to acknowledge and accept a request (offer). It implies an intention to act on the request.",
+  "ldn-service.form.label.pattern.acknowledge-and-accept.category": "Acknowledgements",
+
+  "ldn-service.form.label.pattern.acknowledge-and-reject.name": "Acknowledge and Reject",
+  "ldn-service.form.label.pattern.acknowledge-and-reject.description": "This pattern is used to acknowledge and reject a request (offer). It signifies no further action regarding the request.",
+  "ldn-service.form.label.pattern.acknowledge-and-reject.category": "Acknowledgements",
+
+  "ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.name": "Acknowledge and Tentatively Accept",
+  "ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.description": "This pattern is used to acknowledge and tentatively accept a request (offer). It implies an intention to act, which may change.",
+  "ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.category": "Acknowledgements",
+
+  "ldn-service.form.label.pattern.acknowledge-and-tentatively-reject.name": "Acknowledge and Tentatively Reject",
+  "ldn-service.form.label.pattern.acknowledge-and-tentatively-reject.description": "This pattern is used to acknowledge and tentatively reject a request (offer). It signifies no further action, subject to change.",
+  "ldn-service.form.label.pattern.acknowledge-and-tentatively-reject.category": "Acknowledgements",
+
+  "ldn-service.form.label.pattern.announce-endorsement.name": "Announce Endorsement",
+  "ldn-service.form.label.pattern.announce-endorsement.description": "This pattern is used to announce the existence of an endorsement, referencing the endorsed resource.",
+  "ldn-service.form.label.pattern.announce-endorsement.category": "Announcements",
+
+  "ldn-service.form.label.pattern.announce-ingest.name": "Announce Ingest",
+  "ldn-service.form.label.pattern.announce-ingest.description": "This pattern is used to announce that a resource has been ingested.",
+  "ldn-service.form.label.pattern.announce-ingest.category": "Announcements",
+
+  "ldn-service.form.label.pattern.announce-relationship.name": "Announce Relationship",
+  "ldn-service.form.label.pattern.announce-relationship.description": "This pattern is used to announce a relationship between two resources.",
+  "ldn-service.form.label.pattern.announce-relationship.category": "Announcements",
+
+  "ldn-service.form.label.pattern.announce-review.name": "Announce Review",
+  "ldn-service.form.label.pattern.announce-review.description": "This pattern is used to announce the existence of a review, referencing the reviewed resource.",
+  "ldn-service.form.label.pattern.announce-review.category": "Announcements",
+
+  "ldn-service.form.label.pattern.announce-service-result.name": "Announce Service Result",
+  "ldn-service.form.label.pattern.announce-service-result.description": "This pattern is used to announce the existence of a 'service result', referencing the relevant resource.",
+  "ldn-service.form.label.pattern.announce-service-result.category": "Announcements",
+
+  "ldn-service.form.label.pattern.request-endorsement.name": "Request Endorsement",
+  "ldn-service.form.label.pattern.request-endorsement.description": "This pattern is used to request endorsement of a resource owned by the origin system.",
+  "ldn-service.form.label.pattern.request-endorsement.category": "Requests",
+
+  "ldn-service.form.label.pattern.request-ingest.name": "Request Ingest",
+  "ldn-service.form.label.pattern.request-ingest.description": "This pattern is used to request that the target system ingest a resource.",
+  "ldn-service.form.label.pattern.request-ingest.category": "Requests",
+
+  "ldn-service.form.label.pattern.request-review.name": "Request Review",
+  "ldn-service.form.label.pattern.request-review.description": "This pattern is used to request a review of a resource owned by the origin system.",
+  "ldn-service.form.label.pattern.request-review.category": "Requests",
+
+  "ldn-service.form.label.pattern.undo-offer.name": "Undo Offer",
+  "ldn-service.form.label.pattern.undo-offer.description": "This pattern is used to undo (retract) an offer previously made.",
+  "ldn-service.form.label.pattern.undo-offer.category": "Undo",
+
   "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",

From 92330953bff4b2d57278d0e6b192cf8e86490633 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Fri, 10 Nov 2023 10:04:32 +0100
Subject: [PATCH 02/21] CST-12455 Provided json5 key values based on the string
 arrays

---
 .../ldn-service-form-edit.component.html      |   4 +-
 .../ldn-service-form-edit.component.ts        |   4 +-
 .../ldn-service-form.component.html           |   4 +-
 .../ldn-service-form.component.ts             |   7 +-
 .../ldn-service-coar-patterns.ts              | 150 +++++++++---------
 src/assets/i18n/en.json5                      |  78 ++++-----
 6 files changed, 128 insertions(+), 119 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 8b086ceead..56105ce805 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
@@ -90,7 +90,7 @@
                                 name="additionalInboundPattern{{i}}" required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of inboundPatterns"
-                                    [ngValue]="pattern.id">{{ pattern.name | translate }} </option>
+                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
                         </select>
                     </div>
 
@@ -167,7 +167,7 @@
                                 required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of outboundPatterns"
-                                    [ngValue]="pattern.id">{{ pattern.name | translate }} </option>
+                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
                         </select>
                     </div>
                     <div class="col">
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index fa460afbca..f0422e39e4 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -37,8 +37,8 @@ export class LdnServiceFormEditComponent implements OnInit {
     @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
     @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
 
-    public inboundPatterns: object[] = notifyPatterns;
-    public outboundPatterns: object[] = notifyPatterns;
+    public inboundPatterns: string[] = notifyPatterns;
+    public outboundPatterns: string[] = notifyPatterns;
     itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
     config: FindListOptions = Object.assign(new FindListOptions(), {
         elementsPerPage: 20
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 23287ea671..1b4aa9048d 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
@@ -81,7 +81,7 @@
                                 name="additionalInboundPattern{{i}}" required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of inboundPatterns"
-                                    [ngValue]="pattern.id">{{ pattern.name | translate }} </option>
+                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
                         </select>
                     </div>
 
@@ -150,7 +150,7 @@
                                 required>
                             <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
                             <option *ngFor="let pattern of outboundPatterns"
-                                    [ngValue]="pattern.id ">{{ pattern.name | translate }}</option>
+                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</option>
                         </select>
                     </div>
                     <div class="col">
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index a2c4919a4d..0ddefcd82e 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -45,8 +45,10 @@ export class LdnServiceFormComponent implements OnInit {
     formModel: FormGroup;
     @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
     @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-    public inboundPatterns: object[] = notifyPatterns;
-    public outboundPatterns: object[] = notifyPatterns;
+    //public inboundPatterns: object[] = notifyPatterns;
+    //public outboundPatterns: object[] = notifyPatterns;
+  public inboundPatterns: string[] = notifyPatterns;
+  public outboundPatterns: string[] = notifyPatterns;
     itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
     config: FindListOptions = Object.assign(new FindListOptions(), {
         elementsPerPage: 20
@@ -96,6 +98,7 @@ export class LdnServiceFormComponent implements OnInit {
     }
 
     ngOnInit(): void {
+        console.log(notifyPatterns)
         this.setItemfilters();
 
     }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
index dca0fd8daf..a882d5db11 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
@@ -1,76 +1,82 @@
 export const notifyPatterns = [
-  {
-    id: 'ask-accept',
-    name: 'ldn-service.form.label.pattern.acknowledge-and-accept.name',
-    description: 'ldn-service.form.label.pattern.acknowledge-and-accept.description',
-    category: 'ldn-service.form.label.pattern.acknowledge-and-accept.category'
-  },
-  {
-    id: 'ask-reject',
-    name: 'ldn-service.form.label.pattern.acknowledge-and-reject.name',
-    description: 'ldn-service.form.label.pattern.acknowledge-and-reject.description',
-    category: 'Acknowledgements'
-  },
-  {
-    id: 'ask-tentative',
-    name: 'ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.name',
-    description: 'ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.description',
-    category: 'Acknowledgements'
-  },
-  {
-    id: 'announce-endorsement',
-    name: 'ldn-service.form.label.pattern.announce-endorsement.name',
-    description: 'ldn-service.form.label.pattern.announce-endorsement.description',
-    category: 'Announcements'
-  },
-  {
-    id: 'announce-ingest',
-    name: 'ldn-service.form.label.pattern.announce-ingest.name',
-    description: 'ldn-service.form.label.pattern.announce-ingest.description',
-    category: 'Announcements'
-  },
-  {
-    id: 'announce-relationship',
-    name: 'ldn-service.form.label.pattern.announce-relationship.name',
-    description: 'ldn-service.form.label.pattern.announce-relationship.description',
-    category: 'Announcements'
-  },
-  {
-    id: 'announce-review',
-    name: 'ldn-service.form.label.pattern.announce-review.name',
-    description: 'ldn-service.form.label.pattern.announce-review.description',
-    category: 'Announcements'
-  },
-  {
-    id: 'announce-service-result',
-    name: 'ldn-service.form.label.pattern.announce-service-result.name',
-    description: 'ldn-service.form.label.pattern.announce-service-result.description',
-    category: 'Announcements'
-  },
-  {
-    id: 'request-endorsement',
-    name: 'ldn-service.form.label.pattern.request-endorsement.name',
-    description: 'ldn-service.form.label.pattern.request-endorsement.description',
-    category: 'Requests'
-  },
-  {
-    id: 'request-ingest',
-    name: 'ldn-service.form.label.pattern.request-ingest.name',
-    description: 'ldn-service.form.label.pattern.request-ingest.description',
-    category: 'Requests'
-  },
-  {
-    id: 'request-review',
-    name: 'ldn-service.form.label.pattern.request-review.name',
-    description: 'ldn-service.form.label.pattern.request-review.description',
-    category: 'Requests'
-  },
-  {
-    id: 'undo',
-    name: 'ldn-service.form.label.pattern.undo-offer.name',
-    description: 'ldn-service.form.label.pattern.undo-offer.description',
-    category: 'Undo'
-  }
+  //{
+     'ack-accept',
+    //name: 'ldn-service.form.pattern.acknowledge-and-accept.label',
+    //description: 'ldn-service.form.pattern.acknowledge-and-accept.description',
+    //category: 'ldn-service.form.pattern.acknowledge-and-accept.category'
+  //},
+  //{
+     'ack-reject',
+    //name: 'ldn-service.form.pattern.acknowledge-and-reject.label',
+    //description: 'ldn-service.form.pattern.acknowledge-and-reject.description',
+    //category: 'ldn-service.form.pattern.acknowledge-and-reject.category'
+  //},
+  //{
+    'ack-tentative-accept',
+    //name: 'ldn-service.form.pattern.acknowledge-and-tentatively-accept.label',
+    //description: 'ldn-service.form.pattern.acknowledge-and-tentatively-accept.description',
+    //category: 'ldn-service.form.pattern.acknowledge-and-tentatively-accept.category'
+  //},
+  //{
+     'ack-tentative-reject',
+    //name: 'ldn-service.form.pattern.acknowledge-and-tentatively-reject.label',
+    //description: 'ldn-service.form.pattern.acknowledge-and-tentatively-reject.description',
+    //category: 'ldn-service.form.pattern.acknowledge-and-tentatively-reject.category'
+  //},
+  //{
+     'announce-endorsement',
+    //name: 'ldn-service.form.pattern.announce-endorsement.label',
+    //description: 'ldn-service.form.pattern.announce-endorsement.description',
+    //category: 'ldn-service.form.pattern.announce-endorsement.category'
+  //},
+  //{
+    'announce-ingest',
+    //name: 'ldn-service.form.pattern.announce-ingest.label',
+    //description: 'ldn-service.form.pattern.announce-ingest.description',
+    //category: 'ldn-service.form.pattern.announce-ingest.category'
+  //},
+  //{
+    'announce-relationship',
+    //name: 'ldn-service.form.pattern.announce-relationship.label',
+    //description: 'ldn-service.form.pattern.announce-relationship.description',
+    //category: 'ldn-service.form.pattern.announce-relationship.category'
+  //},
+  //{
+   'announce-review',
+    //name: 'ldn-service.form.pattern.announce-review.label',
+    //description: 'ldn-service.form.pattern.announce-review.description',
+    //category: 'ldn-service.form.pattern.announce-review.category'
+  //},
+  //{
+    'announce-service-result',
+    //name: 'ldn-service.form.pattern.announce-service-result.label',
+    //description: 'ldn-service.form.pattern.announce-service-result.description',
+    //category: 'ldn-service.form.pattern.announce-service-result.category'
+  //},
+  //{
+     'request-endorsement',
+    //name: 'ldn-service.form.pattern.request-endorsement.label',
+    //description: 'ldn-service.form.pattern.request-endorsement.description',
+    //category: 'ldn-service.form.pattern.request-endorsement.category'
+  //},
+  //{
+    'request-ingest',
+    //name: 'ldn-service.form.pattern.request-ingest.label',
+    //description: 'ldn-service.form.pattern.request-ingest.description',
+    //category: 'ldn-service.form.pattern.request-ingest.category'
+  //},
+  //{
+    'request-review',
+    //name: 'ldn-service.form.pattern.request-review.label',
+    //description: 'ldn-service.form.pattern.request-review.description',
+    //category: 'ldn-service.form.pattern.request-review.category'
+  //},
+  //{
+     'undo-offer',
+    //name: 'ldn-service.form.pattern.undo-offer.label',
+    //description: 'ldn-service.form.pattern.undo-offer.description',
+    //category: 'ldn-service.form.pattern.undo-offer.category'
+  //}
 ];
 
 
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 7cda0e603b..81562814d4 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -937,57 +937,57 @@
   "ldn-new-service.form.label.inboundPattern": "Inbound Patterns",
   "ldn-new-service.form.label.placeholder.inboundPattern": "Select an Inbound Pattern",
 
-  "ldn-service.form.label.pattern.acknowledge-and-accept.name": "Acknowledge and Accept",
-  "ldn-service.form.label.pattern.acknowledge-and-accept.description": "This pattern is used to acknowledge and accept a request (offer). It implies an intention to act on the request.",
-  "ldn-service.form.label.pattern.acknowledge-and-accept.category": "Acknowledgements",
+  "ldn-service.form.pattern.ack-accept.label": "Acknowledge and Accept",
+  "ldn-service.form.pattern.ack-accept.description": "This pattern is used to acknowledge and accept a request (offer). It implies an intention to act on the request.",
+  "ldn-service.form.pattern.ack-accept.category": "Acknowledgements",
 
-  "ldn-service.form.label.pattern.acknowledge-and-reject.name": "Acknowledge and Reject",
-  "ldn-service.form.label.pattern.acknowledge-and-reject.description": "This pattern is used to acknowledge and reject a request (offer). It signifies no further action regarding the request.",
-  "ldn-service.form.label.pattern.acknowledge-and-reject.category": "Acknowledgements",
+  "ldn-service.form.pattern.ack-reject.label": "Acknowledge and Reject",
+  "ldn-service.form.pattern.ack-reject.description": "This pattern is used to acknowledge and reject a request (offer). It signifies no further action regarding the request.",
+  "ldn-service.form.pattern.ack-reject.category": "Acknowledgements",
 
-  "ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.name": "Acknowledge and Tentatively Accept",
-  "ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.description": "This pattern is used to acknowledge and tentatively accept a request (offer). It implies an intention to act, which may change.",
-  "ldn-service.form.label.pattern.acknowledge-and-tentatively-accept.category": "Acknowledgements",
+  "ldn-service.form.pattern.ack-tentative-accept.label": "Acknowledge and Tentatively Accept",
+  "ldn-service.form.pattern.ack-tentative-accept.description": "This pattern is used to acknowledge and tentatively accept a request (offer). It implies an intention to act, which may change.",
+  "ldn-service.form.pattern.ack-tentative-accept.category": "Acknowledgements",
 
-  "ldn-service.form.label.pattern.acknowledge-and-tentatively-reject.name": "Acknowledge and Tentatively Reject",
-  "ldn-service.form.label.pattern.acknowledge-and-tentatively-reject.description": "This pattern is used to acknowledge and tentatively reject a request (offer). It signifies no further action, subject to change.",
-  "ldn-service.form.label.pattern.acknowledge-and-tentatively-reject.category": "Acknowledgements",
+  "ldn-service.form.pattern.ack-tentative-reject.label": "Acknowledge and Tentatively Reject",
+  "ldn-service.form.pattern.ack-tentative-reject.description": "This pattern is used to acknowledge and tentatively reject a request (offer). It signifies no further action, subject to change.",
+  "ldn-service.form.pattern.ack-tentative-reject.category": "Acknowledgements",
 
-  "ldn-service.form.label.pattern.announce-endorsement.name": "Announce Endorsement",
-  "ldn-service.form.label.pattern.announce-endorsement.description": "This pattern is used to announce the existence of an endorsement, referencing the endorsed resource.",
-  "ldn-service.form.label.pattern.announce-endorsement.category": "Announcements",
+  "ldn-service.form.pattern.announce-endorsement.label": "Announce Endorsement",
+  "ldn-service.form.pattern.announce-endorsement.description": "This pattern is used to announce the existence of an endorsement, referencing the endorsed resource.",
+  "ldn-service.form.pattern.announce-endorsement.category": "Announcements",
 
-  "ldn-service.form.label.pattern.announce-ingest.name": "Announce Ingest",
-  "ldn-service.form.label.pattern.announce-ingest.description": "This pattern is used to announce that a resource has been ingested.",
-  "ldn-service.form.label.pattern.announce-ingest.category": "Announcements",
+  "ldn-service.form.pattern.announce-ingest.label": "Announce Ingest",
+  "ldn-service.form.pattern.announce-ingest.description": "This pattern is used to announce that a resource has been ingested.",
+  "ldn-service.form.pattern.announce-ingest.category": "Announcements",
 
-  "ldn-service.form.label.pattern.announce-relationship.name": "Announce Relationship",
-  "ldn-service.form.label.pattern.announce-relationship.description": "This pattern is used to announce a relationship between two resources.",
-  "ldn-service.form.label.pattern.announce-relationship.category": "Announcements",
+  "ldn-service.form.pattern.announce-relationship.label": "Announce Relationship",
+  "ldn-service.form.pattern.announce-relationship.description": "This pattern is used to announce a relationship between two resources.",
+  "ldn-service.form.pattern.announce-relationship.category": "Announcements",
 
-  "ldn-service.form.label.pattern.announce-review.name": "Announce Review",
-  "ldn-service.form.label.pattern.announce-review.description": "This pattern is used to announce the existence of a review, referencing the reviewed resource.",
-  "ldn-service.form.label.pattern.announce-review.category": "Announcements",
+  "ldn-service.form.pattern.announce-review.label": "Announce Review",
+  "ldn-service.form.pattern.announce-review.description": "This pattern is used to announce the existence of a review, referencing the reviewed resource.",
+  "ldn-service.form.pattern.announce-review.category": "Announcements",
 
-  "ldn-service.form.label.pattern.announce-service-result.name": "Announce Service Result",
-  "ldn-service.form.label.pattern.announce-service-result.description": "This pattern is used to announce the existence of a 'service result', referencing the relevant resource.",
-  "ldn-service.form.label.pattern.announce-service-result.category": "Announcements",
+  "ldn-service.form.pattern.announce-service-result.label": "Announce Service Result",
+  "ldn-service.form.pattern.announce-service-result.description": "This pattern is used to announce the existence of a 'service result', referencing the relevant resource.",
+  "ldn-service.form.pattern.announce-service-result.category": "Announcements",
 
-  "ldn-service.form.label.pattern.request-endorsement.name": "Request Endorsement",
-  "ldn-service.form.label.pattern.request-endorsement.description": "This pattern is used to request endorsement of a resource owned by the origin system.",
-  "ldn-service.form.label.pattern.request-endorsement.category": "Requests",
+  "ldn-service.form.pattern.request-endorsement.label": "Request Endorsement",
+  "ldn-service.form.pattern.request-endorsement.description": "This pattern is used to request endorsement of a resource owned by the origin system.",
+  "ldn-service.form.pattern.request-endorsement.category": "Requests",
 
-  "ldn-service.form.label.pattern.request-ingest.name": "Request Ingest",
-  "ldn-service.form.label.pattern.request-ingest.description": "This pattern is used to request that the target system ingest a resource.",
-  "ldn-service.form.label.pattern.request-ingest.category": "Requests",
+  "ldn-service.form.pattern.request-ingest.label": "Request Ingest",
+  "ldn-service.form.pattern.request-ingest.description": "This pattern is used to request that the target system ingest a resource.",
+  "ldn-service.form.pattern.request-ingest.category": "Requests",
 
-  "ldn-service.form.label.pattern.request-review.name": "Request Review",
-  "ldn-service.form.label.pattern.request-review.description": "This pattern is used to request a review of a resource owned by the origin system.",
-  "ldn-service.form.label.pattern.request-review.category": "Requests",
+  "ldn-service.form.pattern.request-review.label": "Request Review",
+  "ldn-service.form.pattern.request-review.description": "This pattern is used to request a review of a resource owned by the origin system.",
+  "ldn-service.form.pattern.request-review.category": "Requests",
 
-  "ldn-service.form.label.pattern.undo-offer.name": "Undo Offer",
-  "ldn-service.form.label.pattern.undo-offer.description": "This pattern is used to undo (retract) an offer previously made.",
-  "ldn-service.form.label.pattern.undo-offer.category": "Undo",
+  "ldn-service.form.pattern.undo-offer.label": "Undo Offer",
+  "ldn-service.form.pattern.undo-offer.description": "This pattern is used to undo (retract) an offer previously made.",
+  "ldn-service.form.pattern.undo-offer.category": "Undo",
 
   "ldn-new-service.form.label.placeholder.selectedItemFilter": "No Item Filter Selected",
   "ldn-new-service.form.label.ItemFilter": "Item Filter",

From f4b8c7f1f1deb128c9671e9fc054b1e28e6555a5 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Fri, 10 Nov 2023 10:44:39 +0100
Subject: [PATCH 03/21] CST-12179 Removed comments

---
 .../ldn-service-coar-patterns.ts              | 105 +++++-------------
 1 file changed, 27 insertions(+), 78 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
index a882d5db11..8620bfc80c 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
@@ -1,82 +1,31 @@
 export const notifyPatterns = [
-  //{
-     'ack-accept',
-    //name: 'ldn-service.form.pattern.acknowledge-and-accept.label',
-    //description: 'ldn-service.form.pattern.acknowledge-and-accept.description',
-    //category: 'ldn-service.form.pattern.acknowledge-and-accept.category'
-  //},
-  //{
-     'ack-reject',
-    //name: 'ldn-service.form.pattern.acknowledge-and-reject.label',
-    //description: 'ldn-service.form.pattern.acknowledge-and-reject.description',
-    //category: 'ldn-service.form.pattern.acknowledge-and-reject.category'
-  //},
-  //{
-    'ack-tentative-accept',
-    //name: 'ldn-service.form.pattern.acknowledge-and-tentatively-accept.label',
-    //description: 'ldn-service.form.pattern.acknowledge-and-tentatively-accept.description',
-    //category: 'ldn-service.form.pattern.acknowledge-and-tentatively-accept.category'
-  //},
-  //{
-     'ack-tentative-reject',
-    //name: 'ldn-service.form.pattern.acknowledge-and-tentatively-reject.label',
-    //description: 'ldn-service.form.pattern.acknowledge-and-tentatively-reject.description',
-    //category: 'ldn-service.form.pattern.acknowledge-and-tentatively-reject.category'
-  //},
-  //{
-     'announce-endorsement',
-    //name: 'ldn-service.form.pattern.announce-endorsement.label',
-    //description: 'ldn-service.form.pattern.announce-endorsement.description',
-    //category: 'ldn-service.form.pattern.announce-endorsement.category'
-  //},
-  //{
-    'announce-ingest',
-    //name: 'ldn-service.form.pattern.announce-ingest.label',
-    //description: 'ldn-service.form.pattern.announce-ingest.description',
-    //category: 'ldn-service.form.pattern.announce-ingest.category'
-  //},
-  //{
-    'announce-relationship',
-    //name: 'ldn-service.form.pattern.announce-relationship.label',
-    //description: 'ldn-service.form.pattern.announce-relationship.description',
-    //category: 'ldn-service.form.pattern.announce-relationship.category'
-  //},
-  //{
-   'announce-review',
-    //name: 'ldn-service.form.pattern.announce-review.label',
-    //description: 'ldn-service.form.pattern.announce-review.description',
-    //category: 'ldn-service.form.pattern.announce-review.category'
-  //},
-  //{
-    'announce-service-result',
-    //name: 'ldn-service.form.pattern.announce-service-result.label',
-    //description: 'ldn-service.form.pattern.announce-service-result.description',
-    //category: 'ldn-service.form.pattern.announce-service-result.category'
-  //},
-  //{
-     'request-endorsement',
-    //name: 'ldn-service.form.pattern.request-endorsement.label',
-    //description: 'ldn-service.form.pattern.request-endorsement.description',
-    //category: 'ldn-service.form.pattern.request-endorsement.category'
-  //},
-  //{
-    'request-ingest',
-    //name: 'ldn-service.form.pattern.request-ingest.label',
-    //description: 'ldn-service.form.pattern.request-ingest.description',
-    //category: 'ldn-service.form.pattern.request-ingest.category'
-  //},
-  //{
-    'request-review',
-    //name: 'ldn-service.form.pattern.request-review.label',
-    //description: 'ldn-service.form.pattern.request-review.description',
-    //category: 'ldn-service.form.pattern.request-review.category'
-  //},
-  //{
-     'undo-offer',
-    //name: 'ldn-service.form.pattern.undo-offer.label',
-    //description: 'ldn-service.form.pattern.undo-offer.description',
-    //category: 'ldn-service.form.pattern.undo-offer.category'
-  //}
+
+  'ack-accept',
+
+  'ack-reject',
+
+  'ack-tentative-accept',
+
+  'ack-tentative-reject',
+
+  'announce-endorsement',
+
+  'announce-ingest',
+
+  'announce-relationship',
+
+  'announce-review',
+
+  'announce-service-result',
+
+  'request-endorsement',
+
+  'request-ingest',
+
+  'request-review',
+
+  'undo-offer',
+
 ];
 
 

From 721b80a0e678880772c89412e114eb8189ed37b4 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Tue, 14 Nov 2023 13:13:39 +0100
Subject: [PATCH 04/21] CST-12455 Changes for the page to be using an
 ngbdropdown logic are still required and being worked on

---
 .../ldn-service-form-edit.component.html      | 121 ++++++++++++------
 .../ldn-service-form-edit.component.scss      |   8 +-
 .../ldn-service-form-edit.component.ts        |  56 +++++++-
 .../ldn-service-form.component.html           | 100 +++++++++++----
 .../ldn-service-form.component.scss           |  10 +-
 .../ldn-service-form.component.ts             |  26 ++++
 6 files changed, 247 insertions(+), 74 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 56105ce805..192a6633a2 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
@@ -69,12 +69,12 @@
                 <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
             </div>
             <div class="col">
-                <label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+                <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
             </div>
-            <div class="col-sm1 ">
-                <label class="label-box-2">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+            <div class="col-sm-1 ">
+                <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
             </div>
-            <div class="col-sm-1">
+            <div class="col-sm-2">
             </div>
         </div>
 
@@ -86,34 +86,55 @@
 
                 <div  class="row mb-1">
                     <div class="col">
-                        <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
-                                name="additionalInboundPattern{{i}}" required>
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
-                            <option *ngFor="let pattern of inboundPatterns"
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
-                        </select>
-                    </div>
+                      <div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalInboundPattern{{i}}">
+                        <div class="position-relative right-addon" role="combobox">
+                          <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+                             aria-hidden="true"></i>
+                          <input
+                            formControlName="pattern"
+                            type="text"
+                            [readonly]="true"
+                            ngbDropdownAnchor
+                            class="form-control w-100 scrollable-dropdown-input"
+                            [value]="selectedInboundPatterns"
+                            (click)="inboundPatternDropdown.open();"
+                            id="inboundPatternDropdownButton"
+                          />
 
-                    <div class="col">
-                        <ng-container *ngIf="inboundPattern.value">
-                            <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-                            </select>
-                        </ng-container>
-                    </div>
-
-                    <div [style.visibility]="inboundPattern.value ? 'visible' : 'hidden'" class="col-sm1">
-                        <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                               type="checkbox">
-                        <div (click)="toggleAutomatic(i)"
-                             [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                             class="toggle-switch">
-                            <div class="slider"></div>
+                          <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
+                          <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                          <div class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                          <!-- TODO: infinite scroll with 3 selects -->
+                          <div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
+                            <button type="button" ngbDropdownItem *ngFor="let pattern of inboundPatterns; let internalIndex = index"  (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
+                              <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
+                              <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
+                            </button>
+                          </div>
                         </div>
+                      </div>
                     </div>
 
+                  <div class="col">
+                    <ng-container *ngIf="getInboundPatternControlNames(i)">
+                      <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
+                        <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
+                        <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
+                                [value]="itemFilter.id">{{ itemFilter.id }}</option>
+                      </select>
+                    </ng-container>
+                  </div>
+
+                  <div [style.visibility]="selectedInboundPatterns ? 'visible' : 'hidden'" class="col-sm-1">
+                    <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                           type="checkbox">
+                    <div (click)="toggleAutomatic(i)"
+                         [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                         class="toggle-switch">
+                      <div class="slider"></div>
+                    </div>
+                  </div>
+
 
                     <div class="col-sm-2">
                         <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark"
@@ -150,7 +171,7 @@
             <div class="col-sm-1 ">
                 <label class="label-box-2"></label>
             </div>
-            <div class="col-sm-1 ">
+            <div class="col-sm-2 ">
             </div>
         </div>
 
@@ -162,16 +183,36 @@
                 <!-- Input elements in a separate row -->
                 <div class="row mb-1">
                     <div class="col">
-                        <select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
-                                name="additionalOutboundPattern{{i}}"
-                                required>
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
-                            <option *ngFor="let pattern of outboundPatterns"
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
-                        </select>
+                        <div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalOutboundPattern{{i}}">
+                          <div class="position-relative right-addon" role="combobox">
+                            <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+                                aria-hidden="true"></i>
+                                <input
+                            formControlName="pattern"
+                            type="text"
+                            [readonly]="true"
+                            ngbDropdownAnchor
+                            class="form-control w-100 scrollable-dropdown-input"
+                            [value]="selectedOutboundPatterns"
+                            (click)="outboundPatternDropdown.open();"
+                            id="outboundPatternDropdownButton"
+                           />
+
+                        <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
+                              <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                              <div class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                        <!-- TODO: infinite scroll with 3 selects -->
+                          <div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
+                              <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index"  (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
+                                  <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
+                                  <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
+                              </button>
+                          </div>
+                      </div>
+                    </div>
                     </div>
                     <div class="col">
-                        <ng-container *ngIf="outboundPattern.value">
+                        <ng-container *ngIf="getOutboundPatternControlNames(i)">
                             <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
                                 <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
                                 <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
@@ -180,7 +221,7 @@
                         </ng-container>
                     </div>
 
-                    <div [style.visibility]="'hidden'" class="col-sm1">
+                    <div [style.visibility]="'hidden'" class="col-sm-1">
                         <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
                         <div
                                 class="toggle-switch">
@@ -214,7 +255,7 @@
                 <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
             </button>
             <div class="d-flex">
-                <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
+                <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
                     <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
                 </button>
             </div>
@@ -243,7 +284,7 @@
                 <button (click)="closeModal()" class="btn btn-danger mr-2"
                         id="delete-confirm">{{ 'service.detail.return' | translate }}
                 </button>
-                <button (click)="this.patchService()"
+                <button (click)="patchService()"
                         class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
                 </button>
             </div>
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 0b244d76db..2fc1e693f0 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
@@ -1,3 +1,6 @@
+@import '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss';
+@import '../../../shared/form/form.component.scss';
+
 form {
   font-size: 14px;
   position: relative;
@@ -28,7 +31,6 @@ textarea {
 .add-pattern-link {
   color: #0048ff;
   cursor: pointer;
-  margin-left: 10px;
 }
 
 .remove-pattern-link {
@@ -93,6 +95,10 @@ textarea {
   margin-top: 10px;
 }
 
+.small-text {
+  font-size: 0.7em;
+  color: #888;
+}
 .toggle-switch {
   cursor: pointer;
   margin-top: 3px;
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index f0422e39e4..cb2805f069 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
 import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {NgbDropdownConfig, NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { LdnService } from '../ldn-services-model/ldn-services.model';
@@ -19,6 +19,7 @@ import { Observable } from 'rxjs';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import {pattern} from "isbot";
 
 @Component({
     selector: 'ds-ldn-service-form-edit',
@@ -65,6 +66,8 @@ export class LdnServiceFormEditComponent implements OnInit {
     private deletedOutboundPatterns: number[] = [];
     private modalRef: any;
     private service: LdnService;
+    selectedOutboundPatterns: string[];
+    selectedInboundPatterns: string[];
 
     constructor(
         protected ldnServicesService: LdnServicesService,
@@ -164,8 +167,10 @@ export class LdnServiceFormEditComponent implements OnInit {
         this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
         this.createReplaceOperation(patchOperations, 'url', '/url');
 
-        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
-        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
+
+
+        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns', this.selectedInboundPatterns);
+        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns', this.selectedOutboundPatterns);
 
         this.deletedInboundPatterns.forEach(index => {
             const removeOperation: Operation = {
@@ -201,6 +206,37 @@ export class LdnServiceFormEditComponent implements OnInit {
     }
 
 
+   selectOutboundPattern(patternValue: string, index: number): void {
+   // this.selectedOutboundPatterns = patternValue;
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]
+       console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    patternArray.patchValue({pattern: patternValue} )
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+   }
+
+    selectInboundPattern(patternValue: string, index: number): void {
+        // this.selectedInboundPatterns = patternValue;
+        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
+        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+        console.log(patternArray)
+        //console.log(patternArray);
+        //this.getPatternControlNames(index)
+    }
+
+
+
+    getOutboundPatternControlNames(index: number) {
+        const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
+        return patternArrayValue
+    }
+
+    getInboundPatternControlNames(index: number) {
+        const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
+        return patternArrayValue
+    }
+
+
     toggleAutomatic(i: number) {
         const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
         if (automaticControl) {
@@ -245,6 +281,7 @@ export class LdnServiceFormEditComponent implements OnInit {
     patchService() {
         this.deleteMarkedInboundPatterns();
         this.deleteMarkedOutboundPatterns();
+
         const patchOperations = this.generatePatchOperations();
 
 
@@ -343,11 +380,16 @@ export class LdnServiceFormEditComponent implements OnInit {
         }
     }
 
-    private handlePatterns(patchOperations: any[], formArrayName: string): void {
+    private handlePatterns(patchOperations: any[], formArrayName: string, selectedPatterns: string[]): void {
+
         const patternsArray = this.formModel.get(formArrayName) as FormArray;
 
         for (let i = 0; i < patternsArray.length; i++) {
+
             const patternGroup = patternsArray.at(i) as FormGroup;
+            console.warn('Calling setValueForControlInOutboundArray', formArrayName, i, selectedPatterns);
+            this.setValueForControlInOutboundArray(formArrayName, i, selectedPatterns[i] )
+
             const patternValue = patternGroup.value;
 
             if (patternGroup.dirty) {
@@ -406,4 +448,10 @@ export class LdnServiceFormEditComponent implements OnInit {
             automatic: '',
         });
     }
+
+    setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
+        const formArray = this.formModel.get(formArrayName) as FormArray;
+        console.warn('inside setValueForControlInOutboundArray', formArray);
+        formArray.at(index).setValue(value);
+    }
 }
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 1b4aa9048d..de7949614d 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
@@ -60,10 +60,10 @@
                 <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
             </div>
             <div class="col">
-                <label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+                <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
             </div>
-            <div class="col-sm1 ">
-                <label class="label-box-2">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+            <div class="col-sm-1 ">
+                <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
             </div>
             <div class="col-sm-1">
             </div>
@@ -76,18 +76,41 @@
 
 
                 <div class="row mb-1">
-                    <div class="col">
-                        <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
-                                name="additionalInboundPattern{{i}}" required>
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
-                            <option *ngFor="let pattern of inboundPatterns"
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
-                        </select>
+                  <div class="col">
+                    <div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalInboundPattern{{i}}">
+                      <div class="position-relative right-addon" role="combobox">
+                        <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+                             aria-hidden="true">
+
+                        </i>
+                        <input
+                            formControlName="pattern"
+                            type="text"
+                            [readonly]="true"
+                            ngbDropdownAnchor
+                            class="form-control w-100 scrollable-dropdown-input"
+                            [value]="selectedInboundPatterns"
+                            (click)="inboundPatternDropdown.open();"
+                            id="inboundPatternDropdownButton"
+                        />
+
+                        <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
+                        <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
+                        <div class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                        <!-- TODO: infinite scroll with 3 selects -->
+                        <div ngbDropdownMenu aria-labelledby="inboundPatternDropdownButton">
+                          <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index"  (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
+                            <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
+                            <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
+                          </button>
+                        </div>
+                      </div>
                     </div>
+                  </div>
 
 
                     <div class="col">
-                        <ng-container *ngIf="inboundPattern.value">
+                        <ng-container *ngIf="selectedInboundPatterns">
                             <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
                                 <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
                                 <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
@@ -96,7 +119,7 @@
                         </ng-container>
                     </div>
 
-                    <div [style.visibility]="inboundPattern.value ? 'visible' : 'hidden'" class="col-sm-1">
+                    <div [style.visibility]="selectedInboundPatterns ? 'visible' : 'hidden'" class="col-sm-1">
                         <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
                                type="checkbox">
                         <div (click)="toggleAutomatic(i)"
@@ -111,6 +134,7 @@
                             <i class="fas fa-trash"></i>
                         </button>
                     </div>
+
                 </div>
             </ng-container>
         </div>
@@ -129,7 +153,7 @@
                 <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
             </div>
             <div class="col">
-                <label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+                <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
             </div>
             <div class="col-sm-1 ">
             </div>
@@ -145,16 +169,37 @@
                 <!-- Input elements in a separate row -->
                 <div class="row mb-1">
                     <div class="col">
-                        <select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
-                                name="additionalOutboundPattern{{i}}"
-                                required>
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
-                            <option *ngFor="let pattern of outboundPatterns"
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</option>
-                        </select>
+                      <div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalOutboundPattern{{i}}">
+                        <div class="position-relative right-addon" role="combobox">
+                          <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+                             aria-hidden="true"></i>
+                          <input
+                            formControlName="pattern"
+                            type="text"
+                            [readonly]="true"
+                            ngbDropdownAnchor
+                            class="form-control w-100 scrollable-dropdown-input"
+                            [value]="selectedOutboundPatterns"
+                            (click)="outboundPatternDropdown.open();"
+                            id="outboundPatternDropdownButton"
+                          />
+
+                          <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
+                          <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                          <div class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                          <!-- TODO: infinite scroll with 3 selects -->
+                          <div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
+                            <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns" (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
+                              <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
+                                <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
                     </div>
+
                     <div class="col">
-                        <ng-container *ngIf="outboundPattern.value">
+                        <ng-container *ngIf="selectedOutboundPatterns">
                             <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
                                 <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
                                 <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
@@ -163,13 +208,14 @@
                         </ng-container>
                     </div>
 
-                    <div [style.visibility]="'hidden'" class="col-sm1">
-                        <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
-                        <div
-                                class="toggle-switch">
-                            <div class="slider"></div>
-                        </div>
+                  <div [style.visibility]="'hidden'" class="col-sm-1">
+                    <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                           type="checkbox">
+                    <div
+                         class="toggle-switch">
+                      <div class="slider"></div>
                     </div>
+                  </div>
 
                     <div class="col-sm-1">
                         <button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
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 f0fdcd81a2..ef4e02910b 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
@@ -1,5 +1,7 @@
+@import '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss';
+@import '../../../shared/form/form.component.scss';
+
 form {
-  max-width: 800px;
   font-size: 14px;
   position: relative;
 
@@ -30,7 +32,6 @@ textarea {
 .add-pattern-link {
   color: #0048ff;
   cursor: pointer;
-  margin-left: 10px;
 }
 
 .remove-pattern-link {
@@ -39,6 +40,11 @@ textarea {
   margin-left: 10px;
 }
 
+.small-text {
+  font-size: 0.7em;
+  color: #888;
+}
+
 .status-checkbox {
   margin-top: 5px;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index 0ddefcd82e..cf19e4e7ef 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -69,6 +69,8 @@ export class LdnServiceFormComponent implements OnInit {
     @Output() submitForm: EventEmitter<any> = new EventEmitter();
     @Output() cancelForm: EventEmitter<any> = new EventEmitter();
     private modalRef: any;
+    selectedOutboundPatterns: string[];
+    selectedInboundPatterns: string[];
 
     constructor(
         private ldnServicesService: LdnServicesService,
@@ -214,5 +216,29 @@ export class LdnServiceFormComponent implements OnInit {
         });
     }
 
+    selectOutboundPattern(patternValue: string, index: number): void {
+        // this.selectedOutboundPatterns = patternValue;
+        const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]
+        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+        patternArray.patchValue({pattern: patternValue} )
+        //console.log(patternArray);
+        //this.getPatternControlNames(index)
+    }
+    //selectInboundPattern(pattern: string, index: number): void {
+         //this.selectedInboundPatterns = pattern;
+    //}
 
+    selectInboundPattern(patternValue: string, index: number): void {
+        // this.selectedOutboundPatterns = patternValue;
+        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
+        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+        patternArray.patchValue({pattern: patternValue} )
+        //console.log(patternArray);
+        //this.getPatternControlNames(index)
+    }
+
+    getPatternControlNames(index: number) {
+    const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index].value
+    return patternArrayValue
+    }
 }

From cd5d509160e621db6737c26d8ea13f7e952004bb Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Tue, 14 Nov 2023 17:33:56 +0100
Subject: [PATCH 05/21] CST-12455 Changes for the page to be using an
 ngbdropdown logic are now working

---
 .../ldn-service-form-edit.component.html      |  5 +-
 .../ldn-service-form-edit.component.ts        | 58 +++++++++++++------
 2 files changed, 42 insertions(+), 21 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 192a6633a2..ea3ce3c357 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
@@ -125,7 +125,7 @@
                     </ng-container>
                   </div>
 
-                  <div [style.visibility]="selectedInboundPatterns ? 'visible' : 'hidden'" class="col-sm-1">
+                  <div [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value ? 'visible' : 'hidden'" class="col-sm-1">
                     <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
                            type="checkbox">
                     <div (click)="toggleAutomatic(i)"
@@ -201,7 +201,7 @@
                         <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
                               <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
                               <div class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
-                        <!-- TODO: infinite scroll with 3 selects -->
+                        <!-- TODO: infinite scroll with 3-5 selects -->
                           <div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
                               <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index"  (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
                                   <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
@@ -211,6 +211,7 @@
                       </div>
                     </div>
                     </div>
+                    <!-- Main label TODO: update itemfilter dropdown -->
                     <div class="col">
                         <ng-container *ngIf="getOutboundPatternControlNames(i)">
                             <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index cb2805f069..9c0e60040c 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {AbstractControl, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
 import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
@@ -99,6 +99,8 @@ export class LdnServiceFormEditComponent implements OnInit {
     }
 
     ngOnInit(): void {
+        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
         this.route.params.subscribe((params) => {
             this.serviceId = params.serviceId;
             if (this.serviceId) {
@@ -134,7 +136,6 @@ export class LdnServiceFormEditComponent implements OnInit {
 
                     const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
                     inboundPatternsArray.clear();
-
                     this.service.notifyServiceInboundPatterns.forEach((pattern: any) => {
                         const patternFormGroup = this.initializeInboundPatternFormGroup();
                         patternFormGroup.patchValue(pattern);
@@ -144,12 +145,10 @@ export class LdnServiceFormEditComponent implements OnInit {
 
                     const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
                     outboundPatternsArray.clear();
-
                     this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
                         const patternFormGroup = this.initializeOutboundPatternFormGroup();
                         patternFormGroup.patchValue(pattern);
                         outboundPatternsArray.push(patternFormGroup);
-
                         this.cdRef.detectChanges();
                     });
                     this.originalInboundPatterns = [...this.service.notifyServiceInboundPatterns];
@@ -167,11 +166,10 @@ export class LdnServiceFormEditComponent implements OnInit {
         this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
         this.createReplaceOperation(patchOperations, 'url', '/url');
 
+        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
+        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
 
 
-        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns', this.selectedInboundPatterns);
-        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns', this.selectedOutboundPatterns);
-
         this.deletedInboundPatterns.forEach(index => {
             const removeOperation: Operation = {
                 op: 'remove',
@@ -208,18 +206,20 @@ export class LdnServiceFormEditComponent implements OnInit {
 
    selectOutboundPattern(patternValue: string, index: number): void {
    // this.selectedOutboundPatterns = patternValue;
-    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    patternArray.patchValue({pattern: patternValue} )
-    //console.log(patternArray);
+       patternArray.controls[index].patchValue({pattern: patternValue} )
+
+       //console.log(patternArray);
     //this.getPatternControlNames(index)
    }
 
     selectInboundPattern(patternValue: string, index: number): void {
-        // this.selectedInboundPatterns = patternValue;
-        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
+        // this.selectedOutboundPatterns = patternValue;
+        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
         console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        console.log(patternArray)
+        patternArray.controls[index].patchValue({pattern: patternValue} )
+
         //console.log(patternArray);
         //this.getPatternControlNames(index)
     }
@@ -228,14 +228,21 @@ export class LdnServiceFormEditComponent implements OnInit {
 
     getOutboundPatternControlNames(index: number) {
         const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
+        console.log(patternArrayValue)
         return patternArrayValue
     }
 
     getInboundPatternControlNames(index: number) {
         const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
+        console.log(patternArrayValue)
         return patternArrayValue
+
     }
 
+    //TODO: make a method that checks if user selected one value for the
+
+
+
 
     toggleAutomatic(i: number) {
         const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
@@ -380,19 +387,20 @@ export class LdnServiceFormEditComponent implements OnInit {
         }
     }
 
-    private handlePatterns(patchOperations: any[], formArrayName: string, selectedPatterns: string[]): void {
+    private handlePatterns(patchOperations: any[], formArrayName: string): void {
+        console.log(this.formModel)
+        const patternsArray = this.formModel.get(formArrayName) as FormArray
+
+
 
-        const patternsArray = this.formModel.get(formArrayName) as FormArray;
 
         for (let i = 0; i < patternsArray.length; i++) {
-
             const patternGroup = patternsArray.at(i) as FormGroup;
-            console.warn('Calling setValueForControlInOutboundArray', formArrayName, i, selectedPatterns);
-            this.setValueForControlInOutboundArray(formArrayName, i, selectedPatterns[i] )
 
             const patternValue = patternGroup.value;
 
-            if (patternGroup.dirty) {
+            debugger
+            if (patternGroup.touched) {
                 if (patternValue.isNew) {
                     delete patternValue.isNew;
                     const addOperation = {
@@ -450,8 +458,20 @@ export class LdnServiceFormEditComponent implements OnInit {
     }
 
     setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
+        console.log(formArrayName)
         const formArray = this.formModel.get(formArrayName) as FormArray;
         console.warn('inside setValueForControlInOutboundArray', formArray);
         formArray.at(index).setValue(value);
     }
+    setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
+        console.log(formArrayName)
+        const formArray = this.formModel.get(formArrayName) as FormArray;
+        console.warn('inside setValueForControlInInboundArray', formArray);
+        formArray.at(index).setValue(value);
+    }
+    //setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
+    // const formArray = this.formModel.get(formArrayName) as FormArray;
+    //console.warn('inside setValueForControlInOutboundArray', formArray);
+    //formArray.at(index).setValue(value);
+    //}
 }

From 754a6822a782ac2695f39dba75a88f1556abaef4 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Wed, 15 Nov 2023 11:29:59 +0100
Subject: [PATCH 06/21] CST-12455 Itemfilter dropdown first refactoring just
 for layout

---
 .../ldn-service-form-edit.component.html      | 598 +++++++++---------
 1 file changed, 306 insertions(+), 292 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 ea3ce3c357..0ea17d6fdd 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
@@ -1,326 +1,340 @@
 <div class="container">
-    <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
-        <div class="d-flex">
-            <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h2>
+  <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
+    <div class="d-flex">
+      <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h2>
+    </div>
+    <!-- In the toggle section -->
+    <div class="toggle-switch-container">
+      <label class="status-label" for="enabled">{{ 'ldn-service-status' | translate }}</label>
+      <div>
+        <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
+        <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
+          <div class="slider"></div>
         </div>
-        <!-- In the toggle section -->
-        <div class="toggle-switch-container">
-            <label class="status-label" for="enabled">{{ 'ldn-service-status' | translate }}</label>
-            <div>
-                <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
-                <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
-                    <div class="slider"></div>
+      </div>
+    </div>
+
+    <div class="mb-2">
+      <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
+             name="name"
+             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>
+      <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
+                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>
+      <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
+             name="url"
+             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>
+      <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
+             id="ldnUrl"
+             name="ldnUrl"
+             type="text">
+    </div>
+
+    <div class="mb-4">
+      &nbsp;
+    </div>
+
+    <div class="row">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+      </div>
+      <div class="col">
+        <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+      </div>
+      <div class="col-sm-1 ">
+        <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+      </div>
+      <div class="col-sm-2">
+      </div>
+    </div>
+
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
+         [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
+         formGroupName="notifyServiceInboundPatterns">
+
+      <ng-container [formGroupName]="i">
+
+
+        <div class="row mb-1">
+          <div class="col">
+            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="inboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedInboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="pattern"
+                  id="inboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+
+                <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
+                <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                <div
+                  class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                <!-- TODO: infinite scroll with 3 selects -->
+                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
+                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                          ngbDropdownItem
+                          type="button">
+                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                    <div
+                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                  </button>
                 </div>
+              </div>
             </div>
-        </div>
-
-        <div class="mb-2">
-            <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
-                   name="name"
-                   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>
-            <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                      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>
-            <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
-                   name="url"
-                   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>
-            <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
-                   id="ldnUrl"
-                   name="ldnUrl"
-                   type="text">
-        </div>
-
-        <div class="mb-4">
-            &nbsp;
-        </div>
-
-        <div class="row">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
-            </div>
-            <div class="col">
-                <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-            </div>
-            <div class="col-sm-1 ">
-                <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-            </div>
-            <div class="col-sm-2">
-            </div>
-        </div>
-
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-             formGroupName="notifyServiceInboundPatterns" [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)">
-
-            <ng-container [formGroupName]="i">
-
-
-                <div  class="row mb-1">
-                    <div class="col">
-                      <div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalInboundPattern{{i}}">
-                        <div class="position-relative right-addon" role="combobox">
-                          <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                             aria-hidden="true"></i>
-                          <input
-                            formControlName="pattern"
-                            type="text"
-                            [readonly]="true"
-                            ngbDropdownAnchor
-                            class="form-control w-100 scrollable-dropdown-input"
-                            [value]="selectedInboundPatterns"
-                            (click)="inboundPatternDropdown.open();"
-                            id="inboundPatternDropdownButton"
-                          />
-
-                          <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                          <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                          <div class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
-                          <!-- TODO: infinite scroll with 3 selects -->
-                          <div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
-                            <button type="button" ngbDropdownItem *ngFor="let pattern of inboundPatterns; let internalIndex = index"  (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
-                              <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
-                              <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                  <div class="col">
-                    <ng-container *ngIf="getInboundPatternControlNames(i)">
-                      <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                        <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                        <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                                [value]="itemFilter.id">{{ itemFilter.id }}</option>
-                      </select>
-                    </ng-container>
-                  </div>
-
-                  <div [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value ? 'visible' : 'hidden'" class="col-sm-1">
-                    <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                           type="checkbox">
-                    <div (click)="toggleAutomatic(i)"
-                         [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                         class="toggle-switch">
-                      <div class="slider"></div>
-                    </div>
-                  </div>
-
-
-                    <div class="col-sm-2">
-                        <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark"
-                                type="button">
-                            <i class="fas fa-trash"></i>
-                        </button>
-
-
-                        <button (click)="unmarkForInboundPatternDeletion(i)" *ngIf="markedForDeletionInboundPattern.includes(i)" class="btn btn-warning ml-2"
-                                type="button">
-                            <i class="fas fa-undo"></i>
-                        </button>
-                    </div>
-                </div>
+          </div>
 
+          <div class="col">
+            <ng-container *ngIf="getInboundPatternControlNames(i)">
+              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
+                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
+                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
+                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
+              </select>
             </ng-container>
+          </div>
+
+          <div
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value ? 'visible' : 'hidden'"
+            class="col-sm-1">
+            <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                   type="checkbox">
+            <div (click)="toggleAutomatic(i)"
+                 [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                 class="toggle-switch">
+              <div class="slider"></div>
+            </div>
+          </div>
+
+
+          <div class="col-sm-2">
+            <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark"
+                    type="button">
+              <i class="fas fa-trash"></i>
+            </button>
+
+
+            <button (click)="unmarkForInboundPatternDeletion(i)" *ngIf="markedForDeletionInboundPattern.includes(i)"
+                    class="btn btn-warning ml-2"
+                    type="button">
+              <i class="fas fa-undo"></i>
+            </button>
+          </div>
         </div>
 
+      </ng-container>
+    </div>
 
-        <span (click)="addInboundPattern()"
-              class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
-        <div class="mb-4">
-            &nbsp;
-        </div>
+    <span (click)="addInboundPattern()"
+          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
-        <div class="row">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
-            </div>
-            <div class="col">
-                <label class="label-box-3">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-            </div>
-            <div class="col-sm-1 ">
-                <label class="label-box-2"></label>
-            </div>
-            <div class="col-sm-2 ">
-            </div>
-        </div>
+    <div class="mb-4">
+      &nbsp;
+    </div>
 
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
-             formGroupName="notifyServiceOutboundPatterns" [class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)">
+    <div class="row">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
+      </div>
+      <div class="col">
+        <label class="label-box-3">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+      </div>
+      <div class="col-sm-1 ">
+        <label class="label-box-2"></label>
+      </div>
+      <div class="col-sm-2 ">
+      </div>
+    </div>
 
-            <ng-container [formGroupName]="i">
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
+         [class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)"
+         formGroupName="notifyServiceOutboundPatterns">
 
-                <!-- Input elements in a separate row -->
-                <div class="row mb-1">
-                    <div class="col">
-                        <div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalOutboundPattern{{i}}">
-                          <div class="position-relative right-addon" role="combobox">
-                            <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                                aria-hidden="true"></i>
-                                <input
-                            formControlName="pattern"
-                            type="text"
-                            [readonly]="true"
-                            ngbDropdownAnchor
-                            class="form-control w-100 scrollable-dropdown-input"
-                            [value]="selectedOutboundPatterns"
-                            (click)="outboundPatternDropdown.open();"
-                            id="outboundPatternDropdownButton"
-                           />
+      <ng-container [formGroupName]="i">
 
-                        <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                              <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                              <div class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
-                        <!-- TODO: infinite scroll with 3-5 selects -->
-                          <div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
-                              <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index"  (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
-                                  <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
-                                  <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
-                              </button>
-                          </div>
-                      </div>
-                    </div>
-                    </div>
-                    <!-- Main label TODO: update itemfilter dropdown -->
-                    <div class="col">
-                        <ng-container *ngIf="getOutboundPatternControlNames(i)">
-                            <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-                            </select>
-                        </ng-container>
-                    </div>
+        <!-- Input elements in a separate row -->
+        <div class="row mb-1">
+          <div class="col">
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown>
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="outboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedOutboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="pattern"
+                  id="outboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
 
-                    <div [style.visibility]="'hidden'" class="col-sm-1">
-                        <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
-                        <div
-                                class="toggle-switch">
-                            <div class="slider"></div>
-                        </div>
-                    </div>
-
-                    <div class="col-sm-2">
-                        <button (click)="markForOutboundPatternDeletion(i)" class="btn btn-outline-dark trash-button" type="button">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                        <button (click)="unmarkForOutboundPatternDeletion(i)" *ngIf="markedForDeletionOutboundPattern.includes(i)" class="btn btn-warning ml-2"
-                                type="button">
-                            <i class="fas fa-undo"></i>
-                        </button>
-                    </div>
+                <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
+                <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                <div
+                  class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                <!-- TODO: infinite scroll with 3-5 selects -->
+                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
+                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" *ngFor="let pattern of outboundPatterns; let internalIndex = index"
+                          ngbDropdownItem
+                          type="button">
+                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                    <div
+                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                  </button>
                 </div>
+              </div>
+            </div>
+          </div>
+          <!-- Main label TODO: update itemfilter dropdown -->
+          <div class="col">
+            <ng-container *ngIf="getOutboundPatternControlNames(i)">
+              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
+                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
+                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
+                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
+              </select>
             </ng-container>
-        </div>
+          </div>
 
-        <span
-                (click)="addOutboundPattern()"
-                class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
+          <div [style.visibility]="'hidden'" class="col-sm-1">
+            <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
+            <div
+              class="toggle-switch">
+              <div class="slider"></div>
+            </div>
+          </div>
+
+          <div class="col-sm-2">
+            <button (click)="markForOutboundPatternDeletion(i)" class="btn btn-outline-dark trash-button" type="button">
+              <i class="fas fa-trash"></i>
+            </button>
+            <button (click)="unmarkForOutboundPatternDeletion(i)" *ngIf="markedForDeletionOutboundPattern.includes(i)"
+                    class="btn btn-warning ml-2"
+                    type="button">
+              <i class="fas fa-undo"></i>
+            </button>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+
+    <span
+      (click)="addOutboundPattern()"
+      class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
     </span>
 
-        <div class="mb-5">
-            &nbsp;
-        </div>
-        <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
-            <button class="btn btn-primary" type="submit">
-                <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
-            </button>
-            <div class="d-flex">
-                <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
-                    <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
-                </button>
-            </div>
-        </div>
-    </form>
+    <div class="mb-5">
+      &nbsp;
+    </div>
+    <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
+      <button class="btn btn-primary" type="submit">
+        <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
+      </button>
+      <div class="d-flex">
+        <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
+          <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
+        </button>
+      </div>
+    </div>
+  </form>
 </div>
 <ng-template #confirmModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.edit.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.overview.edit.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()" class="btn btn-danger mr-2"
-                        id="delete-confirm">{{ 'service.detail.return' | translate }}
-                </button>
-                <button (click)="patchService()"
-                        class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.edit.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.edit.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()" class="btn btn-danger mr-2"
+                id="delete-confirm">{{ 'service.detail.return' | translate }}
+        </button>
+        <button (click)="patchService()"
+                class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #resetFormModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.reset-form.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.overview.reset-form.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()" class="mr-2 btn btn-danger"
-                        id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
-                </button>
-                <button (click)="resetFormAndLeave()"
-                        class="btn btn-primary custom-btn"
-                        id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.reset-form.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.reset-form.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()" class="mr-2 btn btn-danger"
+                id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
+        </button>
+        <button (click)="resetFormAndLeave()"
+                class="btn btn-primary custom-btn"
+                id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 

From 35c45850e796539eddf7f56e100005e133c30f02 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Wed, 15 Nov 2023 11:57:14 +0100
Subject: [PATCH 07/21] CST-12455 Itemfilter dropdown for the edit
 inboundpatterns is working, now changing all remaining code and finalizing
 task

---
 .../ldn-service-form-edit.component.html      | 37 +++++++++++++++----
 .../ldn-service-form-edit.component.ts        | 14 +++++++
 2 files changed, 44 insertions(+), 7 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 0ea17d6fdd..51abf43f04 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
@@ -103,11 +103,11 @@
                 />
 
                 <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
                 <div
                   class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
                 <!-- TODO: infinite scroll with 3 selects -->
-                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
+                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
                   <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" *ngFor="let pattern of inboundPatterns; let internalIndex = index"
                           ngbDropdownItem
                           type="button">
@@ -122,11 +122,34 @@
 
           <div class="col">
             <ng-container *ngIf="getInboundPatternControlNames(i)">
-              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-              </select>
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="inboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedInboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="inboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+
+                  <div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                  <div
+                    class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
+                  <!-- TODO: infinite scroll with 3 selects -->
+                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
+                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()" *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ constraint.id }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </ng-container>
           </div>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index 9c0e60040c..fdb07226aa 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -67,6 +67,7 @@ export class LdnServiceFormEditComponent implements OnInit {
     private modalRef: any;
     private service: LdnService;
     selectedOutboundPatterns: string[];
+    selectedInboundItemfilters: any;
     selectedInboundPatterns: string[];
 
     constructor(
@@ -214,6 +215,16 @@ export class LdnServiceFormEditComponent implements OnInit {
     //this.getPatternControlNames(index)
    }
 
+  selectInboundItemFilter(filterValue: string, index: number): void {
+    // this.selectedOutboundPatterns = patternValue;
+    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue} )
+
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+  }
+
     selectInboundPattern(patternValue: string, index: number): void {
         // this.selectedOutboundPatterns = patternValue;
         const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
@@ -474,4 +485,7 @@ export class LdnServiceFormEditComponent implements OnInit {
     //console.warn('inside setValueForControlInOutboundArray', formArray);
     //formArray.at(index).setValue(value);
     //}
+
+
+
 }

From 778a06724b33e036ce4ed4080d276f981e3e1dac Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Wed, 15 Nov 2023 12:48:53 +0100
Subject: [PATCH 08/21] CST-12455 Edit page logic is working now finishing up
 the styling for the page

---
 .../ldn-service-form-edit.component.html      |  50 +-
 .../ldn-service-form-edit.component.ts        | 892 +++++++++---------
 2 files changed, 483 insertions(+), 459 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 51abf43f04..2940ee0039 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
@@ -108,7 +108,8 @@
                   class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
                 <!-- TODO: infinite scroll with 3 selects -->
                 <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
-                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                          *ngFor="let pattern of inboundPatterns; let internalIndex = index"
                           ngbDropdownItem
                           type="button">
                     <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
@@ -121,7 +122,7 @@
           </div>
 
           <div class="col">
-            <ng-container *ngIf="getInboundPatternControlNames(i)">
+            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
               <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
@@ -142,7 +143,8 @@
                     class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
                   <!-- TODO: infinite scroll with 3 selects -->
                   <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
-                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()" *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
                             ngbDropdownItem
                             type="button">
                       <div>{{ constraint.id }}</div>
@@ -154,7 +156,7 @@
           </div>
 
           <div
-            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value ? 'visible' : 'hidden'"
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
             class="col-sm-1">
             <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
                    type="checkbox">
@@ -236,7 +238,8 @@
                   class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
                 <!-- TODO: infinite scroll with 3-5 selects -->
                 <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
-                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" *ngFor="let pattern of outboundPatterns; let internalIndex = index"
+                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                          *ngFor="let pattern of outboundPatterns; let internalIndex = index"
                           ngbDropdownItem
                           type="button">
                     <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
@@ -247,14 +250,37 @@
               </div>
             </div>
           </div>
-          <!-- Main label TODO: update itemfilter dropdown -->
           <div class="col">
-            <ng-container *ngIf="getOutboundPatternControlNames(i)">
-              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-              </select>
+            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="outboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedOutboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="outboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+
+                  <div>{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                  <div
+                    class="small-text">{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
+                  <!-- TODO: infinite scroll with 3 selects -->
+                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
+                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ constraint.id }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </ng-container>
           </div>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index fdb07226aa..32a89cdb68 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -1,491 +1,489 @@
-import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import {AbstractControl, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { ActivatedRoute, Router } from '@angular/router';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import {NgbDropdownConfig, NgbModal} from '@ng-bootstrap/ng-bootstrap';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { RemoteData } from 'src/app/core/data/remote-data';
-import { Operation } from 'fast-json-patch';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { Observable } from 'rxjs';
-import { PaginationService } from '../../../core/pagination/pagination.service';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import {pattern} from "isbot";
+import {ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {ActivatedRoute, Router} from '@angular/router';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {TranslateService} from '@ngx-translate/core';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {RemoteData} from 'src/app/core/data/remote-data';
+import {Operation} from 'fast-json-patch';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {Observable} from 'rxjs';
+import {PaginationService} from '../../../core/pagination/pagination.service';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
 
 @Component({
-    selector: 'ds-ldn-service-form-edit',
-    templateUrl: './ldn-service-form-edit.component.html',
-    styleUrls: ['./ldn-service-form-edit.component.scss'],
-    animations: [
-        trigger('toggleAnimation', [
-            state('true', style({})),
-            state('false', style({})),
-            transition('true <=> false', animate('300ms ease-in')),
-        ]),
-    ],
+  selector: 'ds-ldn-service-form-edit',
+  templateUrl: './ldn-service-form-edit.component.html',
+  styleUrls: ['./ldn-service-form-edit.component.scss'],
+  animations: [
+    trigger('toggleAnimation', [
+      state('true', style({})),
+      state('false', style({})),
+      transition('true <=> false', animate('300ms ease-in')),
+    ]),
+  ],
 })
 export class LdnServiceFormEditComponent implements OnInit {
-    formModel: FormGroup;
-    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+  formModel: FormGroup;
+  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
 
-    public inboundPatterns: string[] = notifyPatterns;
-    public outboundPatterns: string[] = notifyPatterns;
-    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
+  public inboundPatterns: string[] = notifyPatterns;
+  public outboundPatterns: string[] = notifyPatterns;
+  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  @Input() public name: string;
+  @Input() public description: string;
+  @Input() public url: string;
+  @Input() public ldnUrl: string;
+  @Input() public inboundPattern: string;
+  @Input() public outboundPattern: string;
+  @Input() public constraint: string;
+  @Input() public automatic: boolean;
+  @Input() public headerKey: string;
+  markedForDeletionInboundPattern: number[] = [];
+  markedForDeletionOutboundPattern: number[] = [];
+  selectedOutboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  selectedInboundPatterns: string[];
+  protected serviceId: string;
+  private deletedInboundPatterns: number[] = [];
+  private deletedOutboundPatterns: number[] = [];
+  private modalRef: any;
+  private service: LdnService;
+
+  constructor(
+    protected ldnServicesService: LdnServicesService,
+    private ldnItemfiltersService: LdnItemfiltersService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private cdRef: ChangeDetectorRef,
+    protected modalService: NgbModal,
+    private notificationService: NotificationsService,
+    private translateService: TranslateService,
+    protected paginationService: PaginationService
+  ) {
+
+    this.formModel = this.formBuilder.group({
+      id: [''],
+      name: ['', Validators.required],
+      description: ['', Validators.required],
+      url: ['', Validators.required],
+      ldnUrl: ['', Validators.required],
+      inboundPattern: [''],
+      outboundPattern: [''],
+      constraintPattern: [''],
+      enabled: [''],
+      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+      type: LDN_SERVICE.value,
     });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
-    });
-    @Input() public name: string;
-    @Input() public description: string;
-    @Input() public url: string;
-    @Input() public ldnUrl: string;
-    @Input() public inboundPattern: string;
-    @Input() public outboundPattern: string;
-    @Input() public constraint: string;
-    @Input() public automatic: boolean;
-    @Input() public headerKey: string;
-    markedForDeletionInboundPattern: number[] = [];
-    markedForDeletionOutboundPattern: number[] = [];
-    protected serviceId: string;
-    private originalInboundPatterns: any[] = [];
-    private originalOutboundPatterns: any[] = [];
-    private deletedInboundPatterns: number[] = [];
-    private deletedOutboundPatterns: number[] = [];
-    private modalRef: any;
-    private service: LdnService;
-    selectedOutboundPatterns: string[];
-    selectedInboundItemfilters: any;
-    selectedInboundPatterns: string[];
+  }
 
-    constructor(
-        protected ldnServicesService: LdnServicesService,
-        private ldnItemfiltersService: LdnItemfiltersService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private route: ActivatedRoute,
-        private cdRef: ChangeDetectorRef,
-        protected modalService: NgbModal,
-        private notificationService: NotificationsService,
-        private translateService: TranslateService,
-        protected paginationService: PaginationService
-    ) {
-
-        this.formModel = this.formBuilder.group({
-            id: [''],
-            name: ['', Validators.required],
-            description: ['', Validators.required],
-            url: ['', Validators.required],
-            ldnUrl: ['', Validators.required],
-            inboundPattern: [''],
-            outboundPattern: [''],
-            constraintPattern: [''],
-            enabled: [''],
-            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-            type: LDN_SERVICE.value,
-        });
-    }
-
-    ngOnInit(): void {
-        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        this.route.params.subscribe((params) => {
-            this.serviceId = params.serviceId;
-            if (this.serviceId) {
-                this.fetchServiceData(this.serviceId);
-            }
-        });
-        this.setItemfilters();
-    }
-
-    setItemfilters() {
-        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-            getFirstCompletedRemoteData());
-    }
-
-
-    fetchServiceData(serviceId: string): void {
-        this.ldnServicesService.findById(serviceId).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            (data: RemoteData<LdnService>) => {
-                if (data.hasSucceeded) {
-                    this.service = data.payload;
-
-                    this.formModel.patchValue({
-                        id: this.service.id,
-                        name: this.service.name,
-                        description: this.service.description,
-                        url: this.service.url,
-                        ldnUrl: this.service.ldnUrl,
-                        type: this.service.type,
-                        enabled: this.service.enabled
-                    });
-
-                    const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-                    inboundPatternsArray.clear();
-                    this.service.notifyServiceInboundPatterns.forEach((pattern: any) => {
-                        const patternFormGroup = this.initializeInboundPatternFormGroup();
-                        patternFormGroup.patchValue(pattern);
-                        inboundPatternsArray.push(patternFormGroup);
-                        this.cdRef.detectChanges();
-                    });
-
-                    const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-                    outboundPatternsArray.clear();
-                    this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
-                        const patternFormGroup = this.initializeOutboundPatternFormGroup();
-                        patternFormGroup.patchValue(pattern);
-                        outboundPatternsArray.push(patternFormGroup);
-                        this.cdRef.detectChanges();
-                    });
-                    this.originalInboundPatterns = [...this.service.notifyServiceInboundPatterns];
-                    this.originalOutboundPatterns = [...this.service.notifyServiceOutboundPatterns];
-                }
-            },
-        );
-    }
-
-    generatePatchOperations(): any[] {
-        const patchOperations: any[] = [];
-
-        this.createReplaceOperation(patchOperations, 'name', '/name');
-        this.createReplaceOperation(patchOperations, 'description', '/description');
-        this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
-        this.createReplaceOperation(patchOperations, 'url', '/url');
-
-        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
-        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
-
-
-        this.deletedInboundPatterns.forEach(index => {
-            const removeOperation: Operation = {
-                op: 'remove',
-                path: `notifyServiceInboundPatterns[${index}]`
-            };
-            patchOperations.push(removeOperation);
-        });
-
-        this.deletedOutboundPatterns.forEach(index => {
-            const removeOperation: Operation = {
-                op: 'remove',
-                path: `notifyServiceOutboundPatterns[${index}]`
-            };
-            patchOperations.push(removeOperation);
-        });
-
-        return patchOperations;
-    }
-
-    onSubmit() {
-        this.openConfirmModal(this.confirmModal);
-    }
-
-    addInboundPattern() {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-    }
-
-    addOutboundPattern() {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-    }
-
-
-   selectOutboundPattern(patternValue: string, index: number): void {
-   // this.selectedOutboundPatterns = patternValue;
-    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-       console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-       patternArray.controls[index].patchValue({pattern: patternValue} )
-
-       //console.log(patternArray);
-    //this.getPatternControlNames(index)
-   }
-
-  selectInboundItemFilter(filterValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
-    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+  ngOnInit(): void {
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-    filterArray.controls[index].patchValue({constraint: filterValue} )
+    this.route.params.subscribe((params) => {
+      this.serviceId = params.serviceId;
+      if (this.serviceId) {
+        this.fetchServiceData(this.serviceId);
+      }
+    });
+    this.setItemfilters();
+  }
+
+  setItemfilters() {
+    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+      getFirstCompletedRemoteData());
+  }
+
+
+  fetchServiceData(serviceId: string): void {
+    this.ldnServicesService.findById(serviceId).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      (data: RemoteData<LdnService>) => {
+        if (data.hasSucceeded) {
+          this.service = data.payload;
+
+          this.formModel.patchValue({
+            id: this.service.id,
+            name: this.service.name,
+            description: this.service.description,
+            url: this.service.url,
+            ldnUrl: this.service.ldnUrl,
+            type: this.service.type,
+            enabled: this.service.enabled
+          });
+
+          const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+          inboundPatternsArray.clear();
+          this.service.notifyServiceInboundPatterns.forEach((pattern: any) => {
+            const patternFormGroup = this.initializeInboundPatternFormGroup();
+            patternFormGroup.patchValue(pattern);
+            inboundPatternsArray.push(patternFormGroup);
+            this.cdRef.detectChanges();
+          });
+
+          const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+          outboundPatternsArray.clear();
+          this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
+            const patternFormGroup = this.initializeOutboundPatternFormGroup();
+            patternFormGroup.patchValue(pattern);
+            outboundPatternsArray.push(patternFormGroup);
+            this.cdRef.detectChanges();
+          });
+        }
+      },
+    );
+  }
+
+  generatePatchOperations(): any[] {
+    const patchOperations: any[] = [];
+
+    this.createReplaceOperation(patchOperations, 'name', '/name');
+    this.createReplaceOperation(patchOperations, 'description', '/description');
+    this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
+    this.createReplaceOperation(patchOperations, 'url', '/url');
+
+    this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
+    this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
+
+
+    this.deletedInboundPatterns.forEach(index => {
+      const removeOperation: Operation = {
+        op: 'remove',
+        path: `notifyServiceInboundPatterns[${index}]`
+      };
+      patchOperations.push(removeOperation);
+    });
+
+    this.deletedOutboundPatterns.forEach(index => {
+      const removeOperation: Operation = {
+        op: 'remove',
+        path: `notifyServiceOutboundPatterns[${index}]`
+      };
+      patchOperations.push(removeOperation);
+    });
+
+    return patchOperations;
+  }
+
+  onSubmit() {
+    this.openConfirmModal(this.confirmModal);
+  }
+
+  addInboundPattern() {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+  }
+
+  addOutboundPattern() {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+  }
+
+
+  selectOutboundPattern(patternValue: string, index: number): void {
+    // this.selectedOutboundPatterns = patternValue;
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    patternArray.controls[index].patchValue({pattern: patternValue})
 
     //console.log(patternArray);
     //this.getPatternControlNames(index)
   }
 
-    selectInboundPattern(patternValue: string, index: number): void {
-        // this.selectedOutboundPatterns = patternValue;
-        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        patternArray.controls[index].patchValue({pattern: patternValue} )
+  selectOutboundItemFilter(filterValue: string, index: number) {
+    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
 
-        //console.log(patternArray);
-        //this.getPatternControlNames(index)
+  selectInboundPattern(patternValue: string, index: number): void {
+    // this.selectedOutboundPatterns = patternValue;
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    patternArray.controls[index].patchValue({pattern: patternValue})
+
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+  }
+
+  selectInboundItemFilter(filterValue: string, index: number): void {
+    // this.selectedOutboundPatterns = patternValue;
+    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
+
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+  }
+
+
+  getOutboundPatternControlNames(index: number) {
+    const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
+    console.log(patternArrayValue)
+    return patternArrayValue
+  }
+
+  getInboundPatternControlNames(index: number) {
+    const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
+    console.log(patternArrayValue)
+    return patternArrayValue
+
+  }
+
+  //TODO: make a method that checks if user selected one value for the
+
+
+  toggleAutomatic(i: number) {
+    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+    if (automaticControl) {
+      automaticControl.setValue(!automaticControl.value);
     }
+  }
 
+  toggleEnabled() {
+    const newStatus = !this.formModel.get('enabled').value;
 
+    const patchOperation: Operation = {
+      op: 'replace',
+      path: '/enabled',
+      value: newStatus,
+    };
 
-    getOutboundPatternControlNames(index: number) {
-        const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
-        console.log(patternArrayValue)
-        return patternArrayValue
-    }
+    this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      () => {
 
-    getInboundPatternControlNames(index: number) {
-        const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
-        console.log(patternArrayValue)
-        return patternArrayValue
-
-    }
-
-    //TODO: make a method that checks if user selected one value for the
-
-
-
-
-    toggleAutomatic(i: number) {
-        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-        if (automaticControl) {
-            automaticControl.setValue(!automaticControl.value);
-        }
-    }
-
-    toggleEnabled() {
-        const newStatus = !this.formModel.get('enabled').value;
-
-        const patchOperation: Operation = {
-            op: 'replace',
-            path: '/enabled',
-            value: newStatus,
-        };
-
-        this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            () => {
-
-                this.formModel.get('enabled').setValue(newStatus);
-                this.cdRef.detectChanges();
-            }
-        );
-    }
-
-
-    closeModal() {
-        this.modalRef.close();
+        this.formModel.get('enabled').setValue(newStatus);
         this.cdRef.detectChanges();
-    }
-
-    openConfirmModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    openResetFormModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    patchService() {
-        this.deleteMarkedInboundPatterns();
-        this.deleteMarkedOutboundPatterns();
-
-        const patchOperations = this.generatePatchOperations();
+      }
+    );
+  }
 
 
-        this.ldnServicesService.patch(this.service, patchOperations).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            () => {
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
 
-                this.closeModal();
-                this.sendBack();
-                this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
-                    this.translateService.get('admin.registries.services-formats.modify.success.content'));
-            }
-        );
+  openConfirmModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
 
-    }
+  openResetFormModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  patchService() {
+    this.deleteMarkedInboundPatterns();
+    this.deleteMarkedOutboundPatterns();
+
+    const patchOperations = this.generatePatchOperations();
+
+
+    this.ldnServicesService.patch(this.service, patchOperations).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      () => {
 
-    resetFormAndLeave() {
-        this.sendBack();
         this.closeModal();
-    }
+        this.sendBack();
+        this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
+          this.translateService.get('admin.registries.services-formats.modify.success.content'));
+      }
+    );
 
-    markForInboundPatternDeletion(index: number) {
-        if (!this.markedForDeletionInboundPattern.includes(index)) {
-            this.markedForDeletionInboundPattern.push(index);
+  }
+
+  resetFormAndLeave() {
+    this.sendBack();
+    this.closeModal();
+  }
+
+  markForInboundPatternDeletion(index: number) {
+    if (!this.markedForDeletionInboundPattern.includes(index)) {
+      this.markedForDeletionInboundPattern.push(index);
+    }
+  }
+
+  unmarkForInboundPatternDeletion(index: number) {
+    const i = this.markedForDeletionInboundPattern.indexOf(index);
+    if (i !== -1) {
+      this.markedForDeletionInboundPattern.splice(i, 1);
+    }
+  }
+
+  markForOutboundPatternDeletion(index: number) {
+    if (!this.markedForDeletionOutboundPattern.includes(index)) {
+      this.markedForDeletionOutboundPattern.push(index);
+    }
+  }
+
+  unmarkForOutboundPatternDeletion(index: number) {
+    const i = this.markedForDeletionOutboundPattern.indexOf(index);
+    if (i !== -1) {
+      this.markedForDeletionOutboundPattern.splice(i, 1);
+    }
+  }
+
+  deleteMarkedInboundPatterns() {
+    this.markedForDeletionInboundPattern.sort((a, b) => b - a);
+    const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+
+    for (const index of this.markedForDeletionInboundPattern) {
+      if (index >= 0 && index < patternsArray.length) {
+        const patternGroup = patternsArray.at(index) as FormGroup;
+        const patternValue = patternGroup.value;
+        if (patternValue.isNew) {
+          patternsArray.removeAt(index);
+        } else {
+          this.deletedInboundPatterns.push(index);
         }
+      }
     }
 
-    unmarkForInboundPatternDeletion(index: number) {
-        const i = this.markedForDeletionInboundPattern.indexOf(index);
-        if (i !== -1) {
-            this.markedForDeletionInboundPattern.splice(i, 1);
+    this.markedForDeletionInboundPattern = [];
+  }
+
+
+  deleteMarkedOutboundPatterns() {
+    this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
+    const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+
+    for (const index of this.markedForDeletionOutboundPattern) {
+      if (index >= 0 && index < patternsArray.length) {
+        const patternGroup = patternsArray.at(index) as FormGroup;
+        const patternValue = patternGroup.value;
+        if (patternValue.isNew) {
+          patternsArray.removeAt(index);
+        } else {
+
+          this.deletedOutboundPatterns.push(index);
         }
+      }
     }
 
-    markForOutboundPatternDeletion(index: number) {
-        if (!this.markedForDeletionOutboundPattern.includes(index)) {
-            this.markedForDeletionOutboundPattern.push(index);
+    this.markedForDeletionOutboundPattern = [];
+  }
+
+  setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
+    console.log(formArrayName)
+    const formArray = this.formModel.get(formArrayName) as FormArray;
+    console.warn('inside setValueForControlInOutboundArray', formArray);
+    formArray.at(index).setValue(value);
+  }
+
+  setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
+    console.log(formArrayName)
+    const formArray = this.formModel.get(formArrayName) as FormArray;
+    console.warn('inside setValueForControlInInboundArray', formArray);
+    formArray.at(index).setValue(value);
+  }
+
+  private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
+    if (this.formModel.get(formControlName).dirty) {
+      patchOperations.push({
+        op: 'replace',
+        path,
+        value: this.formModel.get(formControlName).value,
+      });
+    }
+  }
+
+  private handlePatterns(patchOperations: any[], formArrayName: string): void {
+    console.log(this.formModel)
+    const patternsArray = this.formModel.get(formArrayName) as FormArray
+
+
+    for (let i = 0; i < patternsArray.length; i++) {
+      const patternGroup = patternsArray.at(i) as FormGroup;
+
+      const patternValue = patternGroup.value;
+
+      debugger
+      if (patternGroup.touched) {
+        if (patternValue.isNew) {
+          delete patternValue.isNew;
+          const addOperation = {
+            op: 'add',
+            path: `${formArrayName}/-`,
+            value: patternValue,
+          };
+          patchOperations.push(addOperation);
+        } else {
+          const replaceOperation = {
+            op: 'replace',
+            path: `${formArrayName}[${i}]`,
+            value: patternValue,
+          };
+          patchOperations.push(replaceOperation);
         }
+      }
     }
+  }
 
-    unmarkForOutboundPatternDeletion(index: number) {
-        const i = this.markedForDeletionOutboundPattern.indexOf(index);
-        if (i !== -1) {
-            this.markedForDeletionOutboundPattern.splice(i, 1);
-        }
-    }
+  private sendBack() {
+    this.router.navigateByUrl('admin/ldn/services');
+  }
 
-    deleteMarkedInboundPatterns() {
-        this.markedForDeletionInboundPattern.sort((a, b) => b - a);
-        const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+  private createOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      constraint: '',
+      isNew: true,
+    });
+  }
 
-        for (const index of this.markedForDeletionInboundPattern) {
-            if (index >= 0 && index < patternsArray.length) {
-                const patternGroup = patternsArray.at(index) as FormGroup;
-                const patternValue = patternGroup.value;
-                if (patternValue.isNew) {
-                    patternsArray.removeAt(index);
-                } else {
-                    this.deletedInboundPatterns.push(index);
-                }
-            }
-        }
+  private createInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      constraint: '',
+      automatic: false,
+      isNew: true
+    });
+  }
 
-        this.markedForDeletionInboundPattern = [];
-    }
+  private initializeOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      constraint: '',
+    });
+  }
 
+  private initializeInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      constraint: '',
+      automatic: '',
+    });
+  }
 
-    deleteMarkedOutboundPatterns() {
-        this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
-        const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-
-        for (const index of this.markedForDeletionOutboundPattern) {
-            if (index >= 0 && index < patternsArray.length) {
-                const patternGroup = patternsArray.at(index) as FormGroup;
-                const patternValue = patternGroup.value;
-                if (patternValue.isNew) {
-                    patternsArray.removeAt(index);
-                } else {
-
-                    this.deletedOutboundPatterns.push(index);
-                }
-            }
-        }
-
-        this.markedForDeletionOutboundPattern = [];
-    }
-
-    private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
-        if (this.formModel.get(formControlName).dirty) {
-            patchOperations.push({
-                op: 'replace',
-                path,
-                value: this.formModel.get(formControlName).value,
-            });
-        }
-    }
-
-    private handlePatterns(patchOperations: any[], formArrayName: string): void {
-        console.log(this.formModel)
-        const patternsArray = this.formModel.get(formArrayName) as FormArray
-
-
-
-
-        for (let i = 0; i < patternsArray.length; i++) {
-            const patternGroup = patternsArray.at(i) as FormGroup;
-
-            const patternValue = patternGroup.value;
-
-            debugger
-            if (patternGroup.touched) {
-                if (patternValue.isNew) {
-                    delete patternValue.isNew;
-                    const addOperation = {
-                        op: 'add',
-                        path: `${formArrayName}/-`,
-                        value: patternValue,
-                    };
-                    patchOperations.push(addOperation);
-                } else {
-                    const replaceOperation = {
-                        op: 'replace',
-                        path: `${formArrayName}[${i}]`,
-                        value: patternValue,
-                    };
-                    patchOperations.push(replaceOperation);
-                }
-            }
-        }
-    }
-
-    private sendBack() {
-        this.router.navigateByUrl('admin/ldn/services');
-    }
-
-    private createOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-            isNew: true,
-        });
-    }
-
-    private createInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-            automatic: false,
-            isNew: true
-        });
-    }
-
-    private initializeOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-        });
-    }
-
-    private initializeInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-            automatic: '',
-        });
-    }
-
-    setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
-        console.log(formArrayName)
-        const formArray = this.formModel.get(formArrayName) as FormArray;
-        console.warn('inside setValueForControlInOutboundArray', formArray);
-        formArray.at(index).setValue(value);
-    }
-    setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
-        console.log(formArrayName)
-        const formArray = this.formModel.get(formArrayName) as FormArray;
-        console.warn('inside setValueForControlInInboundArray', formArray);
-        formArray.at(index).setValue(value);
-    }
-    //setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
-    // const formArray = this.formModel.get(formArrayName) as FormArray;
-    //console.warn('inside setValueForControlInOutboundArray', formArray);
-    //formArray.at(index).setValue(value);
-    //}
-
+  //setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
+  // const formArray = this.formModel.get(formArrayName) as FormArray;
+  //console.warn('inside setValueForControlInOutboundArray', formArray);
+  //formArray.at(index).setValue(value);
+  //}
 
 
 }

From d8e7487eff2276c2197595e49f9f74c57466f71d Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Wed, 15 Nov 2023 13:19:14 +0100
Subject: [PATCH 09/21] CST-12455 Create page logic is working now finishing up
 the styling for the page

---
 .../ldn-service-form.component.html           |  72 ++-
 .../ldn-service-form.component.ts             | 446 +++++++++---------
 2 files changed, 289 insertions(+), 229 deletions(-)

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 de7949614d..8d7344b1a2 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
@@ -110,16 +110,40 @@
 
 
                     <div class="col">
-                        <ng-container *ngIf="selectedInboundPatterns">
-                            <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-                            </select>
+                        <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+                          <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                            <div class="position-relative right-addon" role="combobox">
+                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                 ngbDropdownToggle></i>
+                              <input
+                                (click)="inboundItemfilterDropdown.open();"
+                                [readonly]="true"
+                                [value]="selectedInboundItemfilters"
+                                class="form-control w-100 scrollable-dropdown-input"
+                                formControlName="constraint"
+                                id="inboundItemfilterDropdown"
+                                ngbDropdownAnchor
+                                type="text"
+                              />
+
+                              <div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
+                              <div
+                                class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
+                              <!-- TODO: infinite scroll with 3 selects -->
+                              <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
+                                <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                                        *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                                        ngbDropdownItem
+                                        type="button">
+                                  <div>{{ constraint.id }}</div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
                         </ng-container>
                     </div>
 
-                    <div [style.visibility]="selectedInboundPatterns ? 'visible' : 'hidden'" class="col-sm-1">
+                    <div [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'" class="col-sm-1">
                         <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
                                type="checkbox">
                         <div (click)="toggleAutomatic(i)"
@@ -199,17 +223,37 @@
                     </div>
 
                     <div class="col">
-                        <ng-container *ngIf="selectedOutboundPatterns">
-                            <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-                            </select>
+                        <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+                          <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                            <div class="position-relative right-addon" role="combobox">
+                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                 ngbDropdownToggle></i>
+                              <input
+                                (click)="outboundItemfilterDropdown.open();"
+                                [readonly]="true"
+                                [value]="selectedOutboundItemfilters"
+                                class="form-control w-100 scrollable-dropdown-input"
+                                formControlName="constraint"
+                                id="outboundItemfilterDropdown"
+                                ngbDropdownAnchor
+                                type="text"
+                              />
+                              <!-- TODO: infinite scroll with 3 selects -->
+                              <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
+                                <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                                        *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                                        ngbDropdownItem
+                                        type="button">
+                                  <div>{{ constraint.id }}</div>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
                         </ng-container>
                     </div>
 
                   <div [style.visibility]="'hidden'" class="col-sm-1">
-                    <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                    <input hidden id="automatic{{i}}" name="automatic{{i}}"
                            type="checkbox">
                     <div
                          class="toggle-switch">
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index cf19e4e7ef..83d71ea4b2 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -1,244 +1,260 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
 
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { RemoteData } from '../../../core/data/remote-data';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { Observable } from 'rxjs';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {RemoteData} from '../../../core/data/remote-data';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {TranslateService} from '@ngx-translate/core';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {Observable} from 'rxjs';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 
 @Component({
-    selector: 'ds-ldn-service-form',
-    templateUrl: './ldn-service-form.component.html',
-    styleUrls: ['./ldn-service-form.component.scss'],
-    animations: [
-        trigger('toggleAnimation', [
-            state('true', style({})),
-            state('false', style({})),
-            transition('true <=> false', animate('300ms ease-in')),
-        ]),
-    ],
+  selector: 'ds-ldn-service-form',
+  templateUrl: './ldn-service-form.component.html',
+  styleUrls: ['./ldn-service-form.component.scss'],
+  animations: [
+    trigger('toggleAnimation', [
+      state('true', style({})),
+      state('false', style({})),
+      transition('true <=> false', animate('300ms ease-in')),
+    ]),
+  ],
 })
 export class LdnServiceFormComponent implements OnInit {
-    formModel: FormGroup;
-    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-    //public inboundPatterns: object[] = notifyPatterns;
-    //public outboundPatterns: object[] = notifyPatterns;
+  formModel: FormGroup;
+  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+  //public inboundPatterns: object[] = notifyPatterns;
+  //public outboundPatterns: object[] = notifyPatterns;
   public inboundPatterns: string[] = notifyPatterns;
   public outboundPatterns: string[] = notifyPatterns;
-    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
+  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  @Input() public name: string;
+  @Input() public description: string;
+  @Input() public url: string;
+  @Input() public ldnUrl: string;
+  @Input() public inboundPattern: string;
+  @Input() public outboundPattern: string;
+  @Input() public constraint: string;
+  @Input() public automatic: boolean;
+  @Input() public headerKey: string;
+  @Output() submitForm: EventEmitter<any> = new EventEmitter();
+  @Output() cancelForm: EventEmitter<any> = new EventEmitter();
+  selectedOutboundPatterns: string[];
+  selectedInboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  private modalRef: any;
+
+  constructor(
+    private ldnServicesService: LdnServicesService,
+    private ldnItemfiltersService: LdnItemfiltersService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private cdRef: ChangeDetectorRef,
+    protected modalService: NgbModal,
+  ) {
+
+    this.formModel = this.formBuilder.group({
+      enabled: true,
+      id: [''],
+      name: ['', Validators.required],
+      description: [''],
+      url: ['', Validators.required],
+      ldnUrl: ['', Validators.required],
+      inboundPattern: [''],
+      outboundPattern: [''],
+      constraintPattern: [''],
+      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+      type: LDN_SERVICE.value,
     });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
-    });
-    @Input() public name: string;
-    @Input() public description: string;
-    @Input() public url: string;
-    @Input() public ldnUrl: string;
-    @Input() public inboundPattern: string;
-    @Input() public outboundPattern: string;
-    @Input() public constraint: string;
-    @Input() public automatic: boolean;
-    @Input() public headerKey: string;
-    @Output() submitForm: EventEmitter<any> = new EventEmitter();
-    @Output() cancelForm: EventEmitter<any> = new EventEmitter();
-    private modalRef: any;
-    selectedOutboundPatterns: string[];
-    selectedInboundPatterns: string[];
+  }
 
-    constructor(
-        private ldnServicesService: LdnServicesService,
-        private ldnItemfiltersService: LdnItemfiltersService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private notificationsService: NotificationsService,
-        private translateService: TranslateService,
-        private cdRef: ChangeDetectorRef,
-        protected modalService: NgbModal,
-    ) {
+  ngOnInit(): void {
+    console.log(notifyPatterns)
+    this.setItemfilters();
 
-        this.formModel = this.formBuilder.group({
-            enabled: true,
-            id: [''],
-            name: ['', Validators.required],
-            description: [''],
-            url: ['', Validators.required],
-            ldnUrl: ['', Validators.required],
-            inboundPattern: [''],
-            outboundPattern: [''],
-            constraintPattern: [''],
-            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-            type: LDN_SERVICE.value,
-        });
+  }
+
+  setItemfilters() {
+    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+      getFirstCompletedRemoteData());
+  }
+
+  onSubmit() {
+    this.openConfirmModal(this.confirmModal);
+  }
+
+  openConfirmModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  openResetFormModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  createService() {
+    this.formModel.get('name').markAsTouched();
+    this.formModel.get('url').markAsTouched();
+    this.formModel.get('ldnUrl').markAsTouched();
+
+    const name = this.formModel.get('name').value;
+    const url = this.formModel.get('url').value;
+    const ldnUrl = this.formModel.get('ldnUrl').value;
+
+    if (!name || !url || !ldnUrl) {
+      this.closeModal();
+      return;
     }
 
-    ngOnInit(): void {
-        console.log(notifyPatterns)
-        this.setItemfilters();
+    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: {
+      pattern: string;
+    }) => pattern.pattern !== '');
+    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: {
+      pattern: string;
+    }) => pattern.pattern !== '');
 
-    }
+    const values = this.formModel.value;
 
-    setItemfilters() {
-        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-            getFirstCompletedRemoteData());
-    }
+    const ldnServiceData = this.ldnServicesService.create(values);
 
-    onSubmit() {
-        this.openConfirmModal(this.confirmModal);
-    }
+    ldnServiceData.pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe((rd: RemoteData<LdnService>) => {
+      if (rd.hasSucceeded) {
+        this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
+          this.translateService.get('ldn-service-notification.created.success.body'));
 
-    openConfirmModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    openResetFormModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    createService() {
-        this.formModel.get('name').markAsTouched();
-        this.formModel.get('url').markAsTouched();
-        this.formModel.get('ldnUrl').markAsTouched();
-
-        const name = this.formModel.get('name').value;
-        const url = this.formModel.get('url').value;
-        const ldnUrl = this.formModel.get('ldnUrl').value;
-
-        if (!name || !url || !ldnUrl) {
-            this.closeModal();
-            return;
-        }
-
-        this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
-        this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
-
-        const values = this.formModel.value;
-
-        const ldnServiceData = this.ldnServicesService.create(values);
-
-        ldnServiceData.pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe((rd: RemoteData<LdnService>) => {
-            if (rd.hasSucceeded) {
-                this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
-                this.translateService.get('ldn-service-notification.created.success.body'));
-
-                this.sendBack();
-                this.closeModal();
-            } else {
-                this.notificationsService.error(this.translateService.get('notification.created.failure'));
-            }
-        });
-    }
-
-
-    resetFormAndLeave() {
         this.sendBack();
         this.closeModal();
+      } else {
+        this.notificationsService.error(this.translateService.get('notification.created.failure'));
+      }
+    });
+  }
+
+
+  resetFormAndLeave() {
+    this.sendBack();
+    this.closeModal();
+  }
+
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
+
+  addInboundPattern() {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+  }
+
+  removeInboundPattern(index: number) {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.removeAt(index);
+  }
+
+  addOutboundPattern() {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+  }
+
+  removeOutboundPattern(index: number) {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.removeAt(index);
+  }
+
+  toggleAutomatic(i: number) {
+    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+    if (automaticControl) {
+      automaticControl.setValue(!automaticControl.value);
     }
+  }
 
-    closeModal() {
-        this.modalRef.close();
-        this.cdRef.detectChanges();
-    }
+  selectOutboundPattern(patternValue: string, index: number): void {
+    // this.selectedOutboundPatterns = patternValue;
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    patternArray.patchValue({pattern: patternValue})
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+  }
 
-    addInboundPattern() {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-    }
+  selectInboundPattern(patternValue: string, index: number): void {
+    // this.selectedOutboundPatterns = patternValue;
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    patternArray.patchValue({pattern: patternValue})
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+  }
 
-    removeInboundPattern(index: number) {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.removeAt(index);
-    }
+  selectInboundItemFilter(filterValue: string, index: number): void {
+    // this.selectedOutboundPatterns = patternValue;
+    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
 
-    addOutboundPattern() {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-    }
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+  }
 
-    removeOutboundPattern(index: number) {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.removeAt(index);
-    }
+  selectOutboundItemFilter(filterValue: string, index: number) {
+    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
 
-    toggleAutomatic(i: number) {
-        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-        if (automaticControl) {
-            automaticControl.setValue(!automaticControl.value);
-        }
-    }
-
-    private sendBack() {
-        this.router.navigateByUrl('admin/ldn/services');
-    }
-
-
-    private createOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-        });
-    }
-
-    private createInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-            automatic: false
-        });
-    }
-
-    selectOutboundPattern(patternValue: string, index: number): void {
-        // this.selectedOutboundPatterns = patternValue;
-        const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]
-        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-        patternArray.patchValue({pattern: patternValue} )
-        //console.log(patternArray);
-        //this.getPatternControlNames(index)
-    }
-    //selectInboundPattern(pattern: string, index: number): void {
-         //this.selectedInboundPatterns = pattern;
-    //}
-
-    selectInboundPattern(patternValue: string, index: number): void {
-        // this.selectedOutboundPatterns = patternValue;
-        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
-        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        patternArray.patchValue({pattern: patternValue} )
-        //console.log(patternArray);
-        //this.getPatternControlNames(index)
-    }
-
-    getPatternControlNames(index: number) {
+  getPatternControlNames(index: number) {
     const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index].value
     return patternArrayValue
-    }
+  }
+
+  private sendBack() {
+    this.router.navigateByUrl('admin/ldn/services');
+  }
+
+  //selectInboundPattern(pattern: string, index: number): void {
+  //this.selectedInboundPatterns = pattern;
+  //}
+
+
+  private createOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: [''],
+      constraint: [''],
+    });
+  }
+
+  private createInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: [''],
+      constraint: [''],
+      automatic: false
+    });
+  }
+
+
 }

From 00bf0d34b11bfc140081daecec5e058d3b1c3eaf Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Wed, 15 Nov 2023 16:05:53 +0100
Subject: [PATCH 10/21] CST-12455 Code refactor and new dropdowns
 implementation

---
 .../admin-ldn-services-routing.module.ts      |  58 +-
 .../admin-ldn-services.module.ts              |  46 +-
 .../ldn-service-form-edit.component.html      |  18 +-
 .../ldn-service-form-edit.component.scss      |   1 +
 .../ldn-service-form-edit.component.spec.ts   |  56 +-
 .../ldn-service-form-edit.component.ts        |  37 -
 .../ldn-service-form.component.html           | 650 +++++++++---------
 .../ldn-service-form.component.spec.ts        |  49 +-
 .../ldn-service-form.component.ts             |  17 -
 .../ldn-service-new.component.spec.ts         |  36 +-
 .../ldn-service-new.component.ts              |   8 +-
 .../ldnServicesRD$-mock.ts                    | 112 +--
 .../ldn-itemfilters-data.service.ts           |  66 +-
 .../ldn-services-data.service.ts              | 220 +++---
 .../ldn-services-directory.component.html     | 141 ++--
 .../ldn-services-directory.component.spec.ts  |  32 +-
 .../ldn-services-directory.component.ts       | 230 +++----
 .../ldn-service-itemfilters.ts                |  40 +-
 .../ldn-service-patterns.model.ts             |  14 +-
 .../ldn-service-status.model.ts               |   6 +-
 .../ldn-service.constrain.model.ts            |   2 +-
 .../ldn-service.resource-type.ts              |   2 +-
 .../ldn-services-model/ldn-services.model.ts  |  74 +-
 .../service-constrain-type.model.ts           |  10 +-
 24 files changed, 936 insertions(+), 989 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
index 43dc4f3462..282ca430a2 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
@@ -1,34 +1,34 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { I18nBreadcrumbResolver } from 'src/app/core/breadcrumbs/i18n-breadcrumb.resolver';
-import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component';
-import { LdnServiceNewComponent } from './ldn-service-new/ldn-service-new.component';
-import { LdnServiceFormEditComponent } from './ldn-service-form-edit/ldn-service-form-edit.component';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {I18nBreadcrumbResolver} from 'src/app/core/breadcrumbs/i18n-breadcrumb.resolver';
+import {LdnServicesOverviewComponent} from './ldn-services-directory/ldn-services-directory.component';
+import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.component';
+import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
 
 @NgModule({
-    imports: [
-        RouterModule.forChild([
-            {
-                path: '',
-                pathMatch: 'full',
-                component: LdnServicesOverviewComponent,
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
-            },
-            {
-                path: 'new',
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                component: LdnServiceNewComponent,
-                data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
-            },
-            {
-                path: 'edit/:serviceId',
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                component: LdnServiceFormEditComponent,
-                data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
-            },
-        ]),
-    ]
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        pathMatch: 'full',
+        component: LdnServicesOverviewComponent,
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
+      },
+      {
+        path: 'new',
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        component: LdnServiceNewComponent,
+        data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
+      },
+      {
+        path: 'edit/:serviceId',
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        component: LdnServiceFormEditComponent,
+        data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
+      },
+    ]),
+  ]
 })
 export class AdminLdnServicesRoutingModule {
 
diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
index 9ca3775a9e..48ad89fdcc 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
@@ -1,29 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AdminLdnServicesRoutingModule } from './admin-ldn-services-routing.module';
-import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component';
-import { SharedModule } from '../../shared/shared.module';
-import { LdnServiceNewComponent } from './ldn-service-new/ldn-service-new.component';
-import { LdnServiceFormComponent } from './ldn-service-form/ldn-service-form.component';
-import { LdnServiceFormEditComponent } from './ldn-service-form-edit/ldn-service-form-edit.component';
-import { FormsModule } from '@angular/forms';
-import { LdnItemfiltersService } from './ldn-services-data/ldn-itemfilters-data.service';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {AdminLdnServicesRoutingModule} from './admin-ldn-services-routing.module';
+import {LdnServicesOverviewComponent} from './ldn-services-directory/ldn-services-directory.component';
+import {SharedModule} from '../../shared/shared.module';
+import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.component';
+import {LdnServiceFormComponent} from './ldn-service-form/ldn-service-form.component';
+import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
+import {FormsModule} from '@angular/forms';
+import {LdnItemfiltersService} from './ldn-services-data/ldn-itemfilters-data.service';
 
 
 @NgModule({
-    imports: [
-        CommonModule,
-        SharedModule,
-        AdminLdnServicesRoutingModule,
-        FormsModule
-    ],
-    declarations: [
-        LdnServicesOverviewComponent,
-        LdnServiceNewComponent,
-        LdnServiceFormComponent,
-        LdnServiceFormEditComponent,
-    ],
-    providers: [LdnItemfiltersService]
+  imports: [
+    CommonModule,
+    SharedModule,
+    AdminLdnServicesRoutingModule,
+    FormsModule
+  ],
+  declarations: [
+    LdnServicesOverviewComponent,
+    LdnServiceNewComponent,
+    LdnServiceFormComponent,
+    LdnServiceFormEditComponent,
+  ],
+  providers: [LdnItemfiltersService]
 })
 export class AdminLdnServicesModule {
 }
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 2940ee0039..c563c38043 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
@@ -87,7 +87,8 @@
 
         <div class="row mb-1">
           <div class="col">
-            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
+            <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic" id="additionalInboundPattern{{i}}"
+                 ngbDropdown placement="bottom">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle></i>
@@ -95,17 +96,12 @@
                   (click)="inboundPatternDropdown.open();"
                   [readonly]="true"
                   [value]="selectedInboundPatterns"
-                  class="form-control w-100 scrollable-dropdown-input"
+                  class="form-control w-80 scrollable-dropdown-input"
                   formControlName="pattern"
                   id="inboundPatternDropdownButton"
                   ngbDropdownAnchor
                   type="text"
                 />
-
-                <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
-                <div
-                  class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
                 <!-- TODO: infinite scroll with 3 selects -->
                 <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
                   <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
@@ -137,10 +133,6 @@
                     ngbDropdownAnchor
                     type="text"
                   />
-
-                  <div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                  <div
-                    class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
                   <!-- TODO: infinite scroll with 3 selects -->
                   <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
                     <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
@@ -266,10 +258,6 @@
                     ngbDropdownAnchor
                     type="text"
                   />
-
-                  <div>{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                  <div
-                    class="small-text">{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
                   <!-- TODO: infinite scroll with 3 selects -->
                   <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
                     <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
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 2fc1e693f0..06098ae3de 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
@@ -99,6 +99,7 @@ textarea {
   font-size: 0.7em;
   color: #888;
 }
+
 .toggle-switch {
   cursor: pointer;
   margin-top: 3px;
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
index 74a4fb4aba..867053fa83 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
@@ -1,21 +1,21 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LdnServiceFormEditComponent } from './ldn-service-form-edit.component';
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { PaginationService } from 'ngx-pagination';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { RouterStub } from '../../../shared/testing/router.stub';
-import { MockActivatedRoute } from '../../../shared/mocks/active-router.mock';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { of } from 'rxjs';
-import { RouteService } from '../../../core/services/route.service';
-import { provideMockStore } from '@ngrx/store/testing';
+import {LdnServiceFormEditComponent} from './ldn-service-form-edit.component';
+import {ChangeDetectorRef, EventEmitter} from '@angular/core';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
+import {ActivatedRoute, Router} from '@angular/router';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {PaginationService} from 'ngx-pagination';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {RouterStub} from '../../../shared/testing/router.stub';
+import {MockActivatedRoute} from '../../../shared/mocks/active-router.mock';
+import {NotificationsServiceStub} from '../../../shared/testing/notifications-service.stub';
+import {of} from 'rxjs';
+import {RouteService} from '../../../core/services/route.service';
+import {provideMockStore} from '@ngrx/store/testing';
 
 describe('LdnServiceFormEditComponent', () => {
   let component: LdnServiceFormEditComponent;
@@ -38,7 +38,7 @@ describe('LdnServiceFormEditComponent', () => {
       update: () => ({}),
     };
     ldnItemfiltersService = {
-       findAll: () => of(['item1', 'item2']),
+      findAll: () => of(['item1', 'item2']),
     };
     cdRefStub = Object.assign({
       detectChanges: () => fixture.detectChanges()
@@ -52,18 +52,18 @@ describe('LdnServiceFormEditComponent', () => {
       imports: [ReactiveFormsModule, TranslateModule.forRoot()],
       declarations: [LdnServiceFormEditComponent],
       providers: [
-        { provide: LdnServicesService, useValue: ldnServicesService },
-        { provide: LdnItemfiltersService, useValue: ldnItemfiltersService },
-        { provide: Router, useValue: new RouterStub() },
-        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
-        { provide: ChangeDetectorRef, useValue: cdRefStub },
-        { provide: NgbModal, useValue: modalService },
-        { provide: NotificationsService, useValue: NotificationsServiceStub },
-        { provide: TranslateService, useValue: translateServiceStub },
-        { provide: PaginationService, useValue: {} },
+        {provide: LdnServicesService, useValue: ldnServicesService},
+        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+        {provide: Router, useValue: new RouterStub()},
+        {provide: ActivatedRoute, useValue: new MockActivatedRoute()},
+        {provide: ChangeDetectorRef, useValue: cdRefStub},
+        {provide: NgbModal, useValue: modalService},
+        {provide: NotificationsService, useValue: NotificationsServiceStub},
+        {provide: TranslateService, useValue: translateServiceStub},
+        {provide: PaginationService, useValue: {}},
         FormBuilder,
         RouteService,
-        provideMockStore({ }),
+        provideMockStore({}),
       ]
     })
       .compileComponents();
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index 32a89cdb68..f67e861693 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -202,13 +202,9 @@ export class LdnServiceFormEditComponent implements OnInit {
 
 
   selectOutboundPattern(patternValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectOutboundItemFilter(filterValue: string, index: number) {
@@ -218,42 +214,17 @@ export class LdnServiceFormEditComponent implements OnInit {
   }
 
   selectInboundPattern(patternValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectInboundItemFilter(filterValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
-
-  getOutboundPatternControlNames(index: number) {
-    const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
-    console.log(patternArrayValue)
-    return patternArrayValue
-  }
-
-  getInboundPatternControlNames(index: number) {
-    const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
-    console.log(patternArrayValue)
-    return patternArrayValue
-
-  }
-
-  //TODO: make a method that checks if user selected one value for the
-
-
   toggleAutomatic(i: number) {
     const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
     if (automaticControl) {
@@ -478,12 +449,4 @@ export class LdnServiceFormEditComponent implements OnInit {
       automatic: '',
     });
   }
-
-  //setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
-  // const formArray = this.formModel.get(formArrayName) as FormArray;
-  //console.warn('inside setValueForControlInOutboundArray', formArray);
-  //formArray.at(index).setValue(value);
-  //}
-
-
 }
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 8d7344b1a2..e47e1b1b8c 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
@@ -1,356 +1,362 @@
 <div class="container">
-    <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
-        <div class="d-flex">
-            <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
-        </div>
-        <!-- In the name section -->
-        <div class="mb-2">
-            <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
-                   name="name"
-                   type="text">
-        </div>
+  <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
+    <div class="d-flex">
+      <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
+    </div>
+    <!-- In the name section -->
+    <div class="mb-2">
+      <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
+             name="name"
+             type="text">
+    </div>
 
-        <div class="mb-4">
-            &nbsp;
-        </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>
-            <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                      formControlName="description" id="description" name="description"></textarea>
-        </div>
+    <!-- In the description section -->
+    <div class="mb-2 d-flex flex-column">
+      <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
+      <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
+                formControlName="description" id="description" name="description"></textarea>
+    </div>
 
-        <div class="mb-4">
-            &nbsp;
-        </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>
-            <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
-                   name="url"
-                   type="text">
-        </div>
+    <!-- In the url section -->
+    <div class="mb-2">
+      <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
+             name="url"
+             type="text">
+    </div>
 
-        <div class="mb-4">
-            &nbsp;
-        </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>
-            <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
-                   id="ldnUrl"
-                   name="ldnUrl"
-                   type="text">
-        </div>
+    <!-- In the ldnUrl section -->
+    <div class="mb-2">
+      <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
+             id="ldnUrl"
+             name="ldnUrl"
+             type="text">
+    </div>
 
-        <div class="mb-4">
-            &nbsp;
-        </div>
+    <div class="mb-4">
+      &nbsp;
+    </div>
 
-        <!-- In the Inbound Patterns section -->
-        <div class="row">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
-            </div>
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-            </div>
-            <div class="col-sm-1 ">
-                <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-            </div>
-            <div class="col-sm-1">
-            </div>
-        </div>
+    <!-- In the Inbound Patterns section -->
+    <div class="row">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+      </div>
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+      </div>
+      <div class="col-sm-1 ">
+        <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+      </div>
+      <div class="col-sm-1">
+      </div>
+    </div>
 
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-             formGroupName="notifyServiceInboundPatterns">
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
+         formGroupName="notifyServiceInboundPatterns">
 
-            <ng-container [formGroupName]="i">
+      <ng-container [formGroupName]="i">
 
 
-                <div class="row mb-1">
-                  <div class="col">
-                    <div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalInboundPattern{{i}}">
-                      <div class="position-relative right-addon" role="combobox">
-                        <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                             aria-hidden="true">
+        <div class="row mb-1">
+          <div class="col">
+            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle>
 
-                        </i>
-                        <input
-                            formControlName="pattern"
-                            type="text"
-                            [readonly]="true"
-                            ngbDropdownAnchor
-                            class="form-control w-100 scrollable-dropdown-input"
-                            [value]="selectedInboundPatterns"
-                            (click)="inboundPatternDropdown.open();"
-                            id="inboundPatternDropdownButton"
-                        />
-
-                        <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                        <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
-                        <div class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
-                        <!-- TODO: infinite scroll with 3 selects -->
-                        <div ngbDropdownMenu aria-labelledby="inboundPatternDropdownButton">
-                          <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index"  (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
-                            <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
-                            <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-
-                    <div class="col">
-                        <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-                          <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
-                            <div class="position-relative right-addon" role="combobox">
-                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                 ngbDropdownToggle></i>
-                              <input
-                                (click)="inboundItemfilterDropdown.open();"
-                                [readonly]="true"
-                                [value]="selectedInboundItemfilters"
-                                class="form-control w-100 scrollable-dropdown-input"
-                                formControlName="constraint"
-                                id="inboundItemfilterDropdown"
-                                ngbDropdownAnchor
-                                type="text"
-                              />
-
-                              <div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
-                              <div
-                                class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
-                              <!-- TODO: infinite scroll with 3 selects -->
-                              <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
-                                <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
-                                        *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                                        ngbDropdownItem
-                                        type="button">
-                                  <div>{{ constraint.id }}</div>
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </ng-container>
-                    </div>
-
-                    <div [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'" class="col-sm-1">
-                        <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                               type="checkbox">
-                        <div (click)="toggleAutomatic(i)"
-                             [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                             class="toggle-switch">
-                            <div class="slider"></div>
-                        </div>
-                    </div>
-
-                    <div class="col-sm-1">
-                        <button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </div>
-
-                </div>
-            </ng-container>
-        </div>
-
-        <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 class="row">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
-            </div>
-            <div class="col">
-                <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-            </div>
-            <div class="col-sm-1 ">
-            </div>
-            <div class="col-sm-1 ">
-            </div>
-        </div>
-
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
-             formGroupName="notifyServiceOutboundPatterns">
-
-            <ng-container [formGroupName]="i">
-
-                <!-- Input elements in a separate row -->
-                <div class="row mb-1">
-                    <div class="col">
-                      <div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalOutboundPattern{{i}}">
-                        <div class="position-relative right-addon" role="combobox">
-                          <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                             aria-hidden="true"></i>
-                          <input
-                            formControlName="pattern"
-                            type="text"
-                            [readonly]="true"
-                            ngbDropdownAnchor
-                            class="form-control w-100 scrollable-dropdown-input"
-                            [value]="selectedOutboundPatterns"
-                            (click)="outboundPatternDropdown.open();"
-                            id="outboundPatternDropdownButton"
-                          />
-
-                          <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                          <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                          <div class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
-                          <!-- TODO: infinite scroll with 3 selects -->
-                          <div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
-                            <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns" (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
-                              <div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
-                                <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="col">
-                        <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-                          <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
-                            <div class="position-relative right-addon" role="combobox">
-                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                 ngbDropdownToggle></i>
-                              <input
-                                (click)="outboundItemfilterDropdown.open();"
-                                [readonly]="true"
-                                [value]="selectedOutboundItemfilters"
-                                class="form-control w-100 scrollable-dropdown-input"
-                                formControlName="constraint"
-                                id="outboundItemfilterDropdown"
-                                ngbDropdownAnchor
-                                type="text"
-                              />
-                              <!-- TODO: infinite scroll with 3 selects -->
-                              <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
-                                <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
-                                        *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                                        ngbDropdownItem
-                                        type="button">
-                                  <div>{{ constraint.id }}</div>
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </ng-container>
-                    </div>
-
-                  <div [style.visibility]="'hidden'" class="col-sm-1">
-                    <input hidden id="automatic{{i}}" name="automatic{{i}}"
-                           type="checkbox">
+                </i>
+                <input
+                  (click)="inboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedInboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="pattern"
+                  id="inboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <!-- TODO: infinite scroll with 3 selects -->
+                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
+                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                          *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                          ngbDropdownItem
+                          type="button">
+                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
                     <div
-                         class="toggle-switch">
-                      <div class="slider"></div>
-                    </div>
-                  </div>
-
-                    <div class="col-sm-1">
-                        <button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </div>
+                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                  </button>
                 </div>
-            </ng-container>
-
-        </div>
-
-        <span (click)="addOutboundPattern()"
-              class="add-pattern-link">{{ 'ldn-new-service.form.label.addPattern' | translate }}
-    </span>
-        <div class="mb-4">
-            &nbsp;
-        </div>
-
-        <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
-            <button class="btn btn-primary" type="submit">
-                <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
-            </button>
-            <div class="d-flex">
-                <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
-                    <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
-                </button>
+              </div>
             </div>
+          </div>
+
+
+          <div class="col">
+            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="inboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedInboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="inboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+
+                  <div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
+                  <div
+                    class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
+                  <!-- TODO: infinite scroll with 3 selects -->
+                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
+                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ constraint.id }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </ng-container>
+          </div>
+
+          <div
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
+            class="col-sm-1">
+            <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                   type="checkbox">
+            <div (click)="toggleAutomatic(i)"
+                 [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                 class="toggle-switch">
+              <div class="slider"></div>
+            </div>
+          </div>
+
+          <div class="col-sm-1">
+            <button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
+              <i class="fas fa-trash"></i>
+            </button>
+          </div>
+
         </div>
+      </ng-container>
+    </div>
+
+    <span (click)="addInboundPattern()"
+          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
 
-    </form>
+    <div class="mb-4">
+      &nbsp;
+    </div>
+
+    <!-- In the Outbound Patterns section -->
+    <div class="row">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
+      </div>
+      <div class="col">
+        <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+      </div>
+      <div class="col-sm-1 ">
+      </div>
+      <div class="col-sm-1 ">
+      </div>
+    </div>
+
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
+         formGroupName="notifyServiceOutboundPatterns">
+
+      <ng-container [formGroupName]="i">
+
+        <!-- Input elements in a separate row -->
+        <div class="row mb-1">
+          <div class="col">
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown>
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="outboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedOutboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="pattern"
+                  id="outboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+
+                <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
+                <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
+                <div
+                  class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                <!-- TODO: infinite scroll with 3 selects -->
+                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
+                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                          *ngFor="let pattern of outboundPatterns" ngbDropdownItem
+                          type="button">
+                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                    <div
+                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col">
+            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="outboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedOutboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="outboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <!-- TODO: infinite scroll with 3 selects -->
+                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
+                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ constraint.id }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </ng-container>
+          </div>
+
+          <div [style.visibility]="'hidden'" class="col-sm-1">
+            <input hidden id="automatic{{i}}" name="automatic{{i}}"
+                   type="checkbox">
+            <div
+              class="toggle-switch">
+              <div class="slider"></div>
+            </div>
+          </div>
+
+          <div class="col-sm-1">
+            <button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
+              <i class="fas fa-trash"></i>
+            </button>
+          </div>
+        </div>
+      </ng-container>
+
+    </div>
+
+    <span (click)="addOutboundPattern()"
+          class="add-pattern-link">{{ 'ldn-new-service.form.label.addPattern' | translate }}
+    </span>
+    <div class="mb-4">
+      &nbsp;
+    </div>
+
+    <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
+      <button class="btn btn-primary" type="submit">
+        <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
+      </button>
+      <div class="d-flex">
+        <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
+          <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
+        </button>
+      </div>
+    </div>
+
+
+  </form>
 </div>
 <ng-template #confirmModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.create.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.create.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()" class="btn btn-danger"
-                        id="delete-confirm">{{ 'service.refuse.create' | translate }}
-                </button>
-                <button (click)="createService()"
-                        class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.create.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.create.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()" class="btn btn-danger"
+                id="delete-confirm">{{ 'service.refuse.create' | translate }}
+        </button>
+        <button (click)="createService()"
+                class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #resetFormModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.create.reset-form.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.create.reset-form.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="resetFormAndLeave()"
-                        class="btn btn-primary mr-2 custom-btn"
-                        id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
-                </button>
-                <button (click)="closeModal()" class="btn btn-danger"
-                        id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.create.reset-form.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.create.reset-form.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="resetFormAndLeave()"
+                class="btn btn-primary mr-2 custom-btn"
+                id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
+        </button>
+        <button (click)="closeModal()" class="btn btn-danger"
+                id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
index c5c9f11817..f017d4bab2 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
@@ -1,20 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LdnServiceFormComponent } from './ldn-service-form.component';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
-import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { NotificationsService } from 'src/app/shared/notifications/notifications.service';
-import { Router } from '@angular/router';
-import { RouterStub } from 'src/app/shared/testing/router.stub';
-import { createPaginatedList } from 'src/app/shared/testing/utils.test';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { createSuccessfulRemoteDataObject$ } from 'src/app/shared/remote-data.utils';
-import { of } from 'rxjs';
-import { EventEmitter } from '@angular/core';
+import {LdnServiceFormComponent} from './ldn-service-form.component';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
+import {RouterTestingModule} from '@angular/router/testing';
+import {NgbModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {NotificationsService} from 'src/app/shared/notifications/notifications.service';
+import {Router} from '@angular/router';
+import {RouterStub} from 'src/app/shared/testing/router.stub';
+import {createPaginatedList} from 'src/app/shared/testing/utils.test';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {createSuccessfulRemoteDataObject$} from 'src/app/shared/remote-data.utils';
+import {of} from 'rxjs';
+import {EventEmitter} from '@angular/core';
 
 describe('LdnServiceFormComponent', () => {
   let component: LdnServiceFormComponent;
@@ -54,12 +54,17 @@ describe('LdnServiceFormComponent', () => {
         TranslateModule.forRoot()
       ],
       providers: [
-        { provide: LdnItemfiltersService, useValue: ldnItemfiltersService },
-        { provide: LdnServicesService, useValue: ldnServicesService },
-        { provide: NotificationsService, useValue: notificationsService },
-        { provide: TranslateService, useValue: translateServiceStub },
-        { provide: Router, useValue: new RouterStub() },
-        { provide: NgbModal, useValue: { open: () => {/*comment*/ } } },
+        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+        {provide: LdnServicesService, useValue: ldnServicesService},
+        {provide: NotificationsService, useValue: notificationsService},
+        {provide: TranslateService, useValue: translateServiceStub},
+        {provide: Router, useValue: new RouterStub()},
+        {
+          provide: NgbModal, useValue: {
+            open: () => {/*comment*/
+            }
+          }
+        },
         FormBuilder
       ],
       declarations: [LdnServiceFormComponent]
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index 83d71ea4b2..3f8588972d 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -36,8 +36,6 @@ export class LdnServiceFormComponent implements OnInit {
   formModel: FormGroup;
   @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
   @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-  //public inboundPatterns: object[] = notifyPatterns;
-  //public outboundPatterns: object[] = notifyPatterns;
   public inboundPatterns: string[] = notifyPatterns;
   public outboundPatterns: string[] = notifyPatterns;
   itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
@@ -207,18 +205,12 @@ export class LdnServiceFormComponent implements OnInit {
     const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     patternArray.patchValue({pattern: patternValue})
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectInboundItemFilter(filterValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectOutboundItemFilter(filterValue: string, index: number) {
@@ -227,19 +219,10 @@ export class LdnServiceFormComponent implements OnInit {
     filterArray.controls[index].patchValue({constraint: filterValue})
   }
 
-  getPatternControlNames(index: number) {
-    const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index].value
-    return patternArrayValue
-  }
-
   private sendBack() {
     this.router.navigateByUrl('admin/ldn/services');
   }
 
-  //selectInboundPattern(pattern: string, index: number): void {
-  //this.selectedInboundPatterns = pattern;
-  //}
-
 
   private createOutboundPatternFormGroup(): FormGroup {
     return this.formBuilder.group({
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
index d49d393195..ced1371623 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
@@ -1,25 +1,25 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LdnServiceNewComponent } from './ldn-service-new.component';
+import {LdnServiceNewComponent} from './ldn-service-new.component';
 
 describe('LdnServiceNewComponent', () => {
-    let component: LdnServiceNewComponent;
-    let fixture: ComponentFixture<LdnServiceNewComponent>;
+  let component: LdnServiceNewComponent;
+  let fixture: ComponentFixture<LdnServiceNewComponent>;
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [LdnServiceNewComponent]
-        })
-            .compileComponents();
-    });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LdnServiceNewComponent]
+    })
+      .compileComponents();
+  });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(LdnServiceNewComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LdnServiceNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
index d3ad155e0d..773f042d11 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-    selector: 'ds-ldn-service-new',
-    templateUrl: './ldn-service-new.component.html',
-    styleUrls: ['./ldn-service-new.component.scss']
+  selector: 'ds-ldn-service-new',
+  templateUrl: './ldn-service-new.component.html',
+  styleUrls: ['./ldn-service-new.component.scss']
 })
 export class LdnServiceNewComponent {
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
index b1a954b9d6..3bd1bf249f 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
@@ -1,67 +1,67 @@
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { RemoteData } from '../../../core/data/remote-data';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { Observable, of } from 'rxjs';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {RemoteData} from '../../../core/data/remote-data';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {Observable, of} from 'rxjs';
 // Create a mock data object for a single LDN notify service
 export const mockLdnService: LdnService = {
-    id: 1,
-    name: 'Service Name',
-    description: 'Service Description',
-    url: 'Service URL',
-    ldnUrl: 'Service LDN URL',
-    notifyServiceInboundPatterns: [
-        {
-            pattern: 'patternA',
-            constraint: 'itemFilterA',
-            automatic: false,
-        },
-        {
-            pattern: 'patternB',
-            constraint: 'itemFilterB',
-            automatic: true,
-        },
-    ],
-    notifyServiceOutboundPatterns: [
-        {
-            pattern: 'patternC',
-            constraint: 'itemFilterC',
-        },
-    ],
-    type: LDN_SERVICE,
-    _links: {
-        self: {
-            href: 'http://localhost/api/ldn/ldnservices/1',
-        },
+  id: 1,
+  name: 'Service Name',
+  description: 'Service Description',
+  url: 'Service URL',
+  ldnUrl: 'Service LDN URL',
+  notifyServiceInboundPatterns: [
+    {
+      pattern: 'patternA',
+      constraint: 'itemFilterA',
+      automatic: false,
     },
+    {
+      pattern: 'patternB',
+      constraint: 'itemFilterB',
+      automatic: true,
+    },
+  ],
+  notifyServiceOutboundPatterns: [
+    {
+      pattern: 'patternC',
+      constraint: 'itemFilterC',
+    },
+  ],
+  type: LDN_SERVICE,
+  _links: {
+    self: {
+      href: 'http://localhost/api/ldn/ldnservices/1',
+    },
+  },
 };
 
 
 const mockLdnServices = {
-    payload: {
-        elementsPerPage: 20,
-        totalPages: 1,
-        totalElements: 1,
-        currentPage: 1,
-        first: undefined,
-        prev: undefined,
-        next: undefined,
-        last: undefined,
-        page: [mockLdnService],
-        type: LDN_SERVICE,
-        self: undefined,
-        getPageLength: function () {
-            return this.page.length;
-        },
-        _links: {
-            self: {
-                href: 'http://localhost/api/ldn/ldnservices/1',
-            },
-            page: [],
-        },
+  payload: {
+    elementsPerPage: 20,
+    totalPages: 1,
+    totalElements: 1,
+    currentPage: 1,
+    first: undefined,
+    prev: undefined,
+    next: undefined,
+    last: undefined,
+    page: [mockLdnService],
+    type: LDN_SERVICE,
+    self: undefined,
+    getPageLength: function () {
+      return this.page.length;
     },
-    hasSucceeded: true,
-    msToLive: 0,
+    _links: {
+      self: {
+        href: 'http://localhost/api/ldn/ldnservices/1',
+      },
+      page: [],
+    },
+  },
+  hasSucceeded: true,
+  msToLive: 0,
 };
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
index babb00c959..7aa6231b4d 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
@@ -1,20 +1,20 @@
-import { Injectable } from '@angular/core';
-import { dataService } from '../../../core/data/base/data-service.decorator';
-import { LDN_SERVICE_CONSTRAINT_FILTERS } from '../ldn-services-model/ldn-service.resource-type';
-import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service';
-import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data';
+import {Injectable} from '@angular/core';
+import {dataService} from '../../../core/data/base/data-service.decorator';
+import {LDN_SERVICE_CONSTRAINT_FILTERS} from '../ldn-services-model/ldn-service.resource-type';
+import {IdentifiableDataService} from '../../../core/data/base/identifiable-data.service';
+import {FindAllData, FindAllDataImpl} from '../../../core/data/base/find-all-data';
 
-import { RequestService } from '../../../core/data/request.service';
-import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
-import { ObjectCacheService } from '../../../core/cache/object-cache.service';
-import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
-import { Observable } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
+import {RequestService} from '../../../core/data/request.service';
+import {RemoteDataBuildService} from '../../../core/cache/builders/remote-data-build.service';
+import {ObjectCacheService} from '../../../core/cache/object-cache.service';
+import {HALEndpointService} from '../../../core/shared/hal-endpoint.service';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {FollowLinkConfig} from '../../../shared/utils/follow-link-config.model';
+import {Observable} from 'rxjs';
+import {RemoteData} from '../../../core/data/remote-data';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
 
 
 /**
@@ -23,25 +23,25 @@ import { PaginatedList } from '../../../core/data/paginated-list.model';
 @Injectable()
 @dataService(LDN_SERVICE_CONSTRAINT_FILTERS)
 export class LdnItemfiltersService extends IdentifiableDataService<Itemfilter> implements FindAllData<Itemfilter> {
-    private findAllData: FindAllDataImpl<Itemfilter>;
+  private findAllData: FindAllDataImpl<Itemfilter>;
 
-    constructor(
-        protected requestService: RequestService,
-        protected rdbService: RemoteDataBuildService,
-        protected objectCache: ObjectCacheService,
-        protected halService: HALEndpointService,
-        protected notificationsService: NotificationsService,
-    ) {
-        super('itemfilters', requestService, rdbService, objectCache, halService);
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('itemfilters', requestService, rdbService, objectCache, halService);
 
-        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-    }
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
 
-    getEndpoint() {
-        return this.halService.getEndpoint(this.linkPath);
-    }
+  getEndpoint() {
+    return this.halService.getEndpoint(this.linkPath);
+  }
 
-    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
-        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
index 8e3e3a2747..b8d28f0886 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
@@ -1,38 +1,38 @@
-import { Injectable } from '@angular/core';
-import { dataService } from '../../../core/data/base/data-service.decorator';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service';
-import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data';
-import { DeleteData, DeleteDataImpl } from '../../../core/data/base/delete-data';
-import { RequestService } from '../../../core/data/request.service';
-import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
-import { ObjectCacheService } from '../../../core/cache/object-cache.service';
-import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
-import { Observable } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { NoContent } from '../../../core/shared/NoContent.model';
-import { map, take } from 'rxjs/operators';
-import { URLCombiner } from '../../../core/url-combiner/url-combiner';
-import { MultipartPostRequest } from '../../../core/data/request.models';
-import { RestRequest } from '../../../core/data/rest-request.model';
+import {Injectable} from '@angular/core';
+import {dataService} from '../../../core/data/base/data-service.decorator';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {IdentifiableDataService} from '../../../core/data/base/identifiable-data.service';
+import {FindAllData, FindAllDataImpl} from '../../../core/data/base/find-all-data';
+import {DeleteData, DeleteDataImpl} from '../../../core/data/base/delete-data';
+import {RequestService} from '../../../core/data/request.service';
+import {RemoteDataBuildService} from '../../../core/cache/builders/remote-data-build.service';
+import {ObjectCacheService} from '../../../core/cache/object-cache.service';
+import {HALEndpointService} from '../../../core/shared/hal-endpoint.service';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {FollowLinkConfig} from '../../../shared/utils/follow-link-config.model';
+import {Observable} from 'rxjs';
+import {RemoteData} from '../../../core/data/remote-data';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {NoContent} from '../../../core/shared/NoContent.model';
+import {map, take} from 'rxjs/operators';
+import {URLCombiner} from '../../../core/url-combiner/url-combiner';
+import {MultipartPostRequest} from '../../../core/data/request.models';
+import {RestRequest} from '../../../core/data/rest-request.model';
 
 
-import { LdnService } from '../ldn-services-model/ldn-services.model';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
 
-import { PatchData, PatchDataImpl } from '../../../core/data/base/patch-data';
-import { ChangeAnalyzer } from '../../../core/data/change-analyzer';
-import { Operation } from 'fast-json-patch';
-import { RestRequestMethod } from '../../../core/data/rest-request-method';
-import { CreateData, CreateDataImpl } from '../../../core/data/base/create-data';
-import { LdnServiceConstrain } from '../ldn-services-model/ldn-service.constrain.model';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { hasValue } from '../../../shared/empty.util';
-import { SearchDataImpl } from '../../../core/data/base/search-data';
-import { RequestParam } from '../../../core/cache/models/request-param.model';
+import {PatchData, PatchDataImpl} from '../../../core/data/base/patch-data';
+import {ChangeAnalyzer} from '../../../core/data/change-analyzer';
+import {Operation} from 'fast-json-patch';
+import {RestRequestMethod} from '../../../core/data/rest-request-method';
+import {CreateData, CreateDataImpl} from '../../../core/data/base/create-data';
+import {LdnServiceConstrain} from '../ldn-services-model/ldn-service.constrain.model';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {hasValue} from '../../../shared/empty.util';
+import {SearchDataImpl} from '../../../core/data/base/search-data';
+import {RequestParam} from '../../../core/cache/models/request-param.model';
 
 /**
  * A service responsible for fetching/sending data from/to the REST API on the ldnservices endpoint
@@ -40,99 +40,99 @@ import { RequestParam } from '../../../core/cache/models/request-param.model';
 @Injectable()
 @dataService(LDN_SERVICE)
 export class LdnServicesService extends IdentifiableDataService<LdnService> implements FindAllData<LdnService>, DeleteData<LdnService>, PatchData<LdnService>, CreateData<LdnService> {
-    createData: CreateDataImpl<LdnService>;
-    private findAllData: FindAllDataImpl<LdnService>;
-    private deleteData: DeleteDataImpl<LdnService>;
-    private patchData: PatchDataImpl<LdnService>;
-    private comparator: ChangeAnalyzer<LdnService>;
-    private searchData: SearchDataImpl<LdnService>;
+  createData: CreateDataImpl<LdnService>;
+  private findAllData: FindAllDataImpl<LdnService>;
+  private deleteData: DeleteDataImpl<LdnService>;
+  private patchData: PatchDataImpl<LdnService>;
+  private comparator: ChangeAnalyzer<LdnService>;
+  private searchData: SearchDataImpl<LdnService>;
 
-    private findByPatternEndpoint = 'byInboundPattern';
+  private findByPatternEndpoint = 'byInboundPattern';
 
-    constructor(
-        protected requestService: RequestService,
-        protected rdbService: RemoteDataBuildService,
-        protected objectCache: ObjectCacheService,
-        protected halService: HALEndpointService,
-        protected notificationsService: NotificationsService,
-    ) {
-        super('ldnservices', requestService, rdbService, objectCache, halService);
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('ldnservices', requestService, rdbService, objectCache, halService);
 
-        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-        this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-        this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
-        this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
-        this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
-    }
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
+    this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
+    this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
+  }
 
 
-    create(object: LdnService): Observable<RemoteData<LdnService>> {
-        return this.createData.create(object);
-    }
+  create(object: LdnService): Observable<RemoteData<LdnService>> {
+    return this.createData.create(object);
+  }
 
-    patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
-        return this.patchData.patch(object, operations);
-    }
+  patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
+    return this.patchData.patch(object, operations);
+  }
 
-    update(object: LdnService): Observable<RemoteData<LdnService>> {
-        return this.patchData.update(object);
-    }
+  update(object: LdnService): Observable<RemoteData<LdnService>> {
+    return this.patchData.update(object);
+  }
 
-    commitUpdates(method?: RestRequestMethod): void {
-        return this.patchData.commitUpdates(method);
-    }
+  commitUpdates(method?: RestRequestMethod): void {
+    return this.patchData.commitUpdates(method);
+  }
 
-    createPatchFromCache(object: LdnService): Observable<Operation[]> {
-        return this.patchData.createPatchFromCache(object);
-    }
+  createPatchFromCache(object: LdnService): Observable<Operation[]> {
+    return this.patchData.createPatchFromCache(object);
+  }
 
-    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 
-    findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-      const params = [new RequestParam('pattern', pattern)];
-      const findListOptions = Object.assign(new FindListOptions(), options, { searchParams: params });
-      return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
+  findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    const params = [new RequestParam('pattern', pattern)];
+    const findListOptions = Object.assign(new FindListOptions(), options, {searchParams: params});
+    return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 
-    public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-        return this.deleteData.delete(objectId, copyVirtualMetadata);
-    }
+  public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    return this.deleteData.delete(objectId, copyVirtualMetadata);
+  }
 
-    public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-        return this.deleteData.deleteByHref(href, copyVirtualMetadata);
-    }
+  public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    return this.deleteData.deleteByHref(href, copyVirtualMetadata);
+  }
 
-    public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
-        const requestId = this.requestService.generateRequestId();
-        this.getBrowseEndpoint().pipe(
-            take(1),
-            map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
-            map((endpoint: string) => {
-                const body = this.getInvocationFormData(parameters, files);
-                return new MultipartPostRequest(requestId, endpoint, body);
-            })
-        ).subscribe((request: RestRequest) => this.requestService.send(request));
+  public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
+    const requestId = this.requestService.generateRequestId();
+    this.getBrowseEndpoint().pipe(
+      take(1),
+      map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
+      map((endpoint: string) => {
+        const body = this.getInvocationFormData(parameters, files);
+        return new MultipartPostRequest(requestId, endpoint, body);
+      })
+    ).subscribe((request: RestRequest) => this.requestService.send(request));
 
-        return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
-    }
+    return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
+  }
 
-    public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
-        return this.findById(scriptName).pipe(
-            getFirstCompletedRemoteData(),
-            map((rd: RemoteData<LdnService>) => {
-                return hasValue(rd.payload);
-            }),
-        );
-    }
+  public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
+    return this.findById(scriptName).pipe(
+      getFirstCompletedRemoteData(),
+      map((rd: RemoteData<LdnService>) => {
+        return hasValue(rd.payload);
+      }),
+    );
+  }
 
-    private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
-        const form: FormData = new FormData();
-        form.set('properties', JSON.stringify(constrain));
-        files.forEach((file: File) => {
-            form.append('file', file);
-        });
-        return form;
-    }
+  private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
+    const form: FormData = new FormData();
+    form.set('properties', JSON.stringify(constrain));
+    files.forEach((file: File) => {
+      form.append('file', file);
+    });
+    return form;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
index 45c2106468..e19f986e1a 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
@@ -1,83 +1,84 @@
 <div class="container">
-    <div class="d-flex">
-        <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
-    </div>
-    <div class="d-flex justify-content-end">
-        <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
-                class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
-    </div>
-    <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
-                   [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
-                   [hideGear]="true"
-                   [hidePagerWhenSinglePage]="true"
-                   [pageInfoState]="(ldnServicesRD$ | async)?.payload"
-                   [paginationOptions]="pageConfig">
-        <div class="table-responsive">
-            <table class="table table-striped table-hover">
-                <thead>
-                <tr>
-                    <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
-                    <td>{{ ldnService.name }}</td>
-                    <td>{{ ldnService.description }}</td>
-                    <td>
+  <div class="d-flex">
+    <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
+  </div>
+  <div class="d-flex justify-content-end">
+    <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
+      class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
+  </div>
+  <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
+                 [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
+                 [hideGear]="true"
+                 [hidePagerWhenSinglePage]="true"
+                 [pageInfoState]="(ldnServicesRD$ | async)?.payload"
+                 [paginationOptions]="pageConfig">
+    <div class="table-responsive">
+      <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+          <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
+          <td>{{ ldnService.name }}</td>
+          <td>{{ ldnService.description }}</td>
+          <td>
                         <span (click)="toggleStatus(ldnService, ldnServicesService)"
-                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }" [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
+                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
+                              [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
                               class="status-indicator">
                             {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
                         </span>
-                    </td>
-                    <td>
-                        <div class="btn-group">
-                            <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                            <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
-                                    class="btn btn-outline-dark">
-                                <i class="fas fa-edit"></i>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-    </ds-pagination>
+          </td>
+          <td>
+            <div class="btn-group">
+              <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
+                <i class="fas fa-trash"></i>
+              </button>
+              <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
+                      class="btn btn-outline-dark">
+                <i class="fas fa-edit"></i>
+              </button>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </ds-pagination>
 </div>
 
 <ng-template #deleteModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.delete.header' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.overview.delete.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()"
-                        class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
-                <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
-                        class="btn btn-danger"
-                        id="delete-confirm">{{ 'service.overview.delete' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.delete.header' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.delete.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()"
+                class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
+        <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
+                class="btn btn-danger"
+                id="delete-confirm">{{ 'service.overview.delete' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
index 4efa29bce8..87a1da27a1 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
@@ -1,14 +1,14 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LdnServicesOverviewComponent } from './ldn-services-directory.component';
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { PaginationService } from '../../../core/pagination/pagination.service';
-import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { of } from 'rxjs';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {LdnServicesOverviewComponent} from './ldn-services-directory.component';
+import {ChangeDetectorRef, EventEmitter} from '@angular/core';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {NotificationsServiceStub} from '../../../shared/testing/notifications-service.stub';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {PaginationService} from '../../../core/pagination/pagination.service';
+import {PaginationServiceStub} from '../../../shared/testing/pagination-service.stub';
+import {of} from 'rxjs';
 
 describe('LdnServicesOverviewComponent', () => {
   let component: LdnServicesOverviewComponent;
@@ -26,17 +26,17 @@ describe('LdnServicesOverviewComponent', () => {
       imports: [TranslateModule.forRoot()],
       declarations: [LdnServicesOverviewComponent],
       providers: [
-        { provide: LdnServicesService, useValue: {} },
-        { provide: PaginationService, useValue: new PaginationServiceStub() },
+        {provide: LdnServicesService, useValue: {}},
+        {provide: PaginationService, useValue: new PaginationServiceStub()},
         {
           provide: NgbModal, useValue: {
             open: () => {/*comment*/
             }
           }
         },
-        { provide: ChangeDetectorRef, useValue: {} },
-        { provide: NotificationsService, useValue: NotificationsServiceStub },
-        { provide: TranslateService, useValue: translateServiceStub },
+        {provide: ChangeDetectorRef, useValue: {}},
+        {provide: NotificationsService, useValue: NotificationsServiceStub},
+        {provide: TranslateService, useValue: translateServiceStub},
       ]
     })
       .compileComponents();
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
index 3db9231ac2..9fa237fc4e 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
@@ -7,140 +7,140 @@ import {
   TemplateRef,
   ViewChild
 } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { map, switchMap } from 'rxjs/operators';
-import { LdnServicesService } from 'src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service';
-import { PaginationService } from 'src/app/core/pagination/pagination.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { hasValue } from '../../../shared/empty.util';
-import { Operation } from 'fast-json-patch';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
+import {Observable, Subscription} from 'rxjs';
+import {RemoteData} from '../../../core/data/remote-data';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
+import {map, switchMap} from 'rxjs/operators';
+import {LdnServicesService} from 'src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service';
+import {PaginationService} from 'src/app/core/pagination/pagination.service';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {hasValue} from '../../../shared/empty.util';
+import {Operation} from 'fast-json-patch';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
-    selector: 'ds-ldn-services-directory',
-    templateUrl: './ldn-services-directory.component.html',
-    styleUrls: ['./ldn-services-directory.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Default
+  selector: 'ds-ldn-services-directory',
+  templateUrl: './ldn-services-directory.component.html',
+  styleUrls: ['./ldn-services-directory.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
 
-    selectedServiceId: string | number | null = null;
-    servicesData: any[] = [];
-    @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
-    ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
-    });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
-    });
-    isProcessingSub: Subscription;
-    private modalRef: any;
+  selectedServiceId: string | number | null = null;
+  servicesData: any[] = [];
+  @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
+  ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  isProcessingSub: Subscription;
+  private modalRef: any;
 
 
-    constructor(
-        protected ldnServicesService: LdnServicesService,
-        protected paginationService: PaginationService,
-        protected modalService: NgbModal,
-        private cdRef: ChangeDetectorRef,
-        private notificationService: NotificationsService,
-        private translateService: TranslateService,
-    ) {
+  constructor(
+    protected ldnServicesService: LdnServicesService,
+    protected paginationService: PaginationService,
+    protected modalService: NgbModal,
+    private cdRef: ChangeDetectorRef,
+    private notificationService: NotificationsService,
+    private translateService: TranslateService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.setLdnServices();
+  }
+
+  setLdnServices() {
+    this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
+      switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
+        getFirstCompletedRemoteData()
+      ))
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.paginationService.clearPagination(this.pageConfig.id);
+    if (hasValue(this.isProcessingSub)) {
+      this.isProcessingSub.unsubscribe();
     }
+  }
 
-    ngOnInit(): void {
-        this.setLdnServices();
-    }
+  openDeleteModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
 
-    setLdnServices() {
-        this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
-            switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
-                getFirstCompletedRemoteData()
-            ))
-        );
-    }
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
 
-    ngOnDestroy(): void {
-        this.paginationService.clearPagination(this.pageConfig.id);
-        if (hasValue(this.isProcessingSub)) {
-            this.isProcessingSub.unsubscribe();
+  selectServiceToDelete(serviceId: number) {
+    this.selectedServiceId = serviceId;
+    this.openDeleteModal(this.deleteModal);
+  }
+
+  deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
+    if (this.selectedServiceId !== null) {
+      ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
+          this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
+            map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
+              if (remoteData.hasSucceeded) {
+                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
+              }
+              return remoteData;
+            })
+          );
+          this.cdRef.detectChanges();
+          this.closeModal();
+          this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
+            this.translateService.get('ldn-service-delete.notification.success.content'));
+        } else {
+          this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
+            this.translateService.get('ldn-service-delete.notification.error.content'));
+          this.cdRef.detectChanges();
         }
+      });
     }
+  }
 
-    openDeleteModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
 
-    closeModal() {
-        this.modalRef.close();
-        this.cdRef.detectChanges();
-    }
+  toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
+    const newStatus = !ldnService.enabled;
+    const originalStatus = ldnService.enabled;
 
-    selectServiceToDelete(serviceId: number) {
-        this.selectedServiceId = serviceId;
-        this.openDeleteModal(this.deleteModal);
-    }
+    const patchOperation: Operation = {
+      op: 'replace',
+      path: '/enabled',
+      value: newStatus,
+    };
 
-    deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
-        if (this.selectedServiceId !== null) {
-            ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
-                if (rd.hasSucceeded) {
-                    this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
-                    this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
-                        map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
-                            if (remoteData.hasSucceeded) {
-                                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
-                            }
-                            return remoteData;
-                        })
-                    );
-                    this.cdRef.detectChanges();
-                    this.closeModal();
-                    this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
-                        this.translateService.get('ldn-service-delete.notification.success.content'));
-                } else {
-                    this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
-                        this.translateService.get('ldn-service-delete.notification.error.content'));
-                    this.cdRef.detectChanges();
-                }
-            });
+    ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
+      (rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          ldnService.enabled = newStatus;
+          this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
+            this.translateService.get('ldn-enable-service.notification.success.content'));
+        } else {
+          ldnService.enabled = originalStatus;
+          this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
+            this.translateService.get('ldn-enable-service.notification.error.content'));
         }
-    }
-
-
-    toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
-        const newStatus = !ldnService.enabled;
-        const originalStatus = ldnService.enabled;
-
-        const patchOperation: Operation = {
-            op: 'replace',
-            path: '/enabled',
-            value: newStatus,
-        };
-
-        ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
-            (rd: RemoteData<LdnService>) => {
-                if (rd.hasSucceeded) {
-                    ldnService.enabled = newStatus;
-                    this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
-                        this.translateService.get('ldn-enable-service.notification.success.content'));
-                } else {
-                    ldnService.enabled = originalStatus;
-                    this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
-                        this.translateService.get('ldn-enable-service.notification.error.content'));
-                }
-            }
-        );
-    }
+      }
+    );
+  }
 
 
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
index 6aceada3df..55b7ad8b98 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
@@ -1,31 +1,31 @@
-import { autoserialize, deserialize, inheritSerialization } from 'cerialize';
-import { LDN_SERVICE_CONSTRAINT_FILTER } from './ldn-service.resource-type';
-import { CacheableObject } from '../../../core/cache/cacheable-object.model';
-import { typedObject } from '../../../core/cache/builders/build-decorators';
-import { excludeFromEquals } from '../../../core/utilities/equals.decorators';
-import { ResourceType } from '../../../core/shared/resource-type';
+import {autoserialize, deserialize, inheritSerialization} from 'cerialize';
+import {LDN_SERVICE_CONSTRAINT_FILTER} from './ldn-service.resource-type';
+import {CacheableObject} from '../../../core/cache/cacheable-object.model';
+import {typedObject} from '../../../core/cache/builders/build-decorators';
+import {excludeFromEquals} from '../../../core/utilities/equals.decorators';
+import {ResourceType} from '../../../core/shared/resource-type';
 
 /** A single filter value and its properties. */
 @typedObject
 @inheritSerialization(CacheableObject)
 export class Itemfilter extends CacheableObject {
-    static type = LDN_SERVICE_CONSTRAINT_FILTER;
+  static type = LDN_SERVICE_CONSTRAINT_FILTER;
 
-    @excludeFromEquals
-    @autoserialize
-    type: ResourceType;
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
 
-    @autoserialize
-    id: string;
+  @autoserialize
+  id: string;
 
-    @deserialize
-    _links: {
-        self: {
-            href: string;
-        };
+  @deserialize
+  _links: {
+    self: {
+      href: string;
     };
+  };
 
-    get self(): string {
-        return this._links.self.href;
-    }
+  get self(): string {
+    return this._links.self.href;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
index 1103056e47..7fb8072a6f 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
@@ -1,13 +1,13 @@
-import { autoserialize } from 'cerialize';
+import {autoserialize} from 'cerialize';
 
 /**
  * notify service patterns
  */
 export class NotifyServicePattern {
-    @autoserialize
-    pattern: string;
-    @autoserialize
-    constraint: string;
-    @autoserialize
-    automatic: string;
+  @autoserialize
+  pattern: string;
+  @autoserialize
+  constraint: string;
+  @autoserialize
+  automatic: string;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
index d9e45d91a9..040e4d37b8 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
@@ -2,7 +2,7 @@
  * List of services statuses
  */
 export enum LdnServiceStatus {
-    UNKOWN,
-    DISABLED,
-    ENABLED,
+  UNKOWN,
+  DISABLED,
+  ENABLED,
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
index 500cefbd52..5121e47f69 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
@@ -1,3 +1,3 @@
 export class LdnServiceConstrain {
-    void: any;
+  void: any;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts
index 05a881e7e7..4fb510c032 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts
@@ -4,7 +4,7 @@
  * Needs to be in a separate file to prevent circular
  * dependencies in webpack.
  */
-import { ResourceType } from '../../../core/shared/resource-type';
+import {ResourceType} from '../../../core/shared/resource-type';
 
 export const LDN_SERVICE = new ResourceType('ldnservice');
 export const LDN_SERVICE_CONSTRAINT_FILTERS = new ResourceType('itemfilters');
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
index 8631ef2451..631434f7f0 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
@@ -1,57 +1,57 @@
-import { ResourceType } from '../../../core/shared/resource-type';
-import { CacheableObject } from '../../../core/cache/cacheable-object.model';
-import { autoserialize, deserialize, deserializeAs, inheritSerialization } from 'cerialize';
-import { LDN_SERVICE } from './ldn-service.resource-type';
-import { excludeFromEquals } from '../../../core/utilities/equals.decorators';
-import { typedObject } from '../../../core/cache/builders/build-decorators';
-import { NotifyServicePattern } from './ldn-service-patterns.model';
+import {ResourceType} from '../../../core/shared/resource-type';
+import {CacheableObject} from '../../../core/cache/cacheable-object.model';
+import {autoserialize, deserialize, deserializeAs, inheritSerialization} from 'cerialize';
+import {LDN_SERVICE} from './ldn-service.resource-type';
+import {excludeFromEquals} from '../../../core/utilities/equals.decorators';
+import {typedObject} from '../../../core/cache/builders/build-decorators';
+import {NotifyServicePattern} from './ldn-service-patterns.model';
 
 
 /** An LdnService  and its properties. */
 @typedObject
 @inheritSerialization(CacheableObject)
 export class LdnService extends CacheableObject {
-    static type = LDN_SERVICE;
+  static type = LDN_SERVICE;
 
-    @excludeFromEquals
-    @autoserialize
-    type: ResourceType;
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
 
-    @autoserialize
-    id: number;
+  @autoserialize
+  id: number;
 
-    @deserializeAs('id')
-    uuid: string;
+  @deserializeAs('id')
+  uuid: string;
 
-    @autoserialize
-    name: string;
+  @autoserialize
+  name: string;
 
-    @autoserialize
-    description: string;
+  @autoserialize
+  description: string;
 
-    @autoserialize
-    url: string;
+  @autoserialize
+  url: string;
 
-    @autoserialize
-    enabled: boolean;
+  @autoserialize
+  enabled: boolean;
 
-    @autoserialize
-    ldnUrl: string;
+  @autoserialize
+  ldnUrl: string;
 
-    @autoserialize
-    notifyServiceInboundPatterns?: NotifyServicePattern[];
+  @autoserialize
+  notifyServiceInboundPatterns?: NotifyServicePattern[];
 
-    @autoserialize
-    notifyServiceOutboundPatterns?: NotifyServicePattern[];
+  @autoserialize
+  notifyServiceOutboundPatterns?: NotifyServicePattern[];
 
-    @deserialize
-    _links: {
-        self: {
-            href: string;
-        };
+  @deserialize
+  _links: {
+    self: {
+      href: string;
     };
+  };
 
-    get self(): string {
-        return this._links.self.href;
-    }
+  get self(): string {
+    return this._links.self.href;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
index d3f55c815e..c734503d95 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
@@ -2,9 +2,9 @@
  * List of parameter types used for scripts
  */
 export enum LdnServiceConstrainType {
-    STRING = 'String',
-    DATE = 'date',
-    BOOLEAN = 'boolean',
-    FILE = 'InputStream',
-    OUTPUT = 'OutputStream'
+  STRING = 'String',
+  DATE = 'date',
+  BOOLEAN = 'boolean',
+  FILE = 'InputStream',
+  OUTPUT = 'OutputStream'
 }

From 3a6f57d34d398409d2bd9e054109d04e396bdf0e Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Wed, 15 Nov 2023 18:44:24 +0100
Subject: [PATCH 11/21] CST-12455 Task Completed, cleanup needed

---
 .../ldn-service-form-edit.component.html      | 35 +++++-----
 .../ldn-service-form-edit.component.ts        | 64 +++++++++++++++----
 .../ldn-service-form.component.html           | 47 +++++++-------
 .../ldn-service-form.component.scss           | 15 +----
 .../ldn-service-form.component.ts             | 38 +++++++----
 5 files changed, 121 insertions(+), 78 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 c563c38043..20bb0b53b8 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
@@ -68,12 +68,14 @@
       <div class="col">
         <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
       </div>
-      <div class="col">
-        <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
-      <div class="col-sm-1 ">
-        <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+        <div class="col-sm-1">
+          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+        </div>
+      </ng-container>
       <div class="col-sm-2">
       </div>
     </div>
@@ -95,9 +97,8 @@
                 <input
                   (click)="inboundPatternDropdown.open();"
                   [readonly]="true"
-                  [value]="selectedInboundPatterns"
                   class="form-control w-80 scrollable-dropdown-input"
-                  formControlName="pattern"
+                  formControlName="patternLabel"
                   id="inboundPatternDropdownButton"
                   ngbDropdownAnchor
                   type="text"
@@ -190,9 +191,11 @@
       <div class="col">
         <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
       </div>
-      <div class="col">
-        <label class="label-box-3">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+      </ng-container>
       <div class="col-sm-1 ">
         <label class="label-box-2"></label>
       </div>
@@ -209,7 +212,8 @@
         <!-- Input elements in a separate row -->
         <div class="row mb-1">
           <div class="col">
-            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown>
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
+                 placement="bottom">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle></i>
@@ -218,16 +222,11 @@
                   [readonly]="true"
                   [value]="selectedOutboundPatterns"
                   class="form-control w-100 scrollable-dropdown-input"
-                  formControlName="pattern"
+                  formControlName="patternLabel"
                   id="outboundPatternDropdownButton"
                   ngbDropdownAnchor
                   type="text"
                 />
-
-                <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                <div
-                  class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
                 <!-- TODO: infinite scroll with 3-5 selects -->
                 <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
                   <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index f67e861693..61a0527519 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -19,6 +19,7 @@ import {Observable} from 'rxjs';
 import {PaginationService} from '../../../core/pagination/pagination.service';
 import {FindListOptions} from '../../../core/data/find-list-options.model';
 import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
+import {NotifyServicePattern} from "../ldn-services-model/ldn-service-patterns.model";
 
 @Component({
   selector: 'ds-ldn-service-form-edit',
@@ -98,8 +99,6 @@ export class LdnServiceFormEditComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     this.route.params.subscribe((params) => {
       this.serviceId = params.serviceId;
       if (this.serviceId) {
@@ -132,29 +131,66 @@ export class LdnServiceFormEditComponent implements OnInit {
             type: this.service.type,
             enabled: this.service.enabled
           });
-
-          const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+          this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
+          this.filterPatternObjectsAndPickLabel('notifyServiceOutboundPatterns', true)
+          /*const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
           inboundPatternsArray.clear();
-          this.service.notifyServiceInboundPatterns.forEach((pattern: any) => {
+          console.log(" outside (pattern: any)")
+          this.service.notifyServiceInboundPatterns.forEach((patternObj: NotifyServicePattern) => {
             const patternFormGroup = this.initializeInboundPatternFormGroup();
-            patternFormGroup.patchValue(pattern);
+            const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {...patternObj,patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj.pattern + '.label')})
+            patternFormGroup.patchValue(newPatternObjWithLabel);
+            console.log("(pattern: any)")
+
+
             inboundPatternsArray.push(patternFormGroup);
             this.cdRef.detectChanges();
-          });
+          })*/;
 
-          const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+          /*const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
           outboundPatternsArray.clear();
           this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
             const patternFormGroup = this.initializeOutboundPatternFormGroup();
             patternFormGroup.patchValue(pattern);
             outboundPatternsArray.push(patternFormGroup);
             this.cdRef.detectChanges();
-          });
+          });*/
         }
       },
     );
   }
 
+  filterPatternObjectsAndPickLabel(formArrayName: string, isOutbound: boolean) {
+    const PatternsArray = this.formModel.get(formArrayName) as FormArray;
+    PatternsArray.clear();
+    let servicesToUse;
+    if (isOutbound) {
+      servicesToUse = this.service.notifyServiceOutboundPatterns
+    } else {
+      servicesToUse = this.service.notifyServiceInboundPatterns
+    }
+
+    servicesToUse.forEach((patternObj: NotifyServicePattern) => {
+      let patternFormGroup;
+      if (isOutbound) {
+        patternFormGroup = this.initializeOutboundPatternFormGroup();
+      } else {
+        patternFormGroup = this.initializeInboundPatternFormGroup();
+      }
+      const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {
+        ...patternObj,
+        patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label')
+      })
+      patternFormGroup.patchValue(newPatternObjWithLabel);
+      console.log("(pattern: any)")
+
+      PatternsArray.push(patternFormGroup);
+      this.cdRef.detectChanges();
+    })
+
+
+  }
+
   generatePatchOperations(): any[] {
     const patchOperations: any[] = [];
 
@@ -205,6 +241,8 @@ export class LdnServiceFormEditComponent implements OnInit {
     const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+
   }
 
   selectOutboundItemFilter(filterValue: string, index: number) {
@@ -217,6 +255,7 @@ export class LdnServiceFormEditComponent implements OnInit {
     const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
   }
 
   selectInboundItemFilter(filterValue: string, index: number): void {
@@ -391,9 +430,8 @@ export class LdnServiceFormEditComponent implements OnInit {
       const patternGroup = patternsArray.at(i) as FormGroup;
 
       const patternValue = patternGroup.value;
-
-      debugger
       if (patternGroup.touched) {
+        delete patternValue?.patternLabel;
         if (patternValue.isNew) {
           delete patternValue.isNew;
           const addOperation = {
@@ -421,6 +459,7 @@ export class LdnServiceFormEditComponent implements OnInit {
   private createOutboundPatternFormGroup(): FormGroup {
     return this.formBuilder.group({
       pattern: '',
+      patternLabel: 'Select a pattern',
       constraint: '',
       isNew: true,
     });
@@ -429,6 +468,7 @@ export class LdnServiceFormEditComponent implements OnInit {
   private createInboundPatternFormGroup(): FormGroup {
     return this.formBuilder.group({
       pattern: '',
+      patternLabel: 'Select a pattern',
       constraint: '',
       automatic: false,
       isNew: true
@@ -438,6 +478,7 @@ export class LdnServiceFormEditComponent implements OnInit {
   private initializeOutboundPatternFormGroup(): FormGroup {
     return this.formBuilder.group({
       pattern: '',
+      patternLabel: '',
       constraint: '',
     });
   }
@@ -445,6 +486,7 @@ export class LdnServiceFormEditComponent implements OnInit {
   private initializeInboundPatternFormGroup(): FormGroup {
     return this.formBuilder.group({
       pattern: '',
+      patternLabel: '',
       constraint: '',
       automatic: '',
     });
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 e47e1b1b8c..f97478cbba 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
@@ -59,12 +59,14 @@
       <div class="col">
         <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
       </div>
-      <div class="col">
-        <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
-      <div class="col-sm-1 ">
-        <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+        <div class="col-sm-1">
+          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+        </div>
+      </ng-container>
       <div class="col-sm-1">
       </div>
     </div>
@@ -77,7 +79,8 @@
 
         <div class="row mb-1">
           <div class="col">
-            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
+            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown
+                 placement="bottom">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle>
@@ -88,7 +91,7 @@
                   [readonly]="true"
                   [value]="selectedInboundPatterns"
                   class="form-control w-100 scrollable-dropdown-input"
-                  formControlName="pattern"
+                  formControlName="patternLabel"
                   id="inboundPatternDropdownButton"
                   ngbDropdownAnchor
                   type="text"
@@ -111,7 +114,8 @@
 
           <div class="col">
             <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom">
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                      ngbDropdownToggle></i>
@@ -125,10 +129,6 @@
                     ngbDropdownAnchor
                     type="text"
                   />
-
-                  <div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
-                  <div
-                    class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
                   <!-- TODO: infinite scroll with 3 selects -->
                   <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
                     <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
@@ -178,9 +178,11 @@
       <div class="col">
         <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
       </div>
-      <div class="col">
-        <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+      </ng-container>
       <div class="col-sm-1 ">
       </div>
       <div class="col-sm-1 ">
@@ -195,7 +197,8 @@
         <!-- Input elements in a separate row -->
         <div class="row mb-1">
           <div class="col">
-            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown>
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
+                 placement="bottom">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle></i>
@@ -204,16 +207,11 @@
                   [readonly]="true"
                   [value]="selectedOutboundPatterns"
                   class="form-control w-100 scrollable-dropdown-input"
-                  formControlName="pattern"
+                  formControlName="patternLabel"
                   id="outboundPatternDropdownButton"
                   ngbDropdownAnchor
                   type="text"
                 />
-
-                <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                <div
-                  class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
                 <!-- TODO: infinite scroll with 3 selects -->
                 <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
                   <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
@@ -230,7 +228,8 @@
 
           <div class="col">
             <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom">
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                      ngbDropdownToggle></i>
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 ef4e02910b..01dd34d12f 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
@@ -4,7 +4,10 @@
 form {
   font-size: 14px;
   position: relative;
+}
 
+label {
+  font-weight: bold;
 }
 
 input[type="text"],
@@ -105,18 +108,6 @@ textarea {
   cursor: pointer;
 }
 
-.label-box {
-  margin-left: 11px;
-}
-
-.label-box-2 {
-  margin-left: 14px;
-}
-
-.label-box-3 {
-  margin-left: 5px;
-}
-
 form button.btn.btn-primary[type="submit"] {
   position: absolute;
   bottom: 0;
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index 3f8588972d..a4b2f0a143 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -127,12 +127,21 @@ export class LdnServiceFormComponent implements OnInit {
       return;
     }
 
-    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: {
+    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: {
       pattern: string;
-    }) => pattern.pattern !== '');
-    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: {
+      patternLabel: string
+    }) => {
+      const {patternLabel, ...rest} = pattern;
+      return rest;
+    });
+
+    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.map((pattern: {
       pattern: string;
-    }) => pattern.pattern !== '');
+      patternLabel: string
+    }) => {
+      const {patternLabel, ...rest} = pattern;
+      return rest;
+    });
 
     const values = this.formModel.value;
 
@@ -191,20 +200,21 @@ export class LdnServiceFormComponent implements OnInit {
     }
   }
 
+
   selectOutboundPattern(patternValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
-    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    patternArray.patchValue({pattern: patternValue})
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+
   }
 
   selectInboundPattern(patternValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
-    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-    patternArray.patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+
   }
 
   selectInboundItemFilter(filterValue: string, index: number): void {
@@ -228,6 +238,7 @@ export class LdnServiceFormComponent implements OnInit {
     return this.formBuilder.group({
       pattern: [''],
       constraint: [''],
+      patternLabel: 'Select a Pattern',
     });
   }
 
@@ -235,7 +246,8 @@ export class LdnServiceFormComponent implements OnInit {
     return this.formBuilder.group({
       pattern: [''],
       constraint: [''],
-      automatic: false
+      automatic: false,
+      patternLabel: 'Select a Pattern',
     });
   }
 

From 7831bcbfae5f5a99f3ccf464180e56a8814de7bd Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 18:25:09 +0100
Subject: [PATCH 12/21] CST-12455 Working dropdowns with scroll showing only 4
 values + improvement for form input fields

---
 .../ldn-service-form-edit.component.html      | 51 +++++++++------
 .../ldn-service-form.component.html           | 64 +++++++++++--------
 2 files changed, 71 insertions(+), 44 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 20bb0b53b8..447c09b2e2 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
@@ -19,7 +19,8 @@
       <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
              [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
              name="name"
-             type="text">
+             type="text"
+             class="form-control">
     </div>
 
     <div class="mb-4">
@@ -30,7 +31,7 @@
     <div class="mb-2 d-flex flex-column">
       <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
       <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                formControlName="description" id="description" name="description"></textarea>
+                formControlName="description" id="description" name="description" class="form-control"></textarea>
     </div>
 
     <div class="mb-4">
@@ -43,7 +44,8 @@
       <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
              [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
              name="url"
-             type="text">
+             type="text"
+             class="form-control">
     </div>
 
     <div class="mb-4">
@@ -57,7 +59,8 @@
              [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
              id="ldnUrl"
              name="ldnUrl"
-             type="text">
+             type="text"
+             class="form-control">
     </div>
 
     <div class="mb-4">
@@ -90,7 +93,7 @@
         <div class="row mb-1">
           <div class="col">
             <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic" id="additionalInboundPattern{{i}}"
-                 ngbDropdown placement="bottom">
+                 ngbDropdown placement="bottom-start">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle></i>
@@ -104,15 +107,18 @@
                   type="text"
                 />
                 <!-- TODO: infinite scroll with 3 selects -->
-                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
-                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                  <div  class="scrollable-menu" role="listbox">
+                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
                           *ngFor="let pattern of inboundPatterns; let internalIndex = index"
                           ngbDropdownItem
-                          type="button">
+                          type="button"
+                          [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
                     <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
                     <div
                       class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
                   </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -120,7 +126,8 @@
 
           <div class="col">
             <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom-start">
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                      ngbDropdownToggle></i>
@@ -135,13 +142,15 @@
                     type="text"
                   />
                   <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
-                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                    <div  class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
                             *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
                             ngbDropdownItem
                             type="button">
                       <div>{{ constraint.id }}</div>
                     </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -213,7 +222,7 @@
         <div class="row mb-1">
           <div class="col">
             <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
-                 placement="bottom">
+                 placement="bottom-start">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle></i>
@@ -228,22 +237,26 @@
                   type="text"
                 />
                 <!-- TODO: infinite scroll with 3-5 selects -->
-                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
-                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                  <div  class="scrollable-menu" role="listbox">
+                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
                           *ngFor="let pattern of outboundPatterns; let internalIndex = index"
                           ngbDropdownItem
-                          type="button">
+                          type="button"
+                          [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
                     <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
                     <div
                       class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
                   </button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="col">
             <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom-start">
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                      ngbDropdownToggle></i>
@@ -258,13 +271,15 @@
                     type="text"
                   />
                   <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
-                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                    <div  class="scrollable-menu" role="listbox">
+                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
                             *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
                             ngbDropdownItem
                             type="button">
                       <div>{{ constraint.id }}</div>
                     </button>
+                    </div>
                   </div>
                 </div>
               </div>
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 f97478cbba..2ecc01f72e 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
@@ -4,12 +4,13 @@
       <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
     </div>
     <!-- In the name section -->
-    <div class="mb-2">
+    <div class="mb-2 ">
       <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
       <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
              [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
              name="name"
-             type="text">
+             type="text"
+             class="form-control">
     </div>
 
     <div class="mb-4">
@@ -20,7 +21,7 @@
     <div class="mb-2 d-flex flex-column">
       <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
       <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                formControlName="description" id="description" name="description"></textarea>
+                formControlName="description" id="description" name="description" class="form-control"></textarea>
     </div>
 
     <div class="mb-4">
@@ -33,7 +34,8 @@
       <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
              [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
              name="url"
-             type="text">
+             type="text"
+             class="form-control">
     </div>
 
     <div class="mb-4">
@@ -47,7 +49,8 @@
              [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
              id="ldnUrl"
              name="ldnUrl"
-             type="text">
+             type="text"
+             class="form-control">
     </div>
 
     <div class="mb-4">
@@ -80,7 +83,7 @@
         <div class="row mb-1">
           <div class="col">
             <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown
-                 placement="bottom">
+                 placement="bottom-start">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle>
@@ -96,16 +99,18 @@
                   ngbDropdownAnchor
                   type="text"
                 />
-                <!-- TODO: infinite scroll with 3 selects -->
-                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
-                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
-                          *ngFor="let pattern of inboundPatterns; let internalIndex = index"
-                          ngbDropdownItem
-                          type="button">
-                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                    <div
-                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
-                  </button>
+                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                  <div  class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
+                      *ngFor="let pattern of inboundPatterns"
+                      ngbDropdownItem
+                      type="button"
+                      [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -115,7 +120,7 @@
           <div class="col">
             <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
               <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                   placement="bottom">
+                   placement="bottom-start">
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                      ngbDropdownToggle></i>
@@ -130,13 +135,15 @@
                     type="text"
                   />
                   <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
-                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                    <div  class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() " class="dropdown-item collection-item text-truncate w-100"
                             *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
                             ngbDropdownItem
                             type="button">
                       <div>{{ constraint.id }}</div>
                     </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -198,7 +205,7 @@
         <div class="row mb-1">
           <div class="col">
             <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
-                 placement="bottom">
+                 placement="bottom-start">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle></i>
@@ -213,15 +220,18 @@
                   type="text"
                 />
                 <!-- TODO: infinite scroll with 3 selects -->
-                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
-                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                  <div  class="scrollable-menu" role="listbox">
+                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
                           *ngFor="let pattern of outboundPatterns" ngbDropdownItem
-                          type="button">
+                          type="button"
+                          [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
                     <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
                     <div
                       class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
                   </button>
                 </div>
+                </div>
               </div>
             </div>
           </div>
@@ -229,7 +239,7 @@
           <div class="col">
             <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
               <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                   placement="bottom">
+                   placement="bottom-start">
                 <div class="position-relative right-addon" role="combobox">
                   <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                      ngbDropdownToggle></i>
@@ -244,14 +254,16 @@
                     type="text"
                   />
                   <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
-                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                    <div  class="scrollable-menu" role="listbox">
+                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
                             *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
                             ngbDropdownItem
                             type="button">
                       <div>{{ constraint.id }}</div>
                     </button>
                   </div>
+                  </div>
                 </div>
               </div>
             </ng-container>

From 18367bab58d9ab8c07864883d748f027625f3024 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 19:36:28 +0100
Subject: [PATCH 13/21] CST-12455_coar-7sync Refactor after branch sync

---
 .../ldn-services-model/ldn-services.model.ts  | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
index ae6803ca2e..382882ffb6 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
@@ -11,50 +11,50 @@ import {NotifyServicePattern} from './ldn-service-patterns.model';
 @typedObject
 @inheritSerialization(CacheableObject)
 export class LdnService extends CacheableObject {
-  static type = LDN_SERVICE;
+    static type = LDN_SERVICE;
 
-  @excludeFromEquals
-  @autoserialize
-  type: ResourceType;
+    @excludeFromEquals
+    @autoserialize
+    type: ResourceType;
 
-  @autoserialize
-  id: number;
+    @autoserialize
+    id: number;
 
-  @deserializeAs('id')
-  uuid: string;
+    @deserializeAs('id')
+    uuid: string;
 
-  @autoserialize
-  name: string;
+    @autoserialize
+    name: string;
 
-  @autoserialize
-  description: string;
+    @autoserialize
+    description: string;
 
-  @autoserialize
-  url: string;
+    @autoserialize
+    url: string;
 
-  @autoserialize
+    @autoserialize
     score: number;
 
     @autoserialize
-  enabled: boolean;
+    enabled: boolean;
 
-  @autoserialize
-  ldnUrl: string;
+    @autoserialize
+    ldnUrl: string;
 
-  @autoserialize
-  notifyServiceInboundPatterns?: NotifyServicePattern[];
+    @autoserialize
+    notifyServiceInboundPatterns?: NotifyServicePattern[];
 
-  @autoserialize
-  notifyServiceOutboundPatterns?: NotifyServicePattern[];
+    @autoserialize
+    notifyServiceOutboundPatterns?: NotifyServicePattern[];
 
-  @deserialize
-  _links: {
-    self: {
-      href: string;
+    @deserialize
+    _links: {
+        self: {
+            href: string;
+        };
     };
-  };
 
-  get self(): string {
-    return this._links.self.href;
-  }
+    get self(): string {
+        return this._links.self.href;
+    }
 }

From 6303d4c7e6a7174a4bed08d82ffb3ff987013025 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 19:36:56 +0100
Subject: [PATCH 14/21] CST-12455_coar-7sync Refactor after branch sync

---
 .../admin-ldn-services-routing.module.ts      |  46 +-
 .../admin-ldn-services.module.ts              |  26 +-
 .../ldn-service-form-edit.component.html      | 743 +++++++--------
 .../ldn-service-form-edit.component.spec.ts   | 106 +--
 .../ldn-service-form-edit.component.ts        | 854 +++++++++---------
 .../ldn-service-form.component.html           | 653 ++++++-------
 .../ldn-service-form.component.spec.ts        | 114 +--
 .../ldn-service-form.component.ts             | 427 ++++-----
 .../ldn-service-new.component.spec.ts         |  32 +-
 .../ldn-service-new.component.ts              |   6 +-
 .../ldnServicesRD$-mock.ts                    | 102 +--
 .../ldn-itemfilters-data.service.ts           |  34 +-
 .../ldn-services-data.service.ts              | 156 ++--
 .../ldn-services-directory.component.html     | 136 +--
 .../ldn-services-directory.component.spec.ts  |  72 +-
 .../ldn-services-directory.component.ts       | 224 ++---
 .../ldn-service-itemfilters.ts                |  28 +-
 .../ldn-service-patterns.model.ts             |  12 +-
 .../ldn-service-status.model.ts               |   6 +-
 .../ldn-service.constrain.model.ts            |   2 +-
 .../service-constrain-type.model.ts           |  10 +-
 .../ldn-service-coar-patterns.ts              |  26 +-
 22 files changed, 1921 insertions(+), 1894 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
index 282ca430a2..58b3c82d6e 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
@@ -6,29 +6,29 @@ import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.componen
 import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
 
 @NgModule({
-  imports: [
-    RouterModule.forChild([
-      {
-        path: '',
-        pathMatch: 'full',
-        component: LdnServicesOverviewComponent,
-        resolve: {breadcrumb: I18nBreadcrumbResolver},
-        data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
-      },
-      {
-        path: 'new',
-        resolve: {breadcrumb: I18nBreadcrumbResolver},
-        component: LdnServiceNewComponent,
-        data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
-      },
-      {
-        path: 'edit/:serviceId',
-        resolve: {breadcrumb: I18nBreadcrumbResolver},
-        component: LdnServiceFormEditComponent,
-        data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
-      },
-    ]),
-  ]
+    imports: [
+        RouterModule.forChild([
+            {
+                path: '',
+                pathMatch: 'full',
+                component: LdnServicesOverviewComponent,
+                resolve: {breadcrumb: I18nBreadcrumbResolver},
+                data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
+            },
+            {
+                path: 'new',
+                resolve: {breadcrumb: I18nBreadcrumbResolver},
+                component: LdnServiceNewComponent,
+                data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
+            },
+            {
+                path: 'edit/:serviceId',
+                resolve: {breadcrumb: I18nBreadcrumbResolver},
+                component: LdnServiceFormEditComponent,
+                data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
+            },
+        ]),
+    ]
 })
 export class AdminLdnServicesRoutingModule {
 
diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
index 48ad89fdcc..0745e81558 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
@@ -11,19 +11,19 @@ import {LdnItemfiltersService} from './ldn-services-data/ldn-itemfilters-data.se
 
 
 @NgModule({
-  imports: [
-    CommonModule,
-    SharedModule,
-    AdminLdnServicesRoutingModule,
-    FormsModule
-  ],
-  declarations: [
-    LdnServicesOverviewComponent,
-    LdnServiceNewComponent,
-    LdnServiceFormComponent,
-    LdnServiceFormEditComponent,
-  ],
-  providers: [LdnItemfiltersService]
+    imports: [
+        CommonModule,
+        SharedModule,
+        AdminLdnServicesRoutingModule,
+        FormsModule
+    ],
+    declarations: [
+        LdnServicesOverviewComponent,
+        LdnServiceNewComponent,
+        LdnServiceFormComponent,
+        LdnServiceFormEditComponent,
+    ],
+    providers: [LdnItemfiltersService]
 })
 export class AdminLdnServicesModule {
 }
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 aadccb8be0..ddd4267dbb 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
@@ -1,397 +1,414 @@
 <div class="container">
-  <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
-    <div class="d-flex">
-      <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h2>
-    </div>
-    <!-- In the toggle section -->
-    <div class="toggle-switch-container">
-      <label class="status-label" for="enabled">{{ 'ldn-service-status' | translate }}</label>
-      <div>
-        <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
-        <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
-          <div class="slider"></div>
+    <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
+        <div class="d-flex">
+            <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h2>
         </div>
-      </div>
-    </div>
-
-    <div class="mb-5">
-      <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
-      <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
-             name="name"
-             type="text"
-             class="form-control">
-    <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.name' | translate }}
-    </div>
-    </div>
-
-    <!-- In the description section -->
-    <div class="mb-5 mt-5 d-flex flex-column">
-      <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
-      <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                formControlName="description" id="description" name="description" class="form-control"></textarea>
-    </div>
-
-    <!-- In the url section -->
-    <div class="mb-5 mt-5">
-      <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
-      <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
-             name="url"
-             type="text"
-             class="form-control">
-    <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.url' | translate }}
-    </div>
-    </div>
-
-    <!-- In the ldnUrl section -->
-    <div class="mb-5 mt-5">
-      <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
-      <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
-             id="ldnUrl"
-             name="ldnUrl"
-             type="text"
-             class="form-control">
-    <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.ldnurl' | translate }}
-    </div>
-    </div>
-
-    <!-- In the score section -->
-    <div class="mb-2">
-      <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
-      <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
-             id="score"
-             name="score"
-             type="text">
-      <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.score' | translate }}
-      </div>
-    </div>
-
-
-    <div class="row mb-1 mt-5">
-      <div class="col">
-        <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
-      </div>
-      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
-        <div class="col">
-          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-        </div>
-        <div class="col-sm-1">
-          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-        </div>
-      </ng-container>
-      <div class="col-sm-2">
-      </div>
-    </div>
-
-    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-         [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
-         formGroupName="notifyServiceInboundPatterns">
-
-      <ng-container [formGroupName]="i">
-
-
-        <div class="row mb-1">
-          <div class="col">
-            <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic" id="additionalInboundPattern{{i}}"
-                 ngbDropdown placement="bottom-start">
-              <div class="position-relative right-addon" role="combobox">
-                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                   ngbDropdownToggle></i>
-                <input
-                  (click)="inboundPatternDropdown.open();"
-                  [readonly]="true"
-                  class="form-control w-80 scrollable-dropdown-input"
-                  formControlName="patternLabel"
-                  id="inboundPatternDropdownButton"
-                  ngbDropdownAnchor
-                  type="text"
-                />
-                <!-- TODO: infinite scroll with 3 selects -->
-                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                  <div  class="scrollable-menu" role="listbox">
-                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
-                          *ngFor="let pattern of inboundPatterns; let internalIndex = index"
-                          ngbDropdownItem
-                          type="button"
-                          [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
-                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                    <div
-                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
-                  </button>
-                  </div>
+        <!-- In the toggle section -->
+        <div class="toggle-switch-container">
+            <label class="status-label" for="enabled">{{ 'ldn-service-status' | translate }}</label>
+            <div>
+                <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
+                <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
+                    <div class="slider"></div>
                 </div>
-              </div>
             </div>
-          </div>
+        </div>
 
-          <div class="col">
-            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                   placement="bottom-start">
-                <div class="position-relative right-addon" role="combobox">
-                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                     ngbDropdownToggle></i>
-                  <input
-                    (click)="inboundItemfilterDropdown.open();"
-                    [readonly]="true"
-                    [value]="selectedInboundItemfilters"
-                    class="form-control w-100 scrollable-dropdown-input"
-                    formControlName="constraint"
-                    id="inboundItemfilterDropdown"
-                    ngbDropdownAnchor
-                    type="text"
-                  />
-                  <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                    <div  class="scrollable-menu" role="listbox">
-                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
-                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                            ngbDropdownItem
-                            type="button">
-                      <div>{{ constraint.id }}</div>
-                    </button>
-                    </div>
-                  </div>
+        <div class="mb-5">
+            <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control" formControlName="name"
+                   id="name"
+                   name="name"
+                   type="text">
+            <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.name' | translate }}
+            </div>
+        </div>
+
+        <!-- In the description section -->
+        <div class="mb-5 mt-5 d-flex flex-column">
+            <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
+            <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
+                      class="form-control" formControlName="description" id="description" name="description"></textarea>
+        </div>
+
+        <!-- In the url section -->
+        <div class="mb-5 mt-5">
+            <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control" formControlName="url"
+                   id="url"
+                   name="url"
+                   type="text">
+            <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.url' | translate }}
+            </div>
+        </div>
+
+        <!-- In the ldnUrl section -->
+        <div class="mb-5 mt-5">
+            <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+                   formControlName="ldnUrl"
+                   id="ldnUrl"
+                   name="ldnUrl"
+                   type="text">
+            <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.ldnurl' | translate }}
+            </div>
+        </div>
+
+        <!-- In the score section -->
+        <div class="mb-2">
+            <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
+                   id="score"
+                   name="score"
+                   type="text">
+            <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.score' | translate }}
+            </div>
+        </div>
+
+
+        <div class="row mb-1 mt-5">
+            <div class="col">
+                <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+            </div>
+            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+                <div class="col">
+                    <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+                </div>
+                <div class="col-sm-1">
+                    <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
                 </div>
-              </div>
             </ng-container>
-          </div>
-
-          <div
-            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
-            class="col-sm-1">
-            <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                   type="checkbox">
-            <div (click)="toggleAutomatic(i)"
-                 [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                 class="toggle-switch">
-              <div class="slider"></div>
+            <div class="col-sm-2">
             </div>
-          </div>
-
-
-          <div class="col-sm-2">
-            <div class="btn-group">
-              <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
-                    type="button">
-              <i class="fas fa-trash"></i>
-            </button>
-
-
-            <button (click)="unmarkForInboundPatternDeletion(i)" *ngIf="markedForDeletionInboundPattern.includes(i)"
-                    class="btn btn-warning "
-                    type="button">
-              <i class="fas fa-undo"></i>
-            </button>
-          </div>
         </div>
-</div>
-      </ng-container>
-    </div>
+
+        <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
+             [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
+             formGroupName="notifyServiceInboundPatterns">
+
+            <ng-container [formGroupName]="i">
 
 
-    <span (click)="addInboundPattern()"
-          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
-
-
-    <div class="row mb-1 mt-5">
-      <div class="col">
-        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }} </label>
-      </div>
-        <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
-        <div class="col">
-        <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
-        </ng-container>
-        <div class="col-sm-1 ">
-        <label class="label-box-2" style="visibility: hidden;">
-            {{ 'ldn-new-service.form.label.automatic' | translate }}
-        </label>
-      </div>
-    <div class="col-sm-2 ">
-      </div>
-    </div>
-
-    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
-         [class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)"
-         formGroupName="notifyServiceOutboundPatterns">
-
-      <ng-container [formGroupName]="i">
-
-        <!-- Input elements in a separate row -->
-        <div class="row mb-1">
-          <div class="col">
-            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
-                 placement="bottom-start">
-              <div class="position-relative right-addon" role="combobox">
-                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                   ngbDropdownToggle></i>
-                <input
-                  (click)="outboundPatternDropdown.open();"
-                  [readonly]="true"
-                  [value]="selectedOutboundPatterns"
-                  class="form-control w-100 scrollable-dropdown-input"
-                  formControlName="patternLabel"
-                  id="outboundPatternDropdownButton"
-                  ngbDropdownAnchor
-                  type="text"
-                />
-                <!-- TODO: infinite scroll with 3-5 selects -->
-                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                  <div  class="scrollable-menu" role="listbox">
-                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
-                          *ngFor="let pattern of outboundPatterns; let internalIndex = index"
-                          ngbDropdownItem
-                          type="button"
-                          [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
-                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                    <div
-                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
-                  </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col">
-            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                   placement="bottom-start">
-                <div class="position-relative right-addon" role="combobox">
-                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                     ngbDropdownToggle></i>
-                  <input
-                    (click)="outboundItemfilterDropdown.open();"
-                    [readonly]="true"
-                    [value]="selectedOutboundItemfilters"
-                    class="form-control w-100 scrollable-dropdown-input"
-                    formControlName="constraint"
-                    id="outboundItemfilterDropdown"
-                    ngbDropdownAnchor
-                    type="text"
-                  />
-                  <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                    <div  class="scrollable-menu" role="listbox">
-                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
-                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                            ngbDropdownItem
-                            type="button">
-                      <div>{{ constraint.id }}</div>
-                    </button>
+                <div class="row mb-1">
+                    <div class="col">
+                        <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
+                             id="additionalInboundPattern{{i}}"
+                             ngbDropdown placement="bottom-start">
+                            <div class="position-relative right-addon" role="combobox">
+                                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                   ngbDropdownToggle></i>
+                                <input
+                                        (click)="inboundPatternDropdown.open();"
+                                        [readonly]="true"
+                                        class="form-control w-80 scrollable-dropdown-input"
+                                        formControlName="patternLabel"
+                                        id="inboundPatternDropdownButton"
+                                        ngbDropdownAnchor
+                                        type="text"
+                                />
+                                <!-- TODO: infinite scroll with 3 selects -->
+                                <div aria-labelledby="inboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                                     ngbDropdownMenu>
+                                    <div class="scrollable-menu" role="listbox">
+                                        <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                                                *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                                                [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                                                class="dropdown-item collection-item text-truncate w-100"
+                                                ngbDropdownItem
+                                                type="button">
+                                            <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                                            <div
+                                                    class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col">
+                        <ng-container
+                                *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+                            <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                                 placement="bottom-start">
+                                <div class="position-relative right-addon" role="combobox">
+                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                       ngbDropdownToggle></i>
+                                    <input
+                                            (click)="inboundItemfilterDropdown.open();"
+                                            [readonly]="true"
+                                            [value]="selectedInboundItemfilters"
+                                            class="form-control w-100 scrollable-dropdown-input"
+                                            formControlName="constraint"
+                                            id="inboundItemfilterDropdown"
+                                            ngbDropdownAnchor
+                                            type="text"
+                                    />
+                                    <!-- TODO: infinite scroll with 3 selects -->
+                                    <div aria-labelledby="inboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                                         ngbDropdownMenu>
+                                        <div class="scrollable-menu" role="listbox">
+                                            <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                                                    class="dropdown-item collection-item text-truncate w-100"
+                                                    ngbDropdownItem
+                                                    type="button">
+                                                <div>{{ constraint.id }}</div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+                    </div>
+
+                    <div
+                            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
+                            class="col-sm-1">
+                        <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                               type="checkbox">
+                        <div (click)="toggleAutomatic(i)"
+                             [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                             class="toggle-switch">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+
+
+                    <div class="col-sm-2">
+                        <div class="btn-group">
+                            <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
+                                    type="button">
+                                <i class="fas fa-trash"></i>
+                            </button>
+
+
+                            <button (click)="unmarkForInboundPatternDeletion(i)"
+                                    *ngIf="markedForDeletionInboundPattern.includes(i)"
+                                    class="btn btn-warning "
+                                    type="button">
+                                <i class="fas fa-undo"></i>
+                            </button>
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
             </ng-container>
-          </div>
-
-          <div [style.visibility]="'hidden'" class="col-sm-1">
-            <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
-            <div
-              class="toggle-switch">
-              <div class="slider"></div>
-            </div>
-          </div>
-
-          <div class="col-sm-2">
-            <div class="btn-group">
-              <button (click)="markForOutboundPatternDeletion(i)" class="btn btn-outline-dark trash-button" type="button">
-              <i class="fas fa-trash"></i>
-            </button>
-            <button (click)="unmarkForOutboundPatternDeletion(i)" *ngIf="markedForDeletionOutboundPattern.includes(i)"
-                    class="btn btn-warning "
-                    type="button">
-              <i class="fas fa-undo"></i>
-            </button></div>
-          </div>
         </div>
-      </ng-container>
-    </div>
 
-    <span
-      (click)="addOutboundPattern()"
-      class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
+
+        <span (click)="addInboundPattern()"
+              class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
+
+
+        <div class="row mb-1 mt-5">
+            <div class="col">
+                <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }} </label>
+            </div>
+            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+                <div class="col">
+                    <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+                </div>
+            </ng-container>
+            <div class="col-sm-1 ">
+                <label class="label-box-2" style="visibility: hidden;">
+                    {{ 'ldn-new-service.form.label.automatic' | translate }}
+                </label>
+            </div>
+            <div class="col-sm-2 ">
+            </div>
+        </div>
+
+        <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
+             [class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)"
+             formGroupName="notifyServiceOutboundPatterns">
+
+            <ng-container [formGroupName]="i">
+
+                <!-- Input elements in a separate row -->
+                <div class="row mb-1">
+                    <div class="col">
+                        <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
+                             ngbDropdown
+                             placement="bottom-start">
+                            <div class="position-relative right-addon" role="combobox">
+                                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                   ngbDropdownToggle></i>
+                                <input
+                                        (click)="outboundPatternDropdown.open();"
+                                        [readonly]="true"
+                                        [value]="selectedOutboundPatterns"
+                                        class="form-control w-100 scrollable-dropdown-input"
+                                        formControlName="patternLabel"
+                                        id="outboundPatternDropdownButton"
+                                        ngbDropdownAnchor
+                                        type="text"
+                                />
+                                <!-- TODO: infinite scroll with 3-5 selects -->
+                                <div aria-labelledby="outboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                                     ngbDropdownMenu>
+                                    <div class="scrollable-menu" role="listbox">
+                                        <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                                                *ngFor="let pattern of outboundPatterns; let internalIndex = index"
+                                                [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                                                class="dropdown-item collection-item text-truncate w-100"
+                                                ngbDropdownItem
+                                                type="button">
+                                            <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                                            <div
+                                                    class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <ng-container
+                                *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+                            <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
+                                 ngbDropdown
+                                 placement="bottom-start">
+                                <div class="position-relative right-addon" role="combobox">
+                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                       ngbDropdownToggle></i>
+                                    <input
+                                            (click)="outboundItemfilterDropdown.open();"
+                                            [readonly]="true"
+                                            [value]="selectedOutboundItemfilters"
+                                            class="form-control w-100 scrollable-dropdown-input"
+                                            formControlName="constraint"
+                                            id="outboundItemfilterDropdown"
+                                            ngbDropdownAnchor
+                                            type="text"
+                                    />
+                                    <!-- TODO: infinite scroll with 3 selects -->
+                                    <div aria-labelledby="outboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                                         ngbDropdownMenu>
+                                        <div class="scrollable-menu" role="listbox">
+                                            <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                                                    class="dropdown-item collection-item text-truncate w-100"
+                                                    ngbDropdownItem
+                                                    type="button">
+                                                <div>{{ constraint.id }}</div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+                    </div>
+
+                    <div [style.visibility]="'hidden'" class="col-sm-1">
+                        <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
+                        <div
+                                class="toggle-switch">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+
+                    <div class="col-sm-2">
+                        <div class="btn-group">
+                            <button (click)="markForOutboundPatternDeletion(i)"
+                                    class="btn btn-outline-dark trash-button" type="button">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                            <button (click)="unmarkForOutboundPatternDeletion(i)"
+                                    *ngIf="markedForDeletionOutboundPattern.includes(i)"
+                                    class="btn btn-warning "
+                                    type="button">
+                                <i class="fas fa-undo"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+        </div>
+
+        <span
+                (click)="addOutboundPattern()"
+                class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
     </span>
 
 
-    <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
-      <button class="btn btn-primary" type="submit">
-        <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
-      </button>
-      <div class="d-flex">
-        <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
-          <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
-        </button>
-      </div>
-    </div>
-  </form>
+        <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
+            <button class="btn btn-primary" type="submit">
+                <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
+            </button>
+            <div class="d-flex">
+                <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
+                    <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
+                </button>
+            </div>
+        </div>
+    </form>
 </div>
 <ng-template #confirmModal>
 
-  <div>
+    <div>
 
-    <div class="modal-header">
-      <div>
-        <h4>{{'service.overview.edit.modal' | translate }}</h4>
-      </div>
-      <button (click)="closeModal()" aria-label="Close"
-              class="close" type="button">
-        <span aria-hidden="true">×</span>
-      </button>
-    </div>
+        <div class="modal-header">
+            <div>
+                <h4>{{'service.overview.edit.modal' | translate }}</h4>
+            </div>
+            <button (click)="closeModal()" aria-label="Close"
+                    class="close" type="button">
+                <span aria-hidden="true">×</span>
+            </button>
+        </div>
 
-    <div class="modal-body">
-      <div>
-        {{ 'service.overview.edit.body' | translate }}
-      </div>
-      <div class="mt-4">
-        <button (click)="closeModal()" class="btn btn-danger mr-2"
-                id="delete-confirm">{{ 'service.detail.return' | translate }}
-        </button>
-        <button (click)="patchService()"
-                class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
-        </button>
-      </div>
+        <div class="modal-body">
+            <div>
+                {{ 'service.overview.edit.body' | translate }}
+            </div>
+            <div class="mt-4">
+                <button (click)="closeModal()" class="btn btn-danger mr-2"
+                        id="delete-confirm">{{ 'service.detail.return' | translate }}
+                </button>
+                <button (click)="patchService()"
+                        class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </ng-template>
 
 <ng-template #resetFormModal>
 
-  <div>
+    <div>
 
-    <div class="modal-header">
-      <div>
-        <h4>{{'service.overview.reset-form.modal' | translate }}</h4>
-      </div>
-      <button (click)="closeModal()" aria-label="Close"
-              class="close" type="button">
-        <span aria-hidden="true">×</span>
-      </button>
-    </div>
+        <div class="modal-header">
+            <div>
+                <h4>{{'service.overview.reset-form.modal' | translate }}</h4>
+            </div>
+            <button (click)="closeModal()" aria-label="Close"
+                    class="close" type="button">
+                <span aria-hidden="true">×</span>
+            </button>
+        </div>
 
-    <div class="modal-body">
-      <div>
-        {{ 'service.overview.reset-form.body' | translate }}
-      </div>
-      <div class="mt-4">
-        <button (click)="closeModal()" class="mr-2 btn btn-danger"
-                id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
-        </button>
-        <button (click)="resetFormAndLeave()"
-                class="btn btn-primary custom-btn"
-                id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
-        </button>
-      </div>
+        <div class="modal-body">
+            <div>
+                {{ 'service.overview.reset-form.body' | translate }}
+            </div>
+            <div class="mt-4">
+                <button (click)="closeModal()" class="mr-2 btn btn-danger"
+                        id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
+                </button>
+                <button (click)="resetFormAndLeave()"
+                        class="btn btn-primary custom-btn"
+                        id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </ng-template>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
index 867053fa83..1a531c2057 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
@@ -18,62 +18,62 @@ import {RouteService} from '../../../core/services/route.service';
 import {provideMockStore} from '@ngrx/store/testing';
 
 describe('LdnServiceFormEditComponent', () => {
-  let component: LdnServiceFormEditComponent;
-  let fixture: ComponentFixture<LdnServiceFormEditComponent>;
+    let component: LdnServiceFormEditComponent;
+    let fixture: ComponentFixture<LdnServiceFormEditComponent>;
 
-  let ldnServicesService: any;
-  let ldnItemfiltersService: any;
-  let cdRefStub: any;
-  let modalService: any;
+    let ldnServicesService: any;
+    let ldnItemfiltersService: any;
+    let cdRefStub: any;
+    let modalService: any;
 
-  const translateServiceStub = {
-    get: () => of('translated-text'),
-    onLangChange: new EventEmitter(),
-    onTranslationChange: new EventEmitter(),
-    onDefaultLangChange: new EventEmitter()
-  };
-
-  beforeEach(async () => {
-    ldnServicesService = {
-      update: () => ({}),
+    const translateServiceStub = {
+        get: () => of('translated-text'),
+        onLangChange: new EventEmitter(),
+        onTranslationChange: new EventEmitter(),
+        onDefaultLangChange: new EventEmitter()
     };
-    ldnItemfiltersService = {
-      findAll: () => of(['item1', 'item2']),
-    };
-    cdRefStub = Object.assign({
-      detectChanges: () => fixture.detectChanges()
+
+    beforeEach(async () => {
+        ldnServicesService = {
+            update: () => ({}),
+        };
+        ldnItemfiltersService = {
+            findAll: () => of(['item1', 'item2']),
+        };
+        cdRefStub = Object.assign({
+            detectChanges: () => fixture.detectChanges()
+        });
+        modalService = {
+            open: () => {/*comment*/
+            }
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+            declarations: [LdnServiceFormEditComponent],
+            providers: [
+                {provide: LdnServicesService, useValue: ldnServicesService},
+                {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+                {provide: Router, useValue: new RouterStub()},
+                {provide: ActivatedRoute, useValue: new MockActivatedRoute()},
+                {provide: ChangeDetectorRef, useValue: cdRefStub},
+                {provide: NgbModal, useValue: modalService},
+                {provide: NotificationsService, useValue: NotificationsServiceStub},
+                {provide: TranslateService, useValue: translateServiceStub},
+                {provide: PaginationService, useValue: {}},
+                FormBuilder,
+                RouteService,
+                provideMockStore({}),
+            ]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(LdnServiceFormEditComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
     });
-    modalService = {
-      open: () => {/*comment*/
-      }
-    };
 
-    await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
-      declarations: [LdnServiceFormEditComponent],
-      providers: [
-        {provide: LdnServicesService, useValue: ldnServicesService},
-        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
-        {provide: Router, useValue: new RouterStub()},
-        {provide: ActivatedRoute, useValue: new MockActivatedRoute()},
-        {provide: ChangeDetectorRef, useValue: cdRefStub},
-        {provide: NgbModal, useValue: modalService},
-        {provide: NotificationsService, useValue: NotificationsServiceStub},
-        {provide: TranslateService, useValue: translateServiceStub},
-        {provide: PaginationService, useValue: {}},
-        FormBuilder,
-        RouteService,
-        provideMockStore({}),
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(LdnServiceFormEditComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index 8919c42f77..243a636e37 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -22,478 +22,478 @@ import {PaginationComponentOptions} from '../../../shared/pagination/pagination-
 import {NotifyServicePattern} from "../ldn-services-model/ldn-service-patterns.model";
 
 @Component({
-  selector: 'ds-ldn-service-form-edit',
-  templateUrl: './ldn-service-form-edit.component.html',
-  styleUrls: ['./ldn-service-form-edit.component.scss'],
-  animations: [
-    trigger('toggleAnimation', [
-      state('true', style({})),
-      state('false', style({})),
-      transition('true <=> false', animate('300ms ease-in')),
-    ]),
-  ],
+    selector: 'ds-ldn-service-form-edit',
+    templateUrl: './ldn-service-form-edit.component.html',
+    styleUrls: ['./ldn-service-form-edit.component.scss'],
+    animations: [
+        trigger('toggleAnimation', [
+            state('true', style({})),
+            state('false', style({})),
+            transition('true <=> false', animate('300ms ease-in')),
+        ]),
+    ],
 })
 export class LdnServiceFormEditComponent implements OnInit {
-  formModel: FormGroup;
-  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+    formModel: FormGroup;
+    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
 
-  public inboundPatterns: string[] = notifyPatterns;
-  public outboundPatterns: string[] = notifyPatterns;
-  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-  config: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 20
-  });
-  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'po',
-    pageSize: 20
-  });
-  @Input() public name: string;
-  @Input() public description: string;
-  @Input() public url: string;
-  @Input() public ldnUrl: string;
-  @Input() public score: number;
+    public inboundPatterns: string[] = notifyPatterns;
+    public outboundPatterns: string[] = notifyPatterns;
+    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+    config: FindListOptions = Object.assign(new FindListOptions(), {
+        elementsPerPage: 20
+    });
+    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+        id: 'po',
+        pageSize: 20
+    });
+    @Input() public name: string;
+    @Input() public description: string;
+    @Input() public url: string;
+    @Input() public ldnUrl: string;
+    @Input() public score: number;
     @Input() public inboundPattern: string;
-  @Input() public outboundPattern: string;
-  @Input() public constraint: string;
-  @Input() public automatic: boolean;
-  @Input() public headerKey: string;
-  markedForDeletionInboundPattern: number[] = [];
-  markedForDeletionOutboundPattern: number[] = [];
-  selectedOutboundPatterns: string[];
-  selectedInboundItemfilters: string[];
-  selectedOutboundItemfilters: string[];
-  selectedInboundPatterns: string[];
-  protected serviceId: string;
-  private deletedInboundPatterns: number[] = [];
-  private deletedOutboundPatterns: number[] = [];
-  private modalRef: any;
-  private service: LdnService;
+    @Input() public outboundPattern: string;
+    @Input() public constraint: string;
+    @Input() public automatic: boolean;
+    @Input() public headerKey: string;
+    markedForDeletionInboundPattern: number[] = [];
+    markedForDeletionOutboundPattern: number[] = [];
+    selectedOutboundPatterns: string[];
+    selectedInboundItemfilters: string[];
+    selectedOutboundItemfilters: string[];
+    selectedInboundPatterns: string[];
+    protected serviceId: string;
+    private deletedInboundPatterns: number[] = [];
+    private deletedOutboundPatterns: number[] = [];
+    private modalRef: any;
+    private service: LdnService;
 
-  constructor(
-    protected ldnServicesService: LdnServicesService,
-    private ldnItemfiltersService: LdnItemfiltersService,
-    private formBuilder: FormBuilder,
-    private router: Router,
-    private route: ActivatedRoute,
-    private cdRef: ChangeDetectorRef,
-    protected modalService: NgbModal,
-    private notificationService: NotificationsService,
-    private translateService: TranslateService,
-    protected paginationService: PaginationService
-  ) {
+    constructor(
+        protected ldnServicesService: LdnServicesService,
+        private ldnItemfiltersService: LdnItemfiltersService,
+        private formBuilder: FormBuilder,
+        private router: Router,
+        private route: ActivatedRoute,
+        private cdRef: ChangeDetectorRef,
+        protected modalService: NgbModal,
+        private notificationService: NotificationsService,
+        private translateService: TranslateService,
+        protected paginationService: PaginationService
+    ) {
 
-    this.formModel = this.formBuilder.group({
-      id: [''],
-      name: ['', Validators.required],
-      description: ['', Validators.required],
-      url: ['', Validators.required],
-      ldnUrl: ['', Validators.required],
-      score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]],inboundPattern: [''],
-      outboundPattern: [''],
-      constraintPattern: [''],
-      enabled: [''],
-      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-      type: LDN_SERVICE.value,
-    });
-  }
+        this.formModel = this.formBuilder.group({
+            id: [''],
+            name: ['', Validators.required],
+            description: ['', Validators.required],
+            url: ['', Validators.required],
+            ldnUrl: ['', Validators.required],
+            score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], inboundPattern: [''],
+            outboundPattern: [''],
+            constraintPattern: [''],
+            enabled: [''],
+            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+            type: LDN_SERVICE.value,
+        });
+    }
 
-  ngOnInit(): void {
-    this.route.params.subscribe((params) => {
-      this.serviceId = params.serviceId;
-      if (this.serviceId) {
-        this.fetchServiceData(this.serviceId);
-      }
-    });
-    this.setItemfilters();
-  }
+    ngOnInit(): void {
+        this.route.params.subscribe((params) => {
+            this.serviceId = params.serviceId;
+            if (this.serviceId) {
+                this.fetchServiceData(this.serviceId);
+            }
+        });
+        this.setItemfilters();
+    }
 
-  setItemfilters() {
-    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-      getFirstCompletedRemoteData());
-  }
+    setItemfilters() {
+        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+            getFirstCompletedRemoteData());
+    }
 
 
-  fetchServiceData(serviceId: string): void {
-    this.ldnServicesService.findById(serviceId).pipe(
-      getFirstCompletedRemoteData()
-    ).subscribe(
-      (data: RemoteData<LdnService>) => {
-        if (data.hasSucceeded) {
-          this.service = data.payload;
+    fetchServiceData(serviceId: string): void {
+        this.ldnServicesService.findById(serviceId).pipe(
+            getFirstCompletedRemoteData()
+        ).subscribe(
+            (data: RemoteData<LdnService>) => {
+                if (data.hasSucceeded) {
+                    this.service = data.payload;
 
-          this.formModel.patchValue({
-            id: this.service.id,
-            name: this.service.name,
-            description: this.service.description,
-            url: this.service.url,
-            score: this.service.score,ldnUrl: this.service.ldnUrl,
-            type: this.service.type,
-            enabled: this.service.enabled
-          });
-          this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
-          this.filterPatternObjectsAndPickLabel('notifyServiceOutboundPatterns', true)
-          /*const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-          inboundPatternsArray.clear();
-          console.log(" outside (pattern: any)")
-          this.service.notifyServiceInboundPatterns.forEach((patternObj: NotifyServicePattern) => {
-            const patternFormGroup = this.initializeInboundPatternFormGroup();
-            const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {...patternObj,patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj.pattern + '.label')})
+                    this.formModel.patchValue({
+                        id: this.service.id,
+                        name: this.service.name,
+                        description: this.service.description,
+                        url: this.service.url,
+                        score: this.service.score, ldnUrl: this.service.ldnUrl,
+                        type: this.service.type,
+                        enabled: this.service.enabled
+                    });
+                    this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
+                    this.filterPatternObjectsAndPickLabel('notifyServiceOutboundPatterns', true)
+                    /*const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+                    inboundPatternsArray.clear();
+                    console.log(" outside (pattern: any)")
+                    this.service.notifyServiceInboundPatterns.forEach((patternObj: NotifyServicePattern) => {
+                      const patternFormGroup = this.initializeInboundPatternFormGroup();
+                      const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {...patternObj,patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj.pattern + '.label')})
+                      patternFormGroup.patchValue(newPatternObjWithLabel);
+                      console.log("(pattern: any)")
+
+
+                      inboundPatternsArray.push(patternFormGroup);
+                      this.cdRef.detectChanges();
+                    })*/;
+
+                    /*const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+                    outboundPatternsArray.clear();
+                    this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
+                      const patternFormGroup = this.initializeOutboundPatternFormGroup();
+                      patternFormGroup.patchValue(pattern);
+                      outboundPatternsArray.push(patternFormGroup);
+                      this.cdRef.detectChanges();
+                    });*/
+                }
+            },
+        );
+    }
+
+    filterPatternObjectsAndPickLabel(formArrayName: string, isOutbound: boolean) {
+        const PatternsArray = this.formModel.get(formArrayName) as FormArray;
+        PatternsArray.clear();
+        let servicesToUse;
+        if (isOutbound) {
+            servicesToUse = this.service.notifyServiceOutboundPatterns
+        } else {
+            servicesToUse = this.service.notifyServiceInboundPatterns
+        }
+
+        servicesToUse.forEach((patternObj: NotifyServicePattern) => {
+            let patternFormGroup;
+            if (isOutbound) {
+                patternFormGroup = this.initializeOutboundPatternFormGroup();
+            } else {
+                patternFormGroup = this.initializeInboundPatternFormGroup();
+            }
+            const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {
+                ...patternObj,
+                patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label')
+            })
             patternFormGroup.patchValue(newPatternObjWithLabel);
             console.log("(pattern: any)")
 
-
-            inboundPatternsArray.push(patternFormGroup);
+            PatternsArray.push(patternFormGroup);
             this.cdRef.detectChanges();
-          })*/;
+        })
 
-          /*const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-          outboundPatternsArray.clear();
-          this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
-            const patternFormGroup = this.initializeOutboundPatternFormGroup();
-            patternFormGroup.patchValue(pattern);
-            outboundPatternsArray.push(patternFormGroup);
-            this.cdRef.detectChanges();
-          });*/
-        }
-      },
-    );
-  }
 
-  filterPatternObjectsAndPickLabel(formArrayName: string, isOutbound: boolean) {
-    const PatternsArray = this.formModel.get(formArrayName) as FormArray;
-    PatternsArray.clear();
-    let servicesToUse;
-    if (isOutbound) {
-      servicesToUse = this.service.notifyServiceOutboundPatterns
-    } else {
-      servicesToUse = this.service.notifyServiceInboundPatterns
     }
 
-    servicesToUse.forEach((patternObj: NotifyServicePattern) => {
-      let patternFormGroup;
-      if (isOutbound) {
-        patternFormGroup = this.initializeOutboundPatternFormGroup();
-      } else {
-        patternFormGroup = this.initializeInboundPatternFormGroup();
-      }
-      const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {
-        ...patternObj,
-        patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label')
-      })
-      patternFormGroup.patchValue(newPatternObjWithLabel);
-      console.log("(pattern: any)")
+    generatePatchOperations(): any[] {
+        const patchOperations: any[] = [];
 
-      PatternsArray.push(patternFormGroup);
-      this.cdRef.detectChanges();
-    })
-
-
-  }
-
-  generatePatchOperations(): any[] {
-    const patchOperations: any[] = [];
-
-    this.createReplaceOperation(patchOperations, 'name', '/name');
-    this.createReplaceOperation(patchOperations, 'description', '/description');
-    this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
-    this.createReplaceOperation(patchOperations, 'url', '/url');
+        this.createReplaceOperation(patchOperations, 'name', '/name');
+        this.createReplaceOperation(patchOperations, 'description', '/description');
+        this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
+        this.createReplaceOperation(patchOperations, 'url', '/url');
         this.createReplaceOperation(patchOperations, 'score', '/score');
 
-    this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
-    this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
+        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
+        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
 
 
-    this.deletedInboundPatterns.forEach(index => {
-      const removeOperation: Operation = {
-        op: 'remove',
-        path: `notifyServiceInboundPatterns[${index}]`
-      };
-      patchOperations.push(removeOperation);
-    });
-
-    this.deletedOutboundPatterns.forEach(index => {
-      const removeOperation: Operation = {
-        op: 'remove',
-        path: `notifyServiceOutboundPatterns[${index}]`
-      };
-      patchOperations.push(removeOperation);
-    });
-
-    return patchOperations;
-  }
-
-  onSubmit() {
-    this.openConfirmModal(this.confirmModal);
-  }
-
-  addInboundPattern() {
-    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-  }
-
-  addOutboundPattern() {
-    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-  }
-
-
-  selectOutboundPattern(patternValue: string, index: number): void {
-    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    patternArray.controls[index].patchValue({pattern: patternValue})
-    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
-
-  }
-
-  selectOutboundItemFilter(filterValue: string, index: number) {
-    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    filterArray.controls[index].patchValue({constraint: filterValue})
-  }
-
-  selectInboundPattern(patternValue: string, index: number): void {
-    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-    patternArray.controls[index].patchValue({pattern: patternValue})
-    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
-  }
-
-  selectInboundItemFilter(filterValue: string, index: number): void {
-    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-    filterArray.controls[index].patchValue({constraint: filterValue})
-  }
-
-  toggleAutomatic(i: number) {
-    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-    if (automaticControl) {
-      automaticControl.setValue(!automaticControl.value);
-    }
-  }
-
-  toggleEnabled() {
-    const newStatus = !this.formModel.get('enabled').value;
-
-    const patchOperation: Operation = {
-      op: 'replace',
-      path: '/enabled',
-      value: newStatus,
-    };
-
-    this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
-      getFirstCompletedRemoteData()
-    ).subscribe(
-      () => {
-
-        this.formModel.get('enabled').setValue(newStatus);
-        this.cdRef.detectChanges();
-      }
-    );
-  }
-
-
-  closeModal() {
-    this.modalRef.close();
-    this.cdRef.detectChanges();
-  }
-
-  openConfirmModal(content) {
-    this.modalRef = this.modalService.open(content);
-  }
-
-  openResetFormModal(content) {
-    this.modalRef = this.modalService.open(content);
-  }
-
-  patchService() {
-    this.deleteMarkedInboundPatterns();
-    this.deleteMarkedOutboundPatterns();
-
-    const patchOperations = this.generatePatchOperations();
-
-
-    this.ldnServicesService.patch(this.service, patchOperations).pipe(
-      getFirstCompletedRemoteData()
-    ).subscribe(
-      (rd: RemoteData<LdnService>) => {
-          if (rd.hasSucceeded) {
-        this.closeModal();
-        this.sendBack();
-        this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
-          this.translateService.get('admin.registries.services-formats.modify.success.content'));
-      }else {
-            this.notificationService.error(this.translateService.get('admin.registries.services-formats.modify.failure.head'),
-              this.translateService.get('admin.registries.services-formats.modify.failure.content'));
-            this.closeModal();
-    }
+        this.deletedInboundPatterns.forEach(index => {
+            const removeOperation: Operation = {
+                op: 'remove',
+                path: `notifyServiceInboundPatterns[${index}]`
+            };
+            patchOperations.push(removeOperation);
         });
-  }
 
-  resetFormAndLeave() {
-    this.sendBack();
-    this.closeModal();
-  }
+        this.deletedOutboundPatterns.forEach(index => {
+            const removeOperation: Operation = {
+                op: 'remove',
+                path: `notifyServiceOutboundPatterns[${index}]`
+            };
+            patchOperations.push(removeOperation);
+        });
 
-  markForInboundPatternDeletion(index: number) {
-    if (!this.markedForDeletionInboundPattern.includes(index)) {
-      this.markedForDeletionInboundPattern.push(index);
+        return patchOperations;
     }
-  }
 
-  unmarkForInboundPatternDeletion(index: number) {
-    const i = this.markedForDeletionInboundPattern.indexOf(index);
-    if (i !== -1) {
-      this.markedForDeletionInboundPattern.splice(i, 1);
+    onSubmit() {
+        this.openConfirmModal(this.confirmModal);
     }
-  }
 
-  markForOutboundPatternDeletion(index: number) {
-    if (!this.markedForDeletionOutboundPattern.includes(index)) {
-      this.markedForDeletionOutboundPattern.push(index);
+    addInboundPattern() {
+        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
     }
-  }
 
-  unmarkForOutboundPatternDeletion(index: number) {
-    const i = this.markedForDeletionOutboundPattern.indexOf(index);
-    if (i !== -1) {
-      this.markedForDeletionOutboundPattern.splice(i, 1);
+    addOutboundPattern() {
+        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
     }
-  }
 
-  deleteMarkedInboundPatterns() {
-    this.markedForDeletionInboundPattern.sort((a, b) => b - a);
-    const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
 
-    for (const index of this.markedForDeletionInboundPattern) {
-      if (index >= 0 && index < patternsArray.length) {
-        const patternGroup = patternsArray.at(index) as FormGroup;
-        const patternValue = patternGroup.value;
-        if (patternValue.isNew) {
-          patternsArray.removeAt(index);
-        } else {
-          this.deletedInboundPatterns.push(index);
+    selectOutboundPattern(patternValue: string, index: number): void {
+        const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+        patternArray.controls[index].patchValue({pattern: patternValue})
+        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+
+    }
+
+    selectOutboundItemFilter(filterValue: string, index: number) {
+        const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+        filterArray.controls[index].patchValue({constraint: filterValue})
+    }
+
+    selectInboundPattern(patternValue: string, index: number): void {
+        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+        patternArray.controls[index].patchValue({pattern: patternValue})
+        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+    }
+
+    selectInboundItemFilter(filterValue: string, index: number): void {
+        const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+        filterArray.controls[index].patchValue({constraint: filterValue})
+    }
+
+    toggleAutomatic(i: number) {
+        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+        if (automaticControl) {
+            automaticControl.setValue(!automaticControl.value);
         }
-      }
     }
 
-    this.markedForDeletionInboundPattern = [];
-  }
+    toggleEnabled() {
+        const newStatus = !this.formModel.get('enabled').value;
 
-
-  deleteMarkedOutboundPatterns() {
-    this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
-    const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-
-    for (const index of this.markedForDeletionOutboundPattern) {
-      if (index >= 0 && index < patternsArray.length) {
-        const patternGroup = patternsArray.at(index) as FormGroup;
-        const patternValue = patternGroup.value;
-        if (patternValue.isNew) {
-          patternsArray.removeAt(index);
-        } else {
-
-          this.deletedOutboundPatterns.push(index);
-        }
-      }
-    }
-
-    this.markedForDeletionOutboundPattern = [];
-  }
-
-  setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
-    console.log(formArrayName)
-    const formArray = this.formModel.get(formArrayName) as FormArray;
-    console.warn('inside setValueForControlInOutboundArray', formArray);
-    formArray.at(index).setValue(value);
-  }
-
-  setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
-    console.log(formArrayName)
-    const formArray = this.formModel.get(formArrayName) as FormArray;
-    console.warn('inside setValueForControlInInboundArray', formArray);
-    formArray.at(index).setValue(value);
-  }
-
-  private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
-    if (this.formModel.get(formControlName).dirty) {
-      patchOperations.push({
-        op: 'replace',
-        path,
-        value: this.formModel.get(formControlName).value,
-      });
-    }
-  }
-
-  private handlePatterns(patchOperations: any[], formArrayName: string): void {
-    console.log(this.formModel)
-    const patternsArray = this.formModel.get(formArrayName) as FormArray
-
-
-    for (let i = 0; i < patternsArray.length; i++) {
-      const patternGroup = patternsArray.at(i) as FormGroup;
-
-      const patternValue = patternGroup.value;
-      if (patternGroup.touched) {
-        delete patternValue?.patternLabel;
-        if (patternValue.isNew) {
-          delete patternValue.isNew;
-          const addOperation = {
-            op: 'add',
-            path: `${formArrayName}/-`,
-            value: patternValue,
-          };
-          patchOperations.push(addOperation);
-        } else {
-          const replaceOperation = {
+        const patchOperation: Operation = {
             op: 'replace',
-            path: `${formArrayName}[${i}]`,
-            value: patternValue,
-          };
-          patchOperations.push(replaceOperation);
-        }
-      }
+            path: '/enabled',
+            value: newStatus,
+        };
+
+        this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
+            getFirstCompletedRemoteData()
+        ).subscribe(
+            () => {
+
+                this.formModel.get('enabled').setValue(newStatus);
+                this.cdRef.detectChanges();
+            }
+        );
     }
-  }
 
-  private sendBack() {
-    this.router.navigateByUrl('admin/ldn/services');
-  }
 
-  private createOutboundPatternFormGroup(): FormGroup {
-    return this.formBuilder.group({
-      pattern: '',
-      patternLabel: 'Select a pattern',
-      constraint: '',
-      isNew: true,
-    });
-  }
+    closeModal() {
+        this.modalRef.close();
+        this.cdRef.detectChanges();
+    }
 
-  private createInboundPatternFormGroup(): FormGroup {
-    return this.formBuilder.group({
-      pattern: '',
-      patternLabel: 'Select a pattern',
-      constraint: '',
-      automatic: false,
-      isNew: true
-    });
-  }
+    openConfirmModal(content) {
+        this.modalRef = this.modalService.open(content);
+    }
 
-  private initializeOutboundPatternFormGroup(): FormGroup {
-    return this.formBuilder.group({
-      pattern: '',
-      patternLabel: '',
-      constraint: '',
-    });
-  }
+    openResetFormModal(content) {
+        this.modalRef = this.modalService.open(content);
+    }
 
-  private initializeInboundPatternFormGroup(): FormGroup {
-    return this.formBuilder.group({
-      pattern: '',
-      patternLabel: '',
-      constraint: '',
-      automatic: '',
-    });
-  }
+    patchService() {
+        this.deleteMarkedInboundPatterns();
+        this.deleteMarkedOutboundPatterns();
+
+        const patchOperations = this.generatePatchOperations();
+
+
+        this.ldnServicesService.patch(this.service, patchOperations).pipe(
+            getFirstCompletedRemoteData()
+        ).subscribe(
+            (rd: RemoteData<LdnService>) => {
+                if (rd.hasSucceeded) {
+                    this.closeModal();
+                    this.sendBack();
+                    this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
+                        this.translateService.get('admin.registries.services-formats.modify.success.content'));
+                } else {
+                    this.notificationService.error(this.translateService.get('admin.registries.services-formats.modify.failure.head'),
+                        this.translateService.get('admin.registries.services-formats.modify.failure.content'));
+                    this.closeModal();
+                }
+            });
+    }
+
+    resetFormAndLeave() {
+        this.sendBack();
+        this.closeModal();
+    }
+
+    markForInboundPatternDeletion(index: number) {
+        if (!this.markedForDeletionInboundPattern.includes(index)) {
+            this.markedForDeletionInboundPattern.push(index);
+        }
+    }
+
+    unmarkForInboundPatternDeletion(index: number) {
+        const i = this.markedForDeletionInboundPattern.indexOf(index);
+        if (i !== -1) {
+            this.markedForDeletionInboundPattern.splice(i, 1);
+        }
+    }
+
+    markForOutboundPatternDeletion(index: number) {
+        if (!this.markedForDeletionOutboundPattern.includes(index)) {
+            this.markedForDeletionOutboundPattern.push(index);
+        }
+    }
+
+    unmarkForOutboundPatternDeletion(index: number) {
+        const i = this.markedForDeletionOutboundPattern.indexOf(index);
+        if (i !== -1) {
+            this.markedForDeletionOutboundPattern.splice(i, 1);
+        }
+    }
+
+    deleteMarkedInboundPatterns() {
+        this.markedForDeletionInboundPattern.sort((a, b) => b - a);
+        const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+
+        for (const index of this.markedForDeletionInboundPattern) {
+            if (index >= 0 && index < patternsArray.length) {
+                const patternGroup = patternsArray.at(index) as FormGroup;
+                const patternValue = patternGroup.value;
+                if (patternValue.isNew) {
+                    patternsArray.removeAt(index);
+                } else {
+                    this.deletedInboundPatterns.push(index);
+                }
+            }
+        }
+
+        this.markedForDeletionInboundPattern = [];
+    }
+
+
+    deleteMarkedOutboundPatterns() {
+        this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
+        const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+
+        for (const index of this.markedForDeletionOutboundPattern) {
+            if (index >= 0 && index < patternsArray.length) {
+                const patternGroup = patternsArray.at(index) as FormGroup;
+                const patternValue = patternGroup.value;
+                if (patternValue.isNew) {
+                    patternsArray.removeAt(index);
+                } else {
+
+                    this.deletedOutboundPatterns.push(index);
+                }
+            }
+        }
+
+        this.markedForDeletionOutboundPattern = [];
+    }
+
+    setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
+        console.log(formArrayName)
+        const formArray = this.formModel.get(formArrayName) as FormArray;
+        console.warn('inside setValueForControlInOutboundArray', formArray);
+        formArray.at(index).setValue(value);
+    }
+
+    setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
+        console.log(formArrayName)
+        const formArray = this.formModel.get(formArrayName) as FormArray;
+        console.warn('inside setValueForControlInInboundArray', formArray);
+        formArray.at(index).setValue(value);
+    }
+
+    private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
+        if (this.formModel.get(formControlName).dirty) {
+            patchOperations.push({
+                op: 'replace',
+                path,
+                value: this.formModel.get(formControlName).value,
+            });
+        }
+    }
+
+    private handlePatterns(patchOperations: any[], formArrayName: string): void {
+        console.log(this.formModel)
+        const patternsArray = this.formModel.get(formArrayName) as FormArray
+
+
+        for (let i = 0; i < patternsArray.length; i++) {
+            const patternGroup = patternsArray.at(i) as FormGroup;
+
+            const patternValue = patternGroup.value;
+            if (patternGroup.touched) {
+                delete patternValue?.patternLabel;
+                if (patternValue.isNew) {
+                    delete patternValue.isNew;
+                    const addOperation = {
+                        op: 'add',
+                        path: `${formArrayName}/-`,
+                        value: patternValue,
+                    };
+                    patchOperations.push(addOperation);
+                } else {
+                    const replaceOperation = {
+                        op: 'replace',
+                        path: `${formArrayName}[${i}]`,
+                        value: patternValue,
+                    };
+                    patchOperations.push(replaceOperation);
+                }
+            }
+        }
+    }
+
+    private sendBack() {
+        this.router.navigateByUrl('admin/ldn/services');
+    }
+
+    private createOutboundPatternFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            pattern: '',
+            patternLabel: 'Select a pattern',
+            constraint: '',
+            isNew: true,
+        });
+    }
+
+    private createInboundPatternFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            pattern: '',
+            patternLabel: 'Select a pattern',
+            constraint: '',
+            automatic: false,
+            isNew: true
+        });
+    }
+
+    private initializeOutboundPatternFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            pattern: '',
+            patternLabel: '',
+            constraint: '',
+        });
+    }
+
+    private initializeInboundPatternFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            pattern: '',
+            patternLabel: '',
+            constraint: '',
+            automatic: '',
+        });
+    }
 }
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 a9ee3f0a55..298fa0501e 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
@@ -1,359 +1,366 @@
 <div class="container">
-  <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
-    <div class="d-flex">
-      <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
-    </div>
-    <!-- In the name section -->
-    <div class="mb-5 ">
-      <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
-      <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
-             name="name"
-             type="text"
-             class="form-control">
-    <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.name' | translate }}
-    </div>
-    </div>
-
-    <!-- In the description section -->
-    <div class="mb-5 mt-5 d-flex flex-column">
-      <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
-      <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                formControlName="description" id="description" name="description" class="form-control"></textarea>
-    </div>
-
-
-
-    <!-- In the url section -->
-    <div class="mb-5 mt-5">
-      <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
-      <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
-             name="url"
-             type="text"
-             class="form-control">
-    <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.url' | translate }}
-    </div>
-    </div>
-
-
-    <!-- In the ldnUrl section -->
-    <div class="mb-5 mt-5">
-        <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
-        <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-               [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
-               id="ldnUrl"
-               name="ldnUrl"
-               type="text"
-               class="form-control">
-      <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.ldnurl' | translate }}
-      </div>
-    </div>
-    <!-- In the score section -->
-    <div class="mb-2">
-      <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
-      <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
-             id="score"
-             name="score"
-             type="text">
-      <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.score' | translate }}
-      </div>
-    </div>
-
-    <!-- In the Inbound Patterns section -->
-    <div class="rowmb-2 mt-5">
-      <div class="col">
-        <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
-      </div>
-      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
-        <div class="col">
-          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+    <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
+        <div class="d-flex">
+            <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
         </div>
-        <div class="col-sm-1">
-          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-        </div>
-      </ng-container>
-      <div class="col-sm-2">
-      </div>
-    </div>
-
-    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-         formGroupName="notifyServiceInboundPatterns">
-
-      <ng-container [formGroupName]="i">
-
-
-        <div class="row mb-1">
-          <div class="col">
-            <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
-                    name="additionalInboundPattern{{i}}" required>
-              <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
-              <option *ngFor="let pattern of inboundPatterns"
-                      [value]="pattern">{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }} </option>
-            </select>
-            <div *ngIf="!patternSelected()" class="error-text">
-              {{ 'ldn-new-service.form.error.patterns' | translate }}
+        <!-- In the name section -->
+        <div class="mb-5 ">
+            <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control" formControlName="name"
+                   id="name"
+                   name="name"
+                   type="text">
+            <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.name' | translate }}
             </div>
-          </div>
+        </div>
+
+        <!-- In the description section -->
+        <div class="mb-5 mt-5 d-flex flex-column">
+            <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
+            <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
+                      class="form-control" formControlName="description" id="description" name="description"></textarea>
+        </div>
 
 
-          <div class="col">
-            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                   placement="bottom-start">
-                <div class="position-relative right-addon" role="combobox">
-                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                     ngbDropdownToggle></i>
-                  <input
-                    (click)="inboundItemfilterDropdown.open();"
-                    [readonly]="true"
-                    [value]="selectedInboundItemfilters"
-                    class="form-control w-100 scrollable-dropdown-input"
-                    formControlName="constraint"
-                    id="inboundItemfilterDropdown"
-                    ngbDropdownAnchor
-                    type="text"
-                  />
-                  <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                    <div  class="scrollable-menu" role="listbox">
-                    <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() " class="dropdown-item collection-item text-truncate w-100"
-                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                            ngbDropdownItem
-                            type="button">
-                      <div>{{ constraint.id }}</div>
-                    </button>
+        <!-- In the url section -->
+        <div class="mb-5 mt-5">
+            <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control" formControlName="url"
+                   id="url"
+                   name="url"
+                   type="text">
+            <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.url' | translate }}
+            </div>
+        </div>
+
+
+        <!-- In the ldnUrl section -->
+        <div class="mb-5 mt-5">
+            <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+                   formControlName="ldnUrl"
+                   id="ldnUrl"
+                   name="ldnUrl"
+                   type="text">
+            <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.ldnurl' | translate }}
+            </div>
+        </div>
+        <!-- In the score section -->
+        <div class="mb-2">
+            <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
+            <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
+                   [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
+                   id="score"
+                   name="score"
+                   type="text">
+            <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
+                {{ 'ldn-new-service.form.error.score' | translate }}
+            </div>
+        </div>
+
+        <!-- In the Inbound Patterns section -->
+        <div class="rowmb-2 mt-5">
+            <div class="col">
+                <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+            </div>
+            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+                <div class="col">
+                    <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+                </div>
+                <div class="col-sm-1">
+                    <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+                </div>
+            </ng-container>
+            <div class="col-sm-2">
+            </div>
+        </div>
+
+        <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
+             formGroupName="notifyServiceInboundPatterns">
+
+            <ng-container [formGroupName]="i">
+
+
+                <div class="row mb-1">
+                    <div class="col">
+                        <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
+                                name="additionalInboundPattern{{i}}" required>
+                            <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
+                            <option *ngFor="let pattern of inboundPatterns"
+                                    [value]="pattern">{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }} </option>
+                        </select>
+                        <div *ngIf="!patternSelected()" class="error-text">
+                            {{ 'ldn-new-service.form.error.patterns' | translate }}
+                        </div>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </ng-container>
-          </div>
-
-          <div
-            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
-            class="col-sm-1">
-            <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                   type="checkbox">
-            <div (click)="toggleAutomatic(i)"
-                 [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                 class="toggle-switch">
-              <div class="slider"></div>
-            </div>
-          </div>
-
-          <div class="col-sm-1">
-            <button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
-              <i class="fas fa-trash"></i>
-            </button>
-          </div>
-
-        </div>
-      </ng-container>
-    </div>
-
-    <span (click)="addInboundPattern()"
-          class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
 
+                    <div class="col">
+                        <ng-container
+                                *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+                            <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                                 placement="bottom-start">
+                                <div class="position-relative right-addon" role="combobox">
+                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                       ngbDropdownToggle></i>
+                                    <input
+                                            (click)="inboundItemfilterDropdown.open();"
+                                            [readonly]="true"
+                                            [value]="selectedInboundItemfilters"
+                                            class="form-control w-100 scrollable-dropdown-input"
+                                            formControlName="constraint"
+                                            id="inboundItemfilterDropdown"
+                                            ngbDropdownAnchor
+                                            type="text"
+                                    />
+                                    <!-- TODO: infinite scroll with 3 selects -->
+                                    <div aria-labelledby="inboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                                         ngbDropdownMenu>
+                                        <div class="scrollable-menu" role="listbox">
+                                            <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() "
+                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                                                    class="dropdown-item collection-item text-truncate w-100"
+                                                    ngbDropdownItem
+                                                    type="button">
+                                                <div>{{ constraint.id }}</div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+                    </div>
 
-
-    <!-- In the Outbound Patterns section -->
-    <div class="rowmb-1 mt-5">
-      <div class="col">
-        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
-      </div>
-      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
-        <div class="col">
-          <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-        </div>
-      </ng-container>
-      <div class="col-sm1 ">
-        <label class="label-box-2" style="visibility: hidden;">
-          {{ 'ldn-new-service.form.label.automatic' | translate }}
-        </label>
-      </div>
-      <div class="col-sm-2 ">
-      </div>
-    </div>
-
-    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
-         formGroupName="notifyServiceOutboundPatterns">
-
-      <ng-container [formGroupName]="i">
-
-        <!-- Input elements in a separate row -->
-        <div class="row mb-1">
-          <div class="col">
-            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
-                 placement="bottom-start">
-              <div class="position-relative right-addon" role="combobox">
-                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                   ngbDropdownToggle></i>
-                <input
-                  (click)="outboundPatternDropdown.open();"
-                  [readonly]="true"
-                  [value]="selectedOutboundPatterns"
-                  class="form-control w-100 scrollable-dropdown-input"
-                  formControlName="patternLabel"
-                  id="outboundPatternDropdownButton"
-                  ngbDropdownAnchor
-                  type="text"
-                />
-                <!-- TODO: infinite scroll with 3 selects -->
-                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                  <div  class="scrollable-menu" role="listbox">
-                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
-                          *ngFor="let pattern of outboundPatterns" ngbDropdownItem
-                          type="button"
-                          [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
-                    <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
                     <div
-                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
-                  </button>
-                </div>
-                </div>
-              </div>
-            </div>
-          </div>
+                            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
+                            class="col-sm-1">
+                        <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                               type="checkbox">
+                        <div (click)="toggleAutomatic(i)"
+                             [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                             class="toggle-switch">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+
+                    <div class="col-sm-1">
+                        <button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
 
-          <div class="col">
-            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                   placement="bottom-start">
-                <div class="position-relative right-addon" role="combobox">
-                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                     ngbDropdownToggle></i>
-                  <input
-                    (click)="outboundItemfilterDropdown.open();"
-                    [readonly]="true"
-                    [value]="selectedOutboundItemfilters"
-                    class="form-control w-100 scrollable-dropdown-input"
-                    formControlName="constraint"
-                    id="outboundItemfilterDropdown"
-                    ngbDropdownAnchor
-                    type="text"
-                  />
-                  <!-- TODO: infinite scroll with 3 selects -->
-                  <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                    <div  class="scrollable-menu" role="listbox">
-                    <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
-                            *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                            ngbDropdownItem
-                            type="button">
-                      <div>{{ constraint.id }}</div>
-                    </button>
-                  </div>
-                  </div>
                 </div>
-              </div>
             </ng-container>
-          </div>
-
-          <div [style.visibility]="'hidden'" class="col-sm-1">
-            <input hidden id="automatic{{i}}" name="automatic{{i}}"
-                   type="checkbox">
-            <div
-              class="toggle-switch">
-              <div class="slider"></div>
-            </div>
-          </div>
-
-          <div class="col-sm-1">
-            <button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
-              <i class="fas fa-trash"></i>
-            </button>
-          </div>
         </div>
-      </ng-container>
 
-    </div>
+        <span (click)="addInboundPattern()"
+              class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
-    <span (click)="addOutboundPattern()"
-          class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}
+
+        <!-- In the Outbound Patterns section -->
+        <div class="rowmb-1 mt-5">
+            <div class="col">
+                <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
+            </div>
+            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+                <div class="col">
+                    <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+                </div>
+            </ng-container>
+            <div class="col-sm1 ">
+                <label class="label-box-2" style="visibility: hidden;">
+                    {{ 'ldn-new-service.form.label.automatic' | translate }}
+                </label>
+            </div>
+            <div class="col-sm-2 ">
+            </div>
+        </div>
+
+        <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
+             formGroupName="notifyServiceOutboundPatterns">
+
+            <ng-container [formGroupName]="i">
+
+                <!-- Input elements in a separate row -->
+                <div class="row mb-1">
+                    <div class="col">
+                        <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
+                             ngbDropdown
+                             placement="bottom-start">
+                            <div class="position-relative right-addon" role="combobox">
+                                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                   ngbDropdownToggle></i>
+                                <input
+                                        (click)="outboundPatternDropdown.open();"
+                                        [readonly]="true"
+                                        [value]="selectedOutboundPatterns"
+                                        class="form-control w-100 scrollable-dropdown-input"
+                                        formControlName="patternLabel"
+                                        id="outboundPatternDropdownButton"
+                                        ngbDropdownAnchor
+                                        type="text"
+                                />
+                                <!-- TODO: infinite scroll with 3 selects -->
+                                <div aria-labelledby="outboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                                     ngbDropdownMenu>
+                                    <div class="scrollable-menu" role="listbox">
+                                        <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                                                *ngFor="let pattern of outboundPatterns"
+                                                [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate" class="dropdown-item collection-item text-truncate w-100"
+                                                ngbDropdownItem
+                                                type="button">
+                                            <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                                            <div
+                                                    class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col">
+                        <ng-container
+                                *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+                            <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
+                                 ngbDropdown
+                                 placement="bottom-start">
+                                <div class="position-relative right-addon" role="combobox">
+                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                       ngbDropdownToggle></i>
+                                    <input
+                                            (click)="outboundItemfilterDropdown.open();"
+                                            [readonly]="true"
+                                            [value]="selectedOutboundItemfilters"
+                                            class="form-control w-100 scrollable-dropdown-input"
+                                            formControlName="constraint"
+                                            id="outboundItemfilterDropdown"
+                                            ngbDropdownAnchor
+                                            type="text"
+                                    />
+                                    <!-- TODO: infinite scroll with 3 selects -->
+                                    <div aria-labelledby="outboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                                         ngbDropdownMenu>
+                                        <div class="scrollable-menu" role="listbox">
+                                            <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                                                    class="dropdown-item collection-item text-truncate w-100"
+                                                    ngbDropdownItem
+                                                    type="button">
+                                                <div>{{ constraint.id }}</div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+                    </div>
+
+                    <div [style.visibility]="'hidden'" class="col-sm-1">
+                        <input hidden id="automatic{{i}}" name="automatic{{i}}"
+                               type="checkbox">
+                        <div
+                                class="toggle-switch">
+                            <div class="slider"></div>
+                        </div>
+                    </div>
+
+                    <div class="col-sm-1">
+                        <button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
+                </div>
+            </ng-container>
+
+        </div>
+
+        <span (click)="addOutboundPattern()"
+              class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}
     </span>
-    <div class="mb-4">
-      &nbsp;
-    </div>
+        <div class="mb-4">
+            &nbsp;
+        </div>
 
-    <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
-      <button class="btn btn-primary" type="submit">
-        <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
-      </button>
-      <div class="d-flex">
-        <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
-          <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
-        </button>
-      </div>
-    </div>
+        <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
+            <button class="btn btn-primary" type="submit">
+                <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
+            </button>
+            <div class="d-flex">
+                <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
+                    <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
+                </button>
+            </div>
+        </div>
 
 
-  </form>
+    </form>
 </div>
 <ng-template #confirmModal>
 
-  <div>
+    <div>
 
-    <div class="modal-header">
-      <div>
-        <h4>{{'service.overview.create.modal' | translate }}</h4>
-      </div>
-      <button (click)="closeModal()" aria-label="Close"
-              class="close" type="button">
-        <span aria-hidden="true">×</span>
-      </button>
-    </div>
+        <div class="modal-header">
+            <div>
+                <h4>{{'service.overview.create.modal' | translate }}</h4>
+            </div>
+            <button (click)="closeModal()" aria-label="Close"
+                    class="close" type="button">
+                <span aria-hidden="true">×</span>
+            </button>
+        </div>
 
-    <div class="modal-body">
-      <div>
-        {{ 'service.create.body' | translate }}
-      </div>
-      <div class="mt-4">
-        <button (click)="closeModal()" class="btn btn-danger"
-                id="delete-confirm">{{ 'service.refuse.create' | translate }}
-        </button>
-        <button (click)="createService()"
-                class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
-        </button>
-      </div>
+        <div class="modal-body">
+            <div>
+                {{ 'service.create.body' | translate }}
+            </div>
+            <div class="mt-4">
+                <button (click)="closeModal()" class="btn btn-danger"
+                        id="delete-confirm">{{ 'service.refuse.create' | translate }}
+                </button>
+                <button (click)="createService()"
+                        class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </ng-template>
 
 <ng-template #resetFormModal>
 
-  <div>
+    <div>
 
-    <div class="modal-header">
-      <div>
-        <h4>{{'service.create.reset-form.modal' | translate }}</h4>
-      </div>
-      <button (click)="closeModal()" aria-label="Close"
-              class="close" type="button">
-        <span aria-hidden="true">×</span>
-      </button>
-    </div>
+        <div class="modal-header">
+            <div>
+                <h4>{{'service.create.reset-form.modal' | translate }}</h4>
+            </div>
+            <button (click)="closeModal()" aria-label="Close"
+                    class="close" type="button">
+                <span aria-hidden="true">×</span>
+            </button>
+        </div>
 
-    <div class="modal-body">
-      <div>
-        {{ 'service.create.reset-form.body' | translate }}
-      </div>
-      <div class="mt-4">
-        <button (click)="resetFormAndLeave()"
-                class="btn btn-primary mr-2 custom-btn"
-                id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
-        </button>
-        <button (click)="closeModal()" class="btn btn-danger"
-                id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
-        </button>
-      </div>
+        <div class="modal-body">
+            <div>
+                {{ 'service.create.reset-form.body' | translate }}
+            </div>
+            <div class="mt-4">
+                <button (click)="resetFormAndLeave()"
+                        class="btn btn-primary mr-2 custom-btn"
+                        id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
+                </button>
+                <button (click)="closeModal()" class="btn btn-danger"
+                        id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </ng-template>
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
index f017d4bab2..e6ed9efa73 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
@@ -17,69 +17,69 @@ import {of} from 'rxjs';
 import {EventEmitter} from '@angular/core';
 
 describe('LdnServiceFormComponent', () => {
-  let component: LdnServiceFormComponent;
-  let fixture: ComponentFixture<LdnServiceFormComponent>;
+    let component: LdnServiceFormComponent;
+    let fixture: ComponentFixture<LdnServiceFormComponent>;
 
-  let ldnServicesService: any;
-  let ldnItemfiltersService: any;
-  let notificationsService: any;
+    let ldnServicesService: any;
+    let ldnItemfiltersService: any;
+    let notificationsService: any;
 
-  const itemFiltersRdPL$ = createSuccessfulRemoteDataObject$(createPaginatedList([new Itemfilter()]));
-  const translateServiceStub = {
-    get: () => of('translated-text'),
-    onLangChange: new EventEmitter(),
-    onTranslationChange: new EventEmitter(),
-    onDefaultLangChange: new EventEmitter()
-  };
+    const itemFiltersRdPL$ = createSuccessfulRemoteDataObject$(createPaginatedList([new Itemfilter()]));
+    const translateServiceStub = {
+        get: () => of('translated-text'),
+        onLangChange: new EventEmitter(),
+        onTranslationChange: new EventEmitter(),
+        onDefaultLangChange: new EventEmitter()
+    };
 
-  beforeEach(async () => {
-    ldnItemfiltersService = jasmine.createSpyObj('ldnItemfiltersService', {
-      findAll: jasmine.createSpy('findAll'),
+    beforeEach(async () => {
+        ldnItemfiltersService = jasmine.createSpyObj('ldnItemfiltersService', {
+            findAll: jasmine.createSpy('findAll'),
+        });
+
+        ldnServicesService = jasmine.createSpyObj('ldnServicesService', {
+            create: jasmine.createSpy('create'),
+        });
+
+        notificationsService = jasmine.createSpyObj('notificationsService', {
+            success: jasmine.createSpy('success'),
+            error: jasmine.createSpy('error'),
+        });
+
+        await TestBed.configureTestingModule({
+            imports: [
+                ReactiveFormsModule,
+                RouterTestingModule,
+                NgbModalModule,
+                TranslateModule.forRoot()
+            ],
+            providers: [
+                {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+                {provide: LdnServicesService, useValue: ldnServicesService},
+                {provide: NotificationsService, useValue: notificationsService},
+                {provide: TranslateService, useValue: translateServiceStub},
+                {provide: Router, useValue: new RouterStub()},
+                {
+                    provide: NgbModal, useValue: {
+                        open: () => {/*comment*/
+                        }
+                    }
+                },
+                FormBuilder
+            ],
+            declarations: [LdnServiceFormComponent]
+        })
+            .compileComponents();
     });
 
-    ldnServicesService = jasmine.createSpyObj('ldnServicesService', {
-      create: jasmine.createSpy('create'),
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LdnServiceFormComponent);
+        component = fixture.componentInstance;
+        ldnItemfiltersService.findAll.and.returnValue(itemFiltersRdPL$);
+        fixture.detectChanges();
     });
 
-    notificationsService = jasmine.createSpyObj('notificationsService', {
-      success: jasmine.createSpy('success'),
-      error: jasmine.createSpy('error'),
+    it('should create', () => {
+        expect(component).toBeTruthy();
     });
-
-    await TestBed.configureTestingModule({
-      imports: [
-        ReactiveFormsModule,
-        RouterTestingModule,
-        NgbModalModule,
-        TranslateModule.forRoot()
-      ],
-      providers: [
-        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
-        {provide: LdnServicesService, useValue: ldnServicesService},
-        {provide: NotificationsService, useValue: notificationsService},
-        {provide: TranslateService, useValue: translateServiceStub},
-        {provide: Router, useValue: new RouterStub()},
-        {
-          provide: NgbModal, useValue: {
-            open: () => {/*comment*/
-            }
-          }
-        },
-        FormBuilder
-      ],
-      declarations: [LdnServiceFormComponent]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LdnServiceFormComponent);
-    component = fixture.componentInstance;
-    ldnItemfiltersService.findAll.and.returnValue(itemFiltersRdPL$);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index 54dfc2996c..334078398f 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -21,255 +21,258 @@ import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 
 @Component({
-  selector: 'ds-ldn-service-form',
-  templateUrl: './ldn-service-form.component.html',
-  styleUrls: ['./ldn-service-form.component.scss'],
-  animations: [
-    trigger('toggleAnimation', [
-      state('true', style({})),
-      state('false', style({})),
-      transition('true <=> false', animate('300ms ease-in')),
-    ]),
-  ],
+    selector: 'ds-ldn-service-form',
+    templateUrl: './ldn-service-form.component.html',
+    styleUrls: ['./ldn-service-form.component.scss'],
+    animations: [
+        trigger('toggleAnimation', [
+            state('true', style({})),
+            state('false', style({})),
+            transition('true <=> false', animate('300ms ease-in')),
+        ]),
+    ],
 })
 export class LdnServiceFormComponent implements OnInit {
-  formModel: FormGroup;
-  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-  public inboundPatterns: string[] = notifyPatterns;
-  public outboundPatterns: string[] = notifyPatterns;
-  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-  config: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 20
-  });
-  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'po',
-    pageSize: 20
-  });
-  @Input() public name: string;
-  @Input() public description: string;
-  @Input() public url: string;
-  @Input() public score: string;
+    formModel: FormGroup;
+    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+    public inboundPatterns: string[] = notifyPatterns;
+    public outboundPatterns: string[] = notifyPatterns;
+    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+    config: FindListOptions = Object.assign(new FindListOptions(), {
+        elementsPerPage: 20
+    });
+    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+        id: 'po',
+        pageSize: 20
+    });
+    @Input() public name: string;
+    @Input() public description: string;
+    @Input() public url: string;
+    @Input() public score: string;
     @Input() public ldnUrl: string;
-  @Input() public inboundPattern: string;
-  @Input() public outboundPattern: string;
-  @Input() public constraint: string;
-  @Input() public automatic: boolean;
-  @Input() public headerKey: string;
-  @Output() submitForm: EventEmitter<any> = new EventEmitter();
-  @Output() cancelForm: EventEmitter<any> = new EventEmitter();
-  selectedOutboundPatterns: string[];
-  selectedInboundPatterns: string[];
-  selectedInboundItemfilters: string[];
-  selectedOutboundItemfilters: string[];
-  private modalRef: any;
+    @Input() public inboundPattern: string;
+    @Input() public outboundPattern: string;
+    @Input() public constraint: string;
+    @Input() public automatic: boolean;
+    @Input() public headerKey: string;
+    @Output() submitForm: EventEmitter<any> = new EventEmitter();
+    @Output() cancelForm: EventEmitter<any> = new EventEmitter();
+    selectedOutboundPatterns: string[];
+    selectedInboundPatterns: string[];
+    selectedInboundItemfilters: string[];
+    selectedOutboundItemfilters: string[];
     hasInboundPattern: boolean;
     hasOutboundPattern: boolean;
     isScoreValid: boolean;
+    private modalRef: any;
 
-  constructor(
-    private ldnServicesService: LdnServicesService,
-    private ldnItemfiltersService: LdnItemfiltersService,
-    private formBuilder: FormBuilder,
-    private router: Router,
-    private notificationsService: NotificationsService,
-    private translateService: TranslateService,
-    private cdRef: ChangeDetectorRef,
-    protected modalService: NgbModal,
-  ) {
+    constructor(
+        private ldnServicesService: LdnServicesService,
+        private ldnItemfiltersService: LdnItemfiltersService,
+        private formBuilder: FormBuilder,
+        private router: Router,
+        private notificationsService: NotificationsService,
+        private translateService: TranslateService,
+        private cdRef: ChangeDetectorRef,
+        protected modalService: NgbModal,
+    ) {
 
-    this.formModel = this.formBuilder.group({
-      enabled: true,
-      id: [''],
-      name: ['', Validators.required],
-      description: [''],
-      url: ['', Validators.required],
-      score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]],ldnUrl: ['', Validators.required],
-      inboundPattern: [''],
-      outboundPattern: [''],
-      constraintPattern: [''],
-      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-      type: LDN_SERVICE.value,
-    });
-  }
-
-  ngOnInit(): void {
-    console.log(notifyPatterns)
-    this.setItemfilters();
-
-  }
-
-  setItemfilters() {
-    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-      getFirstCompletedRemoteData());
-  }
-
-  onSubmit() {
-    this.openConfirmModal(this.confirmModal);
-  }
-
-  openConfirmModal(content) {
-    this.modalRef = this.modalService.open(content);
-  }
-
-  openResetFormModal(content) {
-    this.modalRef = this.modalService.open(content);
-  }
-
-  createService() {
-    this.formModel.get('name').markAsTouched();
-    this.formModel.get('score').markAsTouched();this.formModel.get('url').markAsTouched();
-    this.formModel.get('ldnUrl').markAsTouched();this.formModel.get('notifyServiceInboundPatterns').markAsTouched();
-        this.formModel.get('notifyServiceOutboundPatterns').markAsTouched();
-
-    const name = this.formModel.get('name').value;
-    const url = this.formModel.get('url').value;
-    const score = this.formModel.get('score').value;
-    const ldnUrl = this.formModel.get('ldnUrl').value;
-
-    const hasInboundPattern = this.checkPatterns(this.formModel.get('notifyServiceInboundPatterns') as FormArray);
-    const hasOutboundPattern = this.checkPatterns(this.formModel.get('notifyServiceOutboundPatterns') as FormArray);
-
-        if (!name || !url || !ldnUrl || !score || (!hasInboundPattern && !hasOutboundPattern)) {
-      this.closeModal();
-      return;
+        this.formModel = this.formBuilder.group({
+            enabled: true,
+            id: [''],
+            name: ['', Validators.required],
+            description: [''],
+            url: ['', Validators.required],
+            score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], ldnUrl: ['', Validators.required],
+            inboundPattern: [''],
+            outboundPattern: [''],
+            constraintPattern: [''],
+            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+            type: LDN_SERVICE.value,
+        });
     }
 
-    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: {
-      pattern: string;
-      patternLabel: string
-    }) => {
-      const {patternLabel, ...rest} = pattern;
-      return rest;
-    });
+    ngOnInit(): void {
+        console.log(notifyPatterns)
+        this.setItemfilters();
 
-    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.map((pattern: {
-      pattern: string;
-      patternLabel: string
-    }) => {
-      const {patternLabel, ...rest} = pattern;
-      return rest;
-    });
+    }
 
-    const values = this.formModel.value;
+    setItemfilters() {
+        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+            getFirstCompletedRemoteData());
+    }
 
-    const ldnServiceData = this.ldnServicesService.create(values);
+    onSubmit() {
+        this.openConfirmModal(this.confirmModal);
+    }
 
-    ldnServiceData.pipe(
-      getFirstCompletedRemoteData()
-    ).subscribe((rd: RemoteData<LdnService>) => {
-      if (rd.hasSucceeded) {
-        this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
-          this.translateService.get('ldn-service-notification.created.success.body'));
+    openConfirmModal(content) {
+        this.modalRef = this.modalService.open(content);
+    }
 
-        this.sendBack();
-        this.closeModal();
-      } else {
-        this.notificationsService.error(this.translateService.get('ldn-service-notification.created.failure.title'),
-                this.translateService.get('ldn-service-notification.created.failure.body'));
+    openResetFormModal(content) {
+        this.modalRef = this.modalService.open(content);
+    }
+
+    createService() {
+        this.formModel.get('name').markAsTouched();
+        this.formModel.get('score').markAsTouched();
+        this.formModel.get('url').markAsTouched();
+        this.formModel.get('ldnUrl').markAsTouched();
+        this.formModel.get('notifyServiceInboundPatterns').markAsTouched();
+        this.formModel.get('notifyServiceOutboundPatterns').markAsTouched();
+
+        const name = this.formModel.get('name').value;
+        const url = this.formModel.get('url').value;
+        const score = this.formModel.get('score').value;
+        const ldnUrl = this.formModel.get('ldnUrl').value;
+
+        const hasInboundPattern = this.checkPatterns(this.formModel.get('notifyServiceInboundPatterns') as FormArray);
+        const hasOutboundPattern = this.checkPatterns(this.formModel.get('notifyServiceOutboundPatterns') as FormArray);
+
+        if (!name || !url || !ldnUrl || !score || (!hasInboundPattern && !hasOutboundPattern)) {
+            this.closeModal();
+            return;
+        }
+
+        this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: {
+            pattern: string;
+            patternLabel: string
+        }) => {
+            const {patternLabel, ...rest} = pattern;
+            return rest;
+        });
+
+        this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.map((pattern: {
+            pattern: string;
+            patternLabel: string
+        }) => {
+            const {patternLabel, ...rest} = pattern;
+            return rest;
+        });
+
+        const values = this.formModel.value;
+
+        const ldnServiceData = this.ldnServicesService.create(values);
+
+        ldnServiceData.pipe(
+            getFirstCompletedRemoteData()
+        ).subscribe((rd: RemoteData<LdnService>) => {
+            if (rd.hasSucceeded) {
+                this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
+                    this.translateService.get('ldn-service-notification.created.success.body'));
+
+                this.sendBack();
+                this.closeModal();
+            } else {
+                this.notificationsService.error(this.translateService.get('ldn-service-notification.created.failure.title'),
+                    this.translateService.get('ldn-service-notification.created.failure.body'));
                 this.closeModal();
             }
         });
     }
-      checkPatterns(formArray: FormArray): boolean {
-    for (let i = 0; i < formArray.length; i++) {
+
+    checkPatterns(formArray: FormArray): boolean {
+        for (let i = 0; i < formArray.length; i++) {
             const pattern = formArray.at(i).get('pattern').value;
             if (pattern) {
                 return true;
             }
         }
         return false;
-  }
-
-
-  resetFormAndLeave() {
-    this.sendBack();
-    this.closeModal();
-  }
-
-  closeModal() {
-    this.modalRef.close();
-    this.cdRef.detectChanges();
-  }
-
-  addInboundPattern() {
-    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-  }
-
-  removeInboundPattern(index: number) {
-    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-    notifyServiceInboundPatternsArray.removeAt(index);
-  }
-
-  addOutboundPattern() {
-    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-  }
-
-  removeOutboundPattern(index: number) {
-    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-    notifyServiceOutboundPatternsArray.removeAt(index);
-  }
-
-  toggleAutomatic(i: number) {
-    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-    if (automaticControl) {
-      automaticControl.setValue(!automaticControl.value);
     }
-  }
 
 
-  selectOutboundPattern(patternValue: string, index: number): void {
-    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    patternArray.controls[index].patchValue({pattern: patternValue})
-    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+    resetFormAndLeave() {
+        this.sendBack();
+        this.closeModal();
+    }
 
-  }
+    closeModal() {
+        this.modalRef.close();
+        this.cdRef.detectChanges();
+    }
 
-  selectInboundPattern(patternValue: string, index: number): void {
-    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-    patternArray.controls[index].patchValue({pattern: patternValue})
-    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+    addInboundPattern() {
+        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+    }
 
-  }
+    removeInboundPattern(index: number) {
+        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+        notifyServiceInboundPatternsArray.removeAt(index);
+    }
 
-  selectInboundItemFilter(filterValue: string, index: number): void {
-    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-    filterArray.controls[index].patchValue({constraint: filterValue})
-  }
+    addOutboundPattern() {
+        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+    }
 
-  selectOutboundItemFilter(filterValue: string, index: number) {
-    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    filterArray.controls[index].patchValue({constraint: filterValue})
-  }
+    removeOutboundPattern(index: number) {
+        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+        notifyServiceOutboundPatternsArray.removeAt(index);
+    }
 
-  private sendBack() {
-    this.router.navigateByUrl('admin/ldn/services');
-  }
+    toggleAutomatic(i: number) {
+        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+        if (automaticControl) {
+            automaticControl.setValue(!automaticControl.value);
+        }
+    }
 
 
-  private createOutboundPatternFormGroup(): FormGroup {
-    return this.formBuilder.group({
-      pattern: [''],
-      constraint: [''],
-      patternLabel: 'Select a Pattern',
-    });
-  }
+    selectOutboundPattern(patternValue: string, index: number): void {
+        const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+        patternArray.controls[index].patchValue({pattern: patternValue})
+        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
-  private createInboundPatternFormGroup(): FormGroup {
-    return this.formBuilder.group({
-      pattern: [''],
-      constraint: [''],
-      automatic: false,
-      patternLabel: 'Select a Pattern',
-    });
-  }
+    }
+
+    selectInboundPattern(patternValue: string, index: number): void {
+        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+        patternArray.controls[index].patchValue({pattern: patternValue})
+        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+
+    }
+
+    selectInboundItemFilter(filterValue: string, index: number): void {
+        const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+        filterArray.controls[index].patchValue({constraint: filterValue})
+    }
+
+    selectOutboundItemFilter(filterValue: string, index: number) {
+        const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+        filterArray.controls[index].patchValue({constraint: filterValue})
+    }
+
+    private sendBack() {
+        this.router.navigateByUrl('admin/ldn/services');
+    }
+
+
+    private createOutboundPatternFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            pattern: [''],
+            constraint: [''],
+            patternLabel: 'Select a Pattern',
+        });
+    }
+
+    private createInboundPatternFormGroup(): FormGroup {
+        return this.formBuilder.group({
+            pattern: [''],
+            constraint: [''],
+            automatic: false,
+            patternLabel: 'Select a Pattern',
+        });
+    }
 
 
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
index ced1371623..e6f62f29c6 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
@@ -3,23 +3,23 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {LdnServiceNewComponent} from './ldn-service-new.component';
 
 describe('LdnServiceNewComponent', () => {
-  let component: LdnServiceNewComponent;
-  let fixture: ComponentFixture<LdnServiceNewComponent>;
+    let component: LdnServiceNewComponent;
+    let fixture: ComponentFixture<LdnServiceNewComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [LdnServiceNewComponent]
-    })
-      .compileComponents();
-  });
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [LdnServiceNewComponent]
+        })
+            .compileComponents();
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LdnServiceNewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LdnServiceNewComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
index 773f042d11..b589d6fc65 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
@@ -1,9 +1,9 @@
 import {Component} from '@angular/core';
 
 @Component({
-  selector: 'ds-ldn-service-new',
-  templateUrl: './ldn-service-new.component.html',
-  styleUrls: ['./ldn-service-new.component.scss']
+    selector: 'ds-ldn-service-new',
+    templateUrl: './ldn-service-new.component.html',
+    styleUrls: ['./ldn-service-new.component.scss']
 })
 export class LdnServiceNewComponent {
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
index 3bd1bf249f..52b6a54ad9 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
@@ -5,63 +5,63 @@ import {PaginatedList} from '../../../core/data/paginated-list.model';
 import {Observable, of} from 'rxjs';
 // Create a mock data object for a single LDN notify service
 export const mockLdnService: LdnService = {
-  id: 1,
-  name: 'Service Name',
-  description: 'Service Description',
-  url: 'Service URL',
-  ldnUrl: 'Service LDN URL',
-  notifyServiceInboundPatterns: [
-    {
-      pattern: 'patternA',
-      constraint: 'itemFilterA',
-      automatic: false,
+    id: 1,
+    name: 'Service Name',
+    description: 'Service Description',
+    url: 'Service URL',
+    ldnUrl: 'Service LDN URL',
+    notifyServiceInboundPatterns: [
+        {
+            pattern: 'patternA',
+            constraint: 'itemFilterA',
+            automatic: false,
+        },
+        {
+            pattern: 'patternB',
+            constraint: 'itemFilterB',
+            automatic: true,
+        },
+    ],
+    notifyServiceOutboundPatterns: [
+        {
+            pattern: 'patternC',
+            constraint: 'itemFilterC',
+        },
+    ],
+    type: LDN_SERVICE,
+    _links: {
+        self: {
+            href: 'http://localhost/api/ldn/ldnservices/1',
+        },
     },
-    {
-      pattern: 'patternB',
-      constraint: 'itemFilterB',
-      automatic: true,
-    },
-  ],
-  notifyServiceOutboundPatterns: [
-    {
-      pattern: 'patternC',
-      constraint: 'itemFilterC',
-    },
-  ],
-  type: LDN_SERVICE,
-  _links: {
-    self: {
-      href: 'http://localhost/api/ldn/ldnservices/1',
-    },
-  },
 };
 
 
 const mockLdnServices = {
-  payload: {
-    elementsPerPage: 20,
-    totalPages: 1,
-    totalElements: 1,
-    currentPage: 1,
-    first: undefined,
-    prev: undefined,
-    next: undefined,
-    last: undefined,
-    page: [mockLdnService],
-    type: LDN_SERVICE,
-    self: undefined,
-    getPageLength: function () {
-      return this.page.length;
+    payload: {
+        elementsPerPage: 20,
+        totalPages: 1,
+        totalElements: 1,
+        currentPage: 1,
+        first: undefined,
+        prev: undefined,
+        next: undefined,
+        last: undefined,
+        page: [mockLdnService],
+        type: LDN_SERVICE,
+        self: undefined,
+        getPageLength: function () {
+            return this.page.length;
+        },
+        _links: {
+            self: {
+                href: 'http://localhost/api/ldn/ldnservices/1',
+            },
+            page: [],
+        },
     },
-    _links: {
-      self: {
-        href: 'http://localhost/api/ldn/ldnservices/1',
-      },
-      page: [],
-    },
-  },
-  hasSucceeded: true,
-  msToLive: 0,
+    hasSucceeded: true,
+    msToLive: 0,
 };
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
index 7aa6231b4d..43229c578f 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
@@ -23,25 +23,25 @@ import {PaginatedList} from '../../../core/data/paginated-list.model';
 @Injectable()
 @dataService(LDN_SERVICE_CONSTRAINT_FILTERS)
 export class LdnItemfiltersService extends IdentifiableDataService<Itemfilter> implements FindAllData<Itemfilter> {
-  private findAllData: FindAllDataImpl<Itemfilter>;
+    private findAllData: FindAllDataImpl<Itemfilter>;
 
-  constructor(
-    protected requestService: RequestService,
-    protected rdbService: RemoteDataBuildService,
-    protected objectCache: ObjectCacheService,
-    protected halService: HALEndpointService,
-    protected notificationsService: NotificationsService,
-  ) {
-    super('itemfilters', requestService, rdbService, objectCache, halService);
+    constructor(
+        protected requestService: RequestService,
+        protected rdbService: RemoteDataBuildService,
+        protected objectCache: ObjectCacheService,
+        protected halService: HALEndpointService,
+        protected notificationsService: NotificationsService,
+    ) {
+        super('itemfilters', requestService, rdbService, objectCache, halService);
 
-    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-  }
+        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    }
 
-  getEndpoint() {
-    return this.halService.getEndpoint(this.linkPath);
-  }
+    getEndpoint() {
+        return this.halService.getEndpoint(this.linkPath);
+    }
 
-  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
-    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-  }
+    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
+        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+    }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
index b8d28f0886..8935ce77d9 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
@@ -40,99 +40,99 @@ import {RequestParam} from '../../../core/cache/models/request-param.model';
 @Injectable()
 @dataService(LDN_SERVICE)
 export class LdnServicesService extends IdentifiableDataService<LdnService> implements FindAllData<LdnService>, DeleteData<LdnService>, PatchData<LdnService>, CreateData<LdnService> {
-  createData: CreateDataImpl<LdnService>;
-  private findAllData: FindAllDataImpl<LdnService>;
-  private deleteData: DeleteDataImpl<LdnService>;
-  private patchData: PatchDataImpl<LdnService>;
-  private comparator: ChangeAnalyzer<LdnService>;
-  private searchData: SearchDataImpl<LdnService>;
+    createData: CreateDataImpl<LdnService>;
+    private findAllData: FindAllDataImpl<LdnService>;
+    private deleteData: DeleteDataImpl<LdnService>;
+    private patchData: PatchDataImpl<LdnService>;
+    private comparator: ChangeAnalyzer<LdnService>;
+    private searchData: SearchDataImpl<LdnService>;
 
-  private findByPatternEndpoint = 'byInboundPattern';
+    private findByPatternEndpoint = 'byInboundPattern';
 
-  constructor(
-    protected requestService: RequestService,
-    protected rdbService: RemoteDataBuildService,
-    protected objectCache: ObjectCacheService,
-    protected halService: HALEndpointService,
-    protected notificationsService: NotificationsService,
-  ) {
-    super('ldnservices', requestService, rdbService, objectCache, halService);
+    constructor(
+        protected requestService: RequestService,
+        protected rdbService: RemoteDataBuildService,
+        protected objectCache: ObjectCacheService,
+        protected halService: HALEndpointService,
+        protected notificationsService: NotificationsService,
+    ) {
+        super('ldnservices', requestService, rdbService, objectCache, halService);
 
-    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-    this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
-    this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
-    this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
-  }
+        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+        this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+        this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
+        this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
+        this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
+    }
 
 
-  create(object: LdnService): Observable<RemoteData<LdnService>> {
-    return this.createData.create(object);
-  }
+    create(object: LdnService): Observable<RemoteData<LdnService>> {
+        return this.createData.create(object);
+    }
 
-  patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
-    return this.patchData.patch(object, operations);
-  }
+    patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
+        return this.patchData.patch(object, operations);
+    }
 
-  update(object: LdnService): Observable<RemoteData<LdnService>> {
-    return this.patchData.update(object);
-  }
+    update(object: LdnService): Observable<RemoteData<LdnService>> {
+        return this.patchData.update(object);
+    }
 
-  commitUpdates(method?: RestRequestMethod): void {
-    return this.patchData.commitUpdates(method);
-  }
+    commitUpdates(method?: RestRequestMethod): void {
+        return this.patchData.commitUpdates(method);
+    }
 
-  createPatchFromCache(object: LdnService): Observable<Operation[]> {
-    return this.patchData.createPatchFromCache(object);
-  }
+    createPatchFromCache(object: LdnService): Observable<Operation[]> {
+        return this.patchData.createPatchFromCache(object);
+    }
 
-  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-  }
+    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+    }
 
-  findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-    const params = [new RequestParam('pattern', pattern)];
-    const findListOptions = Object.assign(new FindListOptions(), options, {searchParams: params});
-    return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-  }
+    findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+        const params = [new RequestParam('pattern', pattern)];
+        const findListOptions = Object.assign(new FindListOptions(), options, {searchParams: params});
+        return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+    }
 
-  public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-    return this.deleteData.delete(objectId, copyVirtualMetadata);
-  }
+    public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+        return this.deleteData.delete(objectId, copyVirtualMetadata);
+    }
 
-  public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-    return this.deleteData.deleteByHref(href, copyVirtualMetadata);
-  }
+    public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+        return this.deleteData.deleteByHref(href, copyVirtualMetadata);
+    }
 
-  public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
-    const requestId = this.requestService.generateRequestId();
-    this.getBrowseEndpoint().pipe(
-      take(1),
-      map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
-      map((endpoint: string) => {
-        const body = this.getInvocationFormData(parameters, files);
-        return new MultipartPostRequest(requestId, endpoint, body);
-      })
-    ).subscribe((request: RestRequest) => this.requestService.send(request));
+    public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
+        const requestId = this.requestService.generateRequestId();
+        this.getBrowseEndpoint().pipe(
+            take(1),
+            map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
+            map((endpoint: string) => {
+                const body = this.getInvocationFormData(parameters, files);
+                return new MultipartPostRequest(requestId, endpoint, body);
+            })
+        ).subscribe((request: RestRequest) => this.requestService.send(request));
 
-    return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
-  }
+        return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
+    }
 
-  public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
-    return this.findById(scriptName).pipe(
-      getFirstCompletedRemoteData(),
-      map((rd: RemoteData<LdnService>) => {
-        return hasValue(rd.payload);
-      }),
-    );
-  }
+    public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
+        return this.findById(scriptName).pipe(
+            getFirstCompletedRemoteData(),
+            map((rd: RemoteData<LdnService>) => {
+                return hasValue(rd.payload);
+            }),
+        );
+    }
 
-  private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
-    const form: FormData = new FormData();
-    form.set('properties', JSON.stringify(constrain));
-    files.forEach((file: File) => {
-      form.append('file', file);
-    });
-    return form;
-  }
+    private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
+        const form: FormData = new FormData();
+        form.set('properties', JSON.stringify(constrain));
+        files.forEach((file: File) => {
+            form.append('file', file);
+        });
+        return form;
+    }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
index e19f986e1a..89b0a8937d 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
@@ -1,84 +1,84 @@
 <div class="container">
-  <div class="d-flex">
-    <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
-  </div>
-  <div class="d-flex justify-content-end">
-    <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
-      class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
-  </div>
-  <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
-                 [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true"
-                 [pageInfoState]="(ldnServicesRD$ | async)?.payload"
-                 [paginationOptions]="pageConfig">
-    <div class="table-responsive">
-      <table class="table table-striped table-hover">
-        <thead>
-        <tr>
-          <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
-          <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
-          <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
-          <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
-          <td>{{ ldnService.name }}</td>
-          <td>{{ ldnService.description }}</td>
-          <td>
+    <div class="d-flex">
+        <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
+    </div>
+    <div class="d-flex justify-content-end">
+        <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
+                class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
+    </div>
+    <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
+                   [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
+                   [hideGear]="true"
+                   [hidePagerWhenSinglePage]="true"
+                   [pageInfoState]="(ldnServicesRD$ | async)?.payload"
+                   [paginationOptions]="pageConfig">
+        <div class="table-responsive">
+            <table class="table table-striped table-hover">
+                <thead>
+                <tr>
+                    <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
+                    <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
+                    <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
+                    <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
+                    <td>{{ ldnService.name }}</td>
+                    <td>{{ ldnService.description }}</td>
+                    <td>
                         <span (click)="toggleStatus(ldnService, ldnServicesService)"
                               [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
                               [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
                               class="status-indicator">
                             {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
                         </span>
-          </td>
-          <td>
-            <div class="btn-group">
-              <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
-                <i class="fas fa-trash"></i>
-              </button>
-              <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
-                      class="btn btn-outline-dark">
-                <i class="fas fa-edit"></i>
-              </button>
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-  </ds-pagination>
+                    </td>
+                    <td>
+                        <div class="btn-group">
+                            <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                            <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
+                                    class="btn btn-outline-dark">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </ds-pagination>
 </div>
 
 <ng-template #deleteModal>
 
-  <div>
+    <div>
 
-    <div class="modal-header">
-      <div>
-        <h4>{{'service.overview.delete.header' | translate }}</h4>
-      </div>
-      <button (click)="closeModal()" aria-label="Close"
-              class="close" type="button">
-        <span aria-hidden="true">×</span>
-      </button>
-    </div>
+        <div class="modal-header">
+            <div>
+                <h4>{{'service.overview.delete.header' | translate }}</h4>
+            </div>
+            <button (click)="closeModal()" aria-label="Close"
+                    class="close" type="button">
+                <span aria-hidden="true">×</span>
+            </button>
+        </div>
 
-    <div class="modal-body">
-      <div>
-        {{ 'service.overview.delete.body' | translate }}
-      </div>
-      <div class="mt-4">
-        <button (click)="closeModal()"
-                class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
-        <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
-                class="btn btn-danger"
-                id="delete-confirm">{{ 'service.overview.delete' | translate }}
-        </button>
-      </div>
+        <div class="modal-body">
+            <div>
+                {{ 'service.overview.delete.body' | translate }}
+            </div>
+            <div class="mt-4">
+                <button (click)="closeModal()"
+                        class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
+                <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
+                        class="btn btn-danger"
+                        id="delete-confirm">{{ 'service.overview.delete' | translate }}
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </ng-template>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
index 87a1da27a1..ff54f19455 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
@@ -11,44 +11,44 @@ import {PaginationServiceStub} from '../../../shared/testing/pagination-service.
 import {of} from 'rxjs';
 
 describe('LdnServicesOverviewComponent', () => {
-  let component: LdnServicesOverviewComponent;
-  let fixture: ComponentFixture<LdnServicesOverviewComponent>;
+    let component: LdnServicesOverviewComponent;
+    let fixture: ComponentFixture<LdnServicesOverviewComponent>;
 
-  const translateServiceStub = {
-    get: () => of('translated-text'),
-    onLangChange: new EventEmitter(),
-    onTranslationChange: new EventEmitter(),
-    onDefaultLangChange: new EventEmitter()
-  };
+    const translateServiceStub = {
+        get: () => of('translated-text'),
+        onLangChange: new EventEmitter(),
+        onTranslationChange: new EventEmitter(),
+        onDefaultLangChange: new EventEmitter()
+    };
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
-      declarations: [LdnServicesOverviewComponent],
-      providers: [
-        {provide: LdnServicesService, useValue: {}},
-        {provide: PaginationService, useValue: new PaginationServiceStub()},
-        {
-          provide: NgbModal, useValue: {
-            open: () => {/*comment*/
-            }
-          }
-        },
-        {provide: ChangeDetectorRef, useValue: {}},
-        {provide: NotificationsService, useValue: NotificationsServiceStub},
-        {provide: TranslateService, useValue: translateServiceStub},
-      ]
-    })
-      .compileComponents();
-  });
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [TranslateModule.forRoot()],
+            declarations: [LdnServicesOverviewComponent],
+            providers: [
+                {provide: LdnServicesService, useValue: {}},
+                {provide: PaginationService, useValue: new PaginationServiceStub()},
+                {
+                    provide: NgbModal, useValue: {
+                        open: () => {/*comment*/
+                        }
+                    }
+                },
+                {provide: ChangeDetectorRef, useValue: {}},
+                {provide: NotificationsService, useValue: NotificationsServiceStub},
+                {provide: TranslateService, useValue: translateServiceStub},
+            ]
+        })
+            .compileComponents();
+    });
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LdnServicesOverviewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LdnServicesOverviewComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
index 9fa237fc4e..ec30cc0ba6 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
@@ -1,11 +1,11 @@
 import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-  TemplateRef,
-  ViewChild
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild
 } from '@angular/core';
 import {Observable, Subscription} from 'rxjs';
 import {RemoteData} from '../../../core/data/remote-data';
@@ -25,122 +25,122 @@ import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
-  selector: 'ds-ldn-services-directory',
-  templateUrl: './ldn-services-directory.component.html',
-  styleUrls: ['./ldn-services-directory.component.scss'],
-  changeDetection: ChangeDetectionStrategy.Default
+    selector: 'ds-ldn-services-directory',
+    templateUrl: './ldn-services-directory.component.html',
+    styleUrls: ['./ldn-services-directory.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Default
 })
 export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
 
-  selectedServiceId: string | number | null = null;
-  servicesData: any[] = [];
-  @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
-  ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
-  config: FindListOptions = Object.assign(new FindListOptions(), {
-    elementsPerPage: 20
-  });
-  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-    id: 'po',
-    pageSize: 20
-  });
-  isProcessingSub: Subscription;
-  private modalRef: any;
+    selectedServiceId: string | number | null = null;
+    servicesData: any[] = [];
+    @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
+    ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
+    config: FindListOptions = Object.assign(new FindListOptions(), {
+        elementsPerPage: 20
+    });
+    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+        id: 'po',
+        pageSize: 20
+    });
+    isProcessingSub: Subscription;
+    private modalRef: any;
 
 
-  constructor(
-    protected ldnServicesService: LdnServicesService,
-    protected paginationService: PaginationService,
-    protected modalService: NgbModal,
-    private cdRef: ChangeDetectorRef,
-    private notificationService: NotificationsService,
-    private translateService: TranslateService,
-  ) {
-  }
-
-  ngOnInit(): void {
-    this.setLdnServices();
-  }
-
-  setLdnServices() {
-    this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
-      switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
-        getFirstCompletedRemoteData()
-      ))
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.paginationService.clearPagination(this.pageConfig.id);
-    if (hasValue(this.isProcessingSub)) {
-      this.isProcessingSub.unsubscribe();
+    constructor(
+        protected ldnServicesService: LdnServicesService,
+        protected paginationService: PaginationService,
+        protected modalService: NgbModal,
+        private cdRef: ChangeDetectorRef,
+        private notificationService: NotificationsService,
+        private translateService: TranslateService,
+    ) {
     }
-  }
 
-  openDeleteModal(content) {
-    this.modalRef = this.modalService.open(content);
-  }
-
-  closeModal() {
-    this.modalRef.close();
-    this.cdRef.detectChanges();
-  }
-
-  selectServiceToDelete(serviceId: number) {
-    this.selectedServiceId = serviceId;
-    this.openDeleteModal(this.deleteModal);
-  }
-
-  deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
-    if (this.selectedServiceId !== null) {
-      ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
-        if (rd.hasSucceeded) {
-          this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
-          this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
-            map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
-              if (remoteData.hasSucceeded) {
-                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
-              }
-              return remoteData;
-            })
-          );
-          this.cdRef.detectChanges();
-          this.closeModal();
-          this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
-            this.translateService.get('ldn-service-delete.notification.success.content'));
-        } else {
-          this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
-            this.translateService.get('ldn-service-delete.notification.error.content'));
-          this.cdRef.detectChanges();
-        }
-      });
+    ngOnInit(): void {
+        this.setLdnServices();
     }
-  }
 
+    setLdnServices() {
+        this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
+            switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
+                getFirstCompletedRemoteData()
+            ))
+        );
+    }
 
-  toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
-    const newStatus = !ldnService.enabled;
-    const originalStatus = ldnService.enabled;
-
-    const patchOperation: Operation = {
-      op: 'replace',
-      path: '/enabled',
-      value: newStatus,
-    };
-
-    ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
-      (rd: RemoteData<LdnService>) => {
-        if (rd.hasSucceeded) {
-          ldnService.enabled = newStatus;
-          this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
-            this.translateService.get('ldn-enable-service.notification.success.content'));
-        } else {
-          ldnService.enabled = originalStatus;
-          this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
-            this.translateService.get('ldn-enable-service.notification.error.content'));
+    ngOnDestroy(): void {
+        this.paginationService.clearPagination(this.pageConfig.id);
+        if (hasValue(this.isProcessingSub)) {
+            this.isProcessingSub.unsubscribe();
         }
-      }
-    );
-  }
+    }
+
+    openDeleteModal(content) {
+        this.modalRef = this.modalService.open(content);
+    }
+
+    closeModal() {
+        this.modalRef.close();
+        this.cdRef.detectChanges();
+    }
+
+    selectServiceToDelete(serviceId: number) {
+        this.selectedServiceId = serviceId;
+        this.openDeleteModal(this.deleteModal);
+    }
+
+    deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
+        if (this.selectedServiceId !== null) {
+            ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
+                if (rd.hasSucceeded) {
+                    this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
+                    this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
+                        map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
+                            if (remoteData.hasSucceeded) {
+                                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
+                            }
+                            return remoteData;
+                        })
+                    );
+                    this.cdRef.detectChanges();
+                    this.closeModal();
+                    this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
+                        this.translateService.get('ldn-service-delete.notification.success.content'));
+                } else {
+                    this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
+                        this.translateService.get('ldn-service-delete.notification.error.content'));
+                    this.cdRef.detectChanges();
+                }
+            });
+        }
+    }
+
+
+    toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
+        const newStatus = !ldnService.enabled;
+        const originalStatus = ldnService.enabled;
+
+        const patchOperation: Operation = {
+            op: 'replace',
+            path: '/enabled',
+            value: newStatus,
+        };
+
+        ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
+            (rd: RemoteData<LdnService>) => {
+                if (rd.hasSucceeded) {
+                    ldnService.enabled = newStatus;
+                    this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
+                        this.translateService.get('ldn-enable-service.notification.success.content'));
+                } else {
+                    ldnService.enabled = originalStatus;
+                    this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
+                        this.translateService.get('ldn-enable-service.notification.error.content'));
+                }
+            }
+        );
+    }
 
 
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
index 55b7ad8b98..06595b5135 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
@@ -9,23 +9,23 @@ import {ResourceType} from '../../../core/shared/resource-type';
 @typedObject
 @inheritSerialization(CacheableObject)
 export class Itemfilter extends CacheableObject {
-  static type = LDN_SERVICE_CONSTRAINT_FILTER;
+    static type = LDN_SERVICE_CONSTRAINT_FILTER;
 
-  @excludeFromEquals
-  @autoserialize
-  type: ResourceType;
+    @excludeFromEquals
+    @autoserialize
+    type: ResourceType;
 
-  @autoserialize
-  id: string;
+    @autoserialize
+    id: string;
 
-  @deserialize
-  _links: {
-    self: {
-      href: string;
+    @deserialize
+    _links: {
+        self: {
+            href: string;
+        };
     };
-  };
 
-  get self(): string {
-    return this._links.self.href;
-  }
+    get self(): string {
+        return this._links.self.href;
+    }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
index 7fb8072a6f..df42e237ba 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
@@ -4,10 +4,10 @@ import {autoserialize} from 'cerialize';
  * notify service patterns
  */
 export class NotifyServicePattern {
-  @autoserialize
-  pattern: string;
-  @autoserialize
-  constraint: string;
-  @autoserialize
-  automatic: string;
+    @autoserialize
+    pattern: string;
+    @autoserialize
+    constraint: string;
+    @autoserialize
+    automatic: string;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
index 040e4d37b8..d9e45d91a9 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
@@ -2,7 +2,7 @@
  * List of services statuses
  */
 export enum LdnServiceStatus {
-  UNKOWN,
-  DISABLED,
-  ENABLED,
+    UNKOWN,
+    DISABLED,
+    ENABLED,
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
index 5121e47f69..500cefbd52 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
@@ -1,3 +1,3 @@
 export class LdnServiceConstrain {
-  void: any;
+    void: any;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
index c734503d95..d3f55c815e 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
@@ -2,9 +2,9 @@
  * List of parameter types used for scripts
  */
 export enum LdnServiceConstrainType {
-  STRING = 'String',
-  DATE = 'date',
-  BOOLEAN = 'boolean',
-  FILE = 'InputStream',
-  OUTPUT = 'OutputStream'
+    STRING = 'String',
+    DATE = 'date',
+    BOOLEAN = 'boolean',
+    FILE = 'InputStream',
+    OUTPUT = 'OutputStream'
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
index 8620bfc80c..39ad6859ac 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
@@ -1,30 +1,30 @@
 export const notifyPatterns = [
 
-  'ack-accept',
+    'ack-accept',
 
-  'ack-reject',
+    'ack-reject',
 
-  'ack-tentative-accept',
+    'ack-tentative-accept',
 
-  'ack-tentative-reject',
+    'ack-tentative-reject',
 
-  'announce-endorsement',
+    'announce-endorsement',
 
-  'announce-ingest',
+    'announce-ingest',
 
-  'announce-relationship',
+    'announce-relationship',
 
-  'announce-review',
+    'announce-review',
 
-  'announce-service-result',
+    'announce-service-result',
 
-  'request-endorsement',
+    'request-endorsement',
 
-  'request-ingest',
+    'request-ingest',
 
-  'request-review',
+    'request-review',
 
-  'undo-offer',
+    'undo-offer',
 
 ];
 

From 64d9aba08c1498ebb49ac08b926321e74002e662 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 19:40:54 +0100
Subject: [PATCH 15/21] CST-12455_coar-7sync Small fix

---
 .../ldn-service-form.component.html           | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

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 298fa0501e..1597a7fe5e 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
@@ -87,18 +87,41 @@
             <ng-container [formGroupName]="i">
 
 
-                <div class="row mb-1">
-                    <div class="col">
-                        <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
-                                name="additionalInboundPattern{{i}}" required>
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
-                            <option *ngFor="let pattern of inboundPatterns"
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }} </option>
-                        </select>
-                        <div *ngIf="!patternSelected()" class="error-text">
-                            {{ 'ldn-new-service.form.error.patterns' | translate }}
-                        </div>
-                    </div>
+        <div class="row mb-1">
+          <div class="col">
+            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown
+                 placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle>
+
+                </i>
+                <input
+                  (click)="inboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedInboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="inboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
+                  <div  class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
+                      *ngFor="let pattern of inboundPatterns"
+                      ngbDropdownItem
+                      type="button"
+                      [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
 
                     <div class="col">

From bb3cbadfa481d1870696e3c732e4506230cc2c91 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 22:03:23 +0100
Subject: [PATCH 16/21] CST-12455_coar-7sync Last refactor and TODO removal

---
 .../admin-ldn-services-routing.module.ts      |  46 +-
 .../admin-ldn-services.module.ts              |  26 +-
 .../ldn-service-form-edit.component.html      | 753 +++++++--------
 .../ldn-service-form-edit.component.spec.ts   | 104 +--
 .../ldn-service-form-edit.component.ts        | 862 +++++++++---------
 .../ldn-service-form.component.html           | 662 +++++++-------
 .../ldn-service-form.component.spec.ts        | 114 +--
 .../ldn-service-form.component.ts             | 455 ++++-----
 .../ldn-service-new.component.spec.ts         |  32 +-
 .../ldn-service-new.component.ts              |   6 +-
 .../ldnServicesRD$-mock.ts                    | 102 +--
 .../ldn-itemfilters-data.service.ts           |  34 +-
 .../ldn-services-data.service.ts              | 156 ++--
 .../ldn-services-directory.component.html     | 138 +--
 .../ldn-services-directory.component.spec.ts  |  72 +-
 .../ldn-services-directory.component.ts       | 214 ++---
 .../ldn-service-itemfilters.ts                |  28 +-
 .../ldn-service-patterns.model.ts             |  12 +-
 .../ldn-service-status.model.ts               |   6 +-
 .../ldn-service.constrain.model.ts            |   2 +-
 .../ldn-services-model/ldn-services.model.ts  |  64 +-
 .../service-constrain-type.model.ts           |  10 +-
 .../ldn-service-coar-patterns.ts              |  26 +-
 23 files changed, 1967 insertions(+), 1957 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
index 58b3c82d6e..282ca430a2 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
@@ -6,29 +6,29 @@ import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.componen
 import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
 
 @NgModule({
-    imports: [
-        RouterModule.forChild([
-            {
-                path: '',
-                pathMatch: 'full',
-                component: LdnServicesOverviewComponent,
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
-            },
-            {
-                path: 'new',
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                component: LdnServiceNewComponent,
-                data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
-            },
-            {
-                path: 'edit/:serviceId',
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                component: LdnServiceFormEditComponent,
-                data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
-            },
-        ]),
-    ]
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        pathMatch: 'full',
+        component: LdnServicesOverviewComponent,
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
+      },
+      {
+        path: 'new',
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        component: LdnServiceNewComponent,
+        data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
+      },
+      {
+        path: 'edit/:serviceId',
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        component: LdnServiceFormEditComponent,
+        data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
+      },
+    ]),
+  ]
 })
 export class AdminLdnServicesRoutingModule {
 
diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
index 0745e81558..48ad89fdcc 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
@@ -11,19 +11,19 @@ import {LdnItemfiltersService} from './ldn-services-data/ldn-itemfilters-data.se
 
 
 @NgModule({
-    imports: [
-        CommonModule,
-        SharedModule,
-        AdminLdnServicesRoutingModule,
-        FormsModule
-    ],
-    declarations: [
-        LdnServicesOverviewComponent,
-        LdnServiceNewComponent,
-        LdnServiceFormComponent,
-        LdnServiceFormEditComponent,
-    ],
-    providers: [LdnItemfiltersService]
+  imports: [
+    CommonModule,
+    SharedModule,
+    AdminLdnServicesRoutingModule,
+    FormsModule
+  ],
+  declarations: [
+    LdnServicesOverviewComponent,
+    LdnServiceNewComponent,
+    LdnServiceFormComponent,
+    LdnServiceFormEditComponent,
+  ],
+  providers: [LdnItemfiltersService]
 })
 export class AdminLdnServicesModule {
 }
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 ddd4267dbb..794923b42f 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
@@ -1,414 +1,417 @@
 <div class="container">
-    <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
-        <div class="d-flex">
-            <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h2>
+  <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
+    <div class="d-flex">
+      <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h2>
+    </div>
+    <!-- In the toggle section -->
+    <div class="toggle-switch-container">
+      <label class="status-label" for="enabled">{{ 'ldn-service-status' | translate }}</label>
+      <div>
+        <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
+        <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
+          <div class="slider"></div>
         </div>
-        <!-- In the toggle section -->
-        <div class="toggle-switch-container">
-            <label class="status-label" for="enabled">{{ 'ldn-service-status' | translate }}</label>
-            <div>
-                <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
-                <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
-                    <div class="slider"></div>
+      </div>
+    </div>
+    <!-- In the Name section -->
+    <div class="mb-5">
+      <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
+             formControlName="name"
+             id="name"
+             name="name"
+             type="text">
+      <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.name' | translate }}
+      </div>
+    </div>
+
+    <!-- In the description section -->
+    <div class="mb-5 mt-5 d-flex flex-column">
+      <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
+      <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
+                class="form-control" formControlName="description" id="description" name="description"></textarea>
+    </div>
+
+    <!-- In the url section -->
+    <div class="mb-5 mt-5">
+      <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
+             formControlName="url"
+             id="url"
+             name="url"
+             type="text">
+      <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.url' | translate }}
+      </div>
+    </div>
+
+    <!-- In the ldnUrl section -->
+    <div class="mb-5 mt-5">
+      <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+             formControlName="ldnUrl"
+             id="ldnUrl"
+             name="ldnUrl"
+             type="text">
+      <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.ldnurl' | translate }}
+      </div>
+    </div>
+
+    <!-- In the score section -->
+    <div class="mb-2">
+      <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
+             id="score"
+             name="score"
+             type="text">
+      <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.score' | translate }}
+      </div>
+    </div>
+
+    <!-- In the Inbound Patterns Labels section -->
+    <div class="row mb-1 mt-5">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+        <div class="col-sm-1">
+          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+        </div>
+      </ng-container>
+      <div class="col-sm-2">
+      </div>
+    </div>
+
+    <!-- In the Inbound Patterns section -->
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
+         [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
+         formGroupName="notifyServiceInboundPatterns">
+
+      <ng-container [formGroupName]="i">
+
+
+        <div class="row mb-1">
+          <div class="col">
+            <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
+                 id="additionalInboundPattern{{i}}"
+                 ngbDropdown placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="inboundPatternDropdown.open();"
+                  [readonly]="true"
+                  class="form-control w-80 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="inboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="inboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
                 </div>
+              </div>
             </div>
-        </div>
+          </div>
 
-        <div class="mb-5">
-            <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control" formControlName="name"
-                   id="name"
-                   name="name"
-                   type="text">
-            <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.name' | translate }}
-            </div>
-        </div>
-
-        <!-- In the description section -->
-        <div class="mb-5 mt-5 d-flex flex-column">
-            <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
-            <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                      class="form-control" formControlName="description" id="description" name="description"></textarea>
-        </div>
-
-        <!-- In the url section -->
-        <div class="mb-5 mt-5">
-            <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control" formControlName="url"
-                   id="url"
-                   name="url"
-                   type="text">
-            <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.url' | translate }}
-            </div>
-        </div>
-
-        <!-- In the ldnUrl section -->
-        <div class="mb-5 mt-5">
-            <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
-                   formControlName="ldnUrl"
-                   id="ldnUrl"
-                   name="ldnUrl"
-                   type="text">
-            <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.ldnurl' | translate }}
-            </div>
-        </div>
-
-        <!-- In the score section -->
-        <div class="mb-2">
-            <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
-                   id="score"
-                   name="score"
-                   type="text">
-            <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.score' | translate }}
-            </div>
-        </div>
-
-
-        <div class="row mb-1 mt-5">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
-            </div>
-            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
-                <div class="col">
-                    <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-                </div>
-                <div class="col-sm-1">
-                    <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+          <div class="col">
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="inboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedInboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="inboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="inboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
+                    </div>
+                  </div>
                 </div>
+              </div>
             </ng-container>
-            <div class="col-sm-2">
+          </div>
+
+          <div
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
+            class="col-sm-1">
+            <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                   type="checkbox">
+            <div (click)="toggleAutomatic(i)"
+                 [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                 class="toggle-switch">
+              <div class="slider"></div>
             </div>
+          </div>
+
+
+          <div class="col-sm-2">
+            <div class="btn-group">
+              <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
+                      type="button">
+                <i class="fas fa-trash"></i>
+              </button>
+
+
+              <button (click)="unmarkForInboundPatternDeletion(i)"
+                      *ngIf="markedForDeletionInboundPattern.includes(i)"
+                      class="btn btn-warning "
+                      type="button">
+                <i class="fas fa-undo"></i>
+              </button>
+            </div>
+          </div>
         </div>
-
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-             [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
-             formGroupName="notifyServiceInboundPatterns">
-
-            <ng-container [formGroupName]="i">
+      </ng-container>
+    </div>
 
 
-                <div class="row mb-1">
-                    <div class="col">
-                        <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
-                             id="additionalInboundPattern{{i}}"
-                             ngbDropdown placement="bottom-start">
-                            <div class="position-relative right-addon" role="combobox">
-                                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                   ngbDropdownToggle></i>
-                                <input
-                                        (click)="inboundPatternDropdown.open();"
-                                        [readonly]="true"
-                                        class="form-control w-80 scrollable-dropdown-input"
-                                        formControlName="patternLabel"
-                                        id="inboundPatternDropdownButton"
-                                        ngbDropdownAnchor
-                                        type="text"
-                                />
-                                <!-- TODO: infinite scroll with 3 selects -->
-                                <div aria-labelledby="inboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
-                                     ngbDropdownMenu>
-                                    <div class="scrollable-menu" role="listbox">
-                                        <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
-                                                *ngFor="let pattern of inboundPatterns; let internalIndex = index"
-                                                [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
-                                                class="dropdown-item collection-item text-truncate w-100"
-                                                ngbDropdownItem
-                                                type="button">
-                                            <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                                            <div
-                                                    class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+    <span (click)="addInboundPattern()"
+          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
-                    <div class="col">
-                        <ng-container
-                                *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-                            <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                                 placement="bottom-start">
-                                <div class="position-relative right-addon" role="combobox">
-                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                       ngbDropdownToggle></i>
-                                    <input
-                                            (click)="inboundItemfilterDropdown.open();"
-                                            [readonly]="true"
-                                            [value]="selectedInboundItemfilters"
-                                            class="form-control w-100 scrollable-dropdown-input"
-                                            formControlName="constraint"
-                                            id="inboundItemfilterDropdown"
-                                            ngbDropdownAnchor
-                                            type="text"
-                                    />
-                                    <!-- TODO: infinite scroll with 3 selects -->
-                                    <div aria-labelledby="inboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
-                                         ngbDropdownMenu>
-                                        <div class="scrollable-menu" role="listbox">
-                                            <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
-                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                                                    class="dropdown-item collection-item text-truncate w-100"
-                                                    ngbDropdownItem
-                                                    type="button">
-                                                <div>{{ constraint.id }}</div>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </ng-container>
-                    </div>
+    <!-- In the Outbound Patterns Labels section -->
+    <div class="row mb-1 mt-5">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }} </label>
+      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+      </ng-container>
+      <div class="col-sm-1 ">
+        <label class="label-box-2" style="visibility: hidden;">
+          {{ 'ldn-new-service.form.label.automatic' | translate }}
+        </label>
+      </div>
+      <div class="col-sm-2 ">
+      </div>
+    </div>
 
-                    <div
-                            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
-                            class="col-sm-1">
-                        <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                               type="checkbox">
-                        <div (click)="toggleAutomatic(i)"
-                             [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                             class="toggle-switch">
-                            <div class="slider"></div>
-                        </div>
-                    </div>
+    <!-- In the Outbound Patterns section -->
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
+         [class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)"
+         formGroupName="notifyServiceOutboundPatterns">
 
+      <ng-container [formGroupName]="i">
 
-                    <div class="col-sm-2">
-                        <div class="btn-group">
-                            <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
-                                    type="button">
-                                <i class="fas fa-trash"></i>
-                            </button>
-
-
-                            <button (click)="unmarkForInboundPatternDeletion(i)"
-                                    *ngIf="markedForDeletionInboundPattern.includes(i)"
-                                    class="btn btn-warning "
-                                    type="button">
-                                <i class="fas fa-undo"></i>
-                            </button>
-                        </div>
-                    </div>
+        <div class="row mb-1">
+          <div class="col">
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
+                 ngbDropdown
+                 placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="outboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedOutboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="outboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="outboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of outboundPatterns; let internalIndex = index"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
                 </div>
-            </ng-container>
-        </div>
-
-
-        <span (click)="addInboundPattern()"
-              class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
-
-
-        <div class="row mb-1 mt-5">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }} </label>
+              </div>
             </div>
-            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
-                <div class="col">
-                    <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+          </div>
+          <div class="col">
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
+                   ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="outboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedOutboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="outboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="outboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
+                    </div>
+                  </div>
                 </div>
+              </div>
             </ng-container>
-            <div class="col-sm-1 ">
-                <label class="label-box-2" style="visibility: hidden;">
-                    {{ 'ldn-new-service.form.label.automatic' | translate }}
-                </label>
+          </div>
+
+          <div [style.visibility]="'hidden'" class="col-sm-1">
+            <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
+            <div
+              class="toggle-switch">
+              <div class="slider"></div>
             </div>
-            <div class="col-sm-2 ">
+          </div>
+
+          <div class="col-sm-2">
+            <div class="btn-group">
+              <button (click)="markForOutboundPatternDeletion(i)"
+                      class="btn btn-outline-dark trash-button" type="button">
+                <i class="fas fa-trash"></i>
+              </button>
+              <button (click)="unmarkForOutboundPatternDeletion(i)"
+                      *ngIf="markedForDeletionOutboundPattern.includes(i)"
+                      class="btn btn-warning "
+                      type="button">
+                <i class="fas fa-undo"></i>
+              </button>
             </div>
+          </div>
         </div>
+      </ng-container>
+    </div>
 
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
-             [class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)"
-             formGroupName="notifyServiceOutboundPatterns">
-
-            <ng-container [formGroupName]="i">
-
-                <!-- Input elements in a separate row -->
-                <div class="row mb-1">
-                    <div class="col">
-                        <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
-                             ngbDropdown
-                             placement="bottom-start">
-                            <div class="position-relative right-addon" role="combobox">
-                                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                   ngbDropdownToggle></i>
-                                <input
-                                        (click)="outboundPatternDropdown.open();"
-                                        [readonly]="true"
-                                        [value]="selectedOutboundPatterns"
-                                        class="form-control w-100 scrollable-dropdown-input"
-                                        formControlName="patternLabel"
-                                        id="outboundPatternDropdownButton"
-                                        ngbDropdownAnchor
-                                        type="text"
-                                />
-                                <!-- TODO: infinite scroll with 3-5 selects -->
-                                <div aria-labelledby="outboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
-                                     ngbDropdownMenu>
-                                    <div class="scrollable-menu" role="listbox">
-                                        <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
-                                                *ngFor="let pattern of outboundPatterns; let internalIndex = index"
-                                                [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
-                                                class="dropdown-item collection-item text-truncate w-100"
-                                                ngbDropdownItem
-                                                type="button">
-                                            <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                                            <div
-                                                    class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col">
-                        <ng-container
-                                *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-                            <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
-                                 ngbDropdown
-                                 placement="bottom-start">
-                                <div class="position-relative right-addon" role="combobox">
-                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                       ngbDropdownToggle></i>
-                                    <input
-                                            (click)="outboundItemfilterDropdown.open();"
-                                            [readonly]="true"
-                                            [value]="selectedOutboundItemfilters"
-                                            class="form-control w-100 scrollable-dropdown-input"
-                                            formControlName="constraint"
-                                            id="outboundItemfilterDropdown"
-                                            ngbDropdownAnchor
-                                            type="text"
-                                    />
-                                    <!-- TODO: infinite scroll with 3 selects -->
-                                    <div aria-labelledby="outboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
-                                         ngbDropdownMenu>
-                                        <div class="scrollable-menu" role="listbox">
-                                            <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
-                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                                                    class="dropdown-item collection-item text-truncate w-100"
-                                                    ngbDropdownItem
-                                                    type="button">
-                                                <div>{{ constraint.id }}</div>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </ng-container>
-                    </div>
-
-                    <div [style.visibility]="'hidden'" class="col-sm-1">
-                        <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
-                        <div
-                                class="toggle-switch">
-                            <div class="slider"></div>
-                        </div>
-                    </div>
-
-                    <div class="col-sm-2">
-                        <div class="btn-group">
-                            <button (click)="markForOutboundPatternDeletion(i)"
-                                    class="btn btn-outline-dark trash-button" type="button">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                            <button (click)="unmarkForOutboundPatternDeletion(i)"
-                                    *ngIf="markedForDeletionOutboundPattern.includes(i)"
-                                    class="btn btn-warning "
-                                    type="button">
-                                <i class="fas fa-undo"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </ng-container>
-        </div>
-
-        <span
-                (click)="addOutboundPattern()"
-                class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
+    <span
+      (click)="addOutboundPattern()"
+      class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
     </span>
 
 
-        <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
-            <button class="btn btn-primary" type="submit">
-                <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
-            </button>
-            <div class="d-flex">
-                <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
-                    <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
-                </button>
-            </div>
-        </div>
-    </form>
+    <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
+      <button class="btn btn-primary" type="submit">
+        <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
+      </button>
+      <div class="d-flex">
+        <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
+          <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
+        </button>
+      </div>
+    </div>
+  </form>
 </div>
 <ng-template #confirmModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.edit.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.overview.edit.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()" class="btn btn-danger mr-2"
-                        id="delete-confirm">{{ 'service.detail.return' | translate }}
-                </button>
-                <button (click)="patchService()"
-                        class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.edit.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.edit.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()" class="btn btn-danger mr-2"
+                id="delete-confirm">{{ 'service.detail.return' | translate }}
+        </button>
+        <button (click)="patchService()"
+                class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #resetFormModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.reset-form.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.overview.reset-form.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()" class="mr-2 btn btn-danger"
-                        id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
-                </button>
-                <button (click)="resetFormAndLeave()"
-                        class="btn btn-primary custom-btn"
-                        id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.reset-form.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.reset-form.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()" class="mr-2 btn btn-danger"
+                id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
+        </button>
+        <button (click)="resetFormAndLeave()"
+                class="btn btn-primary custom-btn"
+                id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
index 1a531c2057..867053fa83 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
@@ -18,62 +18,62 @@ import {RouteService} from '../../../core/services/route.service';
 import {provideMockStore} from '@ngrx/store/testing';
 
 describe('LdnServiceFormEditComponent', () => {
-    let component: LdnServiceFormEditComponent;
-    let fixture: ComponentFixture<LdnServiceFormEditComponent>;
+  let component: LdnServiceFormEditComponent;
+  let fixture: ComponentFixture<LdnServiceFormEditComponent>;
 
-    let ldnServicesService: any;
-    let ldnItemfiltersService: any;
-    let cdRefStub: any;
-    let modalService: any;
+  let ldnServicesService: any;
+  let ldnItemfiltersService: any;
+  let cdRefStub: any;
+  let modalService: any;
 
-    const translateServiceStub = {
-        get: () => of('translated-text'),
-        onLangChange: new EventEmitter(),
-        onTranslationChange: new EventEmitter(),
-        onDefaultLangChange: new EventEmitter()
+  const translateServiceStub = {
+    get: () => of('translated-text'),
+    onLangChange: new EventEmitter(),
+    onTranslationChange: new EventEmitter(),
+    onDefaultLangChange: new EventEmitter()
+  };
+
+  beforeEach(async () => {
+    ldnServicesService = {
+      update: () => ({}),
+    };
+    ldnItemfiltersService = {
+      findAll: () => of(['item1', 'item2']),
+    };
+    cdRefStub = Object.assign({
+      detectChanges: () => fixture.detectChanges()
+    });
+    modalService = {
+      open: () => {/*comment*/
+      }
     };
 
-    beforeEach(async () => {
-        ldnServicesService = {
-            update: () => ({}),
-        };
-        ldnItemfiltersService = {
-            findAll: () => of(['item1', 'item2']),
-        };
-        cdRefStub = Object.assign({
-            detectChanges: () => fixture.detectChanges()
-        });
-        modalService = {
-            open: () => {/*comment*/
-            }
-        };
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      declarations: [LdnServiceFormEditComponent],
+      providers: [
+        {provide: LdnServicesService, useValue: ldnServicesService},
+        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+        {provide: Router, useValue: new RouterStub()},
+        {provide: ActivatedRoute, useValue: new MockActivatedRoute()},
+        {provide: ChangeDetectorRef, useValue: cdRefStub},
+        {provide: NgbModal, useValue: modalService},
+        {provide: NotificationsService, useValue: NotificationsServiceStub},
+        {provide: TranslateService, useValue: translateServiceStub},
+        {provide: PaginationService, useValue: {}},
+        FormBuilder,
+        RouteService,
+        provideMockStore({}),
+      ]
+    })
+      .compileComponents();
 
-        await TestBed.configureTestingModule({
-            imports: [ReactiveFormsModule, TranslateModule.forRoot()],
-            declarations: [LdnServiceFormEditComponent],
-            providers: [
-                {provide: LdnServicesService, useValue: ldnServicesService},
-                {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
-                {provide: Router, useValue: new RouterStub()},
-                {provide: ActivatedRoute, useValue: new MockActivatedRoute()},
-                {provide: ChangeDetectorRef, useValue: cdRefStub},
-                {provide: NgbModal, useValue: modalService},
-                {provide: NotificationsService, useValue: NotificationsServiceStub},
-                {provide: TranslateService, useValue: translateServiceStub},
-                {provide: PaginationService, useValue: {}},
-                FormBuilder,
-                RouteService,
-                provideMockStore({}),
-            ]
-        })
-            .compileComponents();
+    fixture = TestBed.createComponent(LdnServiceFormEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-        fixture = TestBed.createComponent(LdnServiceFormEditComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index 243a636e37..52c133e06a 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -22,478 +22,478 @@ import {PaginationComponentOptions} from '../../../shared/pagination/pagination-
 import {NotifyServicePattern} from "../ldn-services-model/ldn-service-patterns.model";
 
 @Component({
-    selector: 'ds-ldn-service-form-edit',
-    templateUrl: './ldn-service-form-edit.component.html',
-    styleUrls: ['./ldn-service-form-edit.component.scss'],
-    animations: [
-        trigger('toggleAnimation', [
-            state('true', style({})),
-            state('false', style({})),
-            transition('true <=> false', animate('300ms ease-in')),
-        ]),
-    ],
+  selector: 'ds-ldn-service-form-edit',
+  templateUrl: './ldn-service-form-edit.component.html',
+  styleUrls: ['./ldn-service-form-edit.component.scss'],
+  animations: [
+    trigger('toggleAnimation', [
+      state('true', style({})),
+      state('false', style({})),
+      transition('true <=> false', animate('300ms ease-in')),
+    ]),
+  ],
 })
 export class LdnServiceFormEditComponent implements OnInit {
-    formModel: FormGroup;
-    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+  formModel: FormGroup;
+  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
 
-    public inboundPatterns: string[] = notifyPatterns;
-    public outboundPatterns: string[] = notifyPatterns;
-    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
+  public inboundPatterns: string[] = notifyPatterns;
+  public outboundPatterns: string[] = notifyPatterns;
+  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  @Input() public name: string;
+  @Input() public description: string;
+  @Input() public url: string;
+  @Input() public ldnUrl: string;
+  @Input() public score: number;
+  @Input() public inboundPattern: string;
+  @Input() public outboundPattern: string;
+  @Input() public constraint: string;
+  @Input() public automatic: boolean;
+  @Input() public headerKey: string;
+  markedForDeletionInboundPattern: number[] = [];
+  markedForDeletionOutboundPattern: number[] = [];
+  selectedOutboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  selectedInboundPatterns: string[];
+  protected serviceId: string;
+  private deletedInboundPatterns: number[] = [];
+  private deletedOutboundPatterns: number[] = [];
+  private modalRef: any;
+  private service: LdnService;
+
+  constructor(
+    protected ldnServicesService: LdnServicesService,
+    private ldnItemfiltersService: LdnItemfiltersService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private cdRef: ChangeDetectorRef,
+    protected modalService: NgbModal,
+    private notificationService: NotificationsService,
+    private translateService: TranslateService,
+    protected paginationService: PaginationService
+  ) {
+
+    this.formModel = this.formBuilder.group({
+      id: [''],
+      name: ['', Validators.required],
+      description: ['', Validators.required],
+      url: ['', Validators.required],
+      ldnUrl: ['', Validators.required],
+      score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], inboundPattern: [''],
+      outboundPattern: [''],
+      constraintPattern: [''],
+      enabled: [''],
+      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+      type: LDN_SERVICE.value,
     });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
+  }
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params) => {
+      this.serviceId = params.serviceId;
+      if (this.serviceId) {
+        this.fetchServiceData(this.serviceId);
+      }
     });
-    @Input() public name: string;
-    @Input() public description: string;
-    @Input() public url: string;
-    @Input() public ldnUrl: string;
-    @Input() public score: number;
-    @Input() public inboundPattern: string;
-    @Input() public outboundPattern: string;
-    @Input() public constraint: string;
-    @Input() public automatic: boolean;
-    @Input() public headerKey: string;
-    markedForDeletionInboundPattern: number[] = [];
-    markedForDeletionOutboundPattern: number[] = [];
-    selectedOutboundPatterns: string[];
-    selectedInboundItemfilters: string[];
-    selectedOutboundItemfilters: string[];
-    selectedInboundPatterns: string[];
-    protected serviceId: string;
-    private deletedInboundPatterns: number[] = [];
-    private deletedOutboundPatterns: number[] = [];
-    private modalRef: any;
-    private service: LdnService;
+    this.setItemfilters();
+  }
 
-    constructor(
-        protected ldnServicesService: LdnServicesService,
-        private ldnItemfiltersService: LdnItemfiltersService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private route: ActivatedRoute,
-        private cdRef: ChangeDetectorRef,
-        protected modalService: NgbModal,
-        private notificationService: NotificationsService,
-        private translateService: TranslateService,
-        protected paginationService: PaginationService
-    ) {
-
-        this.formModel = this.formBuilder.group({
-            id: [''],
-            name: ['', Validators.required],
-            description: ['', Validators.required],
-            url: ['', Validators.required],
-            ldnUrl: ['', Validators.required],
-            score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], inboundPattern: [''],
-            outboundPattern: [''],
-            constraintPattern: [''],
-            enabled: [''],
-            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-            type: LDN_SERVICE.value,
-        });
-    }
-
-    ngOnInit(): void {
-        this.route.params.subscribe((params) => {
-            this.serviceId = params.serviceId;
-            if (this.serviceId) {
-                this.fetchServiceData(this.serviceId);
-            }
-        });
-        this.setItemfilters();
-    }
-
-    setItemfilters() {
-        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-            getFirstCompletedRemoteData());
-    }
+  setItemfilters() {
+    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+      getFirstCompletedRemoteData());
+  }
 
 
-    fetchServiceData(serviceId: string): void {
-        this.ldnServicesService.findById(serviceId).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            (data: RemoteData<LdnService>) => {
-                if (data.hasSucceeded) {
-                    this.service = data.payload;
+  fetchServiceData(serviceId: string): void {
+    this.ldnServicesService.findById(serviceId).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      (data: RemoteData<LdnService>) => {
+        if (data.hasSucceeded) {
+          this.service = data.payload;
 
-                    this.formModel.patchValue({
-                        id: this.service.id,
-                        name: this.service.name,
-                        description: this.service.description,
-                        url: this.service.url,
-                        score: this.service.score, ldnUrl: this.service.ldnUrl,
-                        type: this.service.type,
-                        enabled: this.service.enabled
-                    });
-                    this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
-                    this.filterPatternObjectsAndPickLabel('notifyServiceOutboundPatterns', true)
-                    /*const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-                    inboundPatternsArray.clear();
-                    console.log(" outside (pattern: any)")
-                    this.service.notifyServiceInboundPatterns.forEach((patternObj: NotifyServicePattern) => {
-                      const patternFormGroup = this.initializeInboundPatternFormGroup();
-                      const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {...patternObj,patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj.pattern + '.label')})
-                      patternFormGroup.patchValue(newPatternObjWithLabel);
-                      console.log("(pattern: any)")
-
-
-                      inboundPatternsArray.push(patternFormGroup);
-                      this.cdRef.detectChanges();
-                    })*/;
-
-                    /*const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-                    outboundPatternsArray.clear();
-                    this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
-                      const patternFormGroup = this.initializeOutboundPatternFormGroup();
-                      patternFormGroup.patchValue(pattern);
-                      outboundPatternsArray.push(patternFormGroup);
-                      this.cdRef.detectChanges();
-                    });*/
-                }
-            },
-        );
-    }
-
-    filterPatternObjectsAndPickLabel(formArrayName: string, isOutbound: boolean) {
-        const PatternsArray = this.formModel.get(formArrayName) as FormArray;
-        PatternsArray.clear();
-        let servicesToUse;
-        if (isOutbound) {
-            servicesToUse = this.service.notifyServiceOutboundPatterns
-        } else {
-            servicesToUse = this.service.notifyServiceInboundPatterns
-        }
-
-        servicesToUse.forEach((patternObj: NotifyServicePattern) => {
-            let patternFormGroup;
-            if (isOutbound) {
-                patternFormGroup = this.initializeOutboundPatternFormGroup();
-            } else {
-                patternFormGroup = this.initializeInboundPatternFormGroup();
-            }
-            const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {
-                ...patternObj,
-                patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label')
-            })
+          this.formModel.patchValue({
+            id: this.service.id,
+            name: this.service.name,
+            description: this.service.description,
+            url: this.service.url,
+            score: this.service.score, ldnUrl: this.service.ldnUrl,
+            type: this.service.type,
+            enabled: this.service.enabled
+          });
+          this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
+          this.filterPatternObjectsAndPickLabel('notifyServiceOutboundPatterns', true)
+          /*const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+          inboundPatternsArray.clear();
+          console.log(" outside (pattern: any)")
+          this.service.notifyServiceInboundPatterns.forEach((patternObj: NotifyServicePattern) => {
+            const patternFormGroup = this.initializeInboundPatternFormGroup();
+            const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {...patternObj,patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj.pattern + '.label')})
             patternFormGroup.patchValue(newPatternObjWithLabel);
             console.log("(pattern: any)")
 
-            PatternsArray.push(patternFormGroup);
+
+            inboundPatternsArray.push(patternFormGroup);
             this.cdRef.detectChanges();
-        })
+          })*/;
 
-
-    }
-
-    generatePatchOperations(): any[] {
-        const patchOperations: any[] = [];
-
-        this.createReplaceOperation(patchOperations, 'name', '/name');
-        this.createReplaceOperation(patchOperations, 'description', '/description');
-        this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
-        this.createReplaceOperation(patchOperations, 'url', '/url');
-        this.createReplaceOperation(patchOperations, 'score', '/score');
-
-        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
-        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
-
-
-        this.deletedInboundPatterns.forEach(index => {
-            const removeOperation: Operation = {
-                op: 'remove',
-                path: `notifyServiceInboundPatterns[${index}]`
-            };
-            patchOperations.push(removeOperation);
-        });
-
-        this.deletedOutboundPatterns.forEach(index => {
-            const removeOperation: Operation = {
-                op: 'remove',
-                path: `notifyServiceOutboundPatterns[${index}]`
-            };
-            patchOperations.push(removeOperation);
-        });
-
-        return patchOperations;
-    }
-
-    onSubmit() {
-        this.openConfirmModal(this.confirmModal);
-    }
-
-    addInboundPattern() {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-    }
-
-    addOutboundPattern() {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-    }
-
-
-    selectOutboundPattern(patternValue: string, index: number): void {
-        const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-        patternArray.controls[index].patchValue({pattern: patternValue})
-        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
-
-    }
-
-    selectOutboundItemFilter(filterValue: string, index: number) {
-        const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-        filterArray.controls[index].patchValue({constraint: filterValue})
-    }
-
-    selectInboundPattern(patternValue: string, index: number): void {
-        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        patternArray.controls[index].patchValue({pattern: patternValue})
-        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
-    }
-
-    selectInboundItemFilter(filterValue: string, index: number): void {
-        const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        filterArray.controls[index].patchValue({constraint: filterValue})
-    }
-
-    toggleAutomatic(i: number) {
-        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-        if (automaticControl) {
-            automaticControl.setValue(!automaticControl.value);
+          /*const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+          outboundPatternsArray.clear();
+          this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
+            const patternFormGroup = this.initializeOutboundPatternFormGroup();
+            patternFormGroup.patchValue(pattern);
+            outboundPatternsArray.push(patternFormGroup);
+            this.cdRef.detectChanges();
+          });*/
         }
+      },
+    );
+  }
+
+  filterPatternObjectsAndPickLabel(formArrayName: string, isOutbound: boolean) {
+    const PatternsArray = this.formModel.get(formArrayName) as FormArray;
+    PatternsArray.clear();
+    let servicesToUse;
+    if (isOutbound) {
+      servicesToUse = this.service.notifyServiceOutboundPatterns
+    } else {
+      servicesToUse = this.service.notifyServiceInboundPatterns
     }
 
-    toggleEnabled() {
-        const newStatus = !this.formModel.get('enabled').value;
+    servicesToUse.forEach((patternObj: NotifyServicePattern) => {
+      let patternFormGroup;
+      if (isOutbound) {
+        patternFormGroup = this.initializeOutboundPatternFormGroup();
+      } else {
+        patternFormGroup = this.initializeInboundPatternFormGroup();
+      }
+      const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {
+        ...patternObj,
+        patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label')
+      })
+      patternFormGroup.patchValue(newPatternObjWithLabel);
+      console.log("(pattern: any)")
 
-        const patchOperation: Operation = {
-            op: 'replace',
-            path: '/enabled',
-            value: newStatus,
-        };
+      PatternsArray.push(patternFormGroup);
+      this.cdRef.detectChanges();
+    })
 
-        this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            () => {
 
-                this.formModel.get('enabled').setValue(newStatus);
-                this.cdRef.detectChanges();
-            }
-        );
+  }
+
+  generatePatchOperations(): any[] {
+    const patchOperations: any[] = [];
+
+    this.createReplaceOperation(patchOperations, 'name', '/name');
+    this.createReplaceOperation(patchOperations, 'description', '/description');
+    this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
+    this.createReplaceOperation(patchOperations, 'url', '/url');
+    this.createReplaceOperation(patchOperations, 'score', '/score');
+
+    this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
+    this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
+
+
+    this.deletedInboundPatterns.forEach(index => {
+      const removeOperation: Operation = {
+        op: 'remove',
+        path: `notifyServiceInboundPatterns[${index}]`
+      };
+      patchOperations.push(removeOperation);
+    });
+
+    this.deletedOutboundPatterns.forEach(index => {
+      const removeOperation: Operation = {
+        op: 'remove',
+        path: `notifyServiceOutboundPatterns[${index}]`
+      };
+      patchOperations.push(removeOperation);
+    });
+
+    return patchOperations;
+  }
+
+  onSubmit() {
+    this.openConfirmModal(this.confirmModal);
+  }
+
+  addInboundPattern() {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+  }
+
+  addOutboundPattern() {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+  }
+
+
+  selectOutboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+
+  }
+
+  selectOutboundItemFilter(filterValue: string, index: number) {
+    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
+
+  selectInboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+  }
+
+  selectInboundItemFilter(filterValue: string, index: number): void {
+    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
+
+  toggleAutomatic(i: number) {
+    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+    if (automaticControl) {
+      automaticControl.setValue(!automaticControl.value);
     }
+  }
 
+  toggleEnabled() {
+    const newStatus = !this.formModel.get('enabled').value;
 
-    closeModal() {
-        this.modalRef.close();
+    const patchOperation: Operation = {
+      op: 'replace',
+      path: '/enabled',
+      value: newStatus,
+    };
+
+    this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      () => {
+
+        this.formModel.get('enabled').setValue(newStatus);
         this.cdRef.detectChanges();
-    }
-
-    openConfirmModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    openResetFormModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    patchService() {
-        this.deleteMarkedInboundPatterns();
-        this.deleteMarkedOutboundPatterns();
-
-        const patchOperations = this.generatePatchOperations();
+      }
+    );
+  }
 
 
-        this.ldnServicesService.patch(this.service, patchOperations).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            (rd: RemoteData<LdnService>) => {
-                if (rd.hasSucceeded) {
-                    this.closeModal();
-                    this.sendBack();
-                    this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
-                        this.translateService.get('admin.registries.services-formats.modify.success.content'));
-                } else {
-                    this.notificationService.error(this.translateService.get('admin.registries.services-formats.modify.failure.head'),
-                        this.translateService.get('admin.registries.services-formats.modify.failure.content'));
-                    this.closeModal();
-                }
-            });
-    }
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
 
-    resetFormAndLeave() {
-        this.sendBack();
-        this.closeModal();
-    }
+  openConfirmModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
 
-    markForInboundPatternDeletion(index: number) {
-        if (!this.markedForDeletionInboundPattern.includes(index)) {
-            this.markedForDeletionInboundPattern.push(index);
+  openResetFormModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  patchService() {
+    this.deleteMarkedInboundPatterns();
+    this.deleteMarkedOutboundPatterns();
+
+    const patchOperations = this.generatePatchOperations();
+
+
+    this.ldnServicesService.patch(this.service, patchOperations).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      (rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          this.closeModal();
+          this.sendBack();
+          this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
+            this.translateService.get('admin.registries.services-formats.modify.success.content'));
+        } else {
+          this.notificationService.error(this.translateService.get('admin.registries.services-formats.modify.failure.head'),
+            this.translateService.get('admin.registries.services-formats.modify.failure.content'));
+          this.closeModal();
         }
-    }
+      });
+  }
 
-    unmarkForInboundPatternDeletion(index: number) {
-        const i = this.markedForDeletionInboundPattern.indexOf(index);
-        if (i !== -1) {
-            this.markedForDeletionInboundPattern.splice(i, 1);
+  resetFormAndLeave() {
+    this.sendBack();
+    this.closeModal();
+  }
+
+  markForInboundPatternDeletion(index: number) {
+    if (!this.markedForDeletionInboundPattern.includes(index)) {
+      this.markedForDeletionInboundPattern.push(index);
+    }
+  }
+
+  unmarkForInboundPatternDeletion(index: number) {
+    const i = this.markedForDeletionInboundPattern.indexOf(index);
+    if (i !== -1) {
+      this.markedForDeletionInboundPattern.splice(i, 1);
+    }
+  }
+
+  markForOutboundPatternDeletion(index: number) {
+    if (!this.markedForDeletionOutboundPattern.includes(index)) {
+      this.markedForDeletionOutboundPattern.push(index);
+    }
+  }
+
+  unmarkForOutboundPatternDeletion(index: number) {
+    const i = this.markedForDeletionOutboundPattern.indexOf(index);
+    if (i !== -1) {
+      this.markedForDeletionOutboundPattern.splice(i, 1);
+    }
+  }
+
+  deleteMarkedInboundPatterns() {
+    this.markedForDeletionInboundPattern.sort((a, b) => b - a);
+    const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+
+    for (const index of this.markedForDeletionInboundPattern) {
+      if (index >= 0 && index < patternsArray.length) {
+        const patternGroup = patternsArray.at(index) as FormGroup;
+        const patternValue = patternGroup.value;
+        if (patternValue.isNew) {
+          patternsArray.removeAt(index);
+        } else {
+          this.deletedInboundPatterns.push(index);
         }
+      }
     }
 
-    markForOutboundPatternDeletion(index: number) {
-        if (!this.markedForDeletionOutboundPattern.includes(index)) {
-            this.markedForDeletionOutboundPattern.push(index);
+    this.markedForDeletionInboundPattern = [];
+  }
+
+
+  deleteMarkedOutboundPatterns() {
+    this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
+    const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+
+    for (const index of this.markedForDeletionOutboundPattern) {
+      if (index >= 0 && index < patternsArray.length) {
+        const patternGroup = patternsArray.at(index) as FormGroup;
+        const patternValue = patternGroup.value;
+        if (patternValue.isNew) {
+          patternsArray.removeAt(index);
+        } else {
+
+          this.deletedOutboundPatterns.push(index);
         }
+      }
     }
 
-    unmarkForOutboundPatternDeletion(index: number) {
-        const i = this.markedForDeletionOutboundPattern.indexOf(index);
-        if (i !== -1) {
-            this.markedForDeletionOutboundPattern.splice(i, 1);
+    this.markedForDeletionOutboundPattern = [];
+  }
+
+  setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
+    console.log(formArrayName)
+    const formArray = this.formModel.get(formArrayName) as FormArray;
+    console.warn('inside setValueForControlInOutboundArray', formArray);
+    formArray.at(index).setValue(value);
+  }
+
+  setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
+    console.log(formArrayName)
+    const formArray = this.formModel.get(formArrayName) as FormArray;
+    console.warn('inside setValueForControlInInboundArray', formArray);
+    formArray.at(index).setValue(value);
+  }
+
+  private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
+    if (this.formModel.get(formControlName).dirty) {
+      patchOperations.push({
+        op: 'replace',
+        path,
+        value: this.formModel.get(formControlName).value,
+      });
+    }
+  }
+
+  private handlePatterns(patchOperations: any[], formArrayName: string): void {
+    console.log(this.formModel)
+    const patternsArray = this.formModel.get(formArrayName) as FormArray
+
+
+    for (let i = 0; i < patternsArray.length; i++) {
+      const patternGroup = patternsArray.at(i) as FormGroup;
+
+      const patternValue = patternGroup.value;
+      if (patternGroup.touched) {
+        delete patternValue?.patternLabel;
+        if (patternValue.isNew) {
+          delete patternValue.isNew;
+          const addOperation = {
+            op: 'add',
+            path: `${formArrayName}/-`,
+            value: patternValue,
+          };
+          patchOperations.push(addOperation);
+        } else {
+          const replaceOperation = {
+            op: 'replace',
+            path: `${formArrayName}[${i}]`,
+            value: patternValue,
+          };
+          patchOperations.push(replaceOperation);
         }
+      }
     }
+  }
 
-    deleteMarkedInboundPatterns() {
-        this.markedForDeletionInboundPattern.sort((a, b) => b - a);
-        const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+  private sendBack() {
+    this.router.navigateByUrl('admin/ldn/services');
+  }
 
-        for (const index of this.markedForDeletionInboundPattern) {
-            if (index >= 0 && index < patternsArray.length) {
-                const patternGroup = patternsArray.at(index) as FormGroup;
-                const patternValue = patternGroup.value;
-                if (patternValue.isNew) {
-                    patternsArray.removeAt(index);
-                } else {
-                    this.deletedInboundPatterns.push(index);
-                }
-            }
-        }
+  private createOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: 'Select a pattern',
+      constraint: '',
+      isNew: true,
+    });
+  }
 
-        this.markedForDeletionInboundPattern = [];
-    }
+  private createInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: 'Select a pattern',
+      constraint: '',
+      automatic: false,
+      isNew: true
+    });
+  }
 
+  private initializeOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: '',
+      constraint: '',
+    });
+  }
 
-    deleteMarkedOutboundPatterns() {
-        this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
-        const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-
-        for (const index of this.markedForDeletionOutboundPattern) {
-            if (index >= 0 && index < patternsArray.length) {
-                const patternGroup = patternsArray.at(index) as FormGroup;
-                const patternValue = patternGroup.value;
-                if (patternValue.isNew) {
-                    patternsArray.removeAt(index);
-                } else {
-
-                    this.deletedOutboundPatterns.push(index);
-                }
-            }
-        }
-
-        this.markedForDeletionOutboundPattern = [];
-    }
-
-    setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
-        console.log(formArrayName)
-        const formArray = this.formModel.get(formArrayName) as FormArray;
-        console.warn('inside setValueForControlInOutboundArray', formArray);
-        formArray.at(index).setValue(value);
-    }
-
-    setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
-        console.log(formArrayName)
-        const formArray = this.formModel.get(formArrayName) as FormArray;
-        console.warn('inside setValueForControlInInboundArray', formArray);
-        formArray.at(index).setValue(value);
-    }
-
-    private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
-        if (this.formModel.get(formControlName).dirty) {
-            patchOperations.push({
-                op: 'replace',
-                path,
-                value: this.formModel.get(formControlName).value,
-            });
-        }
-    }
-
-    private handlePatterns(patchOperations: any[], formArrayName: string): void {
-        console.log(this.formModel)
-        const patternsArray = this.formModel.get(formArrayName) as FormArray
-
-
-        for (let i = 0; i < patternsArray.length; i++) {
-            const patternGroup = patternsArray.at(i) as FormGroup;
-
-            const patternValue = patternGroup.value;
-            if (patternGroup.touched) {
-                delete patternValue?.patternLabel;
-                if (patternValue.isNew) {
-                    delete patternValue.isNew;
-                    const addOperation = {
-                        op: 'add',
-                        path: `${formArrayName}/-`,
-                        value: patternValue,
-                    };
-                    patchOperations.push(addOperation);
-                } else {
-                    const replaceOperation = {
-                        op: 'replace',
-                        path: `${formArrayName}[${i}]`,
-                        value: patternValue,
-                    };
-                    patchOperations.push(replaceOperation);
-                }
-            }
-        }
-    }
-
-    private sendBack() {
-        this.router.navigateByUrl('admin/ldn/services');
-    }
-
-    private createOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            patternLabel: 'Select a pattern',
-            constraint: '',
-            isNew: true,
-        });
-    }
-
-    private createInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            patternLabel: 'Select a pattern',
-            constraint: '',
-            automatic: false,
-            isNew: true
-        });
-    }
-
-    private initializeOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            patternLabel: '',
-            constraint: '',
-        });
-    }
-
-    private initializeInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            patternLabel: '',
-            constraint: '',
-            automatic: '',
-        });
-    }
+  private initializeInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: '',
+      constraint: '',
+      automatic: '',
+    });
+  }
 }
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 1597a7fe5e..28834c0047 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
@@ -1,90 +1,93 @@
 <div class="container">
-    <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
-        <div class="d-flex">
-            <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
+  <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
+    <div class="d-flex">
+      <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
+    </div>
+    <!-- In the name section -->
+    <div class="mb-5 ">
+      <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
+             formControlName="name"
+             id="name"
+             name="name"
+             type="text">
+      <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.name' | translate }}
+      </div>
+    </div>
+
+    <!-- In the description section -->
+    <div class="mb-5 mt-5 d-flex flex-column">
+      <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
+      <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
+                class="form-control" formControlName="description" id="description" name="description"></textarea>
+    </div>
+
+
+    <!-- In the url section -->
+    <div class="mb-5 mt-5">
+      <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
+             formControlName="url"
+             id="url"
+             name="url"
+             type="text">
+      <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.url' | translate }}
+      </div>
+    </div>
+
+
+    <!-- In the ldnUrl section -->
+    <div class="mb-5 mt-5">
+      <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+             formControlName="ldnUrl"
+             id="ldnUrl"
+             name="ldnUrl"
+             type="text">
+      <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.ldnurl' | translate }}
+      </div>
+    </div>
+    <!-- In the score section -->
+    <div class="mb-2">
+      <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
+      <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
+             [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
+             id="score"
+             name="score"
+             type="text">
+      <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
+        {{ 'ldn-new-service.form.error.score' | translate }}
+      </div>
+    </div>
+
+    <!-- In the Inbound Patterns Labels section -->
+    <div class="row mb-2 mt-5">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
+      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
         </div>
-        <!-- In the name section -->
-        <div class="mb-5 ">
-            <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control" formControlName="name"
-                   id="name"
-                   name="name"
-                   type="text">
-            <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.name' | translate }}
-            </div>
+        <div class="col-sm-1">
+          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
         </div>
+      </ng-container>
+      <div class="col-sm-2">
+      </div>
+    </div>
 
-        <!-- In the description section -->
-        <div class="mb-5 mt-5 d-flex flex-column">
-            <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
-            <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                      class="form-control" formControlName="description" id="description" name="description"></textarea>
-        </div>
+    <!-- In the Inbound Patterns section -->
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
+         formGroupName="notifyServiceInboundPatterns">
 
-
-        <!-- In the url section -->
-        <div class="mb-5 mt-5">
-            <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control" formControlName="url"
-                   id="url"
-                   name="url"
-                   type="text">
-            <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.url' | translate }}
-            </div>
-        </div>
-
-
-        <!-- In the ldnUrl section -->
-        <div class="mb-5 mt-5">
-            <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
-                   formControlName="ldnUrl"
-                   id="ldnUrl"
-                   name="ldnUrl"
-                   type="text">
-            <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.ldnurl' | translate }}
-            </div>
-        </div>
-        <!-- In the score section -->
-        <div class="mb-2">
-            <label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
-            <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
-                   [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
-                   id="score"
-                   name="score"
-                   type="text">
-            <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
-                {{ 'ldn-new-service.form.error.score' | translate }}
-            </div>
-        </div>
-
-        <!-- In the Inbound Patterns section -->
-        <div class="rowmb-2 mt-5">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
-            </div>
-            <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
-                <div class="col">
-                    <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-                </div>
-                <div class="col-sm-1">
-                    <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-                </div>
-            </ng-container>
-            <div class="col-sm-2">
-            </div>
-        </div>
-
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-             formGroupName="notifyServiceInboundPatterns">
-
-            <ng-container [formGroupName]="i">
+      <ng-container [formGroupName]="i">
 
 
         <div class="row mb-1">
@@ -106,13 +109,15 @@
                   ngbDropdownAnchor
                   type="text"
                 />
-                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
-                  <div  class="scrollable-menu" role="listbox">
-                    <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
-                      *ngFor="let pattern of inboundPatterns"
-                      ngbDropdownItem
-                      type="button"
-                      [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
+                <div aria-labelledby="inboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of inboundPatterns"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
                       <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
                       <div
                         class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
@@ -124,266 +129,267 @@
           </div>
 
 
-                    <div class="col">
-                        <ng-container
-                                *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-                            <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                                 placement="bottom-start">
-                                <div class="position-relative right-addon" role="combobox">
-                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                       ngbDropdownToggle></i>
-                                    <input
-                                            (click)="inboundItemfilterDropdown.open();"
-                                            [readonly]="true"
-                                            [value]="selectedInboundItemfilters"
-                                            class="form-control w-100 scrollable-dropdown-input"
-                                            formControlName="constraint"
-                                            id="inboundItemfilterDropdown"
-                                            ngbDropdownAnchor
-                                            type="text"
-                                    />
-                                    <!-- TODO: infinite scroll with 3 selects -->
-                                    <div aria-labelledby="inboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
-                                         ngbDropdownMenu>
-                                        <div class="scrollable-menu" role="listbox">
-                                            <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() "
-                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                                                    class="dropdown-item collection-item text-truncate w-100"
-                                                    ngbDropdownItem
-                                                    type="button">
-                                                <div>{{ constraint.id }}</div>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </ng-container>
+          <div class="col">
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="inboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedInboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="inboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="inboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() "
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
                     </div>
-
-                    <div
-                            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
-                            class="col-sm-1">
-                        <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                               type="checkbox">
-                        <div (click)="toggleAutomatic(i)"
-                             [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                             class="toggle-switch">
-                            <div class="slider"></div>
-                        </div>
-                    </div>
-
-                    <div class="col-sm-1">
-                        <button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </div>
-
+                  </div>
                 </div>
+              </div>
             </ng-container>
-        </div>
+          </div>
 
-        <span (click)="addInboundPattern()"
-              class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
-
-
-        <!-- In the Outbound Patterns section -->
-        <div class="rowmb-1 mt-5">
-            <div class="col">
-                <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
+          <div
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
+            class="col-sm-1">
+            <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                   type="checkbox">
+            <div (click)="toggleAutomatic(i)"
+                 [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                 class="toggle-switch">
+              <div class="slider"></div>
             </div>
-            <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
-                <div class="col">
-                    <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-                </div>
-            </ng-container>
-            <div class="col-sm1 ">
-                <label class="label-box-2" style="visibility: hidden;">
-                    {{ 'ldn-new-service.form.label.automatic' | translate }}
-                </label>
-            </div>
-            <div class="col-sm-2 ">
-            </div>
-        </div>
+          </div>
 
-        <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
-             formGroupName="notifyServiceOutboundPatterns">
-
-            <ng-container [formGroupName]="i">
-
-                <!-- Input elements in a separate row -->
-                <div class="row mb-1">
-                    <div class="col">
-                        <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
-                             ngbDropdown
-                             placement="bottom-start">
-                            <div class="position-relative right-addon" role="combobox">
-                                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                   ngbDropdownToggle></i>
-                                <input
-                                        (click)="outboundPatternDropdown.open();"
-                                        [readonly]="true"
-                                        [value]="selectedOutboundPatterns"
-                                        class="form-control w-100 scrollable-dropdown-input"
-                                        formControlName="patternLabel"
-                                        id="outboundPatternDropdownButton"
-                                        ngbDropdownAnchor
-                                        type="text"
-                                />
-                                <!-- TODO: infinite scroll with 3 selects -->
-                                <div aria-labelledby="outboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
-                                     ngbDropdownMenu>
-                                    <div class="scrollable-menu" role="listbox">
-                                        <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
-                                                *ngFor="let pattern of outboundPatterns"
-                                                [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate" class="dropdown-item collection-item text-truncate w-100"
-                                                ngbDropdownItem
-                                                type="button">
-                                            <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                                            <div
-                                                    class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col">
-                        <ng-container
-                                *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-                            <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
-                                 ngbDropdown
-                                 placement="bottom-start">
-                                <div class="position-relative right-addon" role="combobox">
-                                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                       ngbDropdownToggle></i>
-                                    <input
-                                            (click)="outboundItemfilterDropdown.open();"
-                                            [readonly]="true"
-                                            [value]="selectedOutboundItemfilters"
-                                            class="form-control w-100 scrollable-dropdown-input"
-                                            formControlName="constraint"
-                                            id="outboundItemfilterDropdown"
-                                            ngbDropdownAnchor
-                                            type="text"
-                                    />
-                                    <!-- TODO: infinite scroll with 3 selects -->
-                                    <div aria-labelledby="outboundItemfilterDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
-                                         ngbDropdownMenu>
-                                        <div class="scrollable-menu" role="listbox">
-                                            <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
-                                                    *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                                                    class="dropdown-item collection-item text-truncate w-100"
-                                                    ngbDropdownItem
-                                                    type="button">
-                                                <div>{{ constraint.id }}</div>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </ng-container>
-                    </div>
-
-                    <div [style.visibility]="'hidden'" class="col-sm-1">
-                        <input hidden id="automatic{{i}}" name="automatic{{i}}"
-                               type="checkbox">
-                        <div
-                                class="toggle-switch">
-                            <div class="slider"></div>
-                        </div>
-                    </div>
-
-                    <div class="col-sm-1">
-                        <button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </div>
-                </div>
-            </ng-container>
-
-        </div>
-
-        <span (click)="addOutboundPattern()"
-              class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}
-    </span>
-        <div class="mb-4">
-            &nbsp;
-        </div>
-
-        <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
-            <button class="btn btn-primary" type="submit">
-                <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
+          <div class="col-sm-1">
+            <button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
+              <i class="fas fa-trash"></i>
             </button>
-            <div class="d-flex">
-                <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
-                    <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
-                </button>
-            </div>
+          </div>
+
         </div>
+      </ng-container>
+    </div>
+
+    <span (click)="addInboundPattern()"
+          class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
 
-    </form>
+    <!-- In the Outbound Patterns Labels section -->
+    <div class="row mb-1 mt-5">
+      <div class="col">
+        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
+      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+      </ng-container>
+      <div class="col-sm1 ">
+        <label class="label-box-2" style="visibility: hidden;">
+          {{ 'ldn-new-service.form.label.automatic' | translate }}
+        </label>
+      </div>
+      <div class="col-sm-2 ">
+      </div>
+    </div>
+
+    <!-- In the Outbound Patterns section -->
+    <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
+         formGroupName="notifyServiceOutboundPatterns">
+
+      <ng-container [formGroupName]="i">
+
+        <div class="row mb-1">
+          <div class="col">
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
+                 ngbDropdown
+                 placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="outboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedOutboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="outboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="outboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of outboundPatterns"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col">
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
+                   ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="outboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedOutboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="outboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="outboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ng-container>
+          </div>
+
+          <div [style.visibility]="'hidden'" class="col-sm-1">
+            <input hidden id="automatic{{i}}" name="automatic{{i}}"
+                   type="checkbox">
+            <div
+              class="toggle-switch">
+              <div class="slider"></div>
+            </div>
+          </div>
+
+          <div class="col-sm-1">
+            <button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
+              <i class="fas fa-trash"></i>
+            </button>
+          </div>
+        </div>
+      </ng-container>
+
+    </div>
+
+    <span (click)="addOutboundPattern()"
+          class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}
+    </span>
+    <div class="mb-4">
+      &nbsp;
+    </div>
+
+    <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
+      <button class="btn btn-primary" type="submit">
+        <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
+      </button>
+      <div class="d-flex">
+        <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
+          <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
+        </button>
+      </div>
+    </div>
+
+
+  </form>
 </div>
 <ng-template #confirmModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.create.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.create.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()" class="btn btn-danger"
-                        id="delete-confirm">{{ 'service.refuse.create' | translate }}
-                </button>
-                <button (click)="createService()"
-                        class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.create.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.create.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()" class="btn btn-danger"
+                id="delete-confirm">{{ 'service.refuse.create' | translate }}
+        </button>
+        <button (click)="createService()"
+                class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 <ng-template #resetFormModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.create.reset-form.modal' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.create.reset-form.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="resetFormAndLeave()"
-                        class="btn btn-primary mr-2 custom-btn"
-                        id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
-                </button>
-                <button (click)="closeModal()" class="btn btn-danger"
-                        id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.create.reset-form.modal' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.create.reset-form.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="resetFormAndLeave()"
+                class="btn btn-primary mr-2 custom-btn"
+                id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
+        </button>
+        <button (click)="closeModal()" class="btn btn-danger"
+                id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
index e6ed9efa73..f017d4bab2 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
@@ -17,69 +17,69 @@ import {of} from 'rxjs';
 import {EventEmitter} from '@angular/core';
 
 describe('LdnServiceFormComponent', () => {
-    let component: LdnServiceFormComponent;
-    let fixture: ComponentFixture<LdnServiceFormComponent>;
+  let component: LdnServiceFormComponent;
+  let fixture: ComponentFixture<LdnServiceFormComponent>;
 
-    let ldnServicesService: any;
-    let ldnItemfiltersService: any;
-    let notificationsService: any;
+  let ldnServicesService: any;
+  let ldnItemfiltersService: any;
+  let notificationsService: any;
 
-    const itemFiltersRdPL$ = createSuccessfulRemoteDataObject$(createPaginatedList([new Itemfilter()]));
-    const translateServiceStub = {
-        get: () => of('translated-text'),
-        onLangChange: new EventEmitter(),
-        onTranslationChange: new EventEmitter(),
-        onDefaultLangChange: new EventEmitter()
-    };
+  const itemFiltersRdPL$ = createSuccessfulRemoteDataObject$(createPaginatedList([new Itemfilter()]));
+  const translateServiceStub = {
+    get: () => of('translated-text'),
+    onLangChange: new EventEmitter(),
+    onTranslationChange: new EventEmitter(),
+    onDefaultLangChange: new EventEmitter()
+  };
 
-    beforeEach(async () => {
-        ldnItemfiltersService = jasmine.createSpyObj('ldnItemfiltersService', {
-            findAll: jasmine.createSpy('findAll'),
-        });
-
-        ldnServicesService = jasmine.createSpyObj('ldnServicesService', {
-            create: jasmine.createSpy('create'),
-        });
-
-        notificationsService = jasmine.createSpyObj('notificationsService', {
-            success: jasmine.createSpy('success'),
-            error: jasmine.createSpy('error'),
-        });
-
-        await TestBed.configureTestingModule({
-            imports: [
-                ReactiveFormsModule,
-                RouterTestingModule,
-                NgbModalModule,
-                TranslateModule.forRoot()
-            ],
-            providers: [
-                {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
-                {provide: LdnServicesService, useValue: ldnServicesService},
-                {provide: NotificationsService, useValue: notificationsService},
-                {provide: TranslateService, useValue: translateServiceStub},
-                {provide: Router, useValue: new RouterStub()},
-                {
-                    provide: NgbModal, useValue: {
-                        open: () => {/*comment*/
-                        }
-                    }
-                },
-                FormBuilder
-            ],
-            declarations: [LdnServiceFormComponent]
-        })
-            .compileComponents();
+  beforeEach(async () => {
+    ldnItemfiltersService = jasmine.createSpyObj('ldnItemfiltersService', {
+      findAll: jasmine.createSpy('findAll'),
     });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(LdnServiceFormComponent);
-        component = fixture.componentInstance;
-        ldnItemfiltersService.findAll.and.returnValue(itemFiltersRdPL$);
-        fixture.detectChanges();
+    ldnServicesService = jasmine.createSpyObj('ldnServicesService', {
+      create: jasmine.createSpy('create'),
     });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
+    notificationsService = jasmine.createSpyObj('notificationsService', {
+      success: jasmine.createSpy('success'),
+      error: jasmine.createSpy('error'),
     });
+
+    await TestBed.configureTestingModule({
+      imports: [
+        ReactiveFormsModule,
+        RouterTestingModule,
+        NgbModalModule,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+        {provide: LdnServicesService, useValue: ldnServicesService},
+        {provide: NotificationsService, useValue: notificationsService},
+        {provide: TranslateService, useValue: translateServiceStub},
+        {provide: Router, useValue: new RouterStub()},
+        {
+          provide: NgbModal, useValue: {
+            open: () => {/*comment*/
+            }
+          }
+        },
+        FormBuilder
+      ],
+      declarations: [LdnServiceFormComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LdnServiceFormComponent);
+    component = fixture.componentInstance;
+    ldnItemfiltersService.findAll.and.returnValue(itemFiltersRdPL$);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index 334078398f..2acbd7622c 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -21,258 +21,259 @@ import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 
 @Component({
-    selector: 'ds-ldn-service-form',
-    templateUrl: './ldn-service-form.component.html',
-    styleUrls: ['./ldn-service-form.component.scss'],
-    animations: [
-        trigger('toggleAnimation', [
-            state('true', style({})),
-            state('false', style({})),
-            transition('true <=> false', animate('300ms ease-in')),
-        ]),
-    ],
+  selector: 'ds-ldn-service-form',
+  templateUrl: './ldn-service-form.component.html',
+  styleUrls: ['./ldn-service-form.component.scss'],
+  animations: [
+    trigger('toggleAnimation', [
+      state('true', style({})),
+      state('false', style({})),
+      transition('true <=> false', animate('300ms ease-in')),
+    ]),
+  ],
 })
 export class LdnServiceFormComponent implements OnInit {
-    formModel: FormGroup;
-    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-    public inboundPatterns: string[] = notifyPatterns;
-    public outboundPatterns: string[] = notifyPatterns;
-    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
+  formModel: FormGroup;
+  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+  public inboundPatterns: string[] = notifyPatterns;
+  public outboundPatterns: string[] = notifyPatterns;
+  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  @Input() public name: string;
+  @Input() public description: string;
+  @Input() public url: string;
+  @Input() public score: string;
+  @Input() public ldnUrl: string;
+  @Input() public inboundPattern: string;
+  @Input() public outboundPattern: string;
+  @Input() public constraint: string;
+  @Input() public automatic: boolean;
+  @Input() public headerKey: string;
+  @Output() submitForm: EventEmitter<any> = new EventEmitter();
+  @Output() cancelForm: EventEmitter<any> = new EventEmitter();
+  selectedOutboundPatterns: string[];
+  selectedInboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  hasInboundPattern: boolean;
+  hasOutboundPattern: boolean;
+  isScoreValid: boolean;
+  private modalRef: any;
+
+  constructor(
+    private ldnServicesService: LdnServicesService,
+    private ldnItemfiltersService: LdnItemfiltersService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private cdRef: ChangeDetectorRef,
+    protected modalService: NgbModal,
+  ) {
+
+    this.formModel = this.formBuilder.group({
+      enabled: true,
+      id: [''],
+      name: ['', Validators.required],
+      description: [''],
+      url: ['', Validators.required],
+      score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]],
+      ldnUrl: ['', Validators.required],
+      inboundPattern: [''],
+      outboundPattern: [''],
+      constraintPattern: [''],
+      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+      type: LDN_SERVICE.value,
     });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
+  }
+
+  ngOnInit(): void {
+    console.log(notifyPatterns)
+    this.setItemfilters();
+
+  }
+
+  setItemfilters() {
+    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+      getFirstCompletedRemoteData());
+  }
+
+  onSubmit() {
+    this.openConfirmModal(this.confirmModal);
+  }
+
+  openConfirmModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  openResetFormModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  createService() {
+    this.formModel.get('name').markAsTouched();
+    this.formModel.get('score').markAsTouched();
+    this.formModel.get('url').markAsTouched();
+    this.formModel.get('ldnUrl').markAsTouched();
+    this.formModel.get('notifyServiceInboundPatterns').markAsTouched();
+    this.formModel.get('notifyServiceOutboundPatterns').markAsTouched();
+
+    const name = this.formModel.get('name').value;
+    const url = this.formModel.get('url').value;
+    const score = this.formModel.get('score').value;
+    const ldnUrl = this.formModel.get('ldnUrl').value;
+
+    const hasInboundPattern = this.checkPatterns(this.formModel.get('notifyServiceInboundPatterns') as FormArray);
+    const hasOutboundPattern = this.checkPatterns(this.formModel.get('notifyServiceOutboundPatterns') as FormArray);
+
+    if (!name || !url || !ldnUrl || !score || (!hasInboundPattern && !hasOutboundPattern)) {
+      this.closeModal();
+      return;
+    }
+
+    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: {
+      pattern: string;
+      patternLabel: string
+    }) => {
+      const {patternLabel, ...rest} = pattern;
+      return rest;
     });
-    @Input() public name: string;
-    @Input() public description: string;
-    @Input() public url: string;
-    @Input() public score: string;
-    @Input() public ldnUrl: string;
-    @Input() public inboundPattern: string;
-    @Input() public outboundPattern: string;
-    @Input() public constraint: string;
-    @Input() public automatic: boolean;
-    @Input() public headerKey: string;
-    @Output() submitForm: EventEmitter<any> = new EventEmitter();
-    @Output() cancelForm: EventEmitter<any> = new EventEmitter();
-    selectedOutboundPatterns: string[];
-    selectedInboundPatterns: string[];
-    selectedInboundItemfilters: string[];
-    selectedOutboundItemfilters: string[];
-    hasInboundPattern: boolean;
-    hasOutboundPattern: boolean;
-    isScoreValid: boolean;
-    private modalRef: any;
 
-    constructor(
-        private ldnServicesService: LdnServicesService,
-        private ldnItemfiltersService: LdnItemfiltersService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private notificationsService: NotificationsService,
-        private translateService: TranslateService,
-        private cdRef: ChangeDetectorRef,
-        protected modalService: NgbModal,
-    ) {
+    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.map((pattern: {
+      pattern: string;
+      patternLabel: string
+    }) => {
+      const {patternLabel, ...rest} = pattern;
+      return rest;
+    });
 
-        this.formModel = this.formBuilder.group({
-            enabled: true,
-            id: [''],
-            name: ['', Validators.required],
-            description: [''],
-            url: ['', Validators.required],
-            score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], ldnUrl: ['', Validators.required],
-            inboundPattern: [''],
-            outboundPattern: [''],
-            constraintPattern: [''],
-            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-            type: LDN_SERVICE.value,
-        });
-    }
+    const values = this.formModel.value;
 
-    ngOnInit(): void {
-        console.log(notifyPatterns)
-        this.setItemfilters();
+    const ldnServiceData = this.ldnServicesService.create(values);
 
-    }
+    ldnServiceData.pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe((rd: RemoteData<LdnService>) => {
+      if (rd.hasSucceeded) {
+        this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
+          this.translateService.get('ldn-service-notification.created.success.body'));
 
-    setItemfilters() {
-        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-            getFirstCompletedRemoteData());
-    }
-
-    onSubmit() {
-        this.openConfirmModal(this.confirmModal);
-    }
-
-    openConfirmModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    openResetFormModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    createService() {
-        this.formModel.get('name').markAsTouched();
-        this.formModel.get('score').markAsTouched();
-        this.formModel.get('url').markAsTouched();
-        this.formModel.get('ldnUrl').markAsTouched();
-        this.formModel.get('notifyServiceInboundPatterns').markAsTouched();
-        this.formModel.get('notifyServiceOutboundPatterns').markAsTouched();
-
-        const name = this.formModel.get('name').value;
-        const url = this.formModel.get('url').value;
-        const score = this.formModel.get('score').value;
-        const ldnUrl = this.formModel.get('ldnUrl').value;
-
-        const hasInboundPattern = this.checkPatterns(this.formModel.get('notifyServiceInboundPatterns') as FormArray);
-        const hasOutboundPattern = this.checkPatterns(this.formModel.get('notifyServiceOutboundPatterns') as FormArray);
-
-        if (!name || !url || !ldnUrl || !score || (!hasInboundPattern && !hasOutboundPattern)) {
-            this.closeModal();
-            return;
-        }
-
-        this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: {
-            pattern: string;
-            patternLabel: string
-        }) => {
-            const {patternLabel, ...rest} = pattern;
-            return rest;
-        });
-
-        this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.map((pattern: {
-            pattern: string;
-            patternLabel: string
-        }) => {
-            const {patternLabel, ...rest} = pattern;
-            return rest;
-        });
-
-        const values = this.formModel.value;
-
-        const ldnServiceData = this.ldnServicesService.create(values);
-
-        ldnServiceData.pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe((rd: RemoteData<LdnService>) => {
-            if (rd.hasSucceeded) {
-                this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
-                    this.translateService.get('ldn-service-notification.created.success.body'));
-
-                this.sendBack();
-                this.closeModal();
-            } else {
-                this.notificationsService.error(this.translateService.get('ldn-service-notification.created.failure.title'),
-                    this.translateService.get('ldn-service-notification.created.failure.body'));
-                this.closeModal();
-            }
-        });
-    }
-
-    checkPatterns(formArray: FormArray): boolean {
-        for (let i = 0; i < formArray.length; i++) {
-            const pattern = formArray.at(i).get('pattern').value;
-            if (pattern) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-
-    resetFormAndLeave() {
         this.sendBack();
         this.closeModal();
+      } else {
+        this.notificationsService.error(this.translateService.get('ldn-service-notification.created.failure.title'),
+          this.translateService.get('ldn-service-notification.created.failure.body'));
+        this.closeModal();
+      }
+    });
+  }
+
+  checkPatterns(formArray: FormArray): boolean {
+    for (let i = 0; i < formArray.length; i++) {
+      const pattern = formArray.at(i).get('pattern').value;
+      if (pattern) {
+        return true;
+      }
     }
+    return false;
+  }
 
-    closeModal() {
-        this.modalRef.close();
-        this.cdRef.detectChanges();
-    }
-
-    addInboundPattern() {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-    }
-
-    removeInboundPattern(index: number) {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.removeAt(index);
-    }
-
-    addOutboundPattern() {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-    }
-
-    removeOutboundPattern(index: number) {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.removeAt(index);
-    }
-
-    toggleAutomatic(i: number) {
-        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-        if (automaticControl) {
-            automaticControl.setValue(!automaticControl.value);
-        }
+
+  resetFormAndLeave() {
+    this.sendBack();
+    this.closeModal();
+  }
+
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
+
+  addInboundPattern() {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+  }
+
+  removeInboundPattern(index: number) {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.removeAt(index);
+  }
+
+  addOutboundPattern() {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+  }
+
+  removeOutboundPattern(index: number) {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.removeAt(index);
+  }
+
+  toggleAutomatic(i: number) {
+    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+    if (automaticControl) {
+      automaticControl.setValue(!automaticControl.value);
     }
+  }
 
 
-    selectOutboundPattern(patternValue: string, index: number): void {
-        const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-        patternArray.controls[index].patchValue({pattern: patternValue})
-        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+  selectOutboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
-    }
+  }
 
-    selectInboundPattern(patternValue: string, index: number): void {
-        const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        patternArray.controls[index].patchValue({pattern: patternValue})
-        patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+  selectInboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
-    }
+  }
 
-    selectInboundItemFilter(filterValue: string, index: number): void {
-        const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
-        filterArray.controls[index].patchValue({constraint: filterValue})
-    }
+  selectInboundItemFilter(filterValue: string, index: number): void {
+    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
 
-    selectOutboundItemFilter(filterValue: string, index: number) {
-        const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-        console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-        filterArray.controls[index].patchValue({constraint: filterValue})
-    }
+  selectOutboundItemFilter(filterValue: string, index: number) {
+    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
 
-    private sendBack() {
-        this.router.navigateByUrl('admin/ldn/services');
-    }
+  private sendBack() {
+    this.router.navigateByUrl('admin/ldn/services');
+  }
 
 
-    private createOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-            patternLabel: 'Select a Pattern',
-        });
-    }
+  private createOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: [''],
+      constraint: [''],
+      patternLabel: 'Select a Pattern',
+    });
+  }
 
-    private createInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-            automatic: false,
-            patternLabel: 'Select a Pattern',
-        });
-    }
+  private createInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: [''],
+      constraint: [''],
+      automatic: false,
+      patternLabel: 'Select a Pattern',
+    });
+  }
 
 
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
index e6f62f29c6..ced1371623 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
@@ -3,23 +3,23 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {LdnServiceNewComponent} from './ldn-service-new.component';
 
 describe('LdnServiceNewComponent', () => {
-    let component: LdnServiceNewComponent;
-    let fixture: ComponentFixture<LdnServiceNewComponent>;
+  let component: LdnServiceNewComponent;
+  let fixture: ComponentFixture<LdnServiceNewComponent>;
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [LdnServiceNewComponent]
-        })
-            .compileComponents();
-    });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LdnServiceNewComponent]
+    })
+      .compileComponents();
+  });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(LdnServiceNewComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LdnServiceNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
index b589d6fc65..773f042d11 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
@@ -1,9 +1,9 @@
 import {Component} from '@angular/core';
 
 @Component({
-    selector: 'ds-ldn-service-new',
-    templateUrl: './ldn-service-new.component.html',
-    styleUrls: ['./ldn-service-new.component.scss']
+  selector: 'ds-ldn-service-new',
+  templateUrl: './ldn-service-new.component.html',
+  styleUrls: ['./ldn-service-new.component.scss']
 })
 export class LdnServiceNewComponent {
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
index 52b6a54ad9..3bd1bf249f 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
@@ -5,63 +5,63 @@ import {PaginatedList} from '../../../core/data/paginated-list.model';
 import {Observable, of} from 'rxjs';
 // Create a mock data object for a single LDN notify service
 export const mockLdnService: LdnService = {
-    id: 1,
-    name: 'Service Name',
-    description: 'Service Description',
-    url: 'Service URL',
-    ldnUrl: 'Service LDN URL',
-    notifyServiceInboundPatterns: [
-        {
-            pattern: 'patternA',
-            constraint: 'itemFilterA',
-            automatic: false,
-        },
-        {
-            pattern: 'patternB',
-            constraint: 'itemFilterB',
-            automatic: true,
-        },
-    ],
-    notifyServiceOutboundPatterns: [
-        {
-            pattern: 'patternC',
-            constraint: 'itemFilterC',
-        },
-    ],
-    type: LDN_SERVICE,
-    _links: {
-        self: {
-            href: 'http://localhost/api/ldn/ldnservices/1',
-        },
+  id: 1,
+  name: 'Service Name',
+  description: 'Service Description',
+  url: 'Service URL',
+  ldnUrl: 'Service LDN URL',
+  notifyServiceInboundPatterns: [
+    {
+      pattern: 'patternA',
+      constraint: 'itemFilterA',
+      automatic: false,
     },
+    {
+      pattern: 'patternB',
+      constraint: 'itemFilterB',
+      automatic: true,
+    },
+  ],
+  notifyServiceOutboundPatterns: [
+    {
+      pattern: 'patternC',
+      constraint: 'itemFilterC',
+    },
+  ],
+  type: LDN_SERVICE,
+  _links: {
+    self: {
+      href: 'http://localhost/api/ldn/ldnservices/1',
+    },
+  },
 };
 
 
 const mockLdnServices = {
-    payload: {
-        elementsPerPage: 20,
-        totalPages: 1,
-        totalElements: 1,
-        currentPage: 1,
-        first: undefined,
-        prev: undefined,
-        next: undefined,
-        last: undefined,
-        page: [mockLdnService],
-        type: LDN_SERVICE,
-        self: undefined,
-        getPageLength: function () {
-            return this.page.length;
-        },
-        _links: {
-            self: {
-                href: 'http://localhost/api/ldn/ldnservices/1',
-            },
-            page: [],
-        },
+  payload: {
+    elementsPerPage: 20,
+    totalPages: 1,
+    totalElements: 1,
+    currentPage: 1,
+    first: undefined,
+    prev: undefined,
+    next: undefined,
+    last: undefined,
+    page: [mockLdnService],
+    type: LDN_SERVICE,
+    self: undefined,
+    getPageLength: function () {
+      return this.page.length;
     },
-    hasSucceeded: true,
-    msToLive: 0,
+    _links: {
+      self: {
+        href: 'http://localhost/api/ldn/ldnservices/1',
+      },
+      page: [],
+    },
+  },
+  hasSucceeded: true,
+  msToLive: 0,
 };
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
index 43229c578f..7aa6231b4d 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
@@ -23,25 +23,25 @@ import {PaginatedList} from '../../../core/data/paginated-list.model';
 @Injectable()
 @dataService(LDN_SERVICE_CONSTRAINT_FILTERS)
 export class LdnItemfiltersService extends IdentifiableDataService<Itemfilter> implements FindAllData<Itemfilter> {
-    private findAllData: FindAllDataImpl<Itemfilter>;
+  private findAllData: FindAllDataImpl<Itemfilter>;
 
-    constructor(
-        protected requestService: RequestService,
-        protected rdbService: RemoteDataBuildService,
-        protected objectCache: ObjectCacheService,
-        protected halService: HALEndpointService,
-        protected notificationsService: NotificationsService,
-    ) {
-        super('itemfilters', requestService, rdbService, objectCache, halService);
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('itemfilters', requestService, rdbService, objectCache, halService);
 
-        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-    }
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
 
-    getEndpoint() {
-        return this.halService.getEndpoint(this.linkPath);
-    }
+  getEndpoint() {
+    return this.halService.getEndpoint(this.linkPath);
+  }
 
-    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
-        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
index 8935ce77d9..b8d28f0886 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
@@ -40,99 +40,99 @@ import {RequestParam} from '../../../core/cache/models/request-param.model';
 @Injectable()
 @dataService(LDN_SERVICE)
 export class LdnServicesService extends IdentifiableDataService<LdnService> implements FindAllData<LdnService>, DeleteData<LdnService>, PatchData<LdnService>, CreateData<LdnService> {
-    createData: CreateDataImpl<LdnService>;
-    private findAllData: FindAllDataImpl<LdnService>;
-    private deleteData: DeleteDataImpl<LdnService>;
-    private patchData: PatchDataImpl<LdnService>;
-    private comparator: ChangeAnalyzer<LdnService>;
-    private searchData: SearchDataImpl<LdnService>;
+  createData: CreateDataImpl<LdnService>;
+  private findAllData: FindAllDataImpl<LdnService>;
+  private deleteData: DeleteDataImpl<LdnService>;
+  private patchData: PatchDataImpl<LdnService>;
+  private comparator: ChangeAnalyzer<LdnService>;
+  private searchData: SearchDataImpl<LdnService>;
 
-    private findByPatternEndpoint = 'byInboundPattern';
+  private findByPatternEndpoint = 'byInboundPattern';
 
-    constructor(
-        protected requestService: RequestService,
-        protected rdbService: RemoteDataBuildService,
-        protected objectCache: ObjectCacheService,
-        protected halService: HALEndpointService,
-        protected notificationsService: NotificationsService,
-    ) {
-        super('ldnservices', requestService, rdbService, objectCache, halService);
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('ldnservices', requestService, rdbService, objectCache, halService);
 
-        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-        this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-        this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
-        this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
-        this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
-    }
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
+    this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
+    this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
+  }
 
 
-    create(object: LdnService): Observable<RemoteData<LdnService>> {
-        return this.createData.create(object);
-    }
+  create(object: LdnService): Observable<RemoteData<LdnService>> {
+    return this.createData.create(object);
+  }
 
-    patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
-        return this.patchData.patch(object, operations);
-    }
+  patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
+    return this.patchData.patch(object, operations);
+  }
 
-    update(object: LdnService): Observable<RemoteData<LdnService>> {
-        return this.patchData.update(object);
-    }
+  update(object: LdnService): Observable<RemoteData<LdnService>> {
+    return this.patchData.update(object);
+  }
 
-    commitUpdates(method?: RestRequestMethod): void {
-        return this.patchData.commitUpdates(method);
-    }
+  commitUpdates(method?: RestRequestMethod): void {
+    return this.patchData.commitUpdates(method);
+  }
 
-    createPatchFromCache(object: LdnService): Observable<Operation[]> {
-        return this.patchData.createPatchFromCache(object);
-    }
+  createPatchFromCache(object: LdnService): Observable<Operation[]> {
+    return this.patchData.createPatchFromCache(object);
+  }
 
-    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 
-    findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-        const params = [new RequestParam('pattern', pattern)];
-        const findListOptions = Object.assign(new FindListOptions(), options, {searchParams: params});
-        return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
+  findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    const params = [new RequestParam('pattern', pattern)];
+    const findListOptions = Object.assign(new FindListOptions(), options, {searchParams: params});
+    return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 
-    public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-        return this.deleteData.delete(objectId, copyVirtualMetadata);
-    }
+  public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    return this.deleteData.delete(objectId, copyVirtualMetadata);
+  }
 
-    public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-        return this.deleteData.deleteByHref(href, copyVirtualMetadata);
-    }
+  public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    return this.deleteData.deleteByHref(href, copyVirtualMetadata);
+  }
 
-    public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
-        const requestId = this.requestService.generateRequestId();
-        this.getBrowseEndpoint().pipe(
-            take(1),
-            map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
-            map((endpoint: string) => {
-                const body = this.getInvocationFormData(parameters, files);
-                return new MultipartPostRequest(requestId, endpoint, body);
-            })
-        ).subscribe((request: RestRequest) => this.requestService.send(request));
+  public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
+    const requestId = this.requestService.generateRequestId();
+    this.getBrowseEndpoint().pipe(
+      take(1),
+      map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
+      map((endpoint: string) => {
+        const body = this.getInvocationFormData(parameters, files);
+        return new MultipartPostRequest(requestId, endpoint, body);
+      })
+    ).subscribe((request: RestRequest) => this.requestService.send(request));
 
-        return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
-    }
+    return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
+  }
 
-    public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
-        return this.findById(scriptName).pipe(
-            getFirstCompletedRemoteData(),
-            map((rd: RemoteData<LdnService>) => {
-                return hasValue(rd.payload);
-            }),
-        );
-    }
+  public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
+    return this.findById(scriptName).pipe(
+      getFirstCompletedRemoteData(),
+      map((rd: RemoteData<LdnService>) => {
+        return hasValue(rd.payload);
+      }),
+    );
+  }
 
-    private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
-        const form: FormData = new FormData();
-        form.set('properties', JSON.stringify(constrain));
-        files.forEach((file: File) => {
-            form.append('file', file);
-        });
-        return form;
-    }
+  private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
+    const form: FormData = new FormData();
+    form.set('properties', JSON.stringify(constrain));
+    files.forEach((file: File) => {
+      form.append('file', file);
+    });
+    return form;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
index 89b0a8937d..e19f986e1a 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
@@ -1,84 +1,84 @@
 <div class="container">
-    <div class="d-flex">
-        <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
-    </div>
-    <div class="d-flex justify-content-end">
-        <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
-                class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
-    </div>
-    <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
-                   [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
-                   [hideGear]="true"
-                   [hidePagerWhenSinglePage]="true"
-                   [pageInfoState]="(ldnServicesRD$ | async)?.payload"
-                   [paginationOptions]="pageConfig">
-        <div class="table-responsive">
-            <table class="table table-striped table-hover">
-                <thead>
-                <tr>
-                    <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
-                    <td>{{ ldnService.name }}</td>
-                    <td>{{ ldnService.description }}</td>
-                    <td>
+  <div class="d-flex">
+    <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
+  </div>
+  <div class="d-flex justify-content-end">
+    <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
+      class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
+  </div>
+  <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
+                 [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
+                 [hideGear]="true"
+                 [hidePagerWhenSinglePage]="true"
+                 [pageInfoState]="(ldnServicesRD$ | async)?.payload"
+                 [paginationOptions]="pageConfig">
+    <div class="table-responsive">
+      <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+          <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
+          <td>{{ ldnService.name }}</td>
+          <td>{{ ldnService.description }}</td>
+          <td>
                         <span (click)="toggleStatus(ldnService, ldnServicesService)"
                               [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
                               [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
                               class="status-indicator">
                             {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
                         </span>
-                    </td>
-                    <td>
-                        <div class="btn-group">
-                            <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                            <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
-                                    class="btn btn-outline-dark">
-                                <i class="fas fa-edit"></i>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-    </ds-pagination>
+          </td>
+          <td>
+            <div class="btn-group">
+              <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
+                <i class="fas fa-trash"></i>
+              </button>
+              <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
+                      class="btn btn-outline-dark">
+                <i class="fas fa-edit"></i>
+              </button>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </ds-pagination>
 </div>
 
 <ng-template #deleteModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.delete.header' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div>
-                {{ 'service.overview.delete.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()"
-                        class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
-                <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
-                        class="btn btn-danger"
-                        id="delete-confirm">{{ 'service.overview.delete' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.delete.header' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
+
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.delete.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()"
+                class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
+        <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
+                class="btn btn-danger"
+                id="delete-confirm">{{ 'service.overview.delete' | translate }}
+        </button>
+      </div>
+    </div>
+  </div>
 </ng-template>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
index ff54f19455..87a1da27a1 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
@@ -11,44 +11,44 @@ import {PaginationServiceStub} from '../../../shared/testing/pagination-service.
 import {of} from 'rxjs';
 
 describe('LdnServicesOverviewComponent', () => {
-    let component: LdnServicesOverviewComponent;
-    let fixture: ComponentFixture<LdnServicesOverviewComponent>;
+  let component: LdnServicesOverviewComponent;
+  let fixture: ComponentFixture<LdnServicesOverviewComponent>;
 
-    const translateServiceStub = {
-        get: () => of('translated-text'),
-        onLangChange: new EventEmitter(),
-        onTranslationChange: new EventEmitter(),
-        onDefaultLangChange: new EventEmitter()
-    };
+  const translateServiceStub = {
+    get: () => of('translated-text'),
+    onLangChange: new EventEmitter(),
+    onTranslationChange: new EventEmitter(),
+    onDefaultLangChange: new EventEmitter()
+  };
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [TranslateModule.forRoot()],
-            declarations: [LdnServicesOverviewComponent],
-            providers: [
-                {provide: LdnServicesService, useValue: {}},
-                {provide: PaginationService, useValue: new PaginationServiceStub()},
-                {
-                    provide: NgbModal, useValue: {
-                        open: () => {/*comment*/
-                        }
-                    }
-                },
-                {provide: ChangeDetectorRef, useValue: {}},
-                {provide: NotificationsService, useValue: NotificationsServiceStub},
-                {provide: TranslateService, useValue: translateServiceStub},
-            ]
-        })
-            .compileComponents();
-    });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [LdnServicesOverviewComponent],
+      providers: [
+        {provide: LdnServicesService, useValue: {}},
+        {provide: PaginationService, useValue: new PaginationServiceStub()},
+        {
+          provide: NgbModal, useValue: {
+            open: () => {/*comment*/
+            }
+          }
+        },
+        {provide: ChangeDetectorRef, useValue: {}},
+        {provide: NotificationsService, useValue: NotificationsServiceStub},
+        {provide: TranslateService, useValue: translateServiceStub},
+      ]
+    })
+      .compileComponents();
+  });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(LdnServicesOverviewComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LdnServicesOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
index ec30cc0ba6..9fa237fc4e 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
@@ -1,11 +1,11 @@
 import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  ViewChild
 } from '@angular/core';
 import {Observable, Subscription} from 'rxjs';
 import {RemoteData} from '../../../core/data/remote-data';
@@ -25,122 +25,122 @@ import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
-    selector: 'ds-ldn-services-directory',
-    templateUrl: './ldn-services-directory.component.html',
-    styleUrls: ['./ldn-services-directory.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Default
+  selector: 'ds-ldn-services-directory',
+  templateUrl: './ldn-services-directory.component.html',
+  styleUrls: ['./ldn-services-directory.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
 
-    selectedServiceId: string | number | null = null;
-    servicesData: any[] = [];
-    @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
-    ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
-    });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
-    });
-    isProcessingSub: Subscription;
-    private modalRef: any;
+  selectedServiceId: string | number | null = null;
+  servicesData: any[] = [];
+  @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
+  ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  isProcessingSub: Subscription;
+  private modalRef: any;
 
 
-    constructor(
-        protected ldnServicesService: LdnServicesService,
-        protected paginationService: PaginationService,
-        protected modalService: NgbModal,
-        private cdRef: ChangeDetectorRef,
-        private notificationService: NotificationsService,
-        private translateService: TranslateService,
-    ) {
+  constructor(
+    protected ldnServicesService: LdnServicesService,
+    protected paginationService: PaginationService,
+    protected modalService: NgbModal,
+    private cdRef: ChangeDetectorRef,
+    private notificationService: NotificationsService,
+    private translateService: TranslateService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.setLdnServices();
+  }
+
+  setLdnServices() {
+    this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
+      switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
+        getFirstCompletedRemoteData()
+      ))
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.paginationService.clearPagination(this.pageConfig.id);
+    if (hasValue(this.isProcessingSub)) {
+      this.isProcessingSub.unsubscribe();
     }
+  }
 
-    ngOnInit(): void {
-        this.setLdnServices();
-    }
+  openDeleteModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
 
-    setLdnServices() {
-        this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
-            switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
-                getFirstCompletedRemoteData()
-            ))
-        );
-    }
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
 
-    ngOnDestroy(): void {
-        this.paginationService.clearPagination(this.pageConfig.id);
-        if (hasValue(this.isProcessingSub)) {
-            this.isProcessingSub.unsubscribe();
+  selectServiceToDelete(serviceId: number) {
+    this.selectedServiceId = serviceId;
+    this.openDeleteModal(this.deleteModal);
+  }
+
+  deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
+    if (this.selectedServiceId !== null) {
+      ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
+          this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
+            map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
+              if (remoteData.hasSucceeded) {
+                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
+              }
+              return remoteData;
+            })
+          );
+          this.cdRef.detectChanges();
+          this.closeModal();
+          this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
+            this.translateService.get('ldn-service-delete.notification.success.content'));
+        } else {
+          this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
+            this.translateService.get('ldn-service-delete.notification.error.content'));
+          this.cdRef.detectChanges();
         }
+      });
     }
+  }
 
-    openDeleteModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
 
-    closeModal() {
-        this.modalRef.close();
-        this.cdRef.detectChanges();
-    }
+  toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
+    const newStatus = !ldnService.enabled;
+    const originalStatus = ldnService.enabled;
 
-    selectServiceToDelete(serviceId: number) {
-        this.selectedServiceId = serviceId;
-        this.openDeleteModal(this.deleteModal);
-    }
+    const patchOperation: Operation = {
+      op: 'replace',
+      path: '/enabled',
+      value: newStatus,
+    };
 
-    deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
-        if (this.selectedServiceId !== null) {
-            ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
-                if (rd.hasSucceeded) {
-                    this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
-                    this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
-                        map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
-                            if (remoteData.hasSucceeded) {
-                                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
-                            }
-                            return remoteData;
-                        })
-                    );
-                    this.cdRef.detectChanges();
-                    this.closeModal();
-                    this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
-                        this.translateService.get('ldn-service-delete.notification.success.content'));
-                } else {
-                    this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
-                        this.translateService.get('ldn-service-delete.notification.error.content'));
-                    this.cdRef.detectChanges();
-                }
-            });
+    ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
+      (rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          ldnService.enabled = newStatus;
+          this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
+            this.translateService.get('ldn-enable-service.notification.success.content'));
+        } else {
+          ldnService.enabled = originalStatus;
+          this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
+            this.translateService.get('ldn-enable-service.notification.error.content'));
         }
-    }
-
-
-    toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
-        const newStatus = !ldnService.enabled;
-        const originalStatus = ldnService.enabled;
-
-        const patchOperation: Operation = {
-            op: 'replace',
-            path: '/enabled',
-            value: newStatus,
-        };
-
-        ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
-            (rd: RemoteData<LdnService>) => {
-                if (rd.hasSucceeded) {
-                    ldnService.enabled = newStatus;
-                    this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
-                        this.translateService.get('ldn-enable-service.notification.success.content'));
-                } else {
-                    ldnService.enabled = originalStatus;
-                    this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
-                        this.translateService.get('ldn-enable-service.notification.error.content'));
-                }
-            }
-        );
-    }
+      }
+    );
+  }
 
 
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
index 06595b5135..55b7ad8b98 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
@@ -9,23 +9,23 @@ import {ResourceType} from '../../../core/shared/resource-type';
 @typedObject
 @inheritSerialization(CacheableObject)
 export class Itemfilter extends CacheableObject {
-    static type = LDN_SERVICE_CONSTRAINT_FILTER;
+  static type = LDN_SERVICE_CONSTRAINT_FILTER;
 
-    @excludeFromEquals
-    @autoserialize
-    type: ResourceType;
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
 
-    @autoserialize
-    id: string;
+  @autoserialize
+  id: string;
 
-    @deserialize
-    _links: {
-        self: {
-            href: string;
-        };
+  @deserialize
+  _links: {
+    self: {
+      href: string;
     };
+  };
 
-    get self(): string {
-        return this._links.self.href;
-    }
+  get self(): string {
+    return this._links.self.href;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
index df42e237ba..7fb8072a6f 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
@@ -4,10 +4,10 @@ import {autoserialize} from 'cerialize';
  * notify service patterns
  */
 export class NotifyServicePattern {
-    @autoserialize
-    pattern: string;
-    @autoserialize
-    constraint: string;
-    @autoserialize
-    automatic: string;
+  @autoserialize
+  pattern: string;
+  @autoserialize
+  constraint: string;
+  @autoserialize
+  automatic: string;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
index d9e45d91a9..040e4d37b8 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
@@ -2,7 +2,7 @@
  * List of services statuses
  */
 export enum LdnServiceStatus {
-    UNKOWN,
-    DISABLED,
-    ENABLED,
+  UNKOWN,
+  DISABLED,
+  ENABLED,
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
index 500cefbd52..5121e47f69 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
@@ -1,3 +1,3 @@
 export class LdnServiceConstrain {
-    void: any;
+  void: any;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
index 382882ffb6..f3e421c9a2 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
@@ -11,50 +11,50 @@ import {NotifyServicePattern} from './ldn-service-patterns.model';
 @typedObject
 @inheritSerialization(CacheableObject)
 export class LdnService extends CacheableObject {
-    static type = LDN_SERVICE;
+  static type = LDN_SERVICE;
 
-    @excludeFromEquals
-    @autoserialize
-    type: ResourceType;
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
 
-    @autoserialize
-    id: number;
+  @autoserialize
+  id: number;
 
-    @deserializeAs('id')
-    uuid: string;
+  @deserializeAs('id')
+  uuid: string;
 
-    @autoserialize
-    name: string;
+  @autoserialize
+  name: string;
 
-    @autoserialize
-    description: string;
+  @autoserialize
+  description: string;
 
-    @autoserialize
-    url: string;
+  @autoserialize
+  url: string;
 
-    @autoserialize
-    score: number;
+  @autoserialize
+  score: number;
 
-    @autoserialize
-    enabled: boolean;
+  @autoserialize
+  enabled: boolean;
 
-    @autoserialize
-    ldnUrl: string;
+  @autoserialize
+  ldnUrl: string;
 
-    @autoserialize
-    notifyServiceInboundPatterns?: NotifyServicePattern[];
+  @autoserialize
+  notifyServiceInboundPatterns?: NotifyServicePattern[];
 
-    @autoserialize
-    notifyServiceOutboundPatterns?: NotifyServicePattern[];
+  @autoserialize
+  notifyServiceOutboundPatterns?: NotifyServicePattern[];
 
-    @deserialize
-    _links: {
-        self: {
-            href: string;
-        };
+  @deserialize
+  _links: {
+    self: {
+      href: string;
     };
+  };
 
-    get self(): string {
-        return this._links.self.href;
-    }
+  get self(): string {
+    return this._links.self.href;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
index d3f55c815e..c734503d95 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
@@ -2,9 +2,9 @@
  * List of parameter types used for scripts
  */
 export enum LdnServiceConstrainType {
-    STRING = 'String',
-    DATE = 'date',
-    BOOLEAN = 'boolean',
-    FILE = 'InputStream',
-    OUTPUT = 'OutputStream'
+  STRING = 'String',
+  DATE = 'date',
+  BOOLEAN = 'boolean',
+  FILE = 'InputStream',
+  OUTPUT = 'OutputStream'
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
index 39ad6859ac..8620bfc80c 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
@@ -1,30 +1,30 @@
 export const notifyPatterns = [
 
-    'ack-accept',
+  'ack-accept',
 
-    'ack-reject',
+  'ack-reject',
 
-    'ack-tentative-accept',
+  'ack-tentative-accept',
 
-    'ack-tentative-reject',
+  'ack-tentative-reject',
 
-    'announce-endorsement',
+  'announce-endorsement',
 
-    'announce-ingest',
+  'announce-ingest',
 
-    'announce-relationship',
+  'announce-relationship',
 
-    'announce-review',
+  'announce-review',
 
-    'announce-service-result',
+  'announce-service-result',
 
-    'request-endorsement',
+  'request-endorsement',
 
-    'request-ingest',
+  'request-ingest',
 
-    'request-review',
+  'request-review',
 
-    'undo-offer',
+  'undo-offer',
 
 ];
 

From 9651c74753754a0e19a0abe909248464afbb8933 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 22:15:27 +0100
Subject: [PATCH 17/21] CST-12455_coar-7sync Failing tests fixed. Ready to be
 merged

---
 .../ldn-service-form-edit.component.spec.ts                  | 3 ++-
 .../ldn-service-form/ldn-service-form.component.spec.ts      | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
index 867053fa83..9a669b5da6 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
@@ -1,5 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import {LdnServiceFormEditComponent} from './ldn-service-form-edit.component';
 import {ChangeDetectorRef, EventEmitter} from '@angular/core';
 import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
@@ -49,7 +50,7 @@ describe('LdnServiceFormEditComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      imports: [ReactiveFormsModule, TranslateModule.forRoot(), NgbDropdownModule],
       declarations: [LdnServiceFormEditComponent],
       providers: [
         {provide: LdnServicesService, useValue: ldnServicesService},
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
index f017d4bab2..70a4b76ed3 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
@@ -3,7 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {LdnServiceFormComponent} from './ldn-service-form.component';
 import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {RouterTestingModule} from '@angular/router/testing';
-import {NgbModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgbDropdownModule, NgbModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule, TranslateService} from '@ngx-translate/core';
 import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
 import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
@@ -51,7 +51,8 @@ describe('LdnServiceFormComponent', () => {
         ReactiveFormsModule,
         RouterTestingModule,
         NgbModalModule,
-        TranslateModule.forRoot()
+        TranslateModule.forRoot(),
+        NgbDropdownModule
       ],
       providers: [
         {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},

From 1ba925dd8f9de7ed501a5bb09161c42c09a3ad45 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 22:21:04 +0100
Subject: [PATCH 18/21] CST-12455_coar-7sync Wrongly added file removal

---
 qodana.yaml | 29 -----------------------------
 1 file changed, 29 deletions(-)
 delete mode 100644 qodana.yaml

diff --git a/qodana.yaml b/qodana.yaml
deleted file mode 100644
index 29f8f8c1fb..0000000000
--- a/qodana.yaml
+++ /dev/null
@@ -1,29 +0,0 @@
-#-------------------------------------------------------------------------------#
-#               Qodana analysis is configured by qodana.yaml file               #
-#             https://www.jetbrains.com/help/qodana/qodana-yaml.html            #
-#-------------------------------------------------------------------------------#
-version: "1.0"
-
-#Specify inspection profile for code analysis
-profile:
-  name: qodana.starter
-
-#Enable inspections
-#include:
-#  - name: <SomeEnabledInspectionId>
-
-#Disable inspections
-#exclude:
-#  - name: <SomeDisabledInspectionId>
-#    paths:
-#      - <path/where/not/run/inspection>
-
-#Execute shell command before Qodana execution (Applied in CI/CD pipeline)
-#bootstrap: sh ./prepare-qodana.sh
-
-#Install IDE plugins before Qodana execution (Applied in CI/CD pipeline)
-#plugins:
-#  - id: <plugin.id> #(plugin id can be found at https://plugins.jetbrains.com)
-
-#Specify Qodana linter for analysis (Applied in CI/CD pipeline)
-linter: jetbrains/qodana-js:latest

From 5203a0106cb9200f9aabb8008bd3efb37ff268e4 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Thu, 16 Nov 2023 22:25:50 +0100
Subject: [PATCH 19/21] CST-12455_coar-7sync Fixed 2 code rows

---
 .../ldn-service-form-edit.component.spec.ts                    | 3 +--
 .../ldn-service-form/ldn-service-form.component.html           | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
index 9a669b5da6..a2fa801e6d 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
@@ -1,11 +1,10 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import {NgbDropdownModule, NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {LdnServiceFormEditComponent} from './ldn-service-form-edit.component';
 import {ChangeDetectorRef, EventEmitter} from '@angular/core';
 import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
-import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule, TranslateService} from '@ngx-translate/core';
 import {PaginationService} from 'ngx-pagination';
 import {NotificationsService} from '../../../shared/notifications/notifications.service';
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 28834c0047..bc71eda994 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
@@ -109,7 +109,8 @@
                   ngbDropdownAnchor
                   type="text"
                 />
-                <div aria-labelledby="inboundPatternDropdownButton" class="dropdown-menu scrollable-dropdown-menu w-100 "
+                <div aria-labelledby="inboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
                      ngbDropdownMenu>
                   <div class="scrollable-menu" role="listbox">
                     <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"

From 1405e23f9c0944534bce2fc64f2e0e6af23a0959 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Fri, 17 Nov 2023 00:09:11 +0100
Subject: [PATCH 20/21] CST-12455_coar-7sync Removed console.log

---
 .../ldn-service-form-edit.component.ts        | 41 -------------------
 .../ldn-service-form.component.ts             |  5 ---
 .../ldn-services-directory.component.ts       |  2 +
 3 files changed, 2 insertions(+), 46 deletions(-)

diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index 52c133e06a..002aaf6812 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -134,28 +134,6 @@ export class LdnServiceFormEditComponent implements OnInit {
           });
           this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
           this.filterPatternObjectsAndPickLabel('notifyServiceOutboundPatterns', true)
-          /*const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-          inboundPatternsArray.clear();
-          console.log(" outside (pattern: any)")
-          this.service.notifyServiceInboundPatterns.forEach((patternObj: NotifyServicePattern) => {
-            const patternFormGroup = this.initializeInboundPatternFormGroup();
-            const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {...patternObj,patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj.pattern + '.label')})
-            patternFormGroup.patchValue(newPatternObjWithLabel);
-            console.log("(pattern: any)")
-
-
-            inboundPatternsArray.push(patternFormGroup);
-            this.cdRef.detectChanges();
-          })*/;
-
-          /*const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-          outboundPatternsArray.clear();
-          this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
-            const patternFormGroup = this.initializeOutboundPatternFormGroup();
-            patternFormGroup.patchValue(pattern);
-            outboundPatternsArray.push(patternFormGroup);
-            this.cdRef.detectChanges();
-          });*/
         }
       },
     );
@@ -183,7 +161,6 @@ export class LdnServiceFormEditComponent implements OnInit {
         patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label')
       })
       patternFormGroup.patchValue(newPatternObjWithLabel);
-      console.log("(pattern: any)")
 
       PatternsArray.push(patternFormGroup);
       this.cdRef.detectChanges();
@@ -241,7 +218,6 @@ export class LdnServiceFormEditComponent implements OnInit {
 
   selectOutboundPattern(patternValue: string, index: number): void {
     const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
     patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
@@ -249,20 +225,17 @@ export class LdnServiceFormEditComponent implements OnInit {
 
   selectOutboundItemFilter(filterValue: string, index: number) {
     const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
   }
 
   selectInboundPattern(patternValue: string, index: number): void {
     const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
     patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
   }
 
   selectInboundItemFilter(filterValue: string, index: number): void {
     const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
   }
 
@@ -402,19 +375,6 @@ export class LdnServiceFormEditComponent implements OnInit {
     this.markedForDeletionOutboundPattern = [];
   }
 
-  setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
-    console.log(formArrayName)
-    const formArray = this.formModel.get(formArrayName) as FormArray;
-    console.warn('inside setValueForControlInOutboundArray', formArray);
-    formArray.at(index).setValue(value);
-  }
-
-  setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
-    console.log(formArrayName)
-    const formArray = this.formModel.get(formArrayName) as FormArray;
-    console.warn('inside setValueForControlInInboundArray', formArray);
-    formArray.at(index).setValue(value);
-  }
 
   private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
     if (this.formModel.get(formControlName).dirty) {
@@ -427,7 +387,6 @@ export class LdnServiceFormEditComponent implements OnInit {
   }
 
   private handlePatterns(patchOperations: any[], formArrayName: string): void {
-    console.log(this.formModel)
     const patternsArray = this.formModel.get(formArrayName) as FormArray
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index 2acbd7622c..2d589547bc 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -96,7 +96,6 @@ export class LdnServiceFormComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    console.log(notifyPatterns)
     this.setItemfilters();
 
   }
@@ -227,7 +226,6 @@ export class LdnServiceFormComponent implements OnInit {
 
   selectOutboundPattern(patternValue: string, index: number): void {
     const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
     patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
@@ -235,7 +233,6 @@ export class LdnServiceFormComponent implements OnInit {
 
   selectInboundPattern(patternValue: string, index: number): void {
     const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
     patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
@@ -243,13 +240,11 @@ export class LdnServiceFormComponent implements OnInit {
 
   selectInboundItemFilter(filterValue: string, index: number): void {
     const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
   }
 
   selectOutboundItemFilter(filterValue: string, index: number) {
     const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
-    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
   }
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
index 9fa237fc4e..1906803581 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
@@ -66,7 +66,9 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
       switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
         getFirstCompletedRemoteData()
       ))
+
     );
+    console.log(this.ldnServicesRD$)
   }
 
   ngOnDestroy(): void {

From 6c710b709a6570f9d14678dc51816ff55074b217 Mon Sep 17 00:00:00 2001
From: Mattia Vianelli <mattia.vianelli@4science.com>
Date: Fri, 17 Nov 2023 00:14:47 +0100
Subject: [PATCH 21/21] CST-12455_coar-7sync Removed console.log

---
 .../ldn-services-directory/ldn-services-directory.component.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
index 1906803581..ac9354a3e4 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
@@ -68,7 +68,6 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
       ))
 
     );
-    console.log(this.ldnServicesRD$)
   }
 
   ngOnDestroy(): void {