CST-12455 Code refactor and new dropdowns implementation

This commit is contained in:
Mattia Vianelli
2023-11-15 16:05:53 +01:00
parent d8e7487eff
commit 00bf0d34b1
24 changed files with 936 additions and 989 deletions

View File

@@ -1,34 +1,34 @@
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
import { I18nBreadcrumbResolver } from 'src/app/core/breadcrumbs/i18n-breadcrumb.resolver'; import {I18nBreadcrumbResolver} from 'src/app/core/breadcrumbs/i18n-breadcrumb.resolver';
import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component'; import {LdnServicesOverviewComponent} from './ldn-services-directory/ldn-services-directory.component';
import { LdnServiceNewComponent } from './ldn-service-new/ldn-service-new.component'; import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.component';
import { LdnServiceFormEditComponent } from './ldn-service-form-edit/ldn-service-form-edit.component'; import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
@NgModule({ @NgModule({
imports: [ imports: [
RouterModule.forChild([ RouterModule.forChild([
{ {
path: '', path: '',
pathMatch: 'full', pathMatch: 'full',
component: LdnServicesOverviewComponent, component: LdnServicesOverviewComponent,
resolve: {breadcrumb: I18nBreadcrumbResolver}, resolve: {breadcrumb: I18nBreadcrumbResolver},
data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'}, data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
}, },
{ {
path: 'new', path: 'new',
resolve: {breadcrumb: I18nBreadcrumbResolver}, resolve: {breadcrumb: I18nBreadcrumbResolver},
component: LdnServiceNewComponent, component: LdnServiceNewComponent,
data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'} data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
}, },
{ {
path: 'edit/:serviceId', path: 'edit/:serviceId',
resolve: {breadcrumb: I18nBreadcrumbResolver}, resolve: {breadcrumb: I18nBreadcrumbResolver},
component: LdnServiceFormEditComponent, component: LdnServiceFormEditComponent,
data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'} data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
}, },
]), ]),
] ]
}) })
export class AdminLdnServicesRoutingModule { export class AdminLdnServicesRoutingModule {

View File

@@ -1,29 +1,29 @@
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common'; import {CommonModule} from '@angular/common';
import { AdminLdnServicesRoutingModule } from './admin-ldn-services-routing.module'; import {AdminLdnServicesRoutingModule} from './admin-ldn-services-routing.module';
import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component'; import {LdnServicesOverviewComponent} from './ldn-services-directory/ldn-services-directory.component';
import { SharedModule } from '../../shared/shared.module'; import {SharedModule} from '../../shared/shared.module';
import { LdnServiceNewComponent } from './ldn-service-new/ldn-service-new.component'; import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.component';
import { LdnServiceFormComponent } from './ldn-service-form/ldn-service-form.component'; import {LdnServiceFormComponent} from './ldn-service-form/ldn-service-form.component';
import { LdnServiceFormEditComponent } from './ldn-service-form-edit/ldn-service-form-edit.component'; import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
import { FormsModule } from '@angular/forms'; import {FormsModule} from '@angular/forms';
import { LdnItemfiltersService } from './ldn-services-data/ldn-itemfilters-data.service'; import {LdnItemfiltersService} from './ldn-services-data/ldn-itemfilters-data.service';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, CommonModule,
SharedModule, SharedModule,
AdminLdnServicesRoutingModule, AdminLdnServicesRoutingModule,
FormsModule FormsModule
], ],
declarations: [ declarations: [
LdnServicesOverviewComponent, LdnServicesOverviewComponent,
LdnServiceNewComponent, LdnServiceNewComponent,
LdnServiceFormComponent, LdnServiceFormComponent,
LdnServiceFormEditComponent, LdnServiceFormEditComponent,
], ],
providers: [LdnItemfiltersService] providers: [LdnItemfiltersService]
}) })
export class AdminLdnServicesModule { export class AdminLdnServicesModule {
} }

View File

@@ -87,7 +87,8 @@
<div class="row mb-1"> <div class="row mb-1">
<div class="col"> <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"> <div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle" <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i> ngbDropdownToggle></i>
@@ -95,17 +96,12 @@
(click)="inboundPatternDropdown.open();" (click)="inboundPatternDropdown.open();"
[readonly]="true" [readonly]="true"
[value]="selectedInboundPatterns" [value]="selectedInboundPatterns"
class="form-control w-100 scrollable-dropdown-input" class="form-control w-80 scrollable-dropdown-input"
formControlName="pattern" formControlName="pattern"
id="inboundPatternDropdownButton" id="inboundPatternDropdownButton"
ngbDropdownAnchor ngbDropdownAnchor
type="text" 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 --> <!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu> <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
<button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
@@ -137,10 +133,6 @@
ngbDropdownAnchor ngbDropdownAnchor
type="text" 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 --> <!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu> <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()" <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
@@ -266,10 +258,6 @@
ngbDropdownAnchor ngbDropdownAnchor
type="text" 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 --> <!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu> <div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()" <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"

View File

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

View File

