CST-12455 Changes for the page to be using an ngbdropdown logic are now working

This commit is contained in:
Mattia Vianelli
2023-11-14 17:33:56 +01:00
parent 721b80a0e6
commit cd5d509160
2 changed files with 42 additions and 21 deletions

View File

@@ -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}}">

View File

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