Propagating errors and displaying flashmessages

front/app/src/app/views/base-view/card/card.component.html

@@ -1,5 +1,8 @@
 <crud-card
         [resource]="this.resource"
         [resource_id]="this.resource_id"
-        [schema]="this.schema">
+        [schema]="this.schema"
+        (resourceUpdated)="this.flashService.success('Entity updated')"
+        (resourceDeleted)="this.flashService.success('Entity deleted')"
+        (error)="this.flashService.error($event)">
 </crud-card>

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) {

front/app/src/app/views/base-view/list/list.component.html

@@ -1,5 +1,7 @@
 <crud-list
         [resource]="this.resource"
         [schema]="this.schema"
-        [columns]="this.columns">
+        [columns]="this.columns"
+        (result)="this.flashService.success($event)"
+        (error)="this.flashService.error($event)">
 </crud-list>

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
+    ) {}
 }

front/app/src/app/views/base-view/new/new.component.html

@@ -1,4 +1,6 @@
 <crud-card
         [resource]="this.resource"
-        [schema]="this.schema">
+        [schema]="this.schema"
+        (resourceCreated)="this.flashService.success('Entity created')"
+        (error)="this.flashService.error($event)">
 </crud-card>

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
+    ) {}
 }

front/app/src/common/crud/card/card.component.ts

@@ -23,6 +23,7 @@ export class CardComponent implements OnInit {
     @Output() resourceCreated: EventEmitter<string> = new EventEmitter();
     @Output() resourceUpdated: EventEmitter<string> = new EventEmitter();
     @Output() resourceDeleted: EventEmitter<string> = new EventEmitter();
+    @Output() error: EventEmitter<string> = 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.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) => {
+        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.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.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.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)
         });
     }
 

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<string> = new EventEmitter();
+    @Output() result: EventEmitter<string> = new EventEmitter();
+
     @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader> = new QueryList<NgbdSortableHeader>();
 
     public displayedColumns: string[] = [];
@@ -49,9 +52,10 @@ export class ListComponent implements OnInit {
     ) { }
 
     ngOnInit(): void {
-        this.jsonSchemasService.getUpdateResource(this.schema!).subscribe((schema: any) => {
+        this.jsonSchemasService.getUpdateResource(this.schema!).subscribe({
-            this.getColumnDefinition(schema)
+            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.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)
         });
     }