@@ -1,21 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import {ComponentFixture, TestBed} from '@angular/core/testing';
import { LdnServiceFormEditComponent } from './ldn-service-form-edit.component'; import {LdnServiceFormEditComponent} from './ldn-service-form-edit.component';
import { ChangeDetectorRef, EventEmitter } from '@angular/core'; 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 {ActivatedRoute, Router} from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule, TranslateService } from '@ngx-translate/core'; import {TranslateModule, TranslateService} from '@ngx-translate/core';
import { PaginationService } from 'ngx-pagination'; import {PaginationService} from 'ngx-pagination';
import { NotificationsService } from '../../../shared/notifications/notifications.service'; import {NotificationsService} from '../../../shared/notifications/notifications.service';
import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service'; import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
import { RouterStub } from '../../../shared/testing/router.stub'; import {RouterStub} from '../../../shared/testing/router.stub';
import { MockActivatedRoute } from '../../../shared/mocks/active-router.mock'; import {MockActivatedRoute} from '../../../shared/mocks/active-router.mock';
import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub'; import {NotificationsServiceStub} from '../../../shared/testing/notifications-service.stub';
import { of } from 'rxjs'; import {of} from 'rxjs';
import { RouteService } from '../../../core/services/route.service'; import {RouteService} from '../../../core/services/route.service';
import { provideMockStore } from '@ngrx/store/testing'; import {provideMockStore} from '@ngrx/store/testing';
describe('LdnServiceFormEditComponent', () => { describe('LdnServiceFormEditComponent', () => {
let component: LdnServiceFormEditComponent; let component: LdnServiceFormEditComponent;
@@ -38,7 +38,7 @@ describe('LdnServiceFormEditComponent', () => {
update: () => ({}), update: () => ({}),
}; };
ldnItemfiltersService = { ldnItemfiltersService = {
findAll: () => of(['item1', 'item2']), findAll: () => of(['item1', 'item2']),
}; };
cdRefStub = Object.assign({ cdRefStub = Object.assign({
detectChanges: () => fixture.detectChanges() detectChanges: () => fixture.detectChanges()
@@ -52,18 +52,18 @@ describe('LdnServiceFormEditComponent', () => {
imports: [ReactiveFormsModule, TranslateModule.forRoot()], imports: [ReactiveFormsModule, TranslateModule.forRoot()],
declarations: [LdnServiceFormEditComponent], declarations: [LdnServiceFormEditComponent],
providers: [ providers: [
{ provide: LdnServicesService, useValue: ldnServicesService }, {provide: LdnServicesService, useValue: ldnServicesService},
{ provide: LdnItemfiltersService, useValue: ldnItemfiltersService }, {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
{ provide: Router, useValue: new RouterStub() }, {provide: Router, useValue: new RouterStub()},
{ provide: ActivatedRoute, useValue: new MockActivatedRoute() }, {provide: ActivatedRoute, useValue: new MockActivatedRoute()},
{ provide: ChangeDetectorRef, useValue: cdRefStub }, {provide: ChangeDetectorRef, useValue: cdRefStub},
{ provide: NgbModal, useValue: modalService }, {provide: NgbModal, useValue: modalService},
{ provide: NotificationsService, useValue: NotificationsServiceStub }, {provide: NotificationsService, useValue: NotificationsServiceStub},
{ provide: TranslateService, useValue: translateServiceStub }, {provide: TranslateService, useValue: translateServiceStub},
{ provide: PaginationService, useValue: {} }, {provide: PaginationService, useValue: {}},
FormBuilder, FormBuilder,
RouteService, RouteService,
provideMockStore({ }), provideMockStore({}),
] ]
}) })
.compileComponents(); .compileComponents();

View File

@@ -202,13 +202,9 @@ export class LdnServiceFormEditComponent implements OnInit {
selectOutboundPattern(patternValue: string, index: number): void { selectOutboundPattern(patternValue: string, index: number): void {
// this.selectedOutboundPatterns = patternValue;
const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray) const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray)) console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
patternArray.controls[index].patchValue({pattern: patternValue}) patternArray.controls[index].patchValue({pattern: patternValue})
//console.log(patternArray);
//this.getPatternControlNames(index)
} }
selectOutboundItemFilter(filterValue: string, index: number) { selectOutboundItemFilter(filterValue: string, index: number) {
@@ -218,42 +214,17 @@ export class LdnServiceFormEditComponent implements OnInit {
} }
selectInboundPattern(patternValue: string, index: number): void { selectInboundPattern(patternValue: string, index: number): void {
// this.selectedOutboundPatterns = patternValue;
const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray) const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray)) console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
patternArray.controls[index].patchValue({pattern: patternValue}) patternArray.controls[index].patchValue({pattern: patternValue})
//console.log(patternArray);
//this.getPatternControlNames(index)
} }
selectInboundItemFilter(filterValue: string, index: number): void { selectInboundItemFilter(filterValue: string, index: number): void {
// this.selectedOutboundPatterns = patternValue;
const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray) const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray)) console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
filterArray.controls[index].patchValue({constraint: filterValue}) 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) { toggleAutomatic(i: number) {
const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`); const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
if (automaticControl) { if (automaticControl) {
@@ -478,12 +449,4 @@ export class LdnServiceFormEditComponent implements OnInit {
automatic: '', 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);
//}
} }

View File

@@ -1,356 +1,362 @@
<div class="container"> <div class="container">
<form (ngSubmit)="onSubmit()" [formGroup]="formModel"> <form (ngSubmit)="onSubmit()" [formGroup]="formModel">
<div class="d-flex"> <div class="d-flex">
<h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2> <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
</div> </div>
<!-- In the name section --> <!-- In the name section -->
<div class="mb-2"> <div class="mb-2">
<label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label> <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
<input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched" <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
[placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name" [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
name="name" name="name"
type="text"> type="text">
</div> </div>
<div class="mb-4"> <div class="mb-4">
&nbsp; &nbsp;
</div> </div>
<!-- In the description section --> <!-- In the description section -->
<div class="mb-2 d-flex flex-column"> <div class="mb-2 d-flex flex-column">
<label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label> <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate" <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
formControlName="description" id="description" name="description"></textarea> formControlName="description" id="description" name="description"></textarea>
</div> </div>
<div class="mb-4"> <div class="mb-4">
&nbsp; &nbsp;
</div> </div>
<!-- In the url section --> <!-- In the url section -->
<div class="mb-2"> <div class="mb-2">
<label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label> <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
<input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched" <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
[placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url" [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
name="url" name="url"
type="text"> type="text">
</div> </div>
<div class="mb-4"> <div class="mb-4">
&nbsp; &nbsp;
</div> </div>
<!-- In the ldnUrl section --> <!-- In the ldnUrl section -->
<div class="mb-2"> <div class="mb-2">
<label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label> <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
<input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
[placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl" [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
id="ldnUrl" id="ldnUrl"
name="ldnUrl" name="ldnUrl"
type="text"> type="text">
</div> </div>
<div class="mb-4"> <div class="mb-4">
&nbsp; &nbsp;
</div> </div>
<!-- In the Inbound Patterns section --> <!-- In the Inbound Patterns section -->
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label> <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
</div> </div>
<div class="col"> <div class="col">
<label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label> <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
</div> </div>
<div class="col-sm-1 "> <div class="col-sm-1 ">
<label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label> <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
</div> </div>
<div class="col-sm-1"> <div class="col-sm-1">
</div> </div>
</div> </div>
<div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index" <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
formGroupName="notifyServiceInboundPatterns"> formGroupName="notifyServiceInboundPatterns">
<ng-container [formGroupName]="i"> <ng-container [formGroupName]="i">
<div class="row mb-1"> <div class="row mb-1">
<div class="col"> <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"> <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> </i>
<input <input
formControlName="pattern" (click)="inboundPatternDropdown.open();"
type="text" [readonly]="true"
[readonly]="true" [value]="selectedInboundPatterns"
ngbDropdownAnchor class="form-control w-100 scrollable-dropdown-input"
class="form-control w-100 scrollable-dropdown-input" formControlName="pattern"
[value]="selectedInboundPatterns" id="inboundPatternDropdownButton"
(click)="inboundPatternDropdown.open();" ngbDropdownAnchor
id="inboundPatternDropdownButton" type="text"
/> />
<!-- TODO: infinite scroll with 3 selects -->
<!-- Main label TODO: remove after developing done cause it will pick the selected value to show --> <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
<div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div> <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
<div class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div> *ngFor="let pattern of inboundPatterns; let internalIndex = index"
<!-- TODO: infinite scroll with 3 selects --> ngbDropdownItem
<div ngbDropdownMenu aria-labelledby="inboundPatternDropdownButton"> type="button">
<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>{{ '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="!!(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]="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)"
[class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
class="toggle-switch">
<div class="slider"></div>
</div>
</div>
<div class="col-sm-1">
<button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</ng-container>
</div>
<span (click)="addInboundPattern()"
class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<div class="mb-4">
&nbsp;
</div>
<!-- In the Outbound Patterns section -->
<div class="row">
<div class="col">
<label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
</div>
<div class="col">
<label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
</div>
<div class="col-sm-1 ">
</div>
<div class="col-sm-1 ">
</div>
</div>
<div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
formGroupName="notifyServiceOutboundPatterns">
<ng-container [formGroupName]="i">
<!-- 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 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="!!(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 hidden id="automatic{{i}}" name="automatic{{i}}"
type="checkbox">
<div <div
class="toggle-switch"> class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
<div class="slider"></div> </button>
</div>
</div>
<div class="col-sm-1">
<button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button">
<i class="fas fa-trash"></i>
</button>
</div>
</div> </div>
</ng-container> </div>
</div>
<span (click)="addOutboundPattern()"
class="add-pattern-link">{{ 'ldn-new-service.form.label.addPattern' | translate }}
</span>
<div class="mb-4">
&nbsp;
</div>
<div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
<button class="btn btn-primary" type="submit">
<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">
<span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
</button>
</div> </div>
</div>
<div class="col">
<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]="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)"
[class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
class="toggle-switch">
<div class="slider"></div>
</div>
</div>
<div class="col-sm-1">
<button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button">
<i class="fas fa-trash"></i>
</button>
</div>
</div> </div>
</ng-container>
</div>
<span (click)="addInboundPattern()"
class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
</form> <div class="mb-4">
&nbsp;
</div>
<!-- In the Outbound Patterns section -->
<div class="row">
<div class="col">
<label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
</div>
<div class="col">
<label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
</div>
<div class="col-sm-1 ">
</div>
<div class="col-sm-1 ">
</div>
</div>
<div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
formGroupName="notifyServiceOutboundPatterns">
<ng-container [formGroupName]="i">
<!-- Input elements in a separate row -->
<div class="row mb-1">
<div class="col">
<div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown>
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
<input
(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>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
<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>
</button>
</div>
</div>
</div>
</div>
<div class="col">
<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 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">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</ng-container>
</div>
<span (click)="addOutboundPattern()"
class="add-pattern-link">{{ 'ldn-new-service.form.label.addPattern' | translate }}
</span>
<div class="mb-4">
&nbsp;
</div>
<div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
<button class="btn btn-primary" type="submit">
<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">
<span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
</button>
</div>
</div>
</form>
</div> </div>
<ng-template #confirmModal> <ng-template #confirmModal>
<div> <div>
<div class="modal-header"> <div class="modal-header">
<div> <div>
<h4>{{'service.overview.create.modal' | translate }}</h4> <h4>{{'service.overview.create.modal' | translate }}</h4>
</div> </div>
<button (click)="closeModal()" aria-label="Close" <button (click)="closeModal()" aria-label="Close"
class="close" type="button"> class="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
</div>
<div class="modal-body">
<div>
{{ 'service.create.body' | translate }}
</div>
<div class="mt-4">
<button (click)="closeModal()" class="btn btn-danger"
id="delete-confirm">{{ 'service.refuse.create' | translate }}
</button>
<button (click)="createService()"
class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
</button>
</div>
</div>
</div> </div>
<div class="modal-body">
<div>
{{ 'service.create.body' | translate }}
</div>
<div class="mt-4">
<button (click)="closeModal()" class="btn btn-danger"
id="delete-confirm">{{ 'service.refuse.create' | translate }}
</button>
<button (click)="createService()"
class="btn btn-primary mr-2 custom-btn">{{ 'service.confirm.create' | translate }}
</button>
</div>
</div>
</div>
</ng-template> </ng-template>
<ng-template #resetFormModal> <ng-template #resetFormModal>
<div> <div>
<div class="modal-header"> <div class="modal-header">
<div> <div>
<h4>{{'service.create.reset-form.modal' | translate }}</h4> <h4>{{'service.create.reset-form.modal' | translate }}</h4>
</div> </div>
<button (click)="closeModal()" aria-label="Close" <button (click)="closeModal()" aria-label="Close"
class="close" type="button"> class="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
</div>
<div class="modal-body">
<div>
{{ 'service.create.reset-form.body' | translate }}
</div>
<div class="mt-4">
<button (click)="resetFormAndLeave()"
class="btn btn-primary mr-2 custom-btn"
id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
</button>
<button (click)="closeModal()" class="btn btn-danger"
id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
</button>
</div>
</div>
</div> </div>
<div class="modal-body">
<div>
{{ 'service.create.reset-form.body' | translate }}
</div>
<div class="mt-4">
<button (click)="resetFormAndLeave()"
class="btn btn-primary mr-2 custom-btn"
id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
</button>
<button (click)="closeModal()" class="btn btn-danger"
id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
</button>
</div>
</div>
</div>
</ng-template> </ng-template>

View File

@@ -1,20 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import {ComponentFixture, TestBed} from '@angular/core/testing';
import { LdnServiceFormComponent } from './ldn-service-form.component'; import {LdnServiceFormComponent} from './ldn-service-form.component';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms'; import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing'; import {RouterTestingModule} from '@angular/router/testing';
import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'; import {NgbModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule, TranslateService } from '@ngx-translate/core'; import {TranslateModule, TranslateService} from '@ngx-translate/core';
import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service'; import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
import { NotificationsService } from 'src/app/shared/notifications/notifications.service'; import {NotificationsService} from 'src/app/shared/notifications/notifications.service';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
import { RouterStub } from 'src/app/shared/testing/router.stub'; import {RouterStub} from 'src/app/shared/testing/router.stub';
import { createPaginatedList } from 'src/app/shared/testing/utils.test'; import {createPaginatedList} from 'src/app/shared/testing/utils.test';
import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters'; import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
import { createSuccessfulRemoteDataObject$ } from 'src/app/shared/remote-data.utils'; import {createSuccessfulRemoteDataObject$} from 'src/app/shared/remote-data.utils';
import { of } from 'rxjs'; import {of} from 'rxjs';
import { EventEmitter } from '@angular/core'; import {EventEmitter} from '@angular/core';
describe('LdnServiceFormComponent', () => { describe('LdnServiceFormComponent', () => {
let component: LdnServiceFormComponent; let component: LdnServiceFormComponent;
@@ -54,12 +54,17 @@ describe('LdnServiceFormComponent', () => {
TranslateModule.forRoot() TranslateModule.forRoot()
], ],
providers: [ providers: [
{ provide: LdnItemfiltersService, useValue: ldnItemfiltersService }, {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
{ provide: LdnServicesService, useValue: ldnServicesService }, {provide: LdnServicesService, useValue: ldnServicesService},
{ provide: NotificationsService, useValue: notificationsService }, {provide: NotificationsService, useValue: notificationsService},
{ provide: TranslateService, useValue: translateServiceStub }, {provide: TranslateService, useValue: translateServiceStub},
{ provide: Router, useValue: new RouterStub() }, {provide: Router, useValue: new RouterStub()},
{ provide: NgbModal, useValue: { open: () => {/*comment*/ } } }, {
provide: NgbModal, useValue: {
open: () => {/*comment*/
}
}
},
FormBuilder FormBuilder
], ],
declarations: [LdnServiceFormComponent] declarations: [LdnServiceFormComponent]

View File

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

View File

@@ -1,25 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import {ComponentFixture, TestBed} from '@angular/core/testing';
import { LdnServiceNewComponent } from './ldn-service-new.component'; import {LdnServiceNewComponent} from './ldn-service-new.component';
describe('LdnServiceNewComponent', () => { describe('LdnServiceNewComponent', () => {
let component: LdnServiceNewComponent; let component: LdnServiceNewComponent;
let fixture: ComponentFixture<LdnServiceNewComponent>; let fixture: ComponentFixture<LdnServiceNewComponent>;
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [LdnServiceNewComponent] declarations: [LdnServiceNewComponent]
}) })
.compileComponents(); .compileComponents();
}); });
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(LdnServiceNewComponent); fixture = TestBed.createComponent(LdnServiceNewComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
}); });

View File

@@ -1,9 +1,9 @@
import { Component } from '@angular/core'; import {Component} from '@angular/core';
@Component({ @Component({
selector: 'ds-ldn-service-new', selector: 'ds-ldn-service-new',
templateUrl: './ldn-service-new.component.html', templateUrl: './ldn-service-new.component.html',
styleUrls: ['./ldn-service-new.component.scss'] styleUrls: ['./ldn-service-new.component.scss']
}) })
export class LdnServiceNewComponent { export class LdnServiceNewComponent {
} }

View File

@@ -1,67 +1,67 @@
import { LdnService } from '../ldn-services-model/ldn-services.model'; import {LdnService} from '../ldn-services-model/ldn-services.model';
import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
import { RemoteData } from '../../../core/data/remote-data'; import {RemoteData} from '../../../core/data/remote-data';
import { PaginatedList } from '../../../core/data/paginated-list.model'; import {PaginatedList} from '../../../core/data/paginated-list.model';
import { Observable, of } from 'rxjs'; import {Observable, of} from 'rxjs';
// Create a mock data object for a single LDN notify service // Create a mock data object for a single LDN notify service
export const mockLdnService: LdnService = { export const mockLdnService: LdnService = {
id: 1, id: 1,
name: 'Service Name', name: 'Service Name',
description: 'Service Description', description: 'Service Description',
url: 'Service URL', url: 'Service URL',
ldnUrl: 'Service LDN URL', ldnUrl: 'Service LDN URL',
notifyServiceInboundPatterns: [ notifyServiceInboundPatterns: [
{ {
pattern: 'patternA', pattern: 'patternA',
constraint: 'itemFilterA', constraint: 'itemFilterA',
automatic: false, automatic: false,
},
{
pattern: 'patternB',
constraint: 'itemFilterB',
automatic: true,
},
],
notifyServiceOutboundPatterns: [
{
pattern: 'patternC',
constraint: 'itemFilterC',
},
],
type: LDN_SERVICE,
_links: {
self: {
href: 'http://localhost/api/ldn/ldnservices/1',
},
}, },
{
pattern: 'patternB',
constraint: 'itemFilterB',
automatic: true,
},
],
notifyServiceOutboundPatterns: [
{
pattern: 'patternC',
constraint: 'itemFilterC',
},
],
type: LDN_SERVICE,
_links: {
self: {
href: 'http://localhost/api/ldn/ldnservices/1',
},
},
}; };
const mockLdnServices = { const mockLdnServices = {
payload: { payload: {
elementsPerPage: 20, elementsPerPage: 20,
totalPages: 1, totalPages: 1,
totalElements: 1, totalElements: 1,
currentPage: 1, currentPage: 1,
first: undefined, first: undefined,
prev: undefined, prev: undefined,
next: undefined, next: undefined,
last: undefined, last: undefined,
page: [mockLdnService], page: [mockLdnService],
type: LDN_SERVICE, type: LDN_SERVICE,
self: undefined, self: undefined,
getPageLength: function () { getPageLength: function () {
return this.page.length; return this.page.length;
},
_links: {
self: {
href: 'http://localhost/api/ldn/ldnservices/1',
},
page: [],
},
}, },
hasSucceeded: true, _links: {
msToLive: 0, self: {
href: 'http://localhost/api/ldn/ldnservices/1',
},
page: [],
},
},
hasSucceeded: true,
msToLive: 0,
}; };

View File

@@ -1,20 +1,20 @@
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import { dataService } from '../../../core/data/base/data-service.decorator'; import {dataService} from '../../../core/data/base/data-service.decorator';
import { LDN_SERVICE_CONSTRAINT_FILTERS } from '../ldn-services-model/ldn-service.resource-type'; import {LDN_SERVICE_CONSTRAINT_FILTERS} from '../ldn-services-model/ldn-service.resource-type';
import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service'; import {IdentifiableDataService} from '../../../core/data/base/identifiable-data.service';
import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data'; import {FindAllData, FindAllDataImpl} from '../../../core/data/base/find-all-data';
import { RequestService } from '../../../core/data/request.service'; import {RequestService} from '../../../core/data/request.service';
import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; import {RemoteDataBuildService} from '../../../core/cache/builders/remote-data-build.service';
import { ObjectCacheService } from '../../../core/cache/object-cache.service'; import {ObjectCacheService} from '../../../core/cache/object-cache.service';
import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; import {HALEndpointService} from '../../../core/shared/hal-endpoint.service';
import { NotificationsService } from '../../../shared/notifications/notifications.service'; import {NotificationsService} from '../../../shared/notifications/notifications.service';
import { FindListOptions } from '../../../core/data/find-list-options.model'; import {FindListOptions} from '../../../core/data/find-list-options.model';
import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model'; import {FollowLinkConfig} from '../../../shared/utils/follow-link-config.model';
import { Observable } from 'rxjs'; import {Observable} from 'rxjs';
import { RemoteData } from '../../../core/data/remote-data'; import {RemoteData} from '../../../core/data/remote-data';
import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters'; import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
import { PaginatedList } from '../../../core/data/paginated-list.model'; import {PaginatedList} from '../../../core/data/paginated-list.model';
/** /**
@@ -23,25 +23,25 @@ import { PaginatedList } from '../../../core/data/paginated-list.model';
@Injectable() @Injectable()
@dataService(LDN_SERVICE_CONSTRAINT_FILTERS) @dataService(LDN_SERVICE_CONSTRAINT_FILTERS)
export class LdnItemfiltersService extends IdentifiableDataService<Itemfilter> implements FindAllData<Itemfilter> { export class LdnItemfiltersService extends IdentifiableDataService<Itemfilter> implements FindAllData<Itemfilter> {
private findAllData: FindAllDataImpl<Itemfilter>; private findAllData: FindAllDataImpl<Itemfilter>;
constructor( constructor(
protected requestService: RequestService, protected requestService: RequestService,
protected rdbService: RemoteDataBuildService, protected rdbService: RemoteDataBuildService,
protected objectCache: ObjectCacheService, protected objectCache: ObjectCacheService,
protected halService: HALEndpointService, protected halService: HALEndpointService,
protected notificationsService: NotificationsService, protected notificationsService: NotificationsService,
) { ) {
super('itemfilters', requestService, rdbService, objectCache, halService); super('itemfilters', requestService, rdbService, objectCache, halService);
this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive); this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
} }
getEndpoint() { getEndpoint() {
return this.halService.getEndpoint(this.linkPath); return this.halService.getEndpoint(this.linkPath);
} }
findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> { findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow); return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
} }
} }

View File

@@ -1,38 +1,38 @@
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import { dataService } from '../../../core/data/base/data-service.decorator'; import {dataService} from '../../../core/data/base/data-service.decorator';
import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service'; import {IdentifiableDataService} from '../../../core/data/base/identifiable-data.service';
import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data'; import {FindAllData, FindAllDataImpl} from '../../../core/data/base/find-all-data';
import { DeleteData, DeleteDataImpl } from '../../../core/data/base/delete-data'; import {DeleteData, DeleteDataImpl} from '../../../core/data/base/delete-data';
import { RequestService } from '../../../core/data/request.service'; import {RequestService} from '../../../core/data/request.service';
import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service'; import {RemoteDataBuildService} from '../../../core/cache/builders/remote-data-build.service';
import { ObjectCacheService } from '../../../core/cache/object-cache.service'; import {ObjectCacheService} from '../../../core/cache/object-cache.service';
import { HALEndpointService } from '../../../core/shared/hal-endpoint.service'; import {HALEndpointService} from '../../../core/shared/hal-endpoint.service';
import { NotificationsService } from '../../../shared/notifications/notifications.service'; import {NotificationsService} from '../../../shared/notifications/notifications.service';
import { FindListOptions } from '../../../core/data/find-list-options.model'; import {FindListOptions} from '../../../core/data/find-list-options.model';
import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model'; import {FollowLinkConfig} from '../../../shared/utils/follow-link-config.model';
import { Observable } from 'rxjs'; import {Observable} from 'rxjs';
import { RemoteData } from '../../../core/data/remote-data'; import {RemoteData} from '../../../core/data/remote-data';
import { PaginatedList } from '../../../core/data/paginated-list.model'; import {PaginatedList} from '../../../core/data/paginated-list.model';
import { NoContent } from '../../../core/shared/NoContent.model'; import {NoContent} from '../../../core/shared/NoContent.model';
import { map, take } from 'rxjs/operators'; import {map, take} from 'rxjs/operators';
import { URLCombiner } from '../../../core/url-combiner/url-combiner'; import {URLCombiner} from '../../../core/url-combiner/url-combiner';
import { MultipartPostRequest } from '../../../core/data/request.models'; import {MultipartPostRequest} from '../../../core/data/request.models';
import { RestRequest } from '../../../core/data/rest-request.model'; import {RestRequest} from '../../../core/data/rest-request.model';
import { LdnService } from '../ldn-services-model/ldn-services.model'; import {LdnService} from '../ldn-services-model/ldn-services.model';
import { PatchData, PatchDataImpl } from '../../../core/data/base/patch-data'; import {PatchData, PatchDataImpl} from '../../../core/data/base/patch-data';
import { ChangeAnalyzer } from '../../../core/data/change-analyzer'; import {ChangeAnalyzer} from '../../../core/data/change-analyzer';
import { Operation } from 'fast-json-patch'; import {Operation} from 'fast-json-patch';
import { RestRequestMethod } from '../../../core/data/rest-request-method'; import {RestRequestMethod} from '../../../core/data/rest-request-method';
import { CreateData, CreateDataImpl } from '../../../core/data/base/create-data'; import {CreateData, CreateDataImpl} from '../../../core/data/base/create-data';
import { LdnServiceConstrain } from '../ldn-services-model/ldn-service.constrain.model'; import {LdnServiceConstrain} from '../ldn-services-model/ldn-service.constrain.model';
import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
import { hasValue } from '../../../shared/empty.util'; import {hasValue} from '../../../shared/empty.util';
import { SearchDataImpl } from '../../../core/data/base/search-data'; import {SearchDataImpl} from '../../../core/data/base/search-data';
import { RequestParam } from '../../../core/cache/models/request-param.model'; import {RequestParam} from '../../../core/cache/models/request-param.model';
/** /**
* A service responsible for fetching/sending data from/to the REST API on the ldnservices endpoint * A service responsible for fetching/sending data from/to the REST API on the ldnservices endpoint
@@ -40,99 +40,99 @@ import { RequestParam } from '../../../core/cache/models/request-param.model';
@Injectable() @Injectable()
@dataService(LDN_SERVICE) @dataService(LDN_SERVICE)
export class LdnServicesService extends IdentifiableDataService<LdnService> implements FindAllData<LdnService>, DeleteData<LdnService>, PatchData<LdnService>, CreateData<LdnService> { export class LdnServicesService extends IdentifiableDataService<LdnService> implements FindAllData<LdnService>, DeleteData<LdnService>, PatchData<LdnService>, CreateData<LdnService> {
createData: CreateDataImpl<LdnService>; createData: CreateDataImpl<LdnService>;
private findAllData: FindAllDataImpl<LdnService>; private findAllData: FindAllDataImpl<LdnService>;
private deleteData: DeleteDataImpl<LdnService>; private deleteData: DeleteDataImpl<LdnService>;
private patchData: PatchDataImpl<LdnService>; private patchData: PatchDataImpl<LdnService>;
private comparator: ChangeAnalyzer<LdnService>; private comparator: ChangeAnalyzer<LdnService>;
private searchData: SearchDataImpl<LdnService>; private searchData: SearchDataImpl<LdnService>;
private findByPatternEndpoint = 'byInboundPattern'; private findByPatternEndpoint = 'byInboundPattern';
constructor( constructor(
protected requestService: RequestService, protected requestService: RequestService,
protected rdbService: RemoteDataBuildService, protected rdbService: RemoteDataBuildService,
protected objectCache: ObjectCacheService, protected objectCache: ObjectCacheService,
protected halService: HALEndpointService, protected halService: HALEndpointService,
protected notificationsService: NotificationsService, protected notificationsService: NotificationsService,
) { ) {
super('ldnservices', requestService, rdbService, objectCache, halService); super('ldnservices', requestService, rdbService, objectCache, halService);
this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive); this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive); this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint); this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint); this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive); this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
} }
create(object: LdnService): Observable<RemoteData<LdnService>> { create(object: LdnService): Observable<RemoteData<LdnService>> {
return this.createData.create(object); return this.createData.create(object);
} }
patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> { patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
return this.patchData.patch(object, operations); return this.patchData.patch(object, operations);
} }
update(object: LdnService): Observable<RemoteData<LdnService>> { update(object: LdnService): Observable<RemoteData<LdnService>> {
return this.patchData.update(object); return this.patchData.update(object);
} }
commitUpdates(method?: RestRequestMethod): void { commitUpdates(method?: RestRequestMethod): void {
return this.patchData.commitUpdates(method); return this.patchData.commitUpdates(method);
} }
createPatchFromCache(object: LdnService): Observable<Operation[]> { createPatchFromCache(object: LdnService): Observable<Operation[]> {
return this.patchData.createPatchFromCache(object); return this.patchData.createPatchFromCache(object);
} }
findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> { findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow); return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
} }
findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> { findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
const params = [new RequestParam('pattern', pattern)]; const params = [new RequestParam('pattern', pattern)];
const findListOptions = Object.assign(new FindListOptions(), options, { searchParams: params }); const findListOptions = Object.assign(new FindListOptions(), options, {searchParams: params});
return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow); return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
} }
public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> { public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
return this.deleteData.delete(objectId, copyVirtualMetadata); return this.deleteData.delete(objectId, copyVirtualMetadata);
} }
public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> { public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
return this.deleteData.deleteByHref(href, copyVirtualMetadata); return this.deleteData.deleteByHref(href, copyVirtualMetadata);
} }
public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> { public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
const requestId = this.requestService.generateRequestId(); const requestId = this.requestService.generateRequestId();
this.getBrowseEndpoint().pipe( this.getBrowseEndpoint().pipe(
take(1), take(1),
map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()), map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
map((endpoint: string) => { map((endpoint: string) => {
const body = this.getInvocationFormData(parameters, files); const body = this.getInvocationFormData(parameters, files);
return new MultipartPostRequest(requestId, endpoint, body); return new MultipartPostRequest(requestId, endpoint, body);
}) })
).subscribe((request: RestRequest) => this.requestService.send(request)); ).subscribe((request: RestRequest) => this.requestService.send(request));
return this.rdbService.buildFromRequestUUID<LdnService>(requestId); return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
} }
public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> { public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
return this.findById(scriptName).pipe( return this.findById(scriptName).pipe(
getFirstCompletedRemoteData(), getFirstCompletedRemoteData(),
map((rd: RemoteData<LdnService>) => { map((rd: RemoteData<LdnService>) => {
return hasValue(rd.payload); return hasValue(rd.payload);
}), }),
); );
} }
private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData { private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
const form: FormData = new FormData(); const form: FormData = new FormData();
form.set('properties', JSON.stringify(constrain)); form.set('properties', JSON.stringify(constrain));
files.forEach((file: File) => { files.forEach((file: File) => {
form.append('file', file); form.append('file', file);
}); });
return form; return form;
} }
} }

View File

@@ -1,83 +1,84 @@
<div class="container"> <div class="container">
<div class="d-flex"> <div class="d-flex">
<h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2> <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
</div> </div>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<button class="btn btn-success" routerLink="/admin/ldn/services/new"><i <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button> class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
</div> </div>
<ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0" <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
[collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements" [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
[hideGear]="true" [hideGear]="true"
[hidePagerWhenSinglePage]="true" [hidePagerWhenSinglePage]="true"
[pageInfoState]="(ldnServicesRD$ | async)?.payload" [pageInfoState]="(ldnServicesRD$ | async)?.payload"
[paginationOptions]="pageConfig"> [paginationOptions]="pageConfig">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th scope="col">{{ 'service.overview.table.name' | translate }}</th> <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
<th scope="col">{{ 'service.overview.table.description' | translate }}</th> <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
<th scope="col">{{ 'service.overview.table.status' | translate }}</th> <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
<th scope="col">{{ 'service.overview.table.actions' | translate }}</th> <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page"> <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
<td>{{ ldnService.name }}</td> <td>{{ ldnService.name }}</td>
<td>{{ ldnService.description }}</td> <td>{{ ldnService.description }}</td>
<td> <td>
<span (click)="toggleStatus(ldnService, ldnServicesService)" <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"> class="status-indicator">
{{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }} {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
</span> </span>
</td> </td>
<td> <td>
<div class="btn-group"> <div class="btn-group">
<button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger"> <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
<button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]" <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
class="btn btn-outline-dark"> class="btn btn-outline-dark">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</button> </button>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</ds-pagination> </ds-pagination>
</div> </div>
<ng-template #deleteModal> <ng-template #deleteModal>
<div> <div>
<div class="modal-header"> <div class="modal-header">
<div> <div>
<h4>{{'service.overview.delete.header' | translate }}</h4> <h4>{{'service.overview.delete.header' | translate }}</h4>
</div> </div>
<button (click)="closeModal()" aria-label="Close" <button (click)="closeModal()" aria-label="Close"
class="close" type="button"> class="close" type="button">
<span aria-hidden="true">×</span> <span aria-hidden="true">×</span>
</button> </button>
</div>
<div class="modal-body">
<div>
{{ 'service.overview.delete.body' | translate }}
</div>
<div class="mt-4">
<button (click)="closeModal()"
class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
<button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
class="btn btn-danger"
id="delete-confirm">{{ 'service.overview.delete' | translate }}
</button>
</div>
</div>
</div> </div>
<div class="modal-body">
<div>
{{ 'service.overview.delete.body' | translate }}
</div>
<div class="mt-4">
<button (click)="closeModal()"
class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
<button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
class="btn btn-danger"
id="delete-confirm">{{ 'service.overview.delete' | translate }}
</button>
</div>
</div>
</div>
</ng-template> </ng-template>

View File

@@ -1,14 +1,14 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import {ComponentFixture, TestBed} from '@angular/core/testing';
import { LdnServicesOverviewComponent } from './ldn-services-directory.component'; import {LdnServicesOverviewComponent} from './ldn-services-directory.component';
import { ChangeDetectorRef, EventEmitter } from '@angular/core'; import {ChangeDetectorRef, EventEmitter} from '@angular/core';
import { NotificationsService } from '../../../shared/notifications/notifications.service'; import {NotificationsService} from '../../../shared/notifications/notifications.service';
import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub'; import {NotificationsServiceStub} from '../../../shared/testing/notifications-service.stub';
import { TranslateModule, TranslateService } from '@ngx-translate/core'; import {TranslateModule, TranslateService} from '@ngx-translate/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
import { PaginationService } from '../../../core/pagination/pagination.service'; import {PaginationService} from '../../../core/pagination/pagination.service';
import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub'; import {PaginationServiceStub} from '../../../shared/testing/pagination-service.stub';
import { of } from 'rxjs'; import {of} from 'rxjs';
describe('LdnServicesOverviewComponent', () => { describe('LdnServicesOverviewComponent', () => {
let component: LdnServicesOverviewComponent; let component: LdnServicesOverviewComponent;
@@ -26,17 +26,17 @@ describe('LdnServicesOverviewComponent', () => {
imports: [TranslateModule.forRoot()], imports: [TranslateModule.forRoot()],
declarations: [LdnServicesOverviewComponent], declarations: [LdnServicesOverviewComponent],
providers: [ providers: [
{ provide: LdnServicesService, useValue: {} }, {provide: LdnServicesService, useValue: {}},
{ provide: PaginationService, useValue: new PaginationServiceStub() }, {provide: PaginationService, useValue: new PaginationServiceStub()},
{ {
provide: NgbModal, useValue: { provide: NgbModal, useValue: {
open: () => {/*comment*/ open: () => {/*comment*/
} }
} }
}, },
{ provide: ChangeDetectorRef, useValue: {} }, {provide: ChangeDetectorRef, useValue: {}},
{ provide: NotificationsService, useValue: NotificationsServiceStub }, {provide: NotificationsService, useValue: NotificationsServiceStub},
{ provide: TranslateService, useValue: translateServiceStub }, {provide: TranslateService, useValue: translateServiceStub},
] ]
}) })
.compileComponents(); .compileComponents();

View File

@@ -7,140 +7,140 @@ import {
TemplateRef, TemplateRef,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
import { Observable, Subscription } from 'rxjs'; import {Observable, Subscription} from 'rxjs';
import { RemoteData } from '../../../core/data/remote-data'; import {RemoteData} from '../../../core/data/remote-data';
import { PaginatedList } from '../../../core/data/paginated-list.model'; import {PaginatedList} from '../../../core/data/paginated-list.model';
import { FindListOptions } from '../../../core/data/find-list-options.model'; import {FindListOptions} from '../../../core/data/find-list-options.model';
import { LdnService } from '../ldn-services-model/ldn-services.model'; import {LdnService} from '../ldn-services-model/ldn-services.model';
import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model'; import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
import { map, switchMap } from 'rxjs/operators'; import {map, switchMap} from 'rxjs/operators';
import { LdnServicesService } from 'src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service'; import {LdnServicesService} from 'src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service';
import { PaginationService } from 'src/app/core/pagination/pagination.service'; import {PaginationService} from 'src/app/core/pagination/pagination.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { hasValue } from '../../../shared/empty.util'; import {hasValue} from '../../../shared/empty.util';
import { Operation } from 'fast-json-patch'; import {Operation} from 'fast-json-patch';
import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
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';
@Component({ @Component({
selector: 'ds-ldn-services-directory', selector: 'ds-ldn-services-directory',
templateUrl: './ldn-services-directory.component.html', templateUrl: './ldn-services-directory.component.html',
styleUrls: ['./ldn-services-directory.component.scss'], styleUrls: ['./ldn-services-directory.component.scss'],
changeDetection: ChangeDetectionStrategy.Default changeDetection: ChangeDetectionStrategy.Default
}) })
export class LdnServicesOverviewComponent implements OnInit, OnDestroy { export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
selectedServiceId: string | number | null = null; selectedServiceId: string | number | null = null;
servicesData: any[] = []; servicesData: any[] = [];
@ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>; @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>; ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
config: FindListOptions = Object.assign(new FindListOptions(), { config: FindListOptions = Object.assign(new FindListOptions(), {
elementsPerPage: 20 elementsPerPage: 20
}); });
pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), { pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
id: 'po', id: 'po',
pageSize: 20 pageSize: 20
}); });
isProcessingSub: Subscription; isProcessingSub: Subscription;
private modalRef: any; private modalRef: any;
constructor( constructor(
protected ldnServicesService: LdnServicesService, protected ldnServicesService: LdnServicesService,
protected paginationService: PaginationService, protected paginationService: PaginationService,
protected modalService: NgbModal, protected modalService: NgbModal,
private cdRef: ChangeDetectorRef, private cdRef: ChangeDetectorRef,
private notificationService: NotificationsService, private notificationService: NotificationsService,
private translateService: TranslateService, private translateService: TranslateService,
) { ) {
}
ngOnInit(): void {
this.setLdnServices();
}
setLdnServices() {
this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
getFirstCompletedRemoteData()
))
);
}
ngOnDestroy(): void {
this.paginationService.clearPagination(this.pageConfig.id);
if (hasValue(this.isProcessingSub)) {
this.isProcessingSub.unsubscribe();
} }
}
ngOnInit(): void { openDeleteModal(content) {
this.setLdnServices(); this.modalRef = this.modalService.open(content);
} }
setLdnServices() { closeModal() {
this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe( this.modalRef.close();
switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe( this.cdRef.detectChanges();
getFirstCompletedRemoteData() }
))
);
}
ngOnDestroy(): void { selectServiceToDelete(serviceId: number) {
this.paginationService.clearPagination(this.pageConfig.id); this.selectedServiceId = serviceId;
if (hasValue(this.isProcessingSub)) { this.openDeleteModal(this.deleteModal);
this.isProcessingSub.unsubscribe(); }
deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
if (this.selectedServiceId !== null) {
ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
if (rd.hasSucceeded) {
this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
if (remoteData.hasSucceeded) {
remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
}
return remoteData;
})
);
this.cdRef.detectChanges();
this.closeModal();
this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
this.translateService.get('ldn-service-delete.notification.success.content'));
} else {
this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
this.translateService.get('ldn-service-delete.notification.error.content'));
this.cdRef.detectChanges();
} }
});
} }
}
openDeleteModal(content) {
this.modalRef = this.modalService.open(content);
}
closeModal() { toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
this.modalRef.close(); const newStatus = !ldnService.enabled;
this.cdRef.detectChanges(); const originalStatus = ldnService.enabled;
}
selectServiceToDelete(serviceId: number) { const patchOperation: Operation = {
this.selectedServiceId = serviceId; op: 'replace',
this.openDeleteModal(this.deleteModal); path: '/enabled',
} value: newStatus,
};
deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void { ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
if (this.selectedServiceId !== null) { (rd: RemoteData<LdnService>) => {
ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => { if (rd.hasSucceeded) {
if (rd.hasSucceeded) { ldnService.enabled = newStatus;
this.servicesData = this.servicesData.filter(service => service.id !== serviceId); this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
this.ldnServicesRD$ = this.ldnServicesRD$.pipe( this.translateService.get('ldn-enable-service.notification.success.content'));
map((remoteData: RemoteData<PaginatedList<LdnService>>) => { } else {
if (remoteData.hasSucceeded) { ldnService.enabled = originalStatus;
remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId); this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
} this.translateService.get('ldn-enable-service.notification.error.content'));
return remoteData;
})
);
this.cdRef.detectChanges();
this.closeModal();
this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
this.translateService.get('ldn-service-delete.notification.success.content'));
} else {
this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
this.translateService.get('ldn-service-delete.notification.error.content'));
this.cdRef.detectChanges();
}
});
} }
} }
);
}
toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
const newStatus = !ldnService.enabled;
const originalStatus = ldnService.enabled;
const patchOperation: Operation = {
op: 'replace',
path: '/enabled',
value: newStatus,
};
ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
(rd: RemoteData<LdnService>) => {
if (rd.hasSucceeded) {
ldnService.enabled = newStatus;
this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
this.translateService.get('ldn-enable-service.notification.success.content'));
} else {
ldnService.enabled = originalStatus;
this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
this.translateService.get('ldn-enable-service.notification.error.content'));
}
}
);
}
} }

View File

@@ -1,31 +1,31 @@
import { autoserialize, deserialize, inheritSerialization } from 'cerialize'; import {autoserialize, deserialize, inheritSerialization} from 'cerialize';
import { LDN_SERVICE_CONSTRAINT_FILTER } from './ldn-service.resource-type'; import {LDN_SERVICE_CONSTRAINT_FILTER} from './ldn-service.resource-type';
import { CacheableObject } from '../../../core/cache/cacheable-object.model'; import {CacheableObject} from '../../../core/cache/cacheable-object.model';
import { typedObject } from '../../../core/cache/builders/build-decorators'; import {typedObject} from '../../../core/cache/builders/build-decorators';
import { excludeFromEquals } from '../../../core/utilities/equals.decorators'; import {excludeFromEquals} from '../../../core/utilities/equals.decorators';
import { ResourceType } from '../../../core/shared/resource-type'; import {ResourceType} from '../../../core/shared/resource-type';
/** A single filter value and its properties. */ /** A single filter value and its properties. */
@typedObject @typedObject
@inheritSerialization(CacheableObject) @inheritSerialization(CacheableObject)
export class Itemfilter extends CacheableObject { export class Itemfilter extends CacheableObject {
static type = LDN_SERVICE_CONSTRAINT_FILTER; static type = LDN_SERVICE_CONSTRAINT_FILTER;
@excludeFromEquals @excludeFromEquals
@autoserialize @autoserialize
type: ResourceType; type: ResourceType;
@autoserialize @autoserialize
id: string; id: string;
@deserialize @deserialize
_links: { _links: {
self: { self: {
href: string; href: string;
};
}; };
};
get self(): string { get self(): string {
return this._links.self.href; return this._links.self.href;
} }
} }

View File

@@ -1,13 +1,13 @@
import { autoserialize } from 'cerialize'; import {autoserialize} from 'cerialize';
/** /**
* notify service patterns * notify service patterns
*/ */
export class NotifyServicePattern { export class NotifyServicePattern {
@autoserialize @autoserialize
pattern: string; pattern: string;
@autoserialize @autoserialize
constraint: string; constraint: string;
@autoserialize @autoserialize
automatic: string; automatic: string;
} }

View File

@@ -2,7 +2,7 @@
* List of services statuses * List of services statuses
*/ */
export enum LdnServiceStatus { export enum LdnServiceStatus {
UNKOWN, UNKOWN,
DISABLED, DISABLED,
ENABLED, ENABLED,
} }

View File

@@ -1,3 +1,3 @@
export class LdnServiceConstrain { export class LdnServiceConstrain {
void: any; void: any;
} }

View File

@@ -4,7 +4,7 @@
* Needs to be in a separate file to prevent circular * Needs to be in a separate file to prevent circular
* dependencies in webpack. * dependencies in webpack.
*/ */
import { ResourceType } from '../../../core/shared/resource-type'; import {ResourceType} from '../../../core/shared/resource-type';
export const LDN_SERVICE = new ResourceType('ldnservice'); export const LDN_SERVICE = new ResourceType('ldnservice');
export const LDN_SERVICE_CONSTRAINT_FILTERS = new ResourceType('itemfilters'); export const LDN_SERVICE_CONSTRAINT_FILTERS = new ResourceType('itemfilters');

View File

@@ -1,57 +1,57 @@
import { ResourceType } from '../../../core/shared/resource-type'; import {ResourceType} from '../../../core/shared/resource-type';
import { CacheableObject } from '../../../core/cache/cacheable-object.model'; import {CacheableObject} from '../../../core/cache/cacheable-object.model';
import { autoserialize, deserialize, deserializeAs, inheritSerialization } from 'cerialize'; import {autoserialize, deserialize, deserializeAs, inheritSerialization} from 'cerialize';
import { LDN_SERVICE } from './ldn-service.resource-type'; import {LDN_SERVICE} from './ldn-service.resource-type';
import { excludeFromEquals } from '../../../core/utilities/equals.decorators'; import {excludeFromEquals} from '../../../core/utilities/equals.decorators';
import { typedObject } from '../../../core/cache/builders/build-decorators'; import {typedObject} from '../../../core/cache/builders/build-decorators';
import { NotifyServicePattern } from './ldn-service-patterns.model'; import {NotifyServicePattern} from './ldn-service-patterns.model';
/** An LdnService and its properties. */ /** An LdnService and its properties. */
@typedObject @typedObject
@inheritSerialization(CacheableObject) @inheritSerialization(CacheableObject)
export class LdnService extends CacheableObject { export class LdnService extends CacheableObject {
static type = LDN_SERVICE; static type = LDN_SERVICE;
@excludeFromEquals @excludeFromEquals
@autoserialize @autoserialize
type: ResourceType; type: ResourceType;
@autoserialize @autoserialize
id: number; id: number;
@deserializeAs('id') @deserializeAs('id')
uuid: string; uuid: string;
@autoserialize @autoserialize
name: string; name: string;
@autoserialize @autoserialize
description: string; description: string;
@autoserialize @autoserialize
url: string; url: string;
@autoserialize @autoserialize
enabled: boolean; enabled: boolean;
@autoserialize @autoserialize
ldnUrl: string; ldnUrl: string;
@autoserialize @autoserialize
notifyServiceInboundPatterns?: NotifyServicePattern[]; notifyServiceInboundPatterns?: NotifyServicePattern[];
@autoserialize @autoserialize
notifyServiceOutboundPatterns?: NotifyServicePattern[]; notifyServiceOutboundPatterns?: NotifyServicePattern[];
@deserialize @deserialize
_links: { _links: {
self: { self: {
href: string; href: string;
};
}; };
};
get self(): string { get self(): string {
return this._links.self.href; return this._links.self.href;
} }
} }

View File

@@ -2,9 +2,9 @@
* List of parameter types used for scripts * List of parameter types used for scripts
*/ */
export enum LdnServiceConstrainType { export enum LdnServiceConstrainType {
STRING = 'String', STRING = 'String',
DATE = 'date', DATE = 'date',
BOOLEAN = 'boolean', BOOLEAN = 'boolean',
FILE = 'InputStream', FILE = 'InputStream',
OUTPUT = 'OutputStream' OUTPUT = 'OutputStream'
} }