hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

CST-11048 Form Styling

Browse Source
This commit is contained in:
Sondissimo
2023-10-06 01:02:49 +02:00
parent 1c9fbd4629
commit 11f9258d40
9 changed files with 471 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
View File

@@ -1,117 +1,139 @@
<form (ngSubmit)="submitForm()" [formGroup]="formModel"> <form (ngSubmit)="submitForm()" [formGroup]="formModel">
<div class="form-group">
<!-- In the name section --> <div class="mb-2">
<label for="name">{{ 'ldn-edit-service.form.label.name' | translate }}</label> <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
<input formControlName="name" id="name" name="name" placeholder="{{ 'ldn-edit-service.form.label.name' | translate }}" required <input [placeholder]="'ldn-new-service.form.placeholder.name' | translate"
type="text"> formControlName="name" id="name" name="name"
</div> [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
type="text">
</div>
<!-- In the description section --> <div class="mb-4">
<div class="form-group"> &nbsp;
<label for="description">{{ 'ldn-edit-service.form.label.description' | translate }}</label> </div>
<input formControlName="description" id="description" name="description" placeholder="{{ 'ldn-edit-service.form.label.description' | translate }}"
required type="text">
</div>
<!-- In the url section --> <div class="mb-2 d-flex flex-column">
<div class="form-group"> <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<label for="url">{{ 'ldn-edit-service.form.label.url' | translate }}</label> <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
<input formControlName="url" id="url" name="url" placeholder="{{ 'ldn-edit-service.form.label.url' | translate }}" required type="text"> formControlName="description" id="description" name="description"></textarea>
</div> </div>
<!-- In the ldnUrl section --> <div class="mb-4">
<div class="form-group"> &nbsp;
<label for="ldnUrl">{{ 'ldn-edit-service.form.label.ldnUrl' | translate }}</label> </div>
<input formControlName="ldnUrl" id="ldnUrl" name="ldnUrl" placeholder="{{ 'ldn-edit-service.form.label.ldnUrl' | translate }}"
required type="text">
</div>
<!-- In the Inbound Patterns section --> <div class="mb-2">
<div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index" class="form-group" <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
formGroupName="notifyServiceInboundPatterns"> <input [placeholder]="'ldn-new-service.form.placeholder.url' | translate"
formControlName="url" id="url" name="url"
[class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
type="text">
</div>
<ng-container [formGroupName]="i"> <div class="mb-4">
&nbsp;
</div>
<label for="additionalInboundPattern{{i}}">{{ 'ldn-edit-service.form.label.inboundPattern' | translate }} {{ i + 1 }}</label> <div class="mb-2">
<label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
<input [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate"
formControlName="ldnUrl" id="ldnUrl" name="ldnUrl"
[class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
type="text">
</div>
<select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}" <div class="mb-4">
name="additionalInboundPattern{{i}}" required> &nbsp;
</div>
<option value="">{{ 'ldn-edit-service.form.label.noInboundPatternSelected' | translate }}</option> <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
<option *ngFor="let pattern of inboundPatterns" [ngValue]="pattern.name">{{ pattern.name }}</option> class="mb-2 d-flex align-content-center" formGroupName="notifyServiceInboundPatterns">
</select> <ng-container [formGroupName]="i">
<div *ngIf="inboundPattern.value" class="form-group"> <div class="flex-grow-1">
<label *ngIf="i === 0" for="additionalInboundPattern{{i}}">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
<select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
name="additionalInboundPattern{{i}}" required>
<option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
<option *ngFor="let pattern of inboundPatterns" [ngValue]="pattern.name">{{ pattern.name }}</option>
</select>
</div>
<label for="constraint{{i}}">{{ 'ldn-edit-service.form.label.selectedItemFilter' | translate }}</label> <ng-container *ngIf="inboundPattern.value">
<select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}"> <div class="ml-2 flex-grow-1">
<label *ngIf="i === 0" for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<option value="">{{ 'ldn-edit-service.form.label.selectItemFilter' | translate }}</option> <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
<option *ngFor="let itemFilter of itemFilterList" <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
[value]="itemFilter.name">{{ itemFilter.name }}</option> <option *ngFor="let itemFilter of itemFilterList" [value]="itemFilter.name">{{ itemFilter.name }}</option>
</select>
</select> </div>
<div class="form-group">
<label for="automatic{{i}}">{{ 'ldn-edit-service.form.label.automatic' | translate }}</label>
<input type="checkbox" formControlName="automatic" id="automatic{{i}}" name="automatic{{i}}">
</div>
<div class="ml-2 d-flex flex-column align-content-center">
<label *ngIf="i === 0" for="automatic{{i}}">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
<div class="d-flex flex-grow-1 align-content-center justify-content-center">
<input formControlName="automatic" id="automatic{{i}}" name="automatic{{i}}" type="checkbox" hidden>
<div class="toggle-switch" [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value" (click)="toggleAutomatic(i)">
<div class="slider"></div>
</div> </div>
</div>
</div>
<button *ngIf="i > 0" (click)="removeInboundPattern(patternGroup)" class="btn btn-outline-dark"> </ng-container>
<i class="fas fa-trash"></i>
</button>
</ng-container>
</div> <div class="d-flex align-items-end justify-content-center">
<button (click)="removeInboundPattern(i)" class="btn btn-outline-dark trash-button ml-2">
<i class="fas fa-trash"></i>
</button>
</div>
<span (click)="addInboundPattern()" class="add-pattern-link">{{ 'ldn-edit-service.form.label.addInboundPattern' | translate }}</span> </ng-container>
<!-- In the Outbound Patterns section --> </div>
<div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index" class="form-group"
formGroupName="notifyServiceOutboundPatterns">
<ng-container [formGroupName]="i"> <span (click)="addInboundPattern()" class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<label for="additionalOutboundPattern{{i}}">{{ 'ldn-edit-service.form.label.outboundPattern' | translate }} {{ i + 1 }}</label> <div class="mb-4">
&nbsp;
</div>
<select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}" name="additionalOutboundPattern{{i}}" <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
required> class="mb-2 d-flex align-content-center" formGroupName="notifyServiceOutboundPatterns">
<option value="">{{ 'ldn-edit-service.form.label.noOutboundPatternSelected' | translate }}</option> <ng-container [formGroupName]="i">
<option *ngFor="let pattern of outboundPatterns" [ngValue]="pattern.name">{{ pattern.name }}</option>
</select> <div class="flex-grow-1">
<label *ngIf="i === 0" for="additionalOutboundPattern{{i}}">{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
<select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
name="additionalOutboundPattern{{i}}"
required>
<option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
<option *ngFor="let pattern of outboundPatterns" [ngValue]="pattern.name">{{ pattern.name }}</option>
</select>
</div>
<div *ngIf="outboundPattern.value" class="form-group"> <div *ngIf="outboundPattern.value" class="ml-2 flex-grow-1">
<label *ngIf="i === 0" for="constraint{{i}}">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
<select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
<option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
<option *ngFor="let itemFilter of itemFilterList" [value]="itemFilter.name">{{ itemFilter.name }}</option>
</select>
</div>
<label for="constraint{{i}}">{{ 'ldn-edit-service.form.label.selectedItemFilter' | translate }}</label> <div class="d-flex align-items-end justify-content-center">
<button (click)="removeOutboundPattern(i)" class="btn btn-outline-dark trash-button ml-2">
<i class="fas fa-trash"></i>
</button>
</div>
<select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}"> </ng-container>
<option value="">{{ 'ldn-edit-service.form.label.selectItemFilter' | translate }}</option> </div>
<option *ngFor="let itemFilter of itemFilterList"
[value]="itemFilter.name">{{ itemFilter.name }}</option>
</select>
</div> <span (click)="addOutboundPattern()" class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
<button *ngIf="i > 0" (click)="removeOutboundPattern(patternGroup)" class="btn btn-outline-dark">
<i class="fas fa-trash"></i>
</button>
</ng-container>
</div>
<span (click)="addOutboundPattern()" class="add-pattern-link">{{ 'ldn-edit-service.form.label.addOutboundPattern' | translate }}</span>
<button class="btn btn-primary" type="submit">{{ 'ldn-edit-service.form.label.submit' | translate }}</button>
<button class="btn btn-primary" type="submit">{{ 'ldn-new-service.form.label.submit' | translate }}</button>
</form> </form>

92
src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
View File

@@ -1,41 +1,38 @@
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin: 0 auto; max-width: 800px;
max-width: 600px;
font-size: 14px; font-size: 14px;
margin-left: 300px;
& > * {
width: 100%;
}
} }
input[type="text"],
.form-group input[type="text"], select {
.form-group select {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
padding: 8px; padding: 8px;
margin-bottom: 5px;
box-sizing: border-box;
font-size: 14px; font-size: 14px;
} }
option:not(:first-child) {
.description {
height: 9em;
width: 100%;
}
.form-group select {
position: relative;
z-index: 1;
}
.form-group select option {
font-weight: bold; font-weight: bold;
} }
.trash-button {
width: 40px;
height: 40px;
}
textarea {
height: 200px;
resize: none;
}
.add-pattern-link{ .add-pattern-link{
color: #0048ff; color: #0048ff;
cursor: pointer; cursor: pointer;
@@ -47,5 +44,56 @@ form {
margin-left: 10px; margin-left: 10px;
} }
.status-checkbox {
margin-top: 5px;
}
.invalid-field {
border: 1px solid red;
background-color: #e89f9f;
color: #000000;
}
.toggle-switch {
display: flex;
align-items: center;
opacity: 0.8;
position: relative;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s;
}
.toggle-switch.checked {
background-color: #24cc9a;
}
.slider {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
transition: transform 0.3s;
}
.toggle-switch .slider {
width: 22px;
height: 22px;
border-radius: 50%;
margin: 0 auto;
}
.toggle-switch.checked .slider {
transform: translateX(30px);
}

312
src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core'; import { ChangeDetectorRef, Component, Input } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@@ -7,18 +7,28 @@ import { LdnDirectoryService } from '../ldn-services-services/ldn-directory.serv
import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
import { LdnServiceConstraint } from '../ldn-services-model/ldn-service-constraint.model'; import { LdnServiceConstraint } from '../ldn-services-model/ldn-service-constraint.model';
import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns'; import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
import { ActivatedRoute } from '@angular/router'; // Import ActivatedRoute and Params import { ActivatedRoute } from '@angular/router';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({ @Component({
selector: 'ds-ldn-service-form-edit', selector: 'ds-ldn-service-form-edit',
templateUrl: './ldn-service-form-edit.component.html', templateUrl: './ldn-service-form-edit.component.html',
styleUrls: ['./ldn-service-form-edit.component.scss'] styleUrls: ['./ldn-service-form-edit.component.scss'],
animations: [
trigger('toggleAnimation', [
state('true', style({})),
state('false', style({})),
transition('true <=> false', animate('300ms ease-in')),
]),
],
}) })
export class LdnServiceFormEditComponent { export class LdnServiceFormEditComponent {
formModel: FormGroup; formModel: FormGroup;
showItemFilterDropdown = false; showItemFilterDropdown = false;
private originalInboundPatterns: any[] = [];
private originalOutboundPatterns: any[] = [];
public inboundPatterns: object[] = notifyPatterns; public inboundPatterns: object[] = notifyPatterns;
public outboundPatterns: object[] = notifyPatterns; public outboundPatterns: object[] = notifyPatterns;
public itemFilterList: LdnServiceConstraint[]; public itemFilterList: LdnServiceConstraint[];
@@ -41,7 +51,8 @@ export class LdnServiceFormEditComponent {
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private http: HttpClient, private http: HttpClient,
private router: Router, private router: Router,
private route: ActivatedRoute private route: ActivatedRoute,
private cdRef: ChangeDetectorRef
) { ) {
this.formModel = this.formBuilder.group({ this.formModel = this.formBuilder.group({
@@ -67,14 +78,34 @@ export class LdnServiceFormEditComponent {
} }
}); });
this.ldnDirectoryService.getItemFilters().subscribe((itemFilters) => { this.ldnDirectoryService.getItemFilters().subscribe((itemFilters) => {
console.log(itemFilters);
this.itemFilterList = itemFilters._embedded.itemfilters.map((filter: { id: string; }) => ({ this.itemFilterList = itemFilters._embedded.itemfilters.map((filter: { id: string; }) => ({
name: filter.id name: filter.id
})); }));
console.log(this.itemFilterList); this.cdRef.detectChanges();
}); });
} }
private getOriginalPattern(formArrayName: string, patternId: number): any {
let originalPatterns: any[] = [];
if (formArrayName === 'notifyServiceInboundPatterns') {
originalPatterns = this.originalInboundPatterns;
} else if (formArrayName === 'notifyServiceOutboundPatterns') {
originalPatterns = this.originalOutboundPatterns;
}
return originalPatterns.find((pattern) => pattern.id === patternId);
}
private patternsAreEqual(patternA: any, patternB: any): boolean {
return (
patternA.pattern === patternB.pattern &&
patternA.constraint === patternB.constraint &&
patternA.automatic === patternB.automatic
);
}
fetchServiceData(serviceId: string): void { fetchServiceData(serviceId: string): void {
const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${serviceId}`; const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${serviceId}`;
@@ -88,9 +119,35 @@ export class LdnServiceFormEditComponent {
description: data.description, description: data.description,
url: data.url, url: data.url,
ldnUrl: data.ldnUrl, ldnUrl: data.ldnUrl,
notifyServiceInboundPatterns: data.notifyServiceInboundPatterns, type: data.type
notifyServiceOutboundPatterns: data.notifyServiceOutboundPatterns
}); });
const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
inboundPatternsArray.clear(); // Clear existing rows
data.notifyServiceInboundPatterns.forEach((pattern: any) => {
console.log(pattern);
const patternFormGroup = this.initializeInboundPatternFormGroup();
console.log();
patternFormGroup.patchValue(pattern);
inboundPatternsArray.push(patternFormGroup);
this.cdRef.detectChanges();
});
// Initialize rows for notifyServiceOutboundPatterns
const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
outboundPatternsArray.clear();
data.notifyServiceOutboundPatterns.forEach((pattern: any) => {
const patternFormGroup = this.initializeOutboundPatternFormGroup();
patternFormGroup.patchValue(pattern);
outboundPatternsArray.push(patternFormGroup);
this.cdRef.detectChanges();
});
this.originalInboundPatterns = [...data.notifyServiceInboundPatterns];
this.originalOutboundPatterns = [...data.notifyServiceOutboundPatterns];
}, },
(error) => { (error) => {
console.error('Error fetching service data:', error); console.error('Error fetching service data:', error);
@@ -98,103 +155,76 @@ export class LdnServiceFormEditComponent {
); );
} }
generatePatchOperations(): any[] { generatePatchOperations(): any[] {
const patchOperations: any[] = []; const patchOperations: any[] = [];
if (this.formModel.get('name').dirty) { this.addReplaceOperation(patchOperations, 'name', '/name');
patchOperations.push({ this.addReplaceOperation(patchOperations, 'description', '/description');
op: 'replace', this.addReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
path: '/name', this.addReplaceOperation(patchOperations, 'url', '/url');
value: this.formModel.get('name').value,
});
}
if (this.formModel.get('description').dirty) { // Handle notifyServiceInboundPatterns
patchOperations.push({ this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
op: 'replace',
path: '/description',
value: this.formModel.get('description').value,
});
}
if (this.formModel.get('ldnUrl').dirty) { // Handle notifyServiceOutboundPatterns
patchOperations.push({ this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
op: 'replace',
path: '/ldnUrl',
value: this.formModel.get('ldnUrl').value,
});
}
if (this.formModel.get('url').dirty) {
patchOperations.push({
op: 'replace',
path: '/url',
value: this.formModel.get('url').value,
});
}
const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
const inboundPatternsControls = inboundPatternsArray.controls;
if (inboundPatternsArray.dirty) {
const inboundPatternsValue = [];
for (let i = 0; i < inboundPatternsControls.length; i++) {
const patternGroup = inboundPatternsControls[i] as FormGroup;
const patternValue = patternGroup.value;
if (patternGroup.dirty) {
inboundPatternsValue.push(patternValue);
}
}
if (inboundPatternsValue.length > 0) {
patchOperations.push({
op: 'replace',
path: '/notifyServiceInboundPatterns',
value: inboundPatternsValue,
});
} else {
patchOperations.push({
op: 'remove',
path: '/notifyServiceInboundPatterns',
});
}
}
const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
const outboundPatternsControls = outboundPatternsArray.controls;
if (outboundPatternsArray.dirty) {
const outboundPatternsValue = [];
for (let i = 0; i < outboundPatternsControls.length; i++) {
const patternGroup = outboundPatternsControls[i] as FormGroup;
const patternValue = patternGroup.value;
if (patternGroup.dirty) {
outboundPatternsValue.push(patternValue);
}
}
if (outboundPatternsValue.length > 0) {
patchOperations.push({
op: 'replace',
path: '/notifyServiceOutboundPatterns',
value: outboundPatternsValue,
});
} else {
patchOperations.push({
op: 'remove',
path: '/notifyServiceOutboundPatterns',
});
}
}
return patchOperations; return patchOperations;
} }
private addReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
if (this.formModel.get(formControlName).dirty) {
patchOperations.push({
op: 'replace',
path,
value: this.formModel.get(formControlName).value,
});
}
}
private handlePatterns(patchOperations: any[], formArrayName: string): void {
const patternsArray = this.formModel.get(formArrayName) as FormArray;
if (patternsArray.dirty) {
for (let i = 0; i < patternsArray.length; i++) {
const patternGroup = patternsArray.at(i) as FormGroup;
const patternValue = patternGroup.value;
// patternValue.automatic = patternValue.automatic ? 'true' : 'false';
if (patternValue.isNew) {
console.log(this.getOriginalPatternsForFormArray(formArrayName));
console.log(patternGroup);
delete patternValue.isNew;
const addOperation = {
op: 'add',
path: `${formArrayName}/-`,
value: patternValue,
};
patchOperations.push(addOperation);
} else if (patternGroup.dirty) {
const replaceOperation = {
op: 'replace',
path: `${formArrayName}[${i}]`,
value: patternValue,
};
patchOperations.push(replaceOperation);
console.log(patternValue.id);
}
}
}
}
private getOriginalPatternsForFormArray(formArrayName: string): any[] {
if (formArrayName === 'notifyServiceInboundPatterns') {
return this.originalInboundPatterns;
} else if (formArrayName === 'notifyServiceOutboundPatterns') {
return this.originalOutboundPatterns;
}
return [];
}
submitForm() { submitForm() {
const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${this.serviceId}`; const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${this.serviceId}`;
const patchOperations = this.generatePatchOperations(); const patchOperations = this.generatePatchOperations();
@@ -202,21 +232,50 @@ export class LdnServiceFormEditComponent {
this.http.patch(apiUrl, patchOperations).subscribe( this.http.patch(apiUrl, patchOperations).subscribe(
(response) => { (response) => {
console.log('Service updated successfully:', response); console.log('Service updated successfully:', response);
this.sendBack();
}, },
(error) => { (error) => {
console.error('Error updating service:', error); console.error('Error updating service:', error);
} }
); );
} }
addInboundPattern() { addInboundPattern() {
const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray; const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup()); notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
} }
removeInboundPattern(patternGroup: FormGroup) { removeInboundPattern(index: number) {
const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray; const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
notifyServiceInboundPatternsArray.removeAt(notifyServiceInboundPatternsArray.controls.indexOf(patternGroup)); if (index >= 0 && index < notifyServiceInboundPatternsArray.length) {
// Get the service ID
const serviceId = this.formModel.get('id').value;
// Construct the patch operation
const patchOperation = [
{
op: 'remove',
path: `notifyServiceInboundPatterns[${index}]`
}
];
// Make an HTTP PATCH request to apply the patch operation
const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${serviceId}`;
this.http.patch(apiUrl, patchOperation).subscribe(
(response) => {
console.log('Pattern removed successfully:', response);
// After successful removal from the server, also remove it from the form array
notifyServiceInboundPatternsArray.removeAt(index);
},
(error) => {
console.error('Error removing pattern:', error);
}
);
}
} }
addOutboundPattern() { addOutboundPattern() {
@@ -224,9 +283,34 @@ export class LdnServiceFormEditComponent {
notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup()); notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
} }
removeOutboundPattern(patternGroup: FormGroup) { removeOutboundPattern(index: number) {
const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray; const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
notifyServiceOutboundPatternsArray.removeAt(notifyServiceOutboundPatternsArray.controls.indexOf(patternGroup)); if (index >= 0 && index < notifyServiceOutboundPatternsArray.length) {
// Get the service ID
const serviceId = this.formModel.get('id').value;
// Construct the patch operation
const patchOperation = [
{
op: 'remove',
path: `notifyServiceOutboundPatterns[${index}]`
}
];
// Make an HTTP PATCH request to apply the patch operation
const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${serviceId}`;
this.http.patch(apiUrl, patchOperation).subscribe(
(response) => {
console.log('Pattern removed successfully:', response);
notifyServiceOutboundPatternsArray.removeAt(index);
},
(error) => {
console.error('Error removing pattern:', error);
}
);
}
} }
private sendBack() { private sendBack() {
@@ -236,7 +320,8 @@ export class LdnServiceFormEditComponent {
private createOutboundPatternFormGroup(): FormGroup { private createOutboundPatternFormGroup(): FormGroup {
return this.formBuilder.group({ return this.formBuilder.group({
pattern: '', pattern: '',
constraint: '' constraint: '',
isNew: true,
}); });
} }
@@ -244,7 +329,30 @@ export class LdnServiceFormEditComponent {
return this.formBuilder.group({ return this.formBuilder.group({
pattern: '', pattern: '',
constraint: '', constraint: '',
automatic: '' automatic: '',
isNew: true
}); });
} }
private initializeOutboundPatternFormGroup(): FormGroup {
return this.formBuilder.group({
pattern: '',
constraint: '',
});
}
private initializeInboundPatternFormGroup(): FormGroup {
return this.formBuilder.group({
pattern: '',
constraint: '',
automatic: '',
});
}
toggleAutomatic(i: number) {
const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
if (automaticControl) {
automaticControl.setValue(!automaticControl.value);
}
}
} }

