Skip to content

Commit 75d3ae0

Browse files
chriskappchriskapp
committed
use resource
1 parent 37f57c1 commit 75d3ae0

File tree

9 files changed

+122
-125
lines changed

9 files changed

+122
-125
lines changed

‎projects/fusio-sdk/src/lib/component/about/about.component.html‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,38 @@
11

22
<div class="row">
33
<div class="col-md-12">
4-
<dl>
5-
<dt>API-Version</dt>
6-
<dd>{{about()?.apiVersion}}</dd>
7-
<dt>Title</dt>
8-
<dd>{{about()?.title}}</dd>
9-
<dt>Description</dt>
10-
<dd>{{about()?.description}}</dd>
11-
<dt>Scopes</dt>
12-
<dd>
13-
@for (scope of about()?.scopes; track $index) {
14-
<span class="badge text-bg-primary me-1">{{scope}}</span>
15-
}
16-
</dd>
17-
</dl>
18-
<h3>Links</h3>
19-
<table class="table table-striped">
20-
<thead>
21-
<tr>
22-
<th>Relationship</th>
23-
<th>Link</th>
24-
</tr>
25-
</thead>
26-
<tbody>
27-
@for (link of about()?.links; track $index) {
4+
@if (about.hasValue()) {
5+
<dl>
6+
<dt>API-Version</dt>
7+
<dd>{{about.value()?.apiVersion}}</dd>
8+
<dt>Title</dt>
9+
<dd>{{about.value()?.title}}</dd>
10+
<dt>Description</dt>
11+
<dd>{{about.value()?.description}}</dd>
12+
<dt>Scopes</dt>
13+
<dd>
14+
@for (scope of about.value()?.scopes; track $index) {
15+
<span class="badge text-bg-primary me-1">{{scope}}</span>
16+
}
17+
</dd>
18+
</dl>
19+
<h3>Links</h3>
20+
<table class="table table-striped">
21+
<thead>
2822
<tr>
29-
<td>{{link.rel}}</td>
30-
<td><a href="{{link.href}}">{{link.href}}</a></td>
23+
<th>Relationship</th>
24+
<th>Link</th>
3125
</tr>
32-
}
33-
</tbody>
34-
</table>
26+
</thead>
27+
<tbody>
28+
@for (link of about.value()?.links; track $index) {
29+
<tr>
30+
<td>{{link.rel}}</td>
31+
<td><a href="{{link.href}}">{{link.href}}</a></td>
32+
</tr>
33+
}
34+
</tbody>
35+
</table>
36+
}
3537
</div>
3638
</div>

‎projects/fusio-sdk/src/lib/component/about/about.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, OnInit, signal} from '@angular/core';
1+
import {Component, resource} from '@angular/core';
22
import {SystemAbout} from "fusio-sdk";
33
import {FusioService} from "../../service/fusio.service";
44

