From 57a282b004d437f6faaf7a810c4e4e033a063665 Mon Sep 17 00:00:00 2001 From: ewandor Date: Sun, 12 Feb 2023 16:17:50 +0100 Subject: [PATCH] Propagating errors and displaying flashmessages --- .../views/base-view/card/card.component.html | 5 +- .../views/base-view/card/card.component.ts | 6 +- .../views/base-view/list/list.component.html | 4 +- .../views/base-view/list/list.component.ts | 5 ++ .../views/base-view/new/new.component.html | 4 +- .../app/views/base-view/new/new.component.ts | 5 ++ .../src/common/crud/card/card.component.ts | 64 ++++++++++++------- .../src/common/crud/list/list.component.ts | 28 +++++--- 8 files changed, 83 insertions(+), 38 deletions(-) diff --git a/front/app/src/app/views/base-view/card/card.component.html b/front/app/src/app/views/base-view/card/card.component.html index c739c004..8abf5a9d 100644 --- a/front/app/src/app/views/base-view/card/card.component.html +++ b/front/app/src/app/views/base-view/card/card.component.html @@ -1,5 +1,8 @@ + [schema]="this.schema" + (resourceUpdated)="this.flashService.success('Entity updated')" + (resourceDeleted)="this.flashService.success('Entity deleted')" + (error)="this.flashService.error($event)"> \ No newline at end of file diff --git a/front/app/src/app/views/base-view/card/card.component.ts b/front/app/src/app/views/base-view/card/card.component.ts index 4ea997e1..61d78a79 100644 --- a/front/app/src/app/views/base-view/card/card.component.ts +++ b/front/app/src/app/views/base-view/card/card.component.ts @@ -1,5 +1,6 @@ import {Component, Input} from "@angular/core"; import {ActivatedRoute, ParamMap} from "@angular/router"; +import { FlashmessagesService } from "../../../layout/flashmessages/flashmessages.service"; @Component({ templateUrl: 'card.component.html', @@ -10,7 +11,10 @@ export class BaseCrudCardComponent { @Input() resource_id: string | null = null; @Input() schema: string | undefined; - constructor(private route: ActivatedRoute) {} + constructor( + private route: ActivatedRoute, + public flashService: FlashmessagesService + ) {} ngOnInit(): void { if (this.resource_id === null) { diff --git a/front/app/src/app/views/base-view/list/list.component.html b/front/app/src/app/views/base-view/list/list.component.html index 1296982f..514d337a 100644 --- a/front/app/src/app/views/base-view/list/list.component.html +++ b/front/app/src/app/views/base-view/list/list.component.html @@ -1,5 +1,7 @@ + [columns]="this.columns" + (result)="this.flashService.success($event)" + (error)="this.flashService.error($event)"> \ No newline at end of file diff --git a/front/app/src/app/views/base-view/list/list.component.ts b/front/app/src/app/views/base-view/list/list.component.ts index 42df183e..9d50abaf 100644 --- a/front/app/src/app/views/base-view/list/list.component.ts +++ b/front/app/src/app/views/base-view/list/list.component.ts @@ -1,4 +1,5 @@ import {Component, Input} from "@angular/core"; +import {FlashmessagesService} from "../../../layout/flashmessages/flashmessages.service"; @Component({ selector: 'base-list', @@ -8,4 +9,8 @@ export class BaseCrudListComponent { @Input() resource: string = ""; @Input() columns: string[] = []; @Input() schema: string | undefined; + + constructor( + public flashService: FlashmessagesService + ) {} } \ No newline at end of file diff --git a/front/app/src/app/views/base-view/new/new.component.html b/front/app/src/app/views/base-view/new/new.component.html index b32dd06e..1b31f652 100644 --- a/front/app/src/app/views/base-view/new/new.component.html +++ b/front/app/src/app/views/base-view/new/new.component.html @@ -1,4 +1,6 @@ + [schema]="this.schema" + (resourceCreated)="this.flashService.success('Entity created')" + (error)="this.flashService.error($event)"> \ No newline at end of file diff --git a/front/app/src/app/views/base-view/new/new.component.ts b/front/app/src/app/views/base-view/new/new.component.ts index cd2247d5..143d7f85 100644 --- a/front/app/src/app/views/base-view/new/new.component.ts +++ b/front/app/src/app/views/base-view/new/new.component.ts @@ -1,4 +1,5 @@ import {Component, Input} from "@angular/core"; +import {FlashmessagesService} from "../../../layout/flashmessages/flashmessages.service"; @Component({ selector: 'base-new', @@ -8,4 +9,8 @@ export class BaseCrudNewComponent { @Input() resource: string | undefined; @Input() schema: string | undefined; @Input() model = {}; + + constructor( + public flashService: FlashmessagesService + ) {} } \ No newline at end of file diff --git a/front/app/src/common/crud/card/card.component.ts b/front/app/src/common/crud/card/card.component.ts index 3c90d679..e054237c 100644 --- a/front/app/src/common/crud/card/card.component.ts +++ b/front/app/src/common/crud/card/card.component.ts @@ -23,6 +23,7 @@ export class CardComponent implements OnInit { @Output() resourceCreated: EventEmitter = new EventEmitter(); @Output() resourceUpdated: EventEmitter = new EventEmitter(); @Output() resourceDeleted: EventEmitter = new EventEmitter(); + @Output() error: EventEmitter = new EventEmitter(); form = new FormGroup({}); @@ -56,48 +57,63 @@ export class CardComponent implements OnInit { this._modelLoading$.next(false); fields$ = this.formlyJsonschema.getCreateFields(this.schema!); } else { - this.crudService.get(this.resource!, this.resource_id!).subscribe((model: any) => { - this.model = model; - this._modelLoading$.next(false); + this.crudService.get(this.resource!, this.resource_id!).subscribe({ + next :(model: any) => { + this.model = model; + this._modelLoading$.next(false); + }, + error: (err) => this.error.emit("Error loading the model:" + err) }); fields$ = this.formlyJsonschema.getUpdateFields(this.schema!); } - fields$.subscribe((fields: any) => { - this.fields = [fields]; - this._formLoading$.next(false); + fields$.subscribe({ + next: (fields: any) => { + this.fields = [fields]; + this._formLoading$.next(false); + }, + error: (err) => this.error.emit("Error loading the form:" + err) }); } onSubmit(model: any) { this._modelLoading$.next(true); if (this.isCreateForm()) { - this.crudService.create(this.resource!, model).subscribe((response: any) => { - this._modelLoading$.next(false); - if (! this.is_modal) { - this.router.navigate([`../${response.id}`], {relativeTo: this.route}); - } else { - this.resourceCreated.emit(response.id) - } + this.crudService.create(this.resource!, model).subscribe({ + next: (response: any) => { + this._modelLoading$.next(false); + if (! this.is_modal) { + this.router.navigate([`../${response.id}`], {relativeTo: this.route}); + } else { + this.resourceCreated.emit(response.id) + } + }, + error: (err) => this.error.emit("Error creating the entity:" + err) }); } else { - this.crudService.update(this.resource!, model).subscribe((model: any) => { - this.model = model; - this._modelLoading$.next(false); - this.resourceUpdated.emit(model._id) + this.crudService.update(this.resource!, model).subscribe( { + next: (model: any) => { + this.model = model; + this._modelLoading$.next(false); + this.resourceUpdated.emit(model._id) + }, + error: (err) => this.error.emit("Error updating the entity:" + err) }); } } onDelete() { this._modelLoading$.next(true); - this.crudService.delete(this.resource!, this.model).subscribe((model: any) => { - this._modelLoading$.next(false); - if (! this.is_modal) { - this.router.navigate(['../'], {relativeTo: this.route}); - } else { - this.resourceDeleted.emit("") - } + this.crudService.delete(this.resource!, this.model).subscribe({ + next: (model: any) => { + this._modelLoading$.next(false); + if (! this.is_modal) { + this.router.navigate(['../'], {relativeTo: this.route}); + } else { + this.resourceDeleted.emit("") + } + }, + error: (err) => this.error.emit("Error deleting the entity:" + err) }); } diff --git a/front/app/src/common/crud/list/list.component.ts b/front/app/src/common/crud/list/list.component.ts index 5f6f45c8..a383758f 100644 --- a/front/app/src/common/crud/list/list.component.ts +++ b/front/app/src/common/crud/list/list.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChildren, QueryList, Input, OnInit } from '@angular/core'; +import {Component, ViewChildren, QueryList, Input, OnInit, Output, EventEmitter} from '@angular/core'; import { BehaviorSubject } from "rxjs"; import {JSONSchema7} from "json-schema"; import { ActivatedRoute, Router } from '@angular/router'; @@ -25,6 +25,9 @@ export class ListComponent implements OnInit { @Input() columns: string[] = []; @Input() schema: string | undefined; + @Output() error: EventEmitter = new EventEmitter(); + @Output() result: EventEmitter = new EventEmitter(); + @ViewChildren(NgbdSortableHeader) headers: QueryList = new QueryList(); public displayedColumns: string[] = []; @@ -49,9 +52,10 @@ export class ListComponent implements OnInit { ) { } ngOnInit(): void { - this.jsonSchemasService.getUpdateResource(this.schema!).subscribe((schema: any) => { - this.getColumnDefinition(schema) - }) + this.jsonSchemasService.getUpdateResource(this.schema!).subscribe({ + next: (schema: any) => this.getColumnDefinition(schema), + error: (err) => this.error.emit("Error loading the schema:" + err) + }); this._search(); } @@ -84,12 +88,16 @@ export class ListComponent implements OnInit { let sortBy = new SortBy(this.sortColumn, this.sortDirection) let filters = this.searchTerm ? [new Filters('fulltext', 'eq', this.searchTerm)] : []; - this.service.getList(this.resource, this.page, this.pageSize, [sortBy], filters).subscribe((data: any) => { - this._listData$.next(data.items); - this._total$.next(data.total); - this._state.pageSize = data.size; - this._state.page = data.page; - this._loading$.next(false); + this.service.getList(this.resource, this.page, this.pageSize, [sortBy], filters).subscribe({ + next: (data: any) => { + this._listData$.next(data.items); + this._total$.next(data.total); + this._state.pageSize = data.size; + this._state.page = data.page; + this._loading$.next(false); + this.result.emit(`Found ${data.total} records`) + }, + error: (err) => this.error.emit("Error loading the list:" + err) }); }