Skip to content

Commit dab8183

Browse files
chriskappchriskapp
committed
add app and event components
1 parent b12395c commit dab8183

21 files changed

+489
-1
lines changed

‎projects/fusio-sdk/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-fusio-sdk",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"description": "SDK to integrate Fusio into an Angular app",
55
"keywords": [
66
"Fusio",

‎projects/fusio-sdk/src/lib/component/app/detail/detail.component.css

Whitespace-only changes.

‎projects/fusio-sdk/src/lib/component/app/detail/detail.component.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<div class="card" *ngIf="selected">
2+
<div class="card-header">{{selected?.name}}</div>
3+
<div class="card-body">
4+
<div class="btn-group" role="group">
5+
<button type="button" (click)="doUpdateClick()" class="btn btn-primary fusio-btn-update">Update</button>
6+
<button type="button" (click)="doDeleteClick()" class="btn btn-danger fusio-btn-delete">Delete</button>
7+
</div>
8+
<div class="fusio-detail">
9+
<div class="row">
10+
<div class="col-2 fw-bold">Status</div>
11+
<div class="col-10">
12+
<span *ngIf="selected?.status === 1" class="badge bg-success">Active</span>
13+
<span *ngIf="selected?.status === 2" class="badge bg-success">Pending</span>
14+
<span *ngIf="selected?.status === 3" class="badge bg-success">Deactivated</span>
15+
<span *ngIf="selected?.status === 4" class="badge bg-success">Deleted</span>
16+
</div>
17+
</div>
18+
<div class="row">
19+
<div class="col-2 fw-bold">Name</div>
20+
<div class="col-10">{{selected?.name}}</div>
21+
</div>
22+
<div class="row">
23+
<div class="col-2 fw-bold">Url</div>
24+
<div class="col-10">{{selected?.url}}</div>
25+
</div>
26+
<div class="row">
27+
<div class="col-2 fw-bold">App-Key</div>
28+
<div class="col-10"><code>{{selected?.appKey}}</code></div>
29+
</div>
30+
<div class="row">
31+
<div class="col-2 fw-bold">App-Secret</div>
32+
<div class="col-10">
33+
<span *ngIf="hideSecret"><code>...</code></span>
34+
<span *ngIf="!hideSecret"><code>{{selected?.appSecret}}</code></span>
35+
<button class="btn btn-sm btn-secondary float-end" (click)="hideSecret = !hideSecret">Show</button>
36+
</div>
37+
</div>
38+
<div class="row">
39+
<div class="col-2 fw-bold">Scopes</div>
40+
<div class="col-10"><fusio-scopes [scopes]="selected?.scopes"></fusio-scopes></div>
41+
</div>
42+
<div class="row">
43+
<div class="col-2 fw-bold">Date</div>
44+
<div class="col-10">{{selected?.date|date:'short'}}</div>
45+
</div>
46+
</div>
47+
</div>
48+
</div>

‎projects/fusio-sdk/src/lib/component/app/detail/detail.component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component} from '@angular/core';
2+
import {Detail} from "../../../abstract/detail";
3+
import {App} from "fusio-sdk/dist/src/generated/consumer/App";
4+
5+
@Component({
6+
selector: 'fusio-app-detail',
7+
templateUrl: './detail.component.html',
8+
styleUrls: ['./detail.component.css']
9+
})
10+
export class DetailComponent extends Detail<App> {
11+
12+
hideSecret = true;
13+
14+
}

‎projects/fusio-sdk/src/lib/component/app/list/list.component.css

Whitespace-only changes.

‎projects/fusio-sdk/src/lib/component/app/list/list.component.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
<fusio-message [response]="response"></fusio-message>
3+
4+
<fusio-search
5+
[searchTerm]="search"
6+
(search)="doSearch(1, $event)"
7+
(newClick)="openCreateDialog()"
8+
placeholder="app">
9+
</fusio-search>
10+
11+
<div class="row">
12+
<div class="col-md-3">
13+
<fusio-sidebar
14+
name="app"
15+
nameKey="name"
16+
[entries]="entries"
17+
[totalResults]="totalResults"
18+
[selected]="selected"
19+
[page]="page"
20+
[pageSize]="pageSize"
21+
(pageChange)="doSearch($event, search)"
22+
(entrySelect)="doSelect($event)">
23+
</fusio-sidebar>
24+
</div>
25+
<div class="col-md-9">
26+
<fusio-empty *ngIf="!selected" [loading]="loading" (newClick)="openCreateDialog()"></fusio-empty>
27+
<fusio-app-detail *ngIf="selected"
28+
[selected]="selected"
29+
(updateClick)="openUpdateDialog(selected)"
30+
(deleteClick)="openDeleteDialog(selected)">
31+
</fusio-app-detail>
32+
</div>
33+
</div>

