CST-12455 Changes for the page to be using an ngbdropdown logic are still required and being worked on

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>
             <div class="col-sm-1 ">
+                <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+            </div>
+            <div class="col-sm-2">
             </div>
         </div>
 
@@ -86,16 +86,37 @@
 
                 <div  class="row mb-1">
                     <div class="col">
-                        <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
+                      <div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalInboundPattern{{i}}">
-                                name="additionalInboundPattern{{i}}" required>
+                        <div class="position-relative right-addon" role="combobox">
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
+                          <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                            <option *ngFor="let pattern of inboundPatterns"
+                             aria-hidden="true"></i>
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
+                          <input
-                        </select>
+                            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="inboundPattern.value">
+                    <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"
@@ -104,7 +125,7 @@
                     </ng-container>
                   </div>
 
-                    <div [style.visibility]="inboundPattern.value ? 'visible' : 'hidden'" class="col-sm1">
+                  <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)"
@@ -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}}"
+                        <div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalOutboundPattern{{i}}">
-                                name="additionalOutboundPattern{{i}}"
+                          <div class="position-relative right-addon" role="combobox">
-                                required>
+                            <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
+                                aria-hidden="true"></i>
-                            <option *ngFor="let pattern of outboundPatterns"
+                                <input
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
+                            formControlName="pattern"
-                        </select>
+                            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>

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;

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

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 ">
+            <div class="col-sm-1 ">
-                <label class="label-box-2">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+                <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
             </div>
             <div class="col-sm-1">
             </div>
@@ -77,17 +77,40 @@
 
                 <div class="row mb-1">
                   <div class="col">
-                        <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
+                    <div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalInboundPattern{{i}}">
-                                name="additionalInboundPattern{{i}}" required>
+                      <div class="position-relative right-addon" role="combobox">
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
+                        <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                            <option *ngFor="let pattern of inboundPatterns"
+                             aria-hidden="true">
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
+
-                        </select>
+                        </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}}"
+                      <div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalOutboundPattern{{i}}">
-                                name="additionalOutboundPattern{{i}}"
+                        <div class="position-relative right-addon" role="combobox">
-                                required>
+                          <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                            <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
+                             aria-hidden="true"></i>
-                            <option *ngFor="let pattern of outboundPatterns"
+                          <input
-                                    [value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</option>
+                            formControlName="pattern"
-                        </select>
+                            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,8 +208,9 @@
                         </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">
+                    <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                           type="checkbox">
                     <div
                          class="toggle-switch">
                       <div class="slider"></div>

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;
 }

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
+    }
 }