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">
-                            <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"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-                            </select>
+                        <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+                          <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                            <div class="position-relative right-addon" role="combobox">
+                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                 ngbDropdownToggle></i>
+                              <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">
-                            <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"
-                                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-                            </select>
+                        <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+                          <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
+                            <div class="position-relative right-addon" role="combobox">
+                              <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                                 ngbDropdownToggle></i>
+                              <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,244 +1,260 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import {ChangeDetectorRef, Component, 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 { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { RemoteData } from '../../../core/data/remote-data';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { Observable } from 'rxjs';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {RemoteData} from '../../../core/data/remote-data';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {TranslateService} from '@ngx-translate/core';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {Observable} from 'rxjs';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 
 @Component({
-    selector: 'ds-ldn-service-form',
-    templateUrl: './ldn-service-form.component.html',
-    styleUrls: ['./ldn-service-form.component.scss'],
-    animations: [
-        trigger('toggleAnimation', [
-            state('true', style({})),
-            state('false', style({})),
-            transition('true <=> false', animate('300ms ease-in')),
-        ]),
-    ],
+  selector: 'ds-ldn-service-form',
+  templateUrl: './ldn-service-form.component.html',
+  styleUrls: ['./ldn-service-form.component.scss'],
+  animations: [
+    trigger('toggleAnimation', [
+      state('true', style({})),
+      state('false', style({})),
+      transition('true <=> false', animate('300ms ease-in')),
+    ]),
+  ],
 })
 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;
+  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>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
+  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  @Input() public name: string;
+  @Input() public description: string;
+  @Input() public url: string;
+  @Input() public ldnUrl: string;
+  @Input() public inboundPattern: string;
+  @Input() public outboundPattern: string;
+  @Input() public constraint: string;
+  @Input() public automatic: boolean;
+  @Input() public headerKey: string;
+  @Output() submitForm: EventEmitter<any> = new EventEmitter();
+  @Output() cancelForm: EventEmitter<any> = new EventEmitter();
+  selectedOutboundPatterns: string[];
+  selectedInboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  private modalRef: any;
+
+  constructor(
+    private ldnServicesService: LdnServicesService,
+    private ldnItemfiltersService: LdnItemfiltersService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private cdRef: ChangeDetectorRef,
+    protected modalService: NgbModal,
+  ) {
+
+    this.formModel = this.formBuilder.group({
+      enabled: true,
+      id: [''],
+      name: ['', Validators.required],
+      description: [''],
+      url: ['', Validators.required],
+      ldnUrl: ['', Validators.required],
+      inboundPattern: [''],
+      outboundPattern: [''],
+      constraintPattern: [''],
+      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+      type: LDN_SERVICE.value,
     });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
-    });
-    @Input() public name: string;
-    @Input() public description: string;
-    @Input() public url: string;
-    @Input() public ldnUrl: string;
-    @Input() public inboundPattern: string;
-    @Input() public outboundPattern: string;
-    @Input() public constraint: string;
-    @Input() public automatic: boolean;
-    @Input() public headerKey: string;
-    @Output() submitForm: EventEmitter<any> = new EventEmitter();
-    @Output() cancelForm: EventEmitter<any> = new EventEmitter();
-    private modalRef: any;
-    selectedOutboundPatterns: string[];
-    selectedInboundPatterns: string[];
+  }
 
-    constructor(
-        private ldnServicesService: LdnServicesService,
-        private ldnItemfiltersService: LdnItemfiltersService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private notificationsService: NotificationsService,
-        private translateService: TranslateService,
-        private cdRef: ChangeDetectorRef,
-        protected modalService: NgbModal,
-    ) {
+  ngOnInit(): void {
+    console.log(notifyPatterns)
+    this.setItemfilters();
 
-        this.formModel = this.formBuilder.group({
-            enabled: true,
-            id: [''],
-            name: ['', Validators.required],
-            description: [''],
-            url: ['', Validators.required],
-            ldnUrl: ['', Validators.required],
-            inboundPattern: [''],
-            outboundPattern: [''],
-            constraintPattern: [''],
-            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-            type: LDN_SERVICE.value,
-        });
+  }
+
+  setItemfilters() {
+    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+      getFirstCompletedRemoteData());
+  }
+
+  onSubmit() {
+    this.openConfirmModal(this.confirmModal);
+  }
+
+  openConfirmModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  openResetFormModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  createService() {
+    this.formModel.get('name').markAsTouched();
+    this.formModel.get('url').markAsTouched();
+    this.formModel.get('ldnUrl').markAsTouched();
+
+    const name = this.formModel.get('name').value;
+    const url = this.formModel.get('url').value;
+    const ldnUrl = this.formModel.get('ldnUrl').value;
+
+    if (!name || !url || !ldnUrl) {
+      this.closeModal();
+      return;
     }
 
-    ngOnInit(): void {
-        console.log(notifyPatterns)
-        this.setItemfilters();
+    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: {
+      pattern: string;
+    }) => pattern.pattern !== '');
+    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: {
+      pattern: string;
+    }) => pattern.pattern !== '');
 
