Skip to content

Commit a366431

Browse files
chriskappchriskapp
committed
update style and add scope categories component
1 parent b8f61bf commit a366431

19 files changed

+505
-460
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@ng-bootstrap/ng-bootstrap": "^17.0.0",
2222
"bootstrap": "^5.2.3",
2323
"bootstrap-icons": "^1.10.5",
24-
"fusio-sdk": "^5.1.12",
24+
"fusio-sdk": "^5.1.15",
2525
"marked": "^12.0.0",
2626
"ngx-captcha": "^13.0.0",
2727
"ngx-clipboard": "^16.0.0",

‎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": "6.1.2",
3+
"version": "6.1.3",
44
"description": "SDK to integrate Fusio into an Angular app",
55
"keywords": [
66
"Fusio",

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

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

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

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,36 @@
1-
<div class="card" *ngIf="entity">
2-
<div class="card-header">
3-
<ng-container *ngIf="mode === 1">Create</ng-container>
4-
<ng-container *ngIf="mode === 2">Update</ng-container>
5-
<ng-container *ngIf="mode === 3">Delete</ng-container>
6-
</div>
7-
<div class="card-body">
8-
<fusio-message [response]="response"></fusio-message>
9-
<form>
10-
<div class="mb-3 row">
11-
<label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
12-
<div class="col-sm-10">
13-
<div class="input-group">
14-
<input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
15-
<button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
16-
<ng-template #nameHelp>Name of the app</ng-template>
17-
</div>
18-
</div>
19-
</div>
20-
<div class="mb-3 row">
21-
<label for="url" class="col-sm-2 col-form-label fw-bold">Url</label>
22-
<div class="col-sm-10">
23-
<div class="input-group">
24-
<input type="url" id="url" name="url" [(ngModel)]="entity.url" [disabled]="mode === 3" class="form-control">
25-
<button class="btn btn-outline-secondary" type="button" [ngbPopover]="urlHelp"><i class="bi bi-question"></i></button>
26-
<ng-template #urlHelp>Url of the app</ng-template>
27-
</div>
28-
</div>
29-
</div>
30-
<div class="mb-3 row">
31-
<label class="col-sm-2 col-form-label fw-bold">Scopes</label>
32-
<div class="col-sm-10">
33-
<fusio-form-checkbox-list name="scopes" [service]="scope" [data]="entity.scopes" (dataChange)="entity.scopes = $event" [disabled]="mode === 3"></fusio-form-checkbox-list>
34-
</div>
1+
2+
<fusio-message [response]="response"></fusio-message>
3+
<form *ngIf="entity">
4+
<div class="mb-3 row">
5+
<label for="name" class="col-sm-2 col-form-label fw-bold">Name</label>
6+
<div class="col-sm-10">
7+
<div class="input-group">
8+
<input type="text" id="name" name="name" [(ngModel)]="entity.name" [disabled]="mode === 3" class="form-control">
9+
<button class="btn btn-outline-secondary" type="button" [ngbPopover]="nameHelp"><i class="bi bi-question"></i></button>
10+
<ng-template #nameHelp>Name of the app</ng-template>
3511
</div>
36-
<div class="btn-group" role="group">
37-
<ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="doCreate(entity)">Create</button></ng-container>
38-
<ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="doUpdate(entity)">Update</button></ng-container>
39-
<ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="doDelete(entity)">Delete</button></ng-container>
40-
<button type="button" (click)="router.navigate(getListLink())" class="btn btn-light fusio-btn-back">Back</button>
12+
</div>
13+
</div>
14+
<div class="mb-3 row">
15+
<label for="url" class="col-sm-2 col-form-label fw-bold">Url</label>
16+
<div class="col-sm-10">
17+
<div class="input-group">
18+
<input type="url" id="url" name="url" [(ngModel)]="entity.url" [disabled]="mode === 3" class="form-control">
19+
<button class="btn btn-outline-secondary" type="button" [ngbPopover]="urlHelp"><i class="bi bi-question"></i></button>
20+
<ng-template #urlHelp>Url of the app</ng-template>
4121
</div>
42-
</form>
22+
</div>
23+
</div>
24+
<div class="mb-3 row">
25+
<label class="col-sm-2 col-form-label fw-bold">Scopes</label>
26+
<div class="col-sm-10">
27+
<fusio-scope-categories [scopes]="entity.scopes" (dataChange)="entity.scopes = $event" [disabled]="mode === 3"></fusio-scope-categories>
28+
</div>
29+
</div>
30+
<div class="btn-group" role="group">
31+
<ng-container *ngIf="mode === 1"><button type="button" class="btn btn-primary" (click)="doCreate(entity)">Create</button></ng-container>
32+
<ng-container *ngIf="mode === 2"><button type="button" class="btn btn-primary" (click)="doUpdate(entity)">Update</button></ng-container>
33+
<ng-container *ngIf="mode === 3"><button type="button" class="btn btn-danger" (click)="doDelete(entity)">Delete</button></ng-container>
34+
<button type="button" (click)="router.navigate(getListLink())" class="btn btn-light fusio-btn-back">Back</button>
4335
</div>
44-
</div>
36+
</form>

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

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,43 @@
1-
<div class="card">
2-
<div class="card-header">Apps</div>
3-
<div class="card-body">
4-
<fusio-search
5-
[searchTerm]="search"
6-
(search)="doSearch(1, $event)"
7-
(newClick)="router.navigate(getNewLink())"
8-
placeholder="app">
9-
</fusio-search>
10-
<table class="table table-striped">
11-
<thead>
12-
<tr>
13-
<th style="width:100px">Status</th>
14-
<th style="">Name</th>
15-
<th style="width:200px">Insert-Date</th>
16-
<th style="width:100px"></th>
17-
</tr>
18-
</thead>
19-
<tbody>
20-
<tr *ngFor="let entry of entries">
21-
<td>
22-
<ng-container *ngIf="entry.status === 1"><span class="badge text-bg-primary">Active</span></ng-container>
23-
<ng-container *ngIf="entry.status === 2"><span class="badge text-bg-secondary">Pending</span></ng-container>
24-
<ng-container *ngIf="entry.status === 3"><span class="badge text-bg-danger">Deactivated</span></ng-container>
25-
<ng-container *ngIf="entry.status === 4"><span class="badge text-bg-secondary">Deleted</span></ng-container>
26-
</td>
27-
<td>{{entry.name}}</td>
28-
<td>{{entry.date|date:'short'}}</td>
29-
<td>
30-
<div class="btn-group" role="group">
31-
<a [routerLink]="getDetailLink(entry.id)" class="btn btn-primary"><i class="bi bi-search"></i></a>
32-
<a [routerLink]="getEditLink(entry.id)" class="btn btn-secondary"><i class="bi bi-pen"></i></a>
33-
<a [routerLink]="getDeleteLink(entry.id)" class="btn btn-secondary"><i class="bi bi-x"></i></a>
34-
</div>
35-
</td>
36-
</tr>
37-
</tbody>
38-
</table>
39-
<ngb-pagination
40-
[(page)]="page"
41-
[pageSize]="pageSize"
42-
[collectionSize]="totalResults"
43-
[maxSize]="4"
44-
[ellipses]="false"
45-
(pageChange)="doSearch($event)"></ngb-pagination>
46-
</div>
47-
</div>
1+
2+
<fusio-search
3+
[searchTerm]="search"
4+
(search)="doSearch(1, $event)"
5+
(newClick)="router.navigate(getNewLink())"
6+
placeholder="app">
7+
</fusio-search>
8+
<table class="table table-striped">
9+
<thead>
10+
<tr>
11+
<th style="width:100px">Status</th>
12+
<th style="width:40%">Name</th>
13+
<th style="width:40%">Url</th>
14+
<th style="width:100px"></th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr *ngFor="let entry of entries">
19+
<td>
20+
<ng-container *ngIf="entry.status === 1"><span class="badge text-bg-primary">Active</span></ng-container>
21+
<ng-container *ngIf="entry.status === 2"><span class="badge text-bg-secondary">Pending</span></ng-container>
22+
<ng-container *ngIf="entry.status === 3"><span class="badge text-bg-danger">Deactivated</span></ng-container>
23+
<ng-container *ngIf="entry.status === 4"><span class="badge text-bg-secondary">Deleted</span></ng-container>
24+
</td>
25+
<td>{{entry.name}}</td>
26+
<td>{{entry.url}}</td>
27+
<td>
28+
<div class="btn-group" role="group">
29+
<a [routerLink]="getDetailLink(entry.id)" class="btn btn-primary"><i class="bi bi-search"></i></a>
30+
<a [routerLink]="getEditLink(entry.id)" class="btn btn-secondary"><i class="bi bi-pen"></i></a>
31+
<a [routerLink]="getDeleteLink(entry.id)" class="btn btn-danger"><i class="bi bi-x"></i></a>
32+
</div>
33+
</td>
34+
</tr>
35+
</tbody>
36+
</table>
37+
<ngb-pagination
38+
[(page)]="page"
39+
[pageSize]="pageSize"
40+
[collectionSize]="totalResults"
41+
[maxSize]="4"
42+
[ellipses]="false"
43+
(pageChange)="doSearch($event)"></ngb-pagination>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11

22
<ng-container *ngIf="useName">
33
<div class="form-check" *ngFor="let entry of entries">
4-
<input class="form-check-input" type="checkbox" [id]="name + '-' + entry.id" [name]="name + '-' + entry.id" [value]="entry.id" (change)="scopeSelect($event, entry.name)" [checked]="entry.name && data?.includes(entry.name)">
4+
<input class="form-check-input" type="checkbox" [id]="name + '-' + entry.id" [name]="name + '-' + entry.id" [value]="entry.id" (change)="scopeSelect($event, entry.name)" [checked]="entry.name && data?.includes(entry.name)" [disabled]="disabled">
55
<label class="form-check-label" [for]="entry.name">{{entry.name}}</label>
66
</div>
77
</ng-container>
88
<ng-container *ngIf="!useName">
99
<div class="form-check" *ngFor="let entry of entries">
10-
<input class="form-check-input" type="checkbox" [id]="name + '-' + entry.id" [name]="name + '-' + entry.id" [value]="entry.id" (change)="scopeSelect($event, entry.id)" [checked]="entry.id && data?.includes(entry.id)">
10+
<input class="form-check-input" type="checkbox" [id]="name + '-' + entry.id" [name]="name + '-' + entry.id" [value]="entry.id" (change)="scopeSelect($event, entry.id)" [checked]="entry.id && data?.includes(entry.id)" [disabled]="disabled">
1111
<label class="form-check-label" [for]="entry.id">{{entry.name}}</label>
1212
</div>
1313
</ng-container>

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

Lines changed: 32 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
1-
<div class="card" *ngIf="selected">
2-
<div class="card-header">{{selected.path}}</div>
3-
<div class="card-body">
4-
<div class="btn-group" role="group">
5-
<a [routerLink]="getListLink()" class="btn btn-secondary fusio-btn-back">Back</a>
1+
<div *ngIf="selected">
2+
<div class="btn-group" role="group">
3+
<a [routerLink]="getListLink()" class="btn btn-secondary fusio-btn-back">Back</a>
4+
</div>
5+
<div class="fusio-detail">
6+
<div class="row">
7+
<div class="col-lg-2 fw-bold">IP</div>
8+
<div class="col-lg-10">{{selected.ip}}</div>
9+
</div>
10+
<div class="row">
11+
<div class="col-lg-2 fw-bold">User-Agent</div>
12+
<div class="col-lg-10">{{selected.userAgent}}</div>
13+
</div>
14+
<div class="row">
15+
<div class="col-lg-2 fw-bold">Method</div>
16+
<div class="col-lg-10">{{selected.method}}</div>
17+
</div>
18+
<div class="row">
19+
<div class="col-lg-2 fw-bold">Path</div>
20+
<div class="col-lg-10">{{selected.path}}</div>
621
</div>
7-
<div class="fusio-detail">
8-
<div class="row">
9-
<div class="col-lg-2 fw-bold">IP</div>
10-
<div class="col-lg-10">{{selected.ip}}</div>
11-
</div>
12-
<div class="row">
13-
<div class="col-lg-2 fw-bold">User-Agent</div>
14-
<div class="col-lg-10">{{selected.userAgent}}</div>
15-
</div>
16-
<div class="row">
17-
<div class="col-lg-2 fw-bold">Method</div>
18-
<div class="col-lg-10">{{selected.method}}</div>
19-
</div>
20-
<div class="row">
21-
<div class="col-lg-2 fw-bold">Path</div>
22-
<div class="col-lg-10">{{selected.path}}</div>
23-
</div>
24-
<div class="row">
25-
<div class="col-lg-2 fw-bold">Headers</div>
26-
<div class="col-lg-10"><pre>{{selected.header}}</pre></div>
27-
</div>
28-
<div class="row">
29-
<div class="col-lg-2 fw-bold">Date</div>
30-
<div class="col-lg-10">{{selected.date|date:'short'}}</div>
31-
</div>
22+
<div class="row">
23+
<div class="col-lg-2 fw-bold">Headers</div>
24+
<div class="col-lg-10"><pre>{{selected.header}}</pre></div>
25+
</div>
26+
<div class="row">
27+
<div class="col-lg-2 fw-bold">Date</div>
28+
<div class="col-lg-10">{{selected.date|date:'short'}}</div>
3229
</div>
3330
</div>
34-
</div>
35-
<div class="card" style="margin-top:1rem" *ngIf="selected && selected.body">
36-
<div class="card-header">Body</div>
37-
<div class="card-body">
38-
<pre>{{selected.body|json}}</pre>
31+
<div class="card" style="margin-top:1rem" *ngIf="selected && selected.body">
32+
<div class="card-header">Body</div>
33+
<div class="card-body">
34+
<pre>{{selected.body|json}}</pre>
35+
</div>
3936
</div>
4037
</div>

0 commit comments

Comments
 (0)