CST-12455 Task Completed, cleanup needed

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>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
         <div class="col">
-        <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
         </div>
-      <div class="col-sm-1 ">
+        <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>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
         <div class="col">
-        <label class="label-box-3">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+          <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()"

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
           });
-
+          this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
-          const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+          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: '',
     });

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

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;

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 !== '');
+      patternLabel: string
-    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: {
+    }) => {
+      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)
-    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]
     console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
-    patternArray.patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({pattern: patternValue})
-    //console.log(patternArray);
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
-    //this.getPatternControlNames(index)
+
   }
 
   selectInboundPattern(patternValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
-    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
     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',
     });
   }