CST-12455 Code refactor and new dropdowns implementation

src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html

@@ -87,7 +87,8 @@
 
         <div class="row mb-1">
           <div class="col">
-            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
+            <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic" id="additionalInboundPattern{{i}}"
+                 ngbDropdown placement="bottom">
               <div class="position-relative right-addon" role="combobox">
                 <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
                    ngbDropdownToggle></i>
@@ -95,17 +96,12 @@
                   (click)="inboundPatternDropdown.open();"
                   [readonly]="true"
                   [value]="selectedInboundPatterns"
-                  class="form-control w-100 scrollable-dropdown-input"
+                  class="form-control w-80 scrollable-dropdown-input"
                   formControlName="pattern"
                   id="inboundPatternDropdownButton"
                   ngbDropdownAnchor
                   type="text"
                 />
-
-                <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
-                <div
-                  class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
                 <!-- TODO: infinite scroll with 3 selects -->
                 <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
                   <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
@@ -137,10 +133,6 @@
                     ngbDropdownAnchor
                     type="text"
                   />
-
-                  <div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                  <div
-                    class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
                   <!-- TODO: infinite scroll with 3 selects -->
                   <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
                     <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
@@ -266,10 +258,6 @@
                     ngbDropdownAnchor
                     type="text"
                   />
-
-                  <div>{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                  <div
-                    class="small-text">{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
                   <!-- TODO: infinite scroll with 3 selects -->
                   <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
                     <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"

src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss

@@ -99,6 +99,7 @@ textarea {
   font-size: 0.7em;
   color: #888;
 }
+
 .toggle-switch {
   cursor: pointer;
   margin-top: 3px;

src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import {LdnServiceFormEditComponent} from './ldn-service-form-edit.component';
 import {ChangeDetectorRef, EventEmitter} from '@angular/core';
-import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule, TranslateService} from '@ngx-translate/core';

src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts

@@ -202,13 +202,9 @@ export class LdnServiceFormEditComponent implements OnInit {
 
 
   selectOutboundPattern(patternValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectOutboundItemFilter(filterValue: string, index: number) {
@@ -218,42 +214,17 @@ export class LdnServiceFormEditComponent implements OnInit {
   }
 
   selectInboundPattern(patternValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     patternArray.controls[index].patchValue({pattern: patternValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectInboundItemFilter(filterValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
-
-  getOutboundPatternControlNames(index: number) {
-    const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
-    console.log(patternArrayValue)
-    return patternArrayValue
-  }
-
-  getInboundPatternControlNames(index: number) {
-    const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
-    console.log(patternArrayValue)
-    return patternArrayValue
-
-  }
-
-  //TODO: make a method that checks if user selected one value for the
-
-
   toggleAutomatic(i: number) {
     const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
     if (automaticControl) {
@@ -478,12 +449,4 @@ export class LdnServiceFormEditComponent implements OnInit {
       automatic: '',
     });
   }
-
-  //setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
-  // const formArray = this.formModel.get(formArrayName) as FormArray;
-  //console.warn('inside setValueForControlInOutboundArray', formArray);
-  //formArray.at(index).setValue(value);
-  //}
-
-
 }

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html

@@ -77,31 +77,31 @@
 
         <div class="row mb-1">
           <div class="col">
-                    <div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalInboundPattern{{i}}">
+            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
               <div class="position-relative right-addon" role="combobox">
-                        <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                             aria-hidden="true">
+                   ngbDropdownToggle>
 
                 </i>
                 <input
-                            formControlName="pattern"
-                            type="text"
-                            [readonly]="true"
-                            ngbDropdownAnchor
-                            class="form-control w-100 scrollable-dropdown-input"
-                            [value]="selectedInboundPatterns"
                   (click)="inboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedInboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="pattern"
                   id="inboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
                 />
-
-                        <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
-                        <div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.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">
+                <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
-                          <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index"  (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
+                  <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                          *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                          ngbDropdownItem
+                          type="button">
                     <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                            <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
+                    <div
+                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
                   </button>
                 </div>
               </div>
@@ -143,7 +143,9 @@
             </ng-container>
           </div>
 
-                    <div [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'" class="col-sm-1">
+          <div
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
+            class="col-sm-1">
             <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
                    type="checkbox">
             <div (click)="toggleAutomatic(i)"
@@ -193,29 +195,33 @@
         <!-- Input elements in a separate row -->
         <div class="row mb-1">
           <div class="col">
-                      <div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100"  id="additionalOutboundPattern{{i}}">
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown>
               <div class="position-relative right-addon" role="combobox">
-                          <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                             aria-hidden="true"></i>
+                   ngbDropdownToggle></i>
                 <input
-                            formControlName="pattern"
-                            type="text"
-                            [readonly]="true"
-                            ngbDropdownAnchor
-                            class="form-control w-100 scrollable-dropdown-input"
-                            [value]="selectedOutboundPatterns"
                   (click)="outboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedOutboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="pattern"
                   id="outboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
                 />
 
                 <!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
                 <div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
-                          <div class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
+                <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">
+                <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
-                            <button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns" (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
+                  <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                          *ngFor="let pattern of outboundPatterns" ngbDropdownItem
+                          type="button">
                     <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                                <div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
+                    <div
+                      class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
                   </button>
                 </div>
               </div>

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts

@@ -59,7 +59,12 @@ describe('LdnServiceFormComponent', () => {
         {provide: NotificationsService, useValue: notificationsService},
         {provide: TranslateService, useValue: translateServiceStub},
         {provide: Router, useValue: new RouterStub()},
-        { provide: NgbModal, useValue: { open: () => {/*comment*/ } } },
+        {
+          provide: NgbModal, useValue: {
+            open: () => {/*comment*/
+            }
+          }
+        },
         FormBuilder
       ],
       declarations: [LdnServiceFormComponent]

src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts

@@ -36,8 +36,6 @@ export class LdnServiceFormComponent implements OnInit {
   formModel: FormGroup;
   @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
   @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-  //public inboundPatterns: object[] = notifyPatterns;
-  //public outboundPatterns: object[] = notifyPatterns;
   public inboundPatterns: string[] = notifyPatterns;
   public outboundPatterns: string[] = notifyPatterns;
   itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
@@ -207,18 +205,12 @@ export class LdnServiceFormComponent implements OnInit {
     const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     patternArray.patchValue({pattern: patternValue})
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectInboundItemFilter(filterValue: string, index: number): void {
-    // this.selectedOutboundPatterns = patternValue;
     const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
     console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
     filterArray.controls[index].patchValue({constraint: filterValue})
-
-    //console.log(patternArray);
-    //this.getPatternControlNames(index)
   }
 
   selectOutboundItemFilter(filterValue: string, index: number) {
@@ -227,19 +219,10 @@ export class LdnServiceFormComponent implements OnInit {
     filterArray.controls[index].patchValue({constraint: filterValue})
   }
 
-  getPatternControlNames(index: number) {
-    const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index].value
-    return patternArrayValue
-  }
-
   private sendBack() {
     this.router.navigateByUrl('admin/ldn/services');
   }
 
-  //selectInboundPattern(pattern: string, index: number): void {
-  //this.selectedInboundPatterns = pattern;
-  //}
-
 
   private createOutboundPatternFormGroup(): FormGroup {
     return this.formBuilder.group({

src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html

@@ -28,7 +28,8 @@
           <td>{{ ldnService.description }}</td>
           <td>
                         <span (click)="toggleStatus(ldnService, ldnServicesService)"
-                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }" [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
+                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
+                              [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
                               class="status-indicator">
                             {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
                         </span>