migrate to 6.x

projects/fusio-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-fusio-sdk",
-  "version": "5.1.3",
+  "version": "6.0.0",
   "description": "SDK to integrate Fusio into an Angular app",
   "keywords": [
     "Fusio",

projects/fusio-sdk/src/lib/abstract/detail.ts

@@ -1,32 +1,66 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {CommonMessage} from "fusio-sdk";
+import {ErrorService} from "../service/error.service";
+import {Service} from "./service";
 
 /**
- * This component is only a basic view component which renders a provided entity. It should only render the provided
- * JSON data it should not contain any additional logic to request data from an endpoint
+ * Base component to show a detail page of a single entity
  */
 @Component({
   template: '',
 })
 export abstract class Detail<T> implements OnInit {
 
-  @Input()
-  selected!: T;
-  @Output()
-  updateClick: EventEmitter<void> = new EventEmitter<void>();
-  @Output()
-  deleteClick: EventEmitter<void> = new EventEmitter<void>();
+  public selected?: T;
+  public response?: CommonMessage;
 
-  jsonView: boolean = false;
+  protected constructor(protected route: ActivatedRoute, public router: Router, protected error: ErrorService) {
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.route.paramMap.subscribe(async params => {
+      const id = params.get('id');
+      if (id) {
+        await this.doGet(id);
+      }
+    });
+  }
+
+  async doGet(id: string) {
+    try {
+      this.selected = await this.getService().get(id);
 
-  async ngOnInit() {
+      this.onLoad();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
   }
 
-  doUpdateClick() {
-    this.updateClick.emit();
+  public getListLink(): Array<string>
+  {
+    return this.getService().getLink();
   }
 
-  doDeleteClick() {
-    this.deleteClick.emit();
+  public getEditLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('edit')
+    return link;
   }
 
+  public getDeleteLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('delete')
+    return link;
+  }
+
+  protected abstract getService(): Service<T>;
+
+  protected onLoad(): void
+  {
+  }
 }

projects/fusio-sdk/src/lib/abstract/form.ts

@@ -0,0 +1,97 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {CommonMessage} from "fusio-sdk";
+import {ErrorService} from "../service/error.service";
+import {Service} from "./service";
+
+/**
+ * Base component to provide a form to create, update or delete an entity
+ */
+@Component({
+  template: '',
+})
+export abstract class Form<T> implements OnInit {
+
+  public entity?: T;
+  public response?: CommonMessage;
+  public mode: Mode = Mode.Create;
+
+  protected constructor(protected route: ActivatedRoute, public router: Router, protected error: ErrorService) {
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.entity = this.getService().newEntity();
+
+    this.route.data.subscribe((data) => {
+      this.mode = data['mode'];
+    });
+
+    this.route.paramMap.subscribe(async params => {
+      const id = params.get('id');
+      if (id) {
+        await this.doGet(id);
+      }
+    });
+  }
+
+  async doGet(id: string) {
+    try {
+      this.entity = await this.getService().get(id);
+
+      this.onLoad();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  async doCreate(entity: T) {
+    try {
+      this.response = await this.getService().create(entity);
+
+      this.onSubmit();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  async doUpdate(entity: T) {
+    try {
+      this.response = await this.getService().update(entity);
+
+      this.onSubmit();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  async doDelete(entity: T) {
+    try {
+      this.response = await this.getService().delete(entity);
+
+      this.onSubmit();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+  public getListLink(): Array<string>
+  {
+    return this.getService().getLink();
+  }
+
+  protected abstract getService(): Service<T>;
+
+  protected onLoad(): void
+  {
+  }
+
+  protected onSubmit(): void
+  {
+  }
+}
+
+export enum Mode {
+  Create = 1,
+  Update,
+  Delete,
+}

projects/fusio-sdk/src/lib/abstract/list.ts

@@ -1,82 +1,125 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
-import {ClientAbstract} from "sdkgen-client";
-import {ApiService} from "../service/api.service";
+import {CommonMessage} from "fusio-sdk";
 import {ErrorService} from "../service/error.service";
-import {EventService} from "../service/event.service";
-import {Result} from "./modal";
-import {ModelId, Query} from "./query";
+import {Service} from "./service";
 
 /**
- * List panel which uses a modal to CRUD entities. Note it depends on ng-bootstrap so you can use it only if your
- * project also uses ng-bootstrap
+ * Base component to list entities, with a pagination and a search
  */
 @Component({
   template: '',
 })
-export abstract class List<C extends ClientAbstract, T extends ModelId> extends Query<C, T> {
+export abstract class List<T> implements OnInit {
 
-  protected modalService: NgbModal;
+  public search: string = '';
+  public totalResults: number = 0;
+  public entries: Array<T> = [];
+  public page: number = 1;
+  public pageSize: number = 16;
+  public response?: CommonMessage;
 
-  constructor(fusio: ApiService<C>, route: ActivatedRoute, router: Router, event: EventService, error: ErrorService, modalService: NgbModal) {
-    super(fusio, route, router, event, error);
-    this.modalService = modalService;
+  protected constructor(protected route: ActivatedRoute, public router: Router, protected error: ErrorService) {
   }
 
-  openCreateDialog() {
-    const modalRef = this.modalService.open(this.getDetailComponent(), {
-      size: 'lg'
-    });
-    modalRef.componentInstance.mode = Mode.Create;
-    modalRef.closed.subscribe(async (result: Result<T>) => {
-      this.response = result.response;
-      if (result.response.success) {
-        this.event.dispatchModelCreated(result.entity, this.getRoute());
+  async ngOnInit(): Promise<void> {
+    this.route.queryParams.subscribe(async params => {
+      let page, search;
+      if (params['page']) {
+        page = parseInt(params['page']);
+      }
+      if (params['search']) {
+        search = params['search'];
+      }
 
-        await this.doList();
+      if (!this.hasQueryParamsChange(page, search)) {
+        return;
       }
+
+      this.page = page || 1;
+      this.search = search || '';
+
+      await this.doList();
     });
   }
 
-  openUpdateDialog(entity: T) {
-    const modalRef = this.modalService.open(this.getDetailComponent(), {
-      size: 'lg'
-    });
-    modalRef.componentInstance.mode = Mode.Update;
-    modalRef.componentInstance.entity = entity;
-    modalRef.closed.subscribe(async (result: Result<T>) => {
-      this.response = result.response;
-      if (result.response.success) {
-        this.event.dispatchModelUpdated(result.entity, this.getRoute());
-
-        await this.doList();
-      }
-    });
+  async doList() {
+    try {
+      const response = await this.getService().getAll(this.getCollectionQuery());
+
+      this.totalResults = response.totalResults || 0;
+      this.entries = response.entry || [];
+
+      this.onLoad();
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
   }
 
-  openDeleteDialog(entity: T) {
-    const modalRef = this.modalService.open(this.getDetailComponent(), {
-      size: 'lg'
-    });
-    modalRef.componentInstance.mode = Mode.Delete;
-    modalRef.componentInstance.entity = entity;
-    modalRef.closed.subscribe(async (result: Result<T>) => {
-      this.response = result.response;
-      if (result.response.success) {
-        this.event.dispatchModelDeleted(result.entity, this.getRoute());
-
-        await this.doList();
-      }
-    });
+  async doSearch(page?: number, search?: string) {
+    if (!this.hasQueryParamsChange(page, search)) {
+      return;
+    }
+
+    if (page !== undefined) {
+      this.page = page;
+    }
+
+    if (search !== undefined) {
+      this.search = search;
+    }
+
+    await this.doList();
   }
 
-  protected abstract getDetailComponent(): any;
+  public getDetailLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    return link;
+  }
 
-}
+  public getNewLink(): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('-')
+    link.push('new')
+    return link;
+  }
+
+  public getEditLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('edit')
+    return link;
+  }
+
+  public getDeleteLink(id: any): Array<string>
+  {
+    const link = this.getService().getLink();
+    link.push('' + id)
+    link.push('delete')
+    return link;
+  }
+
+  protected getCollectionQuery(): Array<any> {
+    let query: Array<any> = [];
+    query.push((this.page - 1) * this.pageSize);
+    query.push(this.pageSize);
+    if (this.search) {
+      query.push(this.search);
+    }
+    return query;
+  }
 
-export enum Mode {
-  Create = 1,
-  Update,
-  Delete,
+  protected hasQueryParamsChange(page?: number, search?: string): boolean {
+    return this.page !== page || this.search !== search;
+  }
+
+  protected abstract getService(): Service<T>;
+
+  protected onLoad(): void
+  {
+  }
 }