Skip to content

Commit de66fb3

Browse files
MrYuionMrYuion
committed
chore: update components to use signals
1 parent 22a9322 commit de66fb3

7 files changed

Lines changed: 48 additions & 68 deletions

File tree

‎libs/assets/src/lib/asset-list-field.component.ts‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import { CommonModule } from '@angular/common';
2-
import {
3-
Component,
4-
SimpleChanges,
5-
forwardRef,
6-
inject,
7-
input,
8-
} from '@angular/core';
2+
import { Component, effect, forwardRef, inject, input } from '@angular/core';
93
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
104
import { MatRippleModule } from '@angular/material/core';
115
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -249,16 +243,17 @@ export class AssetListFieldComponent implements ControlValueAccessor {
249243
return this._settings.time_format || 'shortTime';
250244
}
251245

252-
public ngOnChanges(changes: SimpleChanges) {
253-
if (changes.options) {
246+
constructor() {
247+
effect(() => {
248+
const options = this.options();
254249
this.asset_requests = (this.asset_requests || []).map(
255-
(_) => new AssetRequest({ ..._, event: this.options() as any }),
250+
(_) => new AssetRequest({ ..._, event: options as any }),
256251
);
257252
this._state.setOptions({
258-
date: this.options().date,
259-
duration: this.options().duration,
253+
date: options.date,
254+
duration: options.duration,
260255
});
261-
}
256+
});
262257
}
263258

264259
/**

‎libs/assets/src/lib/asset-select-modal/asset-details.component.ts‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, SimpleChanges, input, model, output } from '@angular/core';
1+
import { Component, effect, input, model, output } from '@angular/core';
22
import { MatRippleModule } from '@angular/material/core';
33
import { AssetGroup } from '@placeos/common';
44

@@ -140,15 +140,10 @@ export class AssetDetailsComponent {
140140
public readonly countChange = output<number>();
141141
public readonly close = output<void>();
142142

143-
public ngOnInit() {
144-
const item = this.item();
145-
if (item && !item.quantity) item.quantity = 1;
146-
}
147-
148-
public ngOnChanges(changes: SimpleChanges) {
149-
const item = this.item();
150-
if (changes.item && item) {
151-
if (!item.quantity) item.quantity = 1;
152-
}
143+
constructor() {
144+
effect(() => {
145+
const item = this.item();
146+
if (item && !item.quantity) item.quantity = 1;
147+
});
153148
}
154149
}

‎libs/assets/src/lib/asset-select-modal/asset-list.component.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CommonModule } from '@angular/common';
2-
import { Component, SimpleChanges, inject, input, output } from '@angular/core';
2+
import { Component, effect, inject, input, output } from '@angular/core';
33
import { MatRippleModule } from '@angular/material/core';
44
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
55
import { AssetGroup } from '@placeos/common';
@@ -189,18 +189,20 @@ export class AssetListComponent {
189189
}),
190190
);
191191

192-
public ngOnChanges(changes: SimpleChanges) {
193-
const selected_items = this.selected_items();
194-
if (changes.selected_items && selected_items?.length) {
192+
constructor() {
193+
effect(() => {
194+
const selected_items = this.selected_items();
195195
const counts = {};
196-
for (const item of selected_items) {
197-
counts[item.id] = item.quantity;
196+
if (selected_items?.length) {
197+
for (const item of selected_items) {
198+
counts[item.id] = item.quantity;
199+
}
198200
}
199201
this.counts.next(counts);
200-
}
201-
if (changes.requested) {
202+
});
203+
effect(() => {
202204
this._requested_items.next(this.requested());
203-
}
205+
});
204206
}
205207

206208
public isFavourite(asset_id: string) {

‎libs/assets/src/lib/new-asset-select-modal/new-asset-details.component.ts‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
Component,
3-
OnChanges,
4-
OnInit,
5-
SimpleChanges,
6-
input,
7-
output,
8-
} from '@angular/core';
1+
import { Component, effect, input, output } from '@angular/core';
92
import { FormsModule } from '@angular/forms';
103
import { MatRippleModule } from '@angular/material/core';
114
import { AssetGroup } from '@placeos/common';
@@ -115,7 +108,7 @@ import { CounterComponent } from 'libs/form-fields/src/lib/counter.component';
115108
FormsModule,
116109
],
117110
})
118-
export class NewAssetDetailsComponent implements OnInit, OnChanges {
111+
export class NewAssetDetailsComponent {
119112
public readonly item = input<AssetGroup>(undefined);
120113
public readonly active = input(false);
121114
public readonly fav = input(false);
@@ -125,15 +118,10 @@ export class NewAssetDetailsComponent implements OnInit, OnChanges {
125118
public readonly countChange = output<number>();
126119
public readonly close = output<void>();
127120

128-
public ngOnInit() {
129-
const item = this.item();
130-
if (item && !item.quantity) item.quantity = 1;
131-
}
132-
133-
public ngOnChanges(changes: SimpleChanges) {
134-
const item = this.item();
135-
if (changes.item && item) {
136-
if (!item.quantity) item.quantity = 1;
137-
}
121+
constructor() {
122+
effect(() => {
123+
const item = this.item();
124+
if (item && !item.quantity) item.quantity = 1;
125+
});
138126
}
139127
}

‎libs/assets/src/lib/new-asset-select-modal/new-asset-list.component.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CommonModule } from '@angular/common';
2-
import { Component, SimpleChanges, inject, input, output } from '@angular/core';
2+
import { Component, effect, inject, input, output } from '@angular/core';
33
import { MatRippleModule } from '@angular/material/core';
44
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
55
import { AssetGroup } from '@placeos/common';
@@ -184,18 +184,20 @@ export class NewAssetListComponent {
184184
}),
185185
);
186186

187-
public ngOnChanges(changes: SimpleChanges) {
188-
const selected_items = this.selected_items();
189-
if (changes.selected_items && selected_items?.length) {
187+
constructor() {
188+
effect(() => {
189+
const selected_items = this.selected_items();
190190
const counts = {};
191-
for (const item of selected_items) {
192-
counts[item.id] = item.quantity;
191+
if (selected_items?.length) {
192+
for (const item of selected_items) {
193+
counts[item.id] = item.quantity;
194+
}
193195
}
194196
this.counts.next(counts);
195-
}
196-
if (changes.requested) {
197+
});
198+
effect(() => {
197199
this._requested_items.next(this.requested());
198-
}
200+
});
199201
}
200202

201203
public isFavourite(asset_id: string) {

‎libs/form-fields/src/lib/user-list-field.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
signal,
1212
viewChild,
1313
} from '@angular/core';
14-
import { toObservable } from '@angular/core/rxjs-interop';
14+
import { outputToObservable, toObservable } from '@angular/core/rxjs-interop';
1515
import {
1616
ControlValueAccessor,
1717
FormsModule,
@@ -548,7 +548,7 @@ export class UserListFieldComponent
548548
data: { user },
549549
},
550550
);
551-
ref.componentInstance?.event
551+
outputToObservable(ref.componentInstance?.event)
552552
.pipe(first((_) => _.reason === 'done'))
553553
.subscribe((event) => {
554554
this.addUser(event.metadata);

‎libs/users/src/lib/new-user-modal.component.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, EventEmitter, OnInit, Output, inject } from '@angular/core';
1+
import { Component, inject, output } from '@angular/core';
22
import { MatRippleModule } from '@angular/material/core';
33
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
44
import { AsyncHandler, DialogEvent, User } from '@placeos/common';
@@ -71,11 +71,11 @@ import { generateUserForm } from './user.utilities';
7171
MatProgressSpinnerModule,
7272
],
7373
})
74-
export class NewUserModalComponent extends AsyncHandler implements OnInit {
74+
export class NewUserModalComponent extends AsyncHandler {
7575
private _data = inject(MAT_DIALOG_DATA);
7676

7777
/** Emitter for user action on the modal */
78-
@Output() public event = new EventEmitter<DialogEvent>();
78+
public readonly event = output<DialogEvent>();
7979
/** Form fields for the new user */
8080
public form = generateUserForm(this.user || new User());
8181
/** New user data store */
@@ -89,8 +89,6 @@ export class NewUserModalComponent extends AsyncHandler implements OnInit {
8989
this.form = generateUserForm(this.user);
9090
}
9191

92-
public ngOnInit(): void {}
93-
9492
public saveChanges() {
9593
if (!this.form) return;
9694
this.form.markAllAsTouched();

0 commit comments

Comments
 (0)