@@ -7,14 +7,14 @@ import {FusioService} from "../../service/fusio.service";
77
templateUrl: './about.component.html',
88
styleUrls: ['./about.component.css']
99
})
10-
export class AboutComponent implements OnInit {
10+
export class AboutComponent {
1111

12-
about = signal<SystemAbout|undefined>(undefined);
12+
about = resource({
13+
loader: async (): Promise<SystemAbout> => {
14+
return await this.fusio.getClientAnonymous().system().meta().getAbout();
15+
},
16+
});
1317

1418
constructor(private fusio: FusioService) { }
1519

16-
async ngOnInit(): Promise<void> {
17-
this.about.set(await this.fusio.getClientAnonymous().system().meta().getAbout());
18-
}
19-
2020
}

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

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

2-
@if (useName()) {
3-
@for (entry of entries(); track entry.id) {
4-
<div class="form-check">
5-
<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 && local().includes(entry.name)" [disabled]="disabled()">
6-
<label class="form-check-label" [for]="entry.name">{{entry.name}}</label>
7-
</div>
2+
@if (entries.hasValue()) {
3+
@if (useName()) {
4+
@for (entry of entries.value(); track entry.id) {
5+
<div class="form-check">
6+
<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 && local().includes(entry.name)" [disabled]="disabled()">
7+
<label class="form-check-label" [for]="entry.name">{{entry.name}}</label>
8+
</div>
9+
}
810
}
9-
}
10-
@else {
11-
@for (entry of entries(); track entry.id) {
12-
<div class="form-check">
13-
<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 && local().includes(entry.id)" [disabled]="disabled()">
14-
<label class="form-check-label" [for]="entry.id">{{entry.name}}</label>
15-
</div>
11+
@else {
12+
@for (entry of entries.value(); track entry.id) {
13+
<div class="form-check">
14+
<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 && local().includes(entry.id)" [disabled]="disabled()">
15+
<label class="form-check-label" [for]="entry.id">{{entry.name}}</label>
16+
</div>
17+
}
1618
}
1719
}

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import {Component, effect, EventEmitter, input, Input, OnInit, Output, signal} from '@angular/core';
1+
import {Component, effect, EventEmitter, input, Input, Output, resource, signal} from '@angular/core';
22
import {IdAndName, Service} from "../../../abstract/service";
33

44
@Component({
55
selector: 'fusio-form-checkbox-list',
66
templateUrl: './form-checkbox-list.component.html',
77
styleUrls: ['./form-checkbox-list.component.css']
88
})
9-
export class FormCheckboxListComponent implements OnInit {
9+
export class FormCheckboxListComponent {
1010

1111
name = input.required<string>();
1212
disabled = input<boolean>(false);
@@ -17,19 +17,20 @@ export class FormCheckboxListComponent implements OnInit {
1717
@Output() dataChange = new EventEmitter<Array<string>>();
1818

1919
local = signal<Array<string>>([]);
20-
entries = signal<Array<IdAndName<any>>>([]);
20+
21+
entries = resource({
22+
loader: async (): Promise<Array<IdAndName<any>>> => {
23+
const response = await this.service.getAllWithIdAndName([0, 1024]);
24+
return response.entry || [];
25+
},
26+
});
2127

2228
constructor() {
2329
effect(async () => {
2430
this.local.set(this.data() || []);
2531
});
2632
}
2733

28-
async ngOnInit(): Promise<void> {
29-
const response = await this.service.getAllWithIdAndName([0, 1024]);
30-
this.entries.set(response.entry || []);
31-
}
32-
3334
scopeSelect(event: any, scope?: string) {
3435
const selected = event.target.checked;
3536
if (!scope) {

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

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11

2-
<div class="input-group">
3-
@if (useName()) {
4-
<select [id]="name()" [name]="name()" [ngModel]="data()" (ngModelChange)="changeValue($event)" [disabled]="disabled()" class="form-select">
5-
@for (entry of entries(); track entry.id) {
6-
<option [ngValue]="entry.name">{{entry.name}}</option>
7-
}
8-
</select>
9-
}
10-
@else {
11-
<select [id]="name()" [name]="name()" [ngModel]="data()" (ngModelChange)="changeValue($event)" [disabled]="disabled()" class="form-select">
12-
@for (entry of entries(); track entry.id) {
13-
<option [ngValue]="entry.id">{{entry.name}}</option>
14-
}
15-
</select>
16-
}
17-
<ng-content></ng-content>
18-
</div>
2+
@if (entries.hasValue()) {
3+
<div class="input-group">
4+
@if (useName()) {
5+
<select [id]="name()" [name]="name()" [ngModel]="data()" (ngModelChange)="changeValue($event)" [disabled]="disabled()" class="form-select">
6+
@for (entry of entries.value(); track entry.id) {
7+
<option [ngValue]="entry.name">{{entry.name}}</option>
8+
}
9+
</select>
10+
}
11+
@else {
12+
<select [id]="name()" [name]="name()" [ngModel]="data()" (ngModelChange)="changeValue($event)" [disabled]="disabled()" class="form-select">
13+
@for (entry of entries.value(); track entry.id) {
14+
<option [ngValue]="entry.id">{{entry.name}}</option>
15+
}
16+
</select>
17+
}
18+
<ng-content></ng-content>
19+
</div>
20+
}

‎projects/fusio-sdk/src/lib/component/form/select/form-select.component.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, EventEmitter, Input, input, OnInit, Output, signal} from '@angular/core';
1+
import {Component, EventEmitter, Input, input, Output, resource} from '@angular/core';
22
import {IdAndName, Service} from "../../../abstract/service";
33
import {FormsModule} from "@angular/forms";
44

@@ -10,7 +10,7 @@ import {FormsModule} from "@angular/forms";
1010
],
1111
styleUrls: ['./form-select.component.css']
1212
})
13-
export class FormSelectComponent implements OnInit {
13+
export class FormSelectComponent {
1414

1515
name = input.required<string>();
1616
data = input.required<string|undefined>();
@@ -20,12 +20,12 @@ export class FormSelectComponent implements OnInit {
2020
@Input() service!: Service<any>;
2121
@Output() dataChange = new EventEmitter<string>();
2222

23-
entries = signal<Array<IdAndName<any>>>([]);
24-
25-
async ngOnInit(): Promise<void> {
26-
const response = await this.service.getAllWithIdAndName([0, 1024]);
27-
this.entries.set(response.entry || []);
28-
}
23+
entries = resource({
24+
loader: async (): Promise<Array<IdAndName<any>>> => {
25+
const response = await this.service.getAllWithIdAndName([0, 1024]);
26+
return response.entry || [];
27+
},
28+
});
2929

3030
changeValue(value: string) {
3131
if (!value) {

‎projects/fusio-sdk/src/lib/component/register/register.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {Component, OnInit, signal} from '@angular/core';
22
import {CommonMessage, ConsumerUserRegister} from "fusio-sdk";
33
import {FusioService} from "../../service/fusio.service";
4-
import {EventService} from "../../service/event.service";
54
import {ConfigService} from "../../service/config.service";
65
import {ErrorService} from "../../service/error.service";
76
import {MessageComponent} from "../message/message.component";

‎projects/fusio-sdk/src/lib/component/scope-categories/scope-categories.component.html‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11

2-
<ul ngbNav #scopeCategories="ngbNav" [(activeId)]="selectedCategory" class="nav-tabs">
3-
@for (category of categories(); track category.id) {
4-
<li [ngbNavItem]="category.id">
5-
<a ngbNavLink>{{category.name}}</a>
6-
<ng-template ngbNavContent>
7-
<div style="margin-top:1rem;">
8-
<button (click)="toggleScopes(category.scopes)" [disabled]="disabled()" class="btn btn-outline-secondary float-end"><i class="bi bi-arrow-clockwise"></i></button>
9-
<div class="row">
10-
@for (scope of category.scopes; track scope.id) {
11-
<div class="col-md-6 col-xl-3">
12-
<div class="form-check">
13-
<input class="form-check-input" type="checkbox" [value]="scope.id" (change)="scopeSelect($event, scope.name)" [checked]="scope.name && selected().includes(scope.name)" [id]="scope.name" [disabled]="disabled()">
14-
<label class="form-check-label" [for]="scope.name">{{scope.name}}</label>
2+
@if (categories.hasValue()) {
3+
<ul ngbNav #scopeCategories="ngbNav" [(activeId)]="selectedCategory" class="nav-tabs">
4+
@for (category of categories.value(); track category.id) {
5+
<li [ngbNavItem]="category.id">
6+
<a ngbNavLink>{{category.name}}</a>
7+
<ng-template ngbNavContent>
8+
<div style="margin-top:1rem;">
9+
<button (click)="toggleScopes(category.scopes)" [disabled]="disabled()" class="btn btn-outline-secondary float-end"><i class="bi bi-arrow-clockwise"></i></button>
10+
<div class="row">
11+
@for (scope of category.scopes; track scope.id) {
12+
<div class="col-md-6 col-xl-3">
13+
<div class="form-check">
14+
<input class="form-check-input" type="checkbox" [value]="scope.id" (change)="scopeSelect($event, scope.name)" [checked]="scope.name && selected().includes(scope.name)" [id]="scope.name" [disabled]="disabled()">
15+
<label class="form-check-label" [for]="scope.name">{{scope.name}}</label>
16+
</div>
1517
</div>
16-
</div>
17-
}
18+
}
19+
</div>
1820
</div>
19-
</div>
20-
</ng-template>
21-
</li>
22-
}
23-
</ul>
24-
<div [ngbNavOutlet]="scopeCategories" style="max-height:400px;overflow-y:auto"></div>
21+
</ng-template>
22+
</li>
23+
}
24+
</ul>
25+
<div [ngbNavOutlet]="scopeCategories" style="max-height:400px;overflow-y:auto"></div>
26+
}

‎projects/fusio-sdk/src/lib/component/scope-categories/scope-categories.component.ts‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
1-
import {
2-
AfterContentChecked,
3-
Component,
4-
effect,
5-
EventEmitter,
6-
input,
7-
Input,
8-
OnInit,
9-
Output,
10-
signal
11-
} from '@angular/core';
12-
import {BackendScopeCategory, BackendScopeCategoryScope} from "fusio-sdk";
1+
import {Component, effect, EventEmitter, input, Output, resource, signal} from '@angular/core';
2+
import {BackendScopeCategoryScope, ConsumerScopeCategory} from "fusio-sdk";
133
import {FusioService} from "../../service/fusio.service";
144
import {NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet} from "@ng-bootstrap/ng-bootstrap";
155

@@ -25,14 +15,20 @@ import {NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet} from "@ng-b
2515
],
2616
styleUrls: ['./scope-categories.component.css']
2717
})
28-
export class ScopeCategoriesComponent implements OnInit {
18+
export class ScopeCategoriesComponent {
2919

3020
scopes = input<Array<string>|undefined>(undefined);
3121
disabled = input<boolean>(false);
3222

3323
@Output() dataChange = new EventEmitter<any>();
3424

35-
categories = signal<Array<BackendScopeCategory>>([]);
25+
categories = resource({
26+
loader: async (): Promise<Array<ConsumerScopeCategory>> => {
27+
const response = await this.fusio.getClient().consumer().scope().getCategories();
28+
return response.categories || [];
29+
},
30+
});
31+
3632
selected = signal<Array<string>>([]);
3733

3834
selectedCategory: number = 1;
@@ -47,13 +43,6 @@ export class ScopeCategoriesComponent implements OnInit {
4743
});
4844
}
4945

50-
async ngOnInit(): Promise<void> {
51-
const response = await this.fusio.getClient().consumer().scope().getCategories();
52-
if (response.categories) {
53-
this.categories.set(response.categories);
54-
}
55-
}
56-
5746
scopeSelect(event: any, scope?: string) {
5847
const selected = event.target.checked;
5948
if (!scope) {

0 commit comments

Comments
 (0)