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] 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);
+  //}
 
 
 }