‎projects/fusio-sdk/src/lib/component/app/list/list.component.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {Component} from '@angular/core';
2+
import {App} from "fusio-sdk/dist/src/generated/consumer/App";
3+
import Client from "fusio-sdk/dist/src/generated/consumer/Client";
4+
import {CollectionQuery} from "fusio-sdk/dist/src/generated/consumer/CollectionQuery";
5+
import {Collection} from "fusio-sdk/dist/src/generated/consumer/Collection";
6+
import {List} from "../../../abstract/list";
7+
import {AxiosResponse} from "axios";
8+
import {ModalComponent} from "../modal/modal.component";
9+
10+
@Component({
11+
selector: 'fusio-app-list',
12+
templateUrl: './list.component.html',
13+
styleUrls: ['./list.component.css']
14+
})
15+
export class ListComponent extends List<Client, App> {
16+
17+
protected async getAll(query: CollectionQuery): Promise<AxiosResponse<Collection<App>>> {
18+
const app = await this.fusio.getClient().getConsumerApp();
19+
return await app.consumerActionAppGetAll(query);
20+
}
21+
22+
protected async get(id: string): Promise<AxiosResponse<App>> {
23+
const app = await this.fusio.getClient().getConsumerAppByAppId(id);
24+
return await app.consumerActionAppGet();
25+
}
26+
27+
protected getDetailComponent(): any {
28+
return ModalComponent;
29+
}
30+
31+
protected getRoute(): any {
32+
return '/account/app';
33+
}
34+
35+
}

‎projects/fusio-sdk/src/lib/component/app/modal/modal.component.css

Whitespace-only changes.

‎projects/fusio-sdk/src/lib/component/app/modal/modal.component.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
<div class="modal-header">
3+
<h4 class="modal-title">
4+
<ng-container *ngIf="mode === 1">Create</ng-container>
5+
<ng-container *ngIf="mode === 2">Update</ng-container>
6+
<ng-container *ngIf="mode === 3">Delete</ng-container>
7+
</h4>
8+
<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
9+
</div>
10+
<div class="modal-body">
11+
<fusio-message [response]="response"></fusio-message>
12+
<form>
13+
<div class="mb-3 row">
14+
<label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
15+
<div class="col-sm-10">
16+
<div class="input-group">
17+
<input type="text" id="name" name="name" [(ngModel)]="entity.name" class="form-control">
18+
<button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
19+
<ng-template #nameHelp>Name of the app</ng-template>
20+
</div>
21+
</div>
22+
</div>
23+
<div class="mb-3 row">
24+
<label for="url" class="col-sm-2 col-form-label fw-bold">Url</label>
25+
<div class="col-sm-10">
26+
<div class="input-group">
27+
<input type="url" id="url" name="url" [(ngModel)]="entity.url" class="form-control">
28+
<button class="btn btn-outline-secondary" type="button" [ngbPopover]="urlHelp"><i class="bi bi-question"></i></button>
29+
<ng-template #urlHelp>Url of the app</ng-template>
30+
</div>
31+
</div>
32+
</div>
33+
<div class="mb-3 row">
34+
<label class="col-sm-2 col-form-label fw-bold">Scopes</label>
35+
<div class="col-sm-10">
36+
<div class="form-check" *ngFor="let scope of scopes">
37+
<input class="form-check-input" type="checkbox" [value]="scope.id" (change)="scopeSelect($event, scope.name)" [checked]="scope.name && this.entity.scopes?.includes(scope.name)" [id]="scope.name">
38+
<label class="form-check-label" [for]="scope.name">{{scope.name}}</label>
39+
</div>
40+
</div>
41+
</div>
42+
</form>
43+
</div>
44+
<div class="modal-footer">
45+
<ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="submit()">Create</button></ng-container>
46+
<ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="submit()">Update</button></ng-container>
47+
<ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="submit()">Delete</button></ng-container>
48+
<button type="button" class="btn btn-light" (click)="modal.close()">Close</button>
49+
</div>

