[CST-12718] Added validations on LDN Service form

This commit is contained in:
Alisa Ismailati
2023-11-22 17:58:11 +01:00
parent f8215e7b17
commit dbdfcea06a
6 changed files with 57 additions and 14 deletions

View File

@@ -69,8 +69,11 @@
[placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
id="score"
name="score"
min="0"
max="1"
step=".01"
class="form-control"
type="text">
type="number">
<div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
{{ 'ldn-new-service.form.error.score' | translate }}
</div>
@@ -160,6 +163,10 @@
class="dropdown-menu scrollable-dropdown-menu w-100 "
ngbDropdownMenu>
<div class="scrollable-menu" role="listbox">
<button (click)="selectInboundItemFilter('', i); $event.stopPropagation()"
class="dropdown-item collection-item text-truncate w-100" ngbDropdownItem type="button">
<span> {{'ldn-service.control-constaint-select-none' | translate}} </span>
</button>
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
class="dropdown-item collection-item text-truncate w-100"
@@ -297,6 +304,10 @@
class="dropdown-menu scrollable-dropdown-menu w-100 "
ngbDropdownMenu>
<div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundItemFilter('', i); $event.stopPropagation()"
class="dropdown-item collection-item text-truncate w-100" ngbDropdownItem type="button">
<span> {{'ldn-service.control-constaint-select-none' | translate}} </span>
</button>
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
class="dropdown-item collection-item text-truncate w-100"

View File

@@ -353,7 +353,25 @@ export class LdnServiceFormEditComponent implements OnInit {
this.deleteMarkedOutboundPatterns();
const patchOperations = this.generatePatchOperations();
this.formModel.markAllAsTouched();
// If the form is invalid, close the modal and return
if (this.formModel.invalid) {
this.closeModal();
return;
}
const notifyServiceOutboundPatterns = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
const notifyServiceInboundPatterns = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
// If no inbound or outbound patterns are specified, close the modal and return
// noify the user that no patterns are specified
if (
(notifyServiceOutboundPatterns.length === 0 && !notifyServiceOutboundPatterns[0]?.value) ||
(notifyServiceInboundPatterns.length === 0 && !notifyServiceInboundPatterns[0]?.value)) {
this.notificationService.warning(this.translateService.get('ldn-service-notification.created.warning.title'));
this.closeModal();
return;
}
this.ldnServicesService.patch(this.service, patchOperations).pipe(
getFirstCompletedRemoteData()
@@ -478,7 +496,7 @@ export class LdnServiceFormEditComponent implements OnInit {
patchOperations.push({
op: 'replace',
path,
value: this.formModel.get(formControlName).value,
value: this.formModel.get(formControlName).value.toString(),
});
}
}
@@ -491,12 +509,11 @@ export class LdnServiceFormEditComponent implements OnInit {
private handlePatterns(patchOperations: any[], formArrayName: string): void {
const patternsArray = this.formModel.get(formArrayName) as FormArray;
for (let i = 0; i < patternsArray.length; i++) {
const patternGroup = patternsArray.at(i) as FormGroup;
const patternValue = patternGroup.value;
if (patternGroup.touched) {
if (patternGroup.touched && patternGroup.valid) {
delete patternValue?.patternLabel;
if (patternValue.isNew) {
delete patternValue.isNew;

View File

@@ -60,8 +60,11 @@
[placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
id="score"
name="score"
min="0"
max="1"
step=".01"
class="form-control"
type="text">
type="number">
<div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
{{ 'ldn-new-service.form.error.score' | translate }}
</div>
@@ -153,6 +156,10 @@
class="dropdown-menu scrollable-dropdown-menu w-100 "
ngbDropdownMenu>
<div class="scrollable-menu" role="listbox">
<button (click)="selectInboundItemFilter('', i); $event.stopPropagation()"
class="dropdown-item collection-item text-truncate w-100" ngbDropdownItem type="button">
<span> {{'ldn-service.control-constaint-select-none' | translate}} </span>
</button>
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() "
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
class="dropdown-item collection-item text-truncate w-100"
@@ -274,6 +281,10 @@
class="dropdown-menu scrollable-dropdown-menu w-100 "
ngbDropdownMenu>
<div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundItemFilter('', i); $event.stopPropagation()"
class="dropdown-item collection-item text-truncate w-100" ngbDropdownItem type="button">
<span> {{'ldn-service.control-constaint-select-none' | translate}} </span>
</button>
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
class="dropdown-item collection-item text-truncate w-100"

View File

@@ -142,12 +142,7 @@ export class LdnServiceFormComponent implements OnInit {
* and submitting the form data to the LDN services endpoint.
*/
createService() {
this.formModel.get('name').markAsTouched();
this.formModel.get('score').markAsTouched();
this.formModel.get('url').markAsTouched();
this.formModel.get('ldnUrl').markAsTouched();
this.formModel.get('notifyServiceInboundPatterns').markAsTouched();
this.formModel.get('notifyServiceOutboundPatterns').markAsTouched();
this.formModel.markAllAsTouched();
const name = this.formModel.get('name').value;
const url = this.formModel.get('url').value;
@@ -157,11 +152,18 @@ export class LdnServiceFormComponent implements OnInit {
const hasInboundPattern = this.checkPatterns(this.formModel.get('notifyServiceInboundPatterns') as FormArray);
const hasOutboundPattern = this.checkPatterns(this.formModel.get('notifyServiceOutboundPatterns') as FormArray);
if (!name || !url || !ldnUrl || !score || (!hasInboundPattern && !hasOutboundPattern)) {
if (!name || !url || !ldnUrl || !score || this.formModel.get('score').invalid) {
this.closeModal();
return;
}
if (!hasInboundPattern || !hasOutboundPattern) {
this.notificationsService.warning(this.translateService.get('ldn-service-notification.created.warning.title'));
this.closeModal();
return;
}
this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: {
pattern: string;
patternLabel: string

View File

@@ -42,11 +42,11 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
@ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
config: FindListOptions = Object.assign(new FindListOptions(), {
elementsPerPage: 20
elementsPerPage: 10
});
pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
id: 'po',
pageSize: 20
pageSize: 10
});
isProcessingSub: Subscription;
modalRef: any;

View File

@@ -1021,6 +1021,7 @@
"ldn-service-notification.created.success.body": "The service has been created",
"ldn-service-notification.created.failure.title": "Failed Create",
"ldn-service-notification.created.failure.body": "The service has not been created",
"ldn-service-notification.created.warning.title": "Please select at least one Inbound Pattern and one Outbound Pattern",
"ldn-enable-service.notification.success.title": "Successful status updated",
"ldn-enable-service.notification.success.content": "The service status has been updated",
"ldn-service-delete.notification.success.title": "Successful Deletion",
@@ -1045,6 +1046,7 @@
"ldn-edit-service.form.label.addOutboundPattern": "+ Add more",
"ldn-edit-service.form.label.submit": "Save",
"ldn-edit-service.breadcrumbs": "Edit Service",
"ldn-service.control-constaint-select-none": "Select none",