-    }
+    const values = this.formModel.value;
 
-    setItemfilters() {
-        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-            getFirstCompletedRemoteData());
-    }
+    const ldnServiceData = this.ldnServicesService.create(values);
 
-    onSubmit() {
-        this.openConfirmModal(this.confirmModal);
-    }
+    ldnServiceData.pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe((rd: RemoteData<LdnService>) => {
+      if (rd.hasSucceeded) {
+        this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
+          this.translateService.get('ldn-service-notification.created.success.body'));
 
-    openConfirmModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    openResetFormModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    createService() {
-        this.formModel.get('name').markAsTouched();
-        this.formModel.get('url').markAsTouched();
-        this.formModel.get('ldnUrl').markAsTouched();
-
-        const name = this.formModel.get('name').value;
-        const url = this.formModel.get('url').value;
-        const ldnUrl = this.formModel.get('ldnUrl').value;
-
-        if (!name || !url || !ldnUrl) {
-            this.closeModal();
-            return;
-        }
-
-        this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
-        this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
-
-        const values = this.formModel.value;
-
-        const ldnServiceData = this.ldnServicesService.create(values);
-
-        ldnServiceData.pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe((rd: RemoteData<LdnService>) => {
-            if (rd.hasSucceeded) {
-                this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
-                this.translateService.get('ldn-service-notification.created.success.body'));
-
-                this.sendBack();
-                this.closeModal();
-            } else {
-                this.notificationsService.error(this.translateService.get('notification.created.failure'));
-            }
-        });
-    }
-
-
-    resetFormAndLeave() {
         this.sendBack();
         this.closeModal();
+      } else {
+        this.notificationsService.error(this.translateService.get('notification.created.failure'));
+      }
+    });
+  }
+
+
+  resetFormAndLeave() {
+    this.sendBack();
+    this.closeModal();
+  }
+
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
+
+  addInboundPattern() {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+  }
+
+  removeInboundPattern(index: number) {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.removeAt(index);
+  }
+
+  addOutboundPattern() {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+  }
+
+  removeOutboundPattern(index: number) {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.removeAt(index);
+  }
+
+  toggleAutomatic(i: number) {
+    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+    if (automaticControl) {
+      automaticControl.setValue(!automaticControl.value);
     }
+  }
 
-    closeModal() {
-        this.modalRef.close();
-        this.cdRef.detectChanges();
-    }
+  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)
+  }
 
-    addInboundPattern() {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-    }
+  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)
+  }
 
-    removeInboundPattern(index: number) {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.removeAt(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})
 
-    addOutboundPattern() {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-    }
+    //console.log(patternArray);
+    //this.getPatternControlNames(index)
+  }
 
-    removeOutboundPattern(index: number) {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.removeAt(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})
+  }
 
-    toggleAutomatic(i: number) {
-        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-        if (automaticControl) {
-            automaticControl.setValue(!automaticControl.value);
-        }
-    }
-
-    private sendBack() {
-        this.router.navigateByUrl('admin/ldn/services');
-    }
-
-
-    private createOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-        });
-    }
-
-    private createInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-            automatic: false
-        });
-    }
-
-    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) {
+  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({
+      pattern: [''],
+      constraint: [''],
+    });
+  }
+
+  private createInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: [''],
+      constraint: [''],
+      automatic: false
+    });
+  }
+
+
 }