fix issue with edit and creation, unify files, refactor

This commit is contained in:
FrancescoMolinaro
2023-12-14 16:25:02 +01:00
parent 62ae9226f5
commit 90ad316db4
14 changed files with 657 additions and 1549 deletions

View File

@@ -1,11 +1,21 @@
<div class="container">
<form (ngSubmit)="onSubmit()" [formGroup]="formModel">
<div class="d-flex mb-5">
<h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
<div class="d-flex">
<h2 class="flex-grow-1">{{ isNewForm ? ('ldn-create-service.title' | translate) : ('ldn-edit-registered-service.title' | translate) }}</h2>
</div>
<!-- In the name section -->
<!-- In the toggle section -->
<div class="toggle-switch-container" *ngIf="!isNewForm">
<label class="status-label font-weight-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
<div>
<input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
<div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
<div class="slider"></div>
</div>
</div>
</div>
<!-- In the Name section -->
<div class="mb-5">
<label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
<label for="name" class="font-weight-bold">{{ 'ldn-new-service.form.label.name' | translate }}</label>
<input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
[placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
formControlName="name"
@@ -19,15 +29,14 @@
<!-- In the description section -->
<div class="mb-5 mt-5 d-flex flex-column">
<label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<label for="description" class="font-weight-bold">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
class="form-control" formControlName="description" id="description" name="description"></textarea>
</div>
<!-- In the url section -->
<div class="mb-5 mt-5">
<label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
<label for="url" class="font-weight-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
<input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
[placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
formControlName="url"
@@ -39,10 +48,9 @@
</div>
</div>
<!-- In the ldnUrl section -->
<div class="mb-5 mt-5">
<label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
<label for="ldnUrl" class="font-weight-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
<input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
[placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
formControlName="ldnUrl"
@@ -53,9 +61,10 @@
{{ 'ldn-new-service.form.error.ldnurl' | translate }}
</div>
</div>
<!-- In the score section -->
<div class="mb-2">
<label for="score">{{ 'ldn-new-service.form.label.score' | translate }}</label>
<label for="score" class="font-weight-bold">{{ 'ldn-new-service.form.label.score' | translate }}</label>
<input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
[placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
id="score"
@@ -71,24 +80,25 @@
</div>
<!-- In the Inbound Patterns Labels section -->
<div class="row mb-2 mt-5">
<div class="row mb-1 mt-5">
<div class="col">
<label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
</div>
<ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
<div class="col">
<label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
</div>
<div class="col-sm-1">
<label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
</div>
</ng-container>
<div class="col-sm-1">
<div class="col-sm-2">
</div>
</div>
<!-- In the Inbound Patterns section -->
<div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
[class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
formGroupName="notifyServiceInboundPatterns">
<ng-container [formGroupName]="i">
@@ -96,18 +106,17 @@
<div class="row mb-1">
<div class="col">
<div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown
placement="bottom-start">
<div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
id="additionalInboundPattern{{i}}"
ngbDropdown placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle>
</i>
ngbDropdownToggle></i>
<input
(click)="inboundPatternDropdown.open();"
[readonly]="true"
[value]="selectedInboundPatterns"
class="form-control w-100 scrollable-dropdown-input"
class="form-control w-80 scrollable-dropdown-input"
formControlName="patternLabel"
id="inboundPatternDropdownButton"
ngbDropdownAnchor
@@ -118,7 +127,7 @@
ngbDropdownMenu>
<div class="scrollable-menu" role="listbox">
<button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
*ngFor="let pattern of inboundPatterns"
*ngFor="let pattern of inboundPatterns; let internalIndex = index"
[title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
class="dropdown-item collection-item text-truncate w-100"
ngbDropdownItem
@@ -133,7 +142,6 @@
</div>
</div>
<div class="col">
<ng-container
*ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
@@ -160,7 +168,7 @@
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() "
<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"
ngbDropdownItem
@@ -175,7 +183,7 @@
</div>
<div
[style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
[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">
@@ -186,36 +194,53 @@
</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 class="col-sm-2">
<div class="btn-group">
<button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
type="button">
<i class="fas fa-trash"></i>
</button>
<button (click)="unmarkForInboundPatternDeletion(i)"
*ngIf="markedForDeletionInboundPattern.includes(i)"
class="btn btn-warning "
type="button">
<i class="fas fa-undo"></i>
</button>
</div>
</div>
</div>
</ng-container>
</div>
<span (click)="addInboundPattern()"
class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<span (click)="addInboundPattern()"
class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<!-- In the Outbound Patterns Labels section -->
<div class="row mb-1 mt-5">
<div class="col">
<label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.outboundPattern' | translate }} </label>
</div>
<ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
<div class="col">
<label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<label class="font-weight-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
</div>
</ng-container>
<div class="col-sm-2">
<div class="col-sm-1 ">
<label class="label-box-2" style="visibility: hidden;">
{{ 'ldn-new-service.form.label.automatic' | translate }}
</label>
</div>
<div class="col-sm-2 ">
</div>
</div>
<!-- In the Outbound Patterns section -->
<div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
[class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)"
formGroupName="notifyServiceOutboundPatterns">
<ng-container [formGroupName]="i">
@@ -243,7 +268,7 @@
ngbDropdownMenu>
<div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
*ngFor="let pattern of outboundPatterns"
*ngFor="let pattern of outboundPatterns; let internalIndex = index"
[title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
class="dropdown-item collection-item text-truncate w-100"
ngbDropdownItem
@@ -257,7 +282,6 @@
</div>
</div>
</div>
<div class="col">
<ng-container
*ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
@@ -300,42 +324,51 @@
</div>
<div [style.visibility]="'hidden'" class="col-sm-1">
<input hidden id="automatic{{i}}" name="automatic{{i}}"
type="checkbox">
<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 class="col-sm-2">
<div class="btn-group">
<button (click)="markForOutboundPatternDeletion(i)"
class="btn btn-outline-dark trash-button" type="button">
<i class="fas fa-trash"></i>
</button>
<button (click)="unmarkForOutboundPatternDeletion(i)"
*ngIf="markedForDeletionOutboundPattern.includes(i)"
class="btn btn-warning "
type="button">
<i class="fas fa-undo"></i>
</button>
</div>
</div>
</div>
</ng-container>
</div>
<div (click)="addOutboundPattern()"
class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}
<div
(click)="addOutboundPattern()"
class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}
</div>
<div class="submission-form-footer my-1 position-sticky d-flex justify-content-between" role="group">
<button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
<button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
<span><i class="fas fa-trash"></i>&nbsp;{{ 'submission.general.discard.submit' | translate }}</span>
</button>
<button class="btn btn-primary" type="submit">
<span><i class="fas fa-save"></i>&nbsp;{{ 'ldn-new-service.form.label.submit' | translate }}</span>
</button>
</div>
</form>
</div>
<ng-template #confirmModal>
<div class="modal-header">
<h4>{{'service.overview.create.modal' | translate }}</h4>
<h4 *ngIf="!isNewForm">{{'service.overview.edit.modal' | translate }}</h4>
<h4 *ngIf="isNewForm">{{'service.overview.create.modal' | translate }}</h4>
<button (click)="closeModal()" aria-label="Close"
class="close" type="button">
<span aria-hidden="true">×</span>
@@ -343,23 +376,36 @@
</div>
<div class="modal-body">
<span>
<div *ngIf="!isNewForm">
{{ 'service.overview.edit.body' | translate }}
</div>
<span *ngIf="isNewForm">
{{ 'service.overview.create.body' | translate }}
</span>
</div>
<div class="modal-footer">
<button (click)="closeModal()" class="btn btn-danger mr-2 "
id="delete-confirm">{{ 'service.refuse.create' | translate }}
</button>
<button (click)="createService()"
class="btn btn-primary">{{ 'service.confirm.create' | translate }}
</button>
</div>
<div class="modal-footer">
<div *ngIf="!isNewForm">
<button (click)="closeModal()" class="btn btn-danger mr-2"
id="delete-confirm-edit">{{ 'service.detail.return' | translate }}
</button>
<button *ngIf="!isNewForm" (click)="patchService()"
class="btn btn-primary">{{ 'service.detail.update' | translate }}
</button>
</div>
<div *ngIf="isNewForm">
<button (click)="closeModal()" class="btn btn-danger mr-2 "
id="delete-confirm-new">{{ 'service.refuse.create' | translate }}
</button>
<button (click)="createService()"
class="btn btn-primary">{{ 'service.confirm.create' | translate }}
</button>
</div>
</div>
</ng-template>
<ng-template #resetFormModal>
<div class="modal-header">
<h4 class="text-danger">{{'service.overview.reset-form.modal' | translate }}</h4>
<h4 class="text-danger">{{'service.overview.reset-form.modal' | translate }}</h4>
<button (click)="closeModal()" aria-label="Close"
class="close" type="button">
<span aria-hidden="true">×</span>
@@ -370,17 +416,15 @@
<span>
{{ 'service.overview.reset-form.body' | translate }}
</span>
</div>
<div class="modal-footer">
<button (click)="closeModal()"
class="btn btn-primary mr-2"
id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
</button>
<button (click)="resetFormAndLeave()" class="btn btn-danger"
id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
</button>
</div>
<div class="modal-footer">
<button (click)="closeModal()"
class="btn btn-primary"
id="reset-confirm">{{ 'service.overview.reset-form.reset-return' | translate }}
</button>
<button (click)="resetFormAndLeave()" class="mr-2 btn btn-danger"
id="reset-delete">{{ 'service.overview.reset-form.reset-confirm' | translate }}
</button>
</div>
</ng-template>