CST-12455 Create page logic is working now finishing up the styling for the page

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

@@ -110,16 +110,40 @@
 
 
                     <div class="col">
-                        <ng-container *ngIf="selectedInboundPatterns">
+                        <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
-                            <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
+                          <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
-                                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
+                            <div class="position-relative right-addon" role="combobox">
-                                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
+                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
+                                 ngbDropdownToggle></i>
-                            </select>
+                              <input
+                                (click)="inboundItemfilterDropdown.open();"
+                                [readonly]="true"
+                                [value]="selectedInboundItemfilters"
+                                class="form-control w-100 scrollable-dropdown-input"
+                                formControlName="constraint"
+                                id="inboundItemfilterDropdown"
+                                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()"
+                                        *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>
 
-                    <div [style.visibility]="selectedInboundPatterns ? '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)"
@@ -199,17 +223,37 @@
                     </div>
 
                     <div class="col">
-                        <ng-container *ngIf="selectedOutboundPatterns">
+                        <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
-                            <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
+                          <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
-                                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
+                            <div class="position-relative right-addon" role="combobox">
-                                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
+                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
+                                 ngbDropdownToggle></i>
-                            </select>
+                              <input
+                                (click)="outboundItemfilterDropdown.open();"
+                                [readonly]="true"
+                                [value]="selectedOutboundItemfilters"
+                                class="form-control w-100 scrollable-dropdown-input"
+                                formControlName="constraint"
+                                id="outboundItemfilterDropdown"
+                                ngbDropdownAnchor
+                                type="text"
+                              />
+                              <!-- 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>
 
                   <div [style.visibility]="'hidden'" class="col-sm-1">
-                    <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                    <input hidden id="automatic{{i}}" name="automatic{{i}}"
                            type="checkbox">
                     <div
                          class="toggle-switch">

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

@@ -1,32 +1,23 @@
-import {
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild} from '@angular/core';
-  ChangeDetectorRef,
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
-  Component,
+import {Router} from '@angular/router';
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
 
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
-import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
+import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import {animate, state, style, transition, trigger} from '@angular/animations';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
-import { RemoteData } from '../../../core/data/remote-data';
+import {RemoteData} from '../../../core/data/remote-data';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
+import {TranslateService} from '@ngx-translate/core';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
-import { Observable } from 'rxjs';
+import {Observable} from 'rxjs';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 
 @Component({
@@ -68,9 +59,11 @@ export class LdnServiceFormComponent implements OnInit {
   @Input() public headerKey: string;
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
   @Output() cancelForm: EventEmitter<any> = new EventEmitter();
-    private modalRef: any;
   selectedOutboundPatterns: string[];
   selectedInboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  private modalRef: any;
 
   constructor(
     private ldnServicesService: LdnServicesService,
@@ -136,8 +129,12 @@ export class LdnServiceFormComponent implements OnInit {
       return;
     }
 
-        this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
+    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: {
-        this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
+      pattern: string;
+    }) => pattern.pattern !== '');
+    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: {
+      pattern: string;
+    }) => pattern.pattern !== '');
 
     const values = this.formModel.value;
 
@@ -196,10 +193,53 @@ 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(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)
+  }
+
+  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) {
+    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
+    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({
@@ -216,29 +256,5 @@ 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
-    }
 }