11
src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
View File

@@ -67,14 +67,19 @@
<div class="ml-2 d-flex flex-column align-content-center"> <div class="ml-2 d-flex flex-column align-content-center">
<label for="automatic{{i}}">{{ 'ldn-new-service.form.label.automatic' | translate }}</label> <label for="automatic{{i}}">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
<div class="d-flex flex-grow-1 align-content-center justify-content-center"> <div class="d-flex flex-grow-1 align-content-center justify-content-center">
<input formControlName="automatic" id="automatic{{i}}" name="automatic{{i}}" type="checkbox"> <input formControlName="automatic" id="automatic{{i}}" name="automatic{{i}}" type="checkbox" hidden>
<div class="toggle-switch" [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value" (click)="toggleAutomatic(i)">
<div class="slider"></div>
</div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
<div class="d-flex align-items-end justify-content-center"> <div class="d-flex align-items-end justify-content-center">
<button (click)="removeInboundPattern(patternGroup)" *ngIf="i > 0" class="btn btn-outline-dark trash-button ml-2"> <button (click)="removeInboundPattern(patternGroup)" class="btn btn-outline-dark trash-button ml-2">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>
@@ -119,7 +124,7 @@
</div> </div>
<div class="d-flex align-items-end justify-content-center"> <div class="d-flex align-items-end justify-content-center">
<button (click)="removeOutboundPattern(patternGroup)" *ngIf="i > 0" class="btn btn-outline-dark trash-button ml-2"> <button (click)="removeOutboundPattern(patternGroup)" class="btn btn-outline-dark trash-button ml-2">
<i class="fas fa-trash"></i> <i class="fas fa-trash"></i>
</button> </button>
</div> </div>

46
src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
View File

@@ -23,6 +23,10 @@ option:not(:first-child) {
font-weight: bold; font-weight: bold;
} }
select {
width: 90%;
}
.trash-button { .trash-button {
width: 40px; width: 40px;
height: 40px; height: 40px;
@@ -51,6 +55,46 @@ textarea {
.invalid-field { .invalid-field {
border: 1px solid red; border: 1px solid red;
background-color: #e89f9f;
color: #000000; color: #000000;
} }
.toggle-switch {
display: flex;
align-items: center;
opacity: 0.8;
position: relative;
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
cursor: pointer;
transition: background-color 0.3s;
}
.toggle-switch.checked {
background-color: #24cc9a;
}
.slider {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
transition: transform 0.3s;
}
.toggle-switch .slider {
width: 22px;
height: 22px;
border-radius: 50%;
margin: 0 auto;
}
.toggle-switch.checked .slider {
transform: translateX(30px);
}

19
src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
View File

@@ -8,11 +8,19 @@ import { LdnServiceConstraint } from '../ldn-services-model/ldn-service-constrai
import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns'; import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
import { LdnDirectoryService } from '../ldn-services-services/ldn-directory.service'; import { LdnDirectoryService } from '../ldn-services-services/ldn-directory.service';
import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({ @Component({
selector: 'ds-ldn-service-form', selector: 'ds-ldn-service-form',
templateUrl: './ldn-service-form.component.html', templateUrl: './ldn-service-form.component.html',
styleUrls: ['./ldn-service-form.component.scss'], styleUrls: ['./ldn-service-form.component.scss'],
animations: [
trigger('toggleAnimation', [
state('true', style({})), // Define animation states (empty style)
state('false', style({})),
transition('true <=> false', animate('300ms ease-in')), // Define animation transition with duration
]),
],
}) })
export class LdnServiceFormComponent implements OnInit { export class LdnServiceFormComponent implements OnInit {
formModel: FormGroup; formModel: FormGroup;
@@ -27,6 +35,7 @@ export class LdnServiceFormComponent implements OnInit {
//additionalOutboundPatterns: FormGroup[] = []; //additionalOutboundPatterns: FormGroup[] = [];
//additionalInboundPatterns: FormGroup[] = []; //additionalInboundPatterns: FormGroup[] = [];
//@Input() public status: boolean; //@Input() public status: boolean;
@Input() public name: string; @Input() public name: string;
@Input() public description: string; @Input() public description: string;
@@ -54,7 +63,7 @@ export class LdnServiceFormComponent implements OnInit {
) { ) {
this.formModel = this.formBuilder.group({ this.formModel = this.formBuilder.group({
//enabled: true, enabled: true,
id: [''], id: [''],
name: ['', Validators.required], name: ['', Validators.required],
description: [''], description: [''],
@@ -151,4 +160,12 @@ export class LdnServiceFormComponent implements OnInit {
}); });
} }
toggleAutomatic(i: number) {
const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
if (automaticControl) {
automaticControl.setValue(!automaticControl.value);
}
}
} }

6
src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
View File

@@ -28,10 +28,10 @@
<td>{{ ldnService.name }}</td> <td>{{ ldnService.name }}</td>
<td>{{ ldnService.description }}</td> <td>{{ ldnService.description }}</td>
<td> <td>
<span [ngClass]="{ 'status-enabled': ldnService.status, 'status-disabled': !ldnService.status }" <span [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
class="status-indicator" (click)="toggleStatus(ldnService)" class="status-indicator" (click)="toggleStatus(ldnService)"
[title]="ldnService.status ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"> [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)">
{{ ldnService.status ? ('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>

14
src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { LdnDirectoryService } from '../ldn-services-services/ldn-directory.service'; import { LdnDirectoryService } from '../ldn-services-services/ldn-directory.service';
import { Observable, Subscription } from 'rxjs'; import { Observable, Subscription } from 'rxjs';
import { RemoteData } from '../../../core/data/remote-data'; import { RemoteData } from '../../../core/data/remote-data';
@@ -12,7 +12,6 @@ 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 { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
@Component({ @Component({
selector: 'ds-ldn-services-directory', selector: 'ds-ldn-services-directory',
templateUrl: './ldn-services-directory.component.html', templateUrl: './ldn-services-directory.component.html',
@@ -39,7 +38,8 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
protected paginationService: PaginationService, protected paginationService: PaginationService,
protected modalService: NgbModal, protected modalService: NgbModal,
public ldnDirectoryService: LdnDirectoryService, public ldnDirectoryService: LdnDirectoryService,
private http: HttpClient private http: HttpClient,
private cdRef: ChangeDetectorRef
) { ) {
} }
@@ -81,6 +81,7 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
closeModal() { closeModal() {
this.modalRef.close(); this.modalRef.close();
this.cdRef.detectChanges();
} }
@@ -89,6 +90,7 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
(response) => { (response) => {
this.servicesData = response._embedded.ldnservices; this.servicesData = response._embedded.ldnservices;
console.log('ServicesData =', this.servicesData); console.log('ServicesData =', this.servicesData);
this.cdRef.detectChanges();
}, },
(error) => { (error) => {
console.error('Error:', error); console.error('Error:', error);
@@ -125,7 +127,7 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
} }
toggleStatus(ldnService: any): void { toggleStatus(ldnService: any): void {
const newStatus = !ldnService.status; const newStatus = !ldnService.enabled;
const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${ldnService.id}`; const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${ldnService.id}`;
const patchOperation = { const patchOperation = {
@@ -137,8 +139,8 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
this.http.patch(apiUrl, [patchOperation]).subscribe( this.http.patch(apiUrl, [patchOperation]).subscribe(
() => { () => {
console.log('Status updated successfully.'); console.log('Status updated successfully.');
// After a successful update, fetch the data to refresh the view ldnService.enabled = newStatus;
this.fetchServiceData(ldnService.id); this.cdRef.detectChanges();
}, },
(error) => { (error) => {
console.error('Error updating status:', error); console.error('Error updating status:', error);

6
src/assets/i18n/en.json5
View File

@@ -918,6 +918,7 @@
"ldn-service.overview.table.clickToDisable": "Click to disable", "ldn-service.overview.table.clickToDisable": "Click to disable",
"ldn-register-new-service.title": "Register a new service", "ldn-register-new-service.title": "Register a new service",
"ldn-new-service.form.label.submit": "Submit",
"ldn-new-service.form.label.name": "Name", "ldn-new-service.form.label.name": "Name",
"ldn-new-service.form.label.description": "Description", "ldn-new-service.form.label.description": "Description",
"ldn-new-service.form.label.url": "Service URL", "ldn-new-service.form.label.url": "Service URL",
@@ -927,12 +928,12 @@
"ldn-new-service.form.placeholder.url": "Please input the URL for users to check out more information about the service", "ldn-new-service.form.placeholder.url": "Please input the URL for users to check out more information about the service",
"ldn-new-service.form.placeholder.ldnUrl": "Please specify the URL of the LDN Inbox", "ldn-new-service.form.placeholder.ldnUrl": "Please specify the URL of the LDN Inbox",
"ldn-new-service.form.label.inboundPattern": "Inbound Pattern", "ldn-new-service.form.label.inboundPattern": "Inbound Pattern",
"ldn-new-service.form.label.placeholder.inboundPattern": "No Inbound Pattern", "ldn-new-service.form.label.placeholder.inboundPattern": "Select an Inbound Pattern",
"ldn-new-service.form.label.placeholder.selectedItemFilter": "No Item Filter Selected", "ldn-new-service.form.label.placeholder.selectedItemFilter": "No Item Filter Selected",
"ldn-new-service.form.label.ItemFilter": "Item Filter", "ldn-new-service.form.label.ItemFilter": "Item Filter",
"ldn-new-service.form.label.automatic": "Automatic", "ldn-new-service.form.label.automatic": "Automatic",
"ldn-new-service.form.label.outboundPattern": "Outbound Pattern", "ldn-new-service.form.label.outboundPattern": "Outbound Pattern",
"ldn-new-service.form.label.placeholder.outboundPattern": "No Outbound Pattern", "ldn-new-service.form.label.placeholder.outboundPattern": "Select an Outbound Pattern",
"ldn-new-service.form.label.addPattern": "+ Add more", "ldn-new-service.form.label.addPattern": "+ Add more",
"ldn-new-service.form.label.removeItemFilter": "Remove", "ldn-new-service.form.label.removeItemFilter": "Remove",
"ldn-register-new-service.breadcrumbs": "New Service", "ldn-register-new-service.breadcrumbs": "New Service",
@@ -956,6 +957,7 @@
"ldn-edit-service.breadcrumbs": "Edit Service", "ldn-edit-service.breadcrumbs": "Edit Service",
"ldn-register-new-service.notification.error.title": "Error", "ldn-register-new-service.notification.error.title": "Error",
"ldn-register-new-service.notification.error.content": "An error occurred while creating this process", "ldn-register-new-service.notification.error.content": "An error occurred while creating this process",
"ldn-register-new-service.notification.success.title": "Success", "ldn-register-new-service.notification.success.title": "Success",