Propagating errors and displaying flashmessages

This commit is contained in:
2023-02-12 16:17:50 +01:00
parent d4e1acb4e5
commit 57a282b004
8 changed files with 83 additions and 38 deletions

View File

@@ -1,5 +1,8 @@
<crud-card <crud-card
[resource]="this.resource" [resource]="this.resource"
[resource_id]="this.resource_id" [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> </crud-card>

View File

@@ -1,5 +1,6 @@
import {Component, Input} from "@angular/core"; import {Component, Input} from "@angular/core";
import {ActivatedRoute, ParamMap} from "@angular/router"; import {ActivatedRoute, ParamMap} from "@angular/router";
import { FlashmessagesService } from "../../../layout/flashmessages/flashmessages.service";
@Component({ @Component({
templateUrl: 'card.component.html', templateUrl: 'card.component.html',
@@ -10,7 +11,10 @@ export class BaseCrudCardComponent {
@Input() resource_id: string | null = null; @Input() resource_id: string | null = null;
@Input() schema: string | undefined; @Input() schema: string | undefined;
constructor(private route: ActivatedRoute) {} constructor(
private route: ActivatedRoute,
public flashService: FlashmessagesService
) {}
ngOnInit(): void { ngOnInit(): void {
if (this.resource_id === null) { if (this.resource_id === null) {

View File

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

View File

@@ -1,4 +1,5 @@
import {Component, Input} from "@angular/core"; import {Component, Input} from "@angular/core";
import {FlashmessagesService} from "../../../layout/flashmessages/flashmessages.service";
@Component({ @Component({
selector: 'base-list', selector: 'base-list',
@@ -8,4 +9,8 @@ export class BaseCrudListComponent {
@Input() resource: string = ""; @Input() resource: string = "";
@Input() columns: string[] = []; @Input() columns: string[] = [];
@Input() schema: string | undefined; @Input() schema: string | undefined;
constructor(
public flashService: FlashmessagesService
) {}
} }

View File

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

View File

@@ -1,4 +1,5 @@
import {Component, Input} from "@angular/core"; import {Component, Input} from "@angular/core";
import {FlashmessagesService} from "../../../layout/flashmessages/flashmessages.service";
@Component({ @Component({
selector: 'base-new', selector: 'base-new',
@@ -8,4 +9,8 @@ export class BaseCrudNewComponent {
@Input() resource: string | undefined; @Input() resource: string | undefined;
@Input() schema: string | undefined; @Input() schema: string | undefined;
@Input() model = {}; @Input() model = {};
constructor(
public flashService: FlashmessagesService
) {}
} }

View File

@@ -23,6 +23,7 @@ export class CardComponent implements OnInit {
@Output() resourceCreated: EventEmitter<string> = new EventEmitter(); @Output() resourceCreated: EventEmitter<string> = new EventEmitter();
@Output() resourceUpdated: EventEmitter<string> = new EventEmitter(); @Output() resourceUpdated: EventEmitter<string> = new EventEmitter();
@Output() resourceDeleted: EventEmitter<string> = new EventEmitter(); @Output() resourceDeleted: EventEmitter<string> = new EventEmitter();
@Output() error: EventEmitter<string> = new EventEmitter();
form = new FormGroup({}); form = new FormGroup({});
@@ -56,48 +57,63 @@ export class CardComponent implements OnInit {
this._modelLoading$.next(false); this._modelLoading$.next(false);
fields$ = this.formlyJsonschema.getCreateFields(this.schema!); fields$ = this.formlyJsonschema.getCreateFields(this.schema!);
} else { } else {
this.crudService.get(this.resource!, this.resource_id!).subscribe((model: any) => { this.crudService.get(this.resource!, this.resource_id!).subscribe({
this.model = model; next :(model: any) => {
this._modelLoading$.next(false); this.model = model;
this._modelLoading$.next(false);
},
error: (err) => this.error.emit("Error loading the model:" + err)
}); });
fields$ = this.formlyJsonschema.getUpdateFields(this.schema!); fields$ = this.formlyJsonschema.getUpdateFields(this.schema!);
} }
fields$.subscribe((fields: any) => { fields$.subscribe({
this.fields = [fields]; next: (fields: any) => {
this._formLoading$.next(false); this.fields = [fields];
this._formLoading$.next(false);
},
error: (err) => this.error.emit("Error loading the form:" + err)
}); });
} }
onSubmit(model: any) { onSubmit(model: any) {
this._modelLoading$.next(true); this._modelLoading$.next(true);
if (this.isCreateForm()) { if (this.isCreateForm()) {
this.crudService.create(this.resource!, model).subscribe((response: any) => { this.crudService.create(this.resource!, model).subscribe({
this._modelLoading$.next(false); next: (response: any) => {
if (! this.is_modal) { this._modelLoading$.next(false);
this.router.navigate([`../${response.id}`], {relativeTo: this.route}); if (! this.is_modal) {
} else { this.router.navigate([`../${response.id}`], {relativeTo: this.route});
this.resourceCreated.emit(response.id) } else {
} this.resourceCreated.emit(response.id)
}
},
error: (err) => this.error.emit("Error creating the entity:" + err)
}); });
} else { } else {
this.crudService.update(this.resource!, model).subscribe((model: any) => { this.crudService.update(this.resource!, model).subscribe( {
this.model = model; next: (model: any) => {
this._modelLoading$.next(false); this.model = model;
this.resourceUpdated.emit(model._id) this._modelLoading$.next(false);
this.resourceUpdated.emit(model._id)
},
error: (err) => this.error.emit("Error updating the entity:" + err)
}); });
} }
} }
onDelete() { onDelete() {
this._modelLoading$.next(true); this._modelLoading$.next(true);
this.crudService.delete(this.resource!, this.model).subscribe((model: any) => { this.crudService.delete(this.resource!, this.model).subscribe({
this._modelLoading$.next(false); next: (model: any) => {
if (! this.is_modal) { this._modelLoading$.next(false);
this.router.navigate(['../'], {relativeTo: this.route}); if (! this.is_modal) {
} else { this.router.navigate(['../'], {relativeTo: this.route});
this.resourceDeleted.emit("") } else {
} this.resourceDeleted.emit("")
}
},
error: (err) => this.error.emit("Error deleting the entity:" + err)
}); });
} }

View File

@@ -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 { BehaviorSubject } from "rxjs";
import {JSONSchema7} from "json-schema"; import {JSONSchema7} from "json-schema";
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
@@ -25,6 +25,9 @@ export class ListComponent implements OnInit {
@Input() columns: string[] = []; @Input() columns: string[] = [];
@Input() schema: string | undefined; @Input() schema: string | undefined;
@Output() error: EventEmitter<string> = new EventEmitter();
@Output() result: EventEmitter<string> = new EventEmitter();
@ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader> = new QueryList<NgbdSortableHeader>(); @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader> = new QueryList<NgbdSortableHeader>();
public displayedColumns: string[] = []; public displayedColumns: string[] = [];
@@ -49,9 +52,10 @@ export class ListComponent implements OnInit {
) { } ) { }
ngOnInit(): void { 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(); this._search();
} }
@@ -84,12 +88,16 @@ export class ListComponent implements OnInit {
let sortBy = new SortBy(this.sortColumn, this.sortDirection) let sortBy = new SortBy(this.sortColumn, this.sortDirection)
let filters = this.searchTerm ? [new Filters('fulltext', 'eq', this.searchTerm)] : []; 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({
this._listData$.next(data.items); next: (data: any) => {
this._total$.next(data.total); this._listData$.next(data.items);
this._state.pageSize = data.size; this._total$.next(data.total);
this._state.page = data.page; this._state.pageSize = data.size;
this._loading$.next(false); 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)
}); });
} }