‎projects/fusio-sdk/src/lib/component/app/modal/modal.component.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import {Component} from '@angular/core';
2+
import {Modal} from "../../../abstract/modal";
3+
import Client from "fusio-sdk/dist/src/generated/consumer/Client";
4+
import {App} from "fusio-sdk/dist/src/generated/consumer/App";
5+
import {AxiosResponse} from "axios";
6+
import {Message} from "fusio-sdk/dist/src/generated/consumer/Message";
7+
import {AppCreate} from "fusio-sdk/dist/src/generated/consumer/AppCreate";
8+
import {AppUpdate} from "fusio-sdk/dist/src/generated/consumer/AppUpdate";
9+
import {Scope} from "fusio-sdk/dist/src/generated/consumer/Scope";
10+
11+
@Component({
12+
selector: 'fusio-app-modal',
13+
templateUrl: './modal.component.html',
14+
styleUrls: ['./modal.component.css']
15+
})
16+
export class ModalComponent extends Modal<Client, App> {
17+
18+
scopes?: Array<Scope>;
19+
20+
override async ngOnInit(): Promise<void> {
21+
const scope = await this.fusio.getClient().getConsumerScope();
22+
const response = await scope.consumerActionScopeGetAll({count: 1024});
23+
this.scopes = response.data.entry;
24+
}
25+
26+
protected async create(entity: App): Promise<AxiosResponse<Message>> {
27+
const app = await this.fusio.getClient().getConsumerApp();
28+
return await app.consumerActionAppCreate(<AppCreate> entity);
29+
}
30+
31+
protected async update(entity: App): Promise<AxiosResponse<Message>> {
32+
const app = await this.fusio.getClient().getConsumerAppByAppId('' + entity.id);
33+
return await app.consumerActionAppUpdate(<AppUpdate> entity);
34+
}
35+
36+
protected async delete(entity: App): Promise<AxiosResponse<Message>> {
37+
const app = await this.fusio.getClient().getConsumerAppByAppId('' + entity.id);
38+
return await app.consumerActionAppDelete();
39+
}
40+
41+
protected newEntity(): App {
42+
return {
43+
name: '',
44+
url: '',
45+
scopes: []
46+
};
47+
}
48+
49+
scopeSelect(event: any, scope?: string) {
50+
const selected = event.target.checked;
51+
if (!scope) {
52+
return;
53+
}
54+
55+
if (selected) {
56+
this.addScope(scope);
57+
} else {
58+
this.removeScope(scope);
59+
}
60+
}
61+
62+
private addScope(scope: string) {
63+
this.entity.scopes?.push(scope)
64+
}
65+
66+
private removeScope(scope: string) {
67+
this.entity.scopes = this.entity.scopes?.filter((value) => {
68+
return value !== scope;
69+
});
70+
}
71+
72+
}

‎projects/fusio-sdk/src/lib/component/event/detail/detail.component.css

Whitespace-only changes.

‎projects/fusio-sdk/src/lib/component/event/detail/detail.component.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<div class="card" *ngIf="selected">
2+
<div class="card-header">{{selected?.endpoint}}</div>
3+
<div class="card-body">
4+
<div class="btn-group" role="group">
5+
<button type="button" (click)="doUpdateClick()" class="btn btn-primary fusio-btn-update">Update</button>
6+
<button type="button" (click)="doDeleteClick()" class="btn btn-danger fusio-btn-delete">Delete</button>
7+
</div>
8+
<div class="fusio-detail">
9+
<div class="row">
10+
<div class="col-2 fw-bold">Endpoint</div>
11+
<div class="col-10">{{selected?.endpoint}}</div>
12+
</div>
13+
</div>
14+
</div>
15+
</div>
16+
<div class="card" style="margin-top:1rem;" *ngIf="selected">
17+
<div class="card-header">Responses</div>
18+
<div class="card-body">
19+
<table class="table">
20+
<thead>
21+
<tr>
22+
<th>Status</th>
23+
<th>Code</th>
24+
<th>Attempts</th>
25+
<th>Execute-Date</th>
26+
</tr>
27+
</thead>
28+
<tbody *ngFor="let response of selected?.responses">
29+
<tr>
30+
<td>
31+
<span *ngIf="response?.status === 1" class="badge bg-info">Pending</span>
32+
<span *ngIf="response?.status === 2" class="badge bg-success">Done</span>
33+
<span *ngIf="response?.status === 3" class="badge bg-secondary">Exceeded</span>
34+
</td>
35+
<td>{{response.code}}</td>
36+
<td>{{response.attempts}}</td>
37+
<td>{{response.executeDate|date:'short'}}</td>
38+
</tr>
39+
</tbody>
40+
</table>
41+
</div>
42+
</div>

