CST-11045 Changed names and styling

This commit is contained in:
Mattia Vianelli
2023-10-31 11:56:25 +01:00
parent b927761df3
commit bbbeeb6b71
2 changed files with 70 additions and 59 deletions

View File

@@ -1,44 +1,56 @@
<div>
<ng-container>
<div *ngFor="let pattern of patterns; let i = index" class="col mt-3">
<label class="mt-2 row">Request {{ pattern }} at the following service</label>
<div class="row">
<select [(ngModel)]="selectedServicesByPattern[pattern]" [compareWith]="compareById" class="form-control col">
<option [ngValue]="null" selected>Select a service</option>
<option *ngFor="let service of (filterServices(pattern) | async)" [ngValue]="service">
{{ service.name }}
</option>
</select>
<div class="col-sm-1">
<button (click)="removeService(i)" class="btn btn-outline-dark trash-button">
<i class="fas fa-trash"></i>
</button>
<label class="mt-2 row">Request {{ pattern }} at the following services</label>
<div *ngFor="let service of selectedServicesByPattern[pattern]; let serviceIndex = index">
<div class="row">
<select [(ngModel)]="selectedServicesByPattern[pattern][serviceIndex]" [compareWith]="compareById" class="form-control col">
<option [ngValue]="null" selected>Select a service</option>
<option *ngFor="let serviceOption of (filterServices(pattern) | async)" [ngValue]="serviceOption">
{{ serviceOption.name }}
</option>
</select>
<div class="col-sm-1">
<button (click)="removeService(pattern, serviceIndex)" class="btn btn-outline-dark trash-button">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<small class="row" *ngIf="!selectedServicesByPattern[pattern][serviceIndex]">
Select a service for {{ pattern }} of this item
</small>
<div class="row mt-1">
<div *ngIf="selectedServicesByPattern[pattern][serviceIndex]" class="alert alert-success col">
<div class="row ml-2 mt-2 mb-1">
<img alt="Coar-Notify-Pattern" class="coar-img-submission "
src="../../../../assets/images/notify_logo.png">
<i class="fa-solid fa-circle-check icon-check ml-2"></i>
<div class="mt-1 ml-4">
The selected service is compatible with the item according to its current status.
</div>
</div>
<div class="row ml-2 mt-2 mb-1">
<img alt="Coar-Notify-Pattern" class="coar-img-submission invisible"
src="../../../../assets/images/notify_logo.png">
<i class="fa-solid fa-circle-check icon-check ml-2 invisible"></i>
<div class="mt-1 ml-4">
{{ selectedServicesByPattern[pattern][serviceIndex].name }}:
{{ selectedServicesByPattern[pattern][serviceIndex].description }}
</div>
</div>
</div>
<div class="col-sm-1 invisible">
<button class="btn btn-outline-dark trash-button">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
<small class="row" *ngIf="!selectedServicesByPattern[pattern]">Select a service for {{ pattern }} of this item</small>
<div class="row mt-1">
<div *ngIf="selectedServicesByPattern[pattern]" class="alert alert-success col">
<div class="row ml-2 mt-2 mb-1">
<img alt="Coar-Notify-Pattern" class="coar-img-submission "
src="../../../../assets/images/notify_logo.png">
<i class="fa-solid fa-circle-check icon-check ml-2"></i>
<div class="mt-1 ml-4">The selected service is compatible with the item according to its current status.</div>
</div>
<div class="row ml-2 mt-2 mb-1">
<img alt="Coar-Notify-Pattern" class="coar-img-submission invisible"
src="../../../../assets/images/notify_logo.png">
<i class="fa-solid fa-circle-check icon-check ml-2 invisible"></i>
<div class="mt-1 ml-4" >{{ selectedServicesByPattern[pattern].name }}: {{ selectedServicesByPattern[pattern].description }}</div>
</div>
</div>
<div class="col-sm-1 invisible">
<button class="btn btn-outline-dark trash-button">
<i class="fas fa-trash"></i>
</button>
</div>
<span (click)="addService(pattern, newService)" class="add-pattern-link mb-2">
{{ 'ldn-new-service.form.label.addPattern' | translate }}
</span>
</div>
<span (click)="addService()"
class="add-pattern-link mb-2 row">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
</div>
</ng-container>
</div>

View File

@@ -55,10 +55,11 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
coarNotifyConfigRD$: Observable<RemoteData<PaginatedList<SubmissionCoarNotifyConfig>>>;
ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
newService: LdnService = new LdnService();
patterns: string[] = [];
selectedServicesByPattern: { [key: string]: LdnService } = {};
selectedServicesByPattern: { [key: string]: LdnService[] } = {};
patternServices: { [key: string]: LdnService } = {};
patternsLoaded = false;
@@ -161,6 +162,7 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
this.fetchLdnServices();
this.pathCombiner = new JsonPatchOperationPathCombiner('sections', this.sectionData.id);
}
/**
@@ -184,17 +186,6 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
return service1 && service2 && service1.id === service2.id;
}
addService() {
this.patterns.push('');
}
removeService(index: number) {
if (index >= 0 && index < this.patterns.length) {
this.patterns.splice(index, 1);
}
}
/**
* Handle the customEvent (ex. drag-drop move event).
* The customEvent is stored inside event.$event
@@ -223,6 +214,22 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
}
}
addService(pattern: string, newService: LdnService) {
// Your logic to add a new service to the selected services for the pattern
// Example: Push the newService to the array corresponding to the pattern
if (!this.selectedServicesByPattern[pattern]) {
this.selectedServicesByPattern[pattern] = [];
}
this.selectedServicesByPattern[pattern].push(newService);
}
removeService(pattern: string, serviceIndex: number) {
if (this.selectedServicesByPattern[pattern]) {
// Remove the service at the specified index from the array
this.selectedServicesByPattern[pattern].splice(serviceIndex, 1);
}
}
/**
* Method called when a form remove event is fired.
* Dispatch form operations based on changes.
@@ -318,27 +325,20 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
fetchLdnServices() {
if (!this.ldnServicesRD$) {
this.ldnServicesRD$ = this.ldnServicesService.findAll().pipe(
getFirstCompletedRemoteData()
getFirstCompletedRemoteData()
);
}
}
/**
* Method called when dropdowns for the section are initialized
* Retrieve services with corresponding patterns to the dropdowns.
*/
filterServices(pattern: string) {
return this.ldnServicesRD$.pipe(
filter((rd) => rd.hasSucceeded),
map((rd) => rd.payload.page.filter((service) =>
this.hasInboundPattern(service, pattern)))
filter((rd) => rd.hasSucceeded),
map((rd) => rd.payload.page.filter((service) =>
this.hasInboundPattern(service, pattern)))
);
//.subscribe((services) => {
//ldnServices = services.filter((service) => this.hasInboundPattern(service, pattern));
//});
//return ldnServices;
}
@@ -346,8 +346,7 @@ export class SubmissionSectionCoarNotifyComponent extends SectionModelComponent
hasInboundPattern(service: any, patternType: string): boolean {
return service.notifyServiceInboundPatterns.some((pattern: { pattern: string; }) => {
return service.notifyServiceInboundPatterns.some((pattern: { pattern: string }) => {
return pattern.pattern === patternType;
});
}