From 11f9258d40daf99a1b80dd9539c821462270c2b9 Mon Sep 17 00:00:00 2001 From: Sondissimo Date: Fri, 6 Oct 2023 01:02:49 +0200 Subject: [PATCH] CST-11048 Form Styling --- .../ldn-service-form-edit.component.html | 188 ++++++----- .../ldn-service-form-edit.component.scss | 92 ++++-- .../ldn-service-form-edit.component.ts | 312 ++++++++++++------ .../ldn-service-form.component.html | 11 +- .../ldn-service-form.component.scss | 46 ++- .../ldn-service-form.component.ts | 19 +- .../ldn-services-directory.component.html | 6 +- .../ldn-services-directory.component.ts | 14 +- src/assets/i18n/en.json5 | 6 +- 9 files changed, 471 insertions(+), 223 deletions(-) diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html index 263725e8ad..8640b922e3 100644 --- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html +++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html @@ -1,117 +1,139 @@
-
- - - -
+
+ + +
- -
- - -
+
+   +
- -
- - -
+
+ + +
- -
- - -
+
+   +
- -
+
+ + +
- +
+   +
- +
+ + +
- + -
+
+ + +
- + - - -
- - -
+
+ + +
+
+ +
+ +
+
+
+
- - + -
+
+ +
- {{ 'ldn-edit-service.form.label.addInboundPattern' | translate }} + - -
+
- + {{ 'ldn-new-service.form.label.addPattern' | translate }} - +
+   +
- +
+ + +
-
+
+ + +
- +
+ +
- -
- - - - - -
- - {{ 'ldn-edit-service.form.label.addOutboundPattern' | translate }} - - + {{ 'ldn-new-service.form.label.addPattern' | translate }} +
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss index 53bc21d1b3..ef38297649 100644 --- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss +++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss @@ -1,41 +1,38 @@ - form { display: flex; flex-direction: column; align-items: flex-start; - margin: 0 auto; - max-width: 600px; + max-width: 800px; font-size: 14px; + margin-left: 300px; + + & > * { + width: 100%; + } } - -.form-group input[type="text"], -.form-group select { +input[type="text"], +select { max-width: 100%; width: 100%; padding: 8px; - margin-bottom: 5px; - box-sizing: border-box; font-size: 14px; } - -.description { - height: 9em; - width: 100%; -} - - -.form-group select { - position: relative; - z-index: 1; -} - - -.form-group select option { +option:not(:first-child) { font-weight: bold; } +.trash-button { + width: 40px; + height: 40px; +} + +textarea { + height: 200px; + resize: none; +} + .add-pattern-link{ color: #0048ff; cursor: pointer; @@ -47,5 +44,56 @@ form { 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); +} + + diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts index 82f7b212d1..d86371d441 100644 --- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts +++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts @@ -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 { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; 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 { LdnServiceConstraint } from '../ldn-services-model/ldn-service-constraint.model'; 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({ selector: 'ds-ldn-service-form-edit', 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 { formModel: FormGroup; showItemFilterDropdown = false; + private originalInboundPatterns: any[] = []; + private originalOutboundPatterns: any[] = []; public inboundPatterns: object[] = notifyPatterns; public outboundPatterns: object[] = notifyPatterns; public itemFilterList: LdnServiceConstraint[]; @@ -41,7 +51,8 @@ export class LdnServiceFormEditComponent { private formBuilder: FormBuilder, private http: HttpClient, private router: Router, - private route: ActivatedRoute + private route: ActivatedRoute, + private cdRef: ChangeDetectorRef ) { this.formModel = this.formBuilder.group({ @@ -67,14 +78,34 @@ export class LdnServiceFormEditComponent { } }); this.ldnDirectoryService.getItemFilters().subscribe((itemFilters) => { - console.log(itemFilters); this.itemFilterList = itemFilters._embedded.itemfilters.map((filter: { id: string; }) => ({ 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 { const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${serviceId}`; @@ -88,9 +119,35 @@ export class LdnServiceFormEditComponent { description: data.description, url: data.url, ldnUrl: data.ldnUrl, - notifyServiceInboundPatterns: data.notifyServiceInboundPatterns, - notifyServiceOutboundPatterns: data.notifyServiceOutboundPatterns + type: data.type }); + + 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) => { console.error('Error fetching service data:', error); @@ -98,103 +155,76 @@ export class LdnServiceFormEditComponent { ); } + generatePatchOperations(): any[] { const patchOperations: any[] = []; - if (this.formModel.get('name').dirty) { - patchOperations.push({ - op: 'replace', - path: '/name', - value: this.formModel.get('name').value, - }); - } + this.addReplaceOperation(patchOperations, 'name', '/name'); + this.addReplaceOperation(patchOperations, 'description', '/description'); + this.addReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl'); + this.addReplaceOperation(patchOperations, 'url', '/url'); - if (this.formModel.get('description').dirty) { - patchOperations.push({ - op: 'replace', - path: '/description', - value: this.formModel.get('description').value, - }); - } + // Handle notifyServiceInboundPatterns + this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns'); - if (this.formModel.get('ldnUrl').dirty) { - patchOperations.push({ - 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', - }); - } - } + // Handle notifyServiceOutboundPatterns + this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns'); 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() { const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${this.serviceId}`; const patchOperations = this.generatePatchOperations(); @@ -202,21 +232,50 @@ export class LdnServiceFormEditComponent { this.http.patch(apiUrl, patchOperations).subscribe( (response) => { console.log('Service updated successfully:', response); + this.sendBack(); }, (error) => { console.error('Error updating service:', error); } ); + } + addInboundPattern() { const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray; notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup()); } - removeInboundPattern(patternGroup: FormGroup) { + removeInboundPattern(index: number) { 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() { @@ -224,9 +283,34 @@ export class LdnServiceFormEditComponent { notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup()); } - removeOutboundPattern(patternGroup: FormGroup) { + removeOutboundPattern(index: number) { 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() { @@ -236,7 +320,8 @@ export class LdnServiceFormEditComponent { private createOutboundPatternFormGroup(): FormGroup { return this.formBuilder.group({ pattern: '', - constraint: '' + constraint: '', + isNew: true, }); } @@ -244,7 +329,30 @@ export class LdnServiceFormEditComponent { return this.formBuilder.group({ pattern: '', 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); + } + } } diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html index a3272ffc44..db55ec285a 100644 --- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html @@ -67,14 +67,19 @@
- + +
+
+
+ +
-
@@ -119,7 +124,7 @@
-
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss index d98ebb3dee..ade0744d4c 100644 --- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss @@ -23,6 +23,10 @@ option:not(:first-child) { font-weight: bold; } +select { + width: 90%; +} + .trash-button { width: 40px; height: 40px; @@ -51,6 +55,46 @@ textarea { .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); +} + diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts index 54934913c7..608a7ada23 100644 --- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts +++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts @@ -8,11 +8,19 @@ import { LdnServiceConstraint } from '../ldn-services-model/ldn-service-constrai import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns'; import { LdnDirectoryService } from '../ldn-services-services/ldn-directory.service'; import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; +import { animate, state, style, transition, trigger } from '@angular/animations'; @Component({ selector: 'ds-ldn-service-form', templateUrl: './ldn-service-form.component.html', 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 { formModel: FormGroup; @@ -27,6 +35,7 @@ export class LdnServiceFormComponent implements OnInit { //additionalOutboundPatterns: FormGroup[] = []; //additionalInboundPatterns: FormGroup[] = []; + //@Input() public status: boolean; @Input() public name: string; @Input() public description: string; @@ -54,7 +63,7 @@ export class LdnServiceFormComponent implements OnInit { ) { this.formModel = this.formBuilder.group({ - //enabled: true, + enabled: true, id: [''], name: ['', Validators.required], 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); + } + } + + } diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html index 7d02ffe513..481989092e 100644 --- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html @@ -28,10 +28,10 @@ {{ ldnService.name }} {{ ldnService.description }} - - {{ ldnService.status ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }} + [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"> + {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }} diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts index ceaaebdd4f..9d19ad56c7 100644 --- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts +++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts @@ -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 { Observable, Subscription } from 'rxjs'; 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 { hasValue } from '../../../shared/empty.util'; import { HttpClient } from '@angular/common/http'; - @Component({ selector: 'ds-ldn-services-directory', templateUrl: './ldn-services-directory.component.html', @@ -39,7 +38,8 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy { protected paginationService: PaginationService, protected modalService: NgbModal, public ldnDirectoryService: LdnDirectoryService, - private http: HttpClient + private http: HttpClient, + private cdRef: ChangeDetectorRef ) { } @@ -81,6 +81,7 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy { closeModal() { this.modalRef.close(); + this.cdRef.detectChanges(); } @@ -89,6 +90,7 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy { (response) => { this.servicesData = response._embedded.ldnservices; console.log('ServicesData =', this.servicesData); + this.cdRef.detectChanges(); }, (error) => { console.error('Error:', error); @@ -125,7 +127,7 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy { } toggleStatus(ldnService: any): void { - const newStatus = !ldnService.status; + const newStatus = !ldnService.enabled; const apiUrl = `http://localhost:8080/server/api/ldn/ldnservices/${ldnService.id}`; const patchOperation = { @@ -137,8 +139,8 @@ export class LdnServicesOverviewComponent implements OnInit, OnDestroy { this.http.patch(apiUrl, [patchOperation]).subscribe( () => { console.log('Status updated successfully.'); - // After a successful update, fetch the data to refresh the view - this.fetchServiceData(ldnService.id); + ldnService.enabled = newStatus; + this.cdRef.detectChanges(); }, (error) => { console.error('Error updating status:', error); diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index b5307414e3..60b7e3cf5d 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -918,6 +918,7 @@ "ldn-service.overview.table.clickToDisable": "Click to disable", "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.description": "Description", "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.ldnUrl": "Please specify the URL of the LDN Inbox", "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.ItemFilter": "Item Filter", "ldn-new-service.form.label.automatic": "Automatic", "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.removeItemFilter": "Remove", "ldn-register-new-service.breadcrumbs": "New Service", @@ -956,6 +957,7 @@ "ldn-edit-service.breadcrumbs": "Edit Service", + "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.success.title": "Success",