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