mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-18 15:33:04 +00:00
CST-12455 Changes for the page to be using an ngbdropdown logic are still required and being worked on
This commit is contained in:
Mattia Vianelli
@@ -69,12 +69,12 @@
|
||||
<label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
|
||||
<label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-sm1 ">
|
||||
<label class="label-box-2">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
|
||||
<div class="col-sm-1 ">
|
||||
<label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
<div class="col-sm-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -86,34 +86,55 @@
|
||||
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
|
||||
name="additionalInboundPattern{{i}}" required>
|
||||
<option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
|
||||
<option *ngFor="let pattern of inboundPatterns"
|
||||
[value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
|
||||
</select>
|
||||
</div>
|
||||
<div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}">
|
||||
<div class="position-relative right-addon" role="combobox">
|
||||
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
|
||||
aria-hidden="true"></i>
|
||||
<input
|
||||
formControlName="pattern"
|
||||
type="text"
|
||||
[readonly]="true"
|
||||
ngbDropdownAnchor
|
||||
class="form-control w-100 scrollable-dropdown-input"
|
||||
[value]="selectedInboundPatterns"
|
||||
(click)="inboundPatternDropdown.open();"
|
||||
id="inboundPatternDropdownButton"
|
||||
/>
|
||||
|
||||
<div class="col">
|
||||
<ng-container *ngIf="inboundPattern.value">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div [style.visibility]="inboundPattern.value ? 'visible' : 'hidden'" class="col-sm1">
|
||||
<input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
|
||||
type="checkbox">
|
||||
<div (click)="toggleAutomatic(i)"
|
||||
[class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
|
||||
class="toggle-switch">
|
||||
<div class="slider"></div>
|
||||
<!-- 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.outboundPattern' | 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="outboundPatternDropdownButton">
|
||||
<button type="button" ngbDropdownItem *ngFor="let pattern of inboundPatterns; let internalIndex = index" (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
|
||||
<div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
|
||||
<div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<ng-container *ngIf="getInboundPatternControlNames(i)">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div [style.visibility]="selectedInboundPatterns ? 'visible' : 'hidden'" class="col-sm-1">
|
||||
<input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
|
||||
type="checkbox">
|
||||
<div (click)="toggleAutomatic(i)"
|
||||
[class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
|
||||
class="toggle-switch">
|
||||
<div class="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-sm-2">
|
||||
<button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark"
|
||||
@@ -150,7 +171,7 @@
|
||||
<div class="col-sm-1 ">
|
||||
<label class="label-box-2"></label>
|
||||
</div>
|
||||
<div class="col-sm-1 ">
|
||||
<div class="col-sm-2 ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -162,16 +183,36 @@
|
||||
<!-- Input elements in a separate row -->
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
|
||||
name="additionalOutboundPattern{{i}}"
|
||||
required>
|
||||
<option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
|
||||
<option *ngFor="let pattern of outboundPatterns"
|
||||
[value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
|
||||
</select>
|
||||
<div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}">
|
||||
<div class="position-relative right-addon" role="combobox">
|
||||
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
|
||||
aria-hidden="true"></i>
|
||||
<input
|
||||
formControlName="pattern"
|
||||
type="text"
|
||||
[readonly]="true"
|
||||
ngbDropdownAnchor
|
||||
class="form-control w-100 scrollable-dropdown-input"
|
||||
[value]="selectedOutboundPatterns"
|
||||
(click)="outboundPatternDropdown.open();"
|
||||
id="outboundPatternDropdownButton"
|
||||
/>
|
||||
|
||||
<!-- 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 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>
|
||||
<div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ng-container *ngIf="outboundPattern.value">
|
||||
<ng-container *ngIf="getOutboundPatternControlNames(i)">
|
||||
<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"
|
||||
@@ -180,7 +221,7 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div [style.visibility]="'hidden'" class="col-sm1">
|
||||
<div [style.visibility]="'hidden'" class="col-sm-1">
|
||||
<input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
|
||||
<div
|
||||
class="toggle-switch">
|
||||
@@ -214,7 +255,7 @@
|
||||
<span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
|
||||
</button>
|
||||
<div class="d-flex">
|
||||
<button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
|
||||
<button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
|
||||
<span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -243,7 +284,7 @@
|
||||
<button (click)="closeModal()" class="btn btn-danger mr-2"
|
||||
id="delete-confirm">{{ 'service.detail.return' | translate }}
|
||||
</button>
|
||||
<button (click)="this.patchService()"
|
||||
<button (click)="patchService()"
|
||||
class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@import '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss';
|
||||
@import '../../../shared/form/form.component.scss';
|
||||
|
||||
form {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
@@ -28,7 +31,6 @@ textarea {
|
||||
.add-pattern-link {
|
||||
color: #0048ff;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.remove-pattern-link {
|
||||
@@ -93,6 +95,10 @@ textarea {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.7em;
|
||||
color: #888;
|
||||
}
|
||||
.toggle-switch {
|
||||
cursor: pointer;
|
||||
margin-top: 3px;
|
||||
|
||||
@@ -5,7 +5,7 @@ import { ActivatedRoute, 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 { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import {NgbDropdownConfig, NgbModal} from '@ng-bootstrap/ng-bootstrap';
|
||||
import { NotificationsService } from '../../../shared/notifications/notifications.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { LdnService } from '../ldn-services-model/ldn-services.model';
|
||||
@@ -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 {pattern} from "isbot";
|
||||
|
||||
@Component({
|
||||
selector: 'ds-ldn-service-form-edit',
|
||||
@@ -65,6 +66,8 @@ export class LdnServiceFormEditComponent implements OnInit {
|
||||
private deletedOutboundPatterns: number[] = [];
|
||||
private modalRef: any;
|
||||
private service: LdnService;
|
||||
selectedOutboundPatterns: string[];
|
||||
selectedInboundPatterns: string[];
|
||||
|
||||
constructor(
|
||||
protected ldnServicesService: LdnServicesService,
|
||||
@@ -164,8 +167,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 = {
|
||||
@@ -201,6 +206,37 @@ export class LdnServiceFormEditComponent 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.selectedInboundPatterns = patternValue;
|
||||
const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
|
||||
console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
|
||||
console.log(patternArray)
|
||||
//console.log(patternArray);
|
||||
//this.getPatternControlNames(index)
|
||||
}
|
||||
|
||||
|
||||
|
||||
getOutboundPatternControlNames(index: number) {
|
||||
const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
|
||||
return patternArrayValue
|
||||
}
|
||||
|
||||
getInboundPatternControlNames(index: number) {
|
||||
const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
|
||||
return patternArrayValue
|
||||
}
|
||||
|
||||
|
||||
toggleAutomatic(i: number) {
|
||||
const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
|
||||
if (automaticControl) {
|
||||
@@ -245,6 +281,7 @@ export class LdnServiceFormEditComponent implements OnInit {
|
||||
patchService() {
|
||||
this.deleteMarkedInboundPatterns();
|
||||
this.deleteMarkedOutboundPatterns();
|
||||
|
||||
const patchOperations = this.generatePatchOperations();
|
||||
|
||||
|
||||
@@ -343,11 +380,16 @@ export class LdnServiceFormEditComponent implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
private handlePatterns(patchOperations: any[], formArrayName: string): void {
|
||||
private handlePatterns(patchOperations: any[], formArrayName: string, selectedPatterns: string[]): void {
|
||||
|
||||
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) {
|
||||
@@ -406,4 +448,10 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,10 +60,10 @@
|
||||
<label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
|
||||
<label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-sm1 ">
|
||||
<label class="label-box-2">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
|
||||
<div class="col-sm-1 ">
|
||||
<label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
</div>
|
||||
@@ -76,18 +76,41 @@
|
||||
|
||||
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
|
||||
name="additionalInboundPattern{{i}}" required>
|
||||
<option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
|
||||
<option *ngFor="let pattern of inboundPatterns"
|
||||
[value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }} </option>
|
||||
</select>
|
||||
<div class="col">
|
||||
<div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}">
|
||||
<div class="position-relative right-addon" role="combobox">
|
||||
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
|
||||
aria-hidden="true">
|
||||
|
||||
</i>
|
||||
<input
|
||||
formControlName="pattern"
|
||||
type="text"
|
||||
[readonly]="true"
|
||||
ngbDropdownAnchor
|
||||
class="form-control w-100 scrollable-dropdown-input"
|
||||
[value]="selectedInboundPatterns"
|
||||
(click)="inboundPatternDropdown.open();"
|
||||
id="inboundPatternDropdownButton"
|
||||
/>
|
||||
|
||||
<!-- 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">
|
||||
<button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index" (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
|
||||
<div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
|
||||
<div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col">
|
||||
<ng-container *ngIf="inboundPattern.value">
|
||||
<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"
|
||||
@@ -96,7 +119,7 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div [style.visibility]="inboundPattern.value ? 'visible' : 'hidden'" class="col-sm-1">
|
||||
<div [style.visibility]="selectedInboundPatterns ? 'visible' : 'hidden'" class="col-sm-1">
|
||||
<input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
|
||||
type="checkbox">
|
||||
<div (click)="toggleAutomatic(i)"
|
||||
@@ -111,6 +134,7 @@
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
@@ -129,7 +153,7 @@
|
||||
<label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
|
||||
<label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
|
||||
</div>
|
||||
<div class="col-sm-1 ">
|
||||
</div>
|
||||
@@ -145,16 +169,37 @@
|
||||
<!-- Input elements in a separate row -->
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
|
||||
name="additionalOutboundPattern{{i}}"
|
||||
required>
|
||||
<option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
|
||||
<option *ngFor="let pattern of outboundPatterns"
|
||||
[value]="pattern">{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</option>
|
||||
</select>
|
||||
<div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}">
|
||||
<div class="position-relative right-addon" role="combobox">
|
||||
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
|
||||
aria-hidden="true"></i>
|
||||
<input
|
||||
formControlName="pattern"
|
||||
type="text"
|
||||
[readonly]="true"
|
||||
ngbDropdownAnchor
|
||||
class="form-control w-100 scrollable-dropdown-input"
|
||||
[value]="selectedOutboundPatterns"
|
||||
(click)="outboundPatternDropdown.open();"
|
||||
id="outboundPatternDropdownButton"
|
||||
/>
|
||||
|
||||
<!-- 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 ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
|
||||
<button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns" (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
|
||||
<div>{{ 'ldn-service.form.pattern.'+pattern+'.label' | translate }}</div>
|
||||
<div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<ng-container *ngIf="outboundPattern.value">
|
||||
<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"
|
||||
@@ -163,13 +208,14 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div [style.visibility]="'hidden'" class="col-sm1">
|
||||
<input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
|
||||
<div
|
||||
class="toggle-switch">
|
||||
<div class="slider"></div>
|
||||
</div>
|
||||
<div [style.visibility]="'hidden'" class="col-sm-1">
|
||||
<input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
|
||||
type="checkbox">
|
||||
<div
|
||||
class="toggle-switch">
|
||||
<div class="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-1">
|
||||
<button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@import '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss';
|
||||
@import '../../../shared/form/form.component.scss';
|
||||
|
||||
form {
|
||||
max-width: 800px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
@@ -30,7 +32,6 @@ textarea {
|
||||
.add-pattern-link {
|
||||
color: #0048ff;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.remove-pattern-link {
|
||||
@@ -39,6 +40,11 @@ textarea {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.7em;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.status-checkbox {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@@ -69,6 +69,8 @@ export class LdnServiceFormComponent implements OnInit {
|
||||
@Output() submitForm: EventEmitter<any> = new EventEmitter();
|
||||
@Output() cancelForm: EventEmitter<any> = new EventEmitter();
|
||||
private modalRef: any;
|
||||
selectedOutboundPatterns: string[];
|
||||
selectedInboundPatterns: string[];
|
||||
|
||||
constructor(
|
||||
private ldnServicesService: LdnServicesService,
|
||||
@@ -214,5 +216,29 @@ 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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user