‎projects/fusio-sdk/src/lib/component/event/detail/detail.component.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import {EventSubscription} from "fusio-sdk/dist/src/generated/consumer/EventSubscription";
3+
import {Detail} from "../../../abstract/detail";
4+
5+
@Component({
6+
selector: 'fusio-event-detail',
7+
templateUrl: './detail.component.html',
8+
styleUrls: ['./detail.component.css']
9+
})
10+
export class DetailComponent extends Detail<EventSubscription> {
11+
12+
}

‎projects/fusio-sdk/src/lib/component/event/list/list.component.css

Whitespace-only changes.

‎projects/fusio-sdk/src/lib/component/event/list/list.component.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
<fusio-message [response]="response"></fusio-message>
3+
4+
<fusio-search
5+
[searchTerm]="search"
6+
(search)="doSearch(1, $event)"
7+
(newClick)="openCreateDialog()"
8+
placeholder="event">
9+
</fusio-search>
10+
11+
<div class="row">
12+
<div class="col-md-3">
13+
<fusio-sidebar
14+
name="event"
15+
nameKey="endpoint"
16+
[entries]="entries"
17+
[totalResults]="totalResults"
18+
[selected]="selected"
19+
[page]="page"
20+
[pageSize]="pageSize"
21+
(pageChange)="doSearch($event, search)"
22+
(entrySelect)="doSelect($event)">
23+
</fusio-sidebar>
24+
</div>
25+
<div class="col-md-9">
26+
<fusio-empty *ngIf="!selected" [loading]="loading" (newClick)="openCreateDialog()"></fusio-empty>
27+
<fusio-event-detail *ngIf="selected"
28+
[selected]="selected"
29+
(updateClick)="openUpdateDialog(selected)"
30+
(deleteClick)="openDeleteDialog(selected)">
31+
</fusio-event-detail>
32+
</div>
33+
</div>

‎projects/fusio-sdk/src/lib/component/event/list/list.component.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {Component} from '@angular/core';
2+
import {EventSubscription} from "fusio-sdk/dist/src/generated/consumer/EventSubscription";
3+
import Client from "fusio-sdk/dist/src/generated/consumer/Client";
4+
import {List} from "../../../abstract/list";
5+
import {CollectionQuery} from "fusio-sdk/dist/src/generated/consumer/CollectionQuery";
6+
import {AxiosResponse} from "axios";
7+
import {Collection} from "fusio-sdk/dist/src/generated/consumer/Collection";
8+
import {ModalComponent} from "../modal/modal.component";
9+
10+
@Component({
11+
selector: 'fusio-event-list',
12+
templateUrl: './list.component.html',
13+
styleUrls: ['./list.component.css']
14+
})
15+
export class ListComponent extends List<Client, EventSubscription> {
16+
17+
protected async getAll(query: CollectionQuery): Promise<AxiosResponse<Collection<EventSubscription>>> {
18+
const subscription = await this.fusio.getClient().getConsumerSubscription();
19+
return await subscription.consumerActionEventSubscriptionGetAll(query);
20+
}
21+
22+
protected async get(id: string): Promise<AxiosResponse<EventSubscription>> {
23+
const subscription = await this.fusio.getClient().getConsumerSubscriptionBySubscriptionId(id);
24+
return await subscription.consumerActionEventSubscriptionGet();
25+
}
26+
27+
protected getDetailComponent(): any {
28+
return ModalComponent;
29+
}
30+
31+
protected getRoute(): any {
32+
return '/account/event';
33+
}
34+
35+
}

‎projects/fusio-sdk/src/lib/component/event/modal/modal.component.css

Whitespace-only changes.

0 commit comments

Comments
 (0)