From 884448f0012760a17601efdd4d0a67344c908707 Mon Sep 17 00:00:00 2001
From: Darko Kukovec <darko@infinum.com>
Date: Fri, 24 Dec 2021 11:05:10 +0100
Subject: [PATCH 1/2] Add observable model properties

---
 .../components/artists/artists.component.html |  3 ++-
 .../components/artists/artists.component.ts   |  6 +++++
 src/app/models/artist.ts                      |  7 ++++-
 src/app/models/base-model.ts                  | 27 ++++++++++++++++++-
 .../services/collection/collection.service.ts |  1 +
 5 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/app/components/artists/artists.component.html b/src/app/components/artists/artists.component.html
index 788087f..5f90dc0 100644
--- a/src/app/components/artists/artists.component.html
+++ b/src/app/components/artists/artists.component.html
@@ -2,6 +2,7 @@ <h1>Artists</h1>
 
 <ul>
 	<li *ngFor="let artist of artists$ | async">
-		{{ artist.name }}
+		{{ artist.$.name | async }}
 	</li>
 </ul>
+<button (click)="updateNames()">updateNames</button>
diff --git a/src/app/components/artists/artists.component.ts b/src/app/components/artists/artists.component.ts
index dbeb22c..047e1f1 100644
--- a/src/app/components/artists/artists.component.ts
+++ b/src/app/components/artists/artists.component.ts
@@ -11,4 +11,10 @@ export class ArtistsComponent {
 	public artists$ = this.artistsService.getAllModels();
 
 	constructor(private readonly artistsService: ArtistsService) {}
+
+	public updateNames() {
+		this.artistsService.findAll().forEach((artist, index) => {
+			artist.name += index;
+		});
+	}
 }
diff --git a/src/app/models/artist.ts b/src/app/models/artist.ts
index b82c40b..6148a9a 100644
--- a/src/app/models/artist.ts
+++ b/src/app/models/artist.ts
@@ -1,9 +1,14 @@
 import { Attribute } from '@datx/core';
+import { Observable } from 'rxjs';
 import { BaseModel } from './base-model';
 
 export class Artist extends BaseModel {
 	public static endpoint = 'artists';
-	public static type = 'project';
+	public static type = 'artist';
+
+	public get $(): { [key in keyof Omit<Artist, keyof BaseModel | '$'>]: Observable<Artist[key]> } {
+		return this._observables as any;
+	}
 
 	@Attribute()
 	public name!: string;
diff --git a/src/app/models/base-model.ts b/src/app/models/base-model.ts
index 78133ec..eab708f 100644
--- a/src/app/models/base-model.ts
+++ b/src/app/models/base-model.ts
@@ -1,7 +1,32 @@
-import { IType, Model } from '@datx/core';
 import { jsonapiAngular } from '@datx/jsonapi-angular';
+import { IRawModel, PatchType, PureCollection, IType, Model } from '@datx/core';
+import { getMeta } from '@datx/utils';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 export class BaseModel extends jsonapiAngular(Model) {
+	protected _observables: Record<string, Observable<any>> = {};
+
+	constructor(rawData?: IRawModel, collection?: PureCollection) {
+		super(rawData, collection);
+
+		const fields = getMeta(this, 'fields');
+		Object.keys(fields).forEach((key) => {
+			// @ts-ignore
+			this._observables[key] = new BehaviorSubject(this[key]);
+		});
+		this.onPatch((patch) => {
+			if (patch.patchType === PatchType.UPDATE) {
+				Object.keys(patch.newValue || {}).forEach((key) => {
+					// @ts-ignore
+					console.log('next', key, patch.newValue[key]);
+					// @ts-ignore
+					this._observables[key].next(this[key]);
+				});
+			}
+		});
+		console.log(fields);
+	}
+
 	public get id(): IType {
 		return this.meta.id;
 	}
diff --git a/src/app/services/collection/collection.service.ts b/src/app/services/collection/collection.service.ts
index d11078f..a0d9af0 100644
--- a/src/app/services/collection/collection.service.ts
+++ b/src/app/services/collection/collection.service.ts
@@ -52,6 +52,7 @@ export abstract class CollectionService<TModel extends IJsonapiModel> {
 	}
 
 	public getAllModels(options?: IRequestOptions, pageSize: number = this.maxPageSize): Observable<Array<TModel>> {
+		console.log('get');
 		return this.getMany({
 			...options,
 			queryParams: {

From 794a836b09f8098c562b51f4b0dbfb5f0960fb6d Mon Sep 17 00:00:00 2001
From: Darko Kukovec <darko@infinum.com>
Date: Fri, 24 Dec 2021 11:26:47 +0100
Subject: [PATCH 2/2] Better type handling, fix lag, add id

---
 .../components/artists/artists.component.html |  4 +--
 src/app/models/artist.ts                      |  5 ----
 src/app/models/base-model.ts                  | 27 +++++++++++--------
 .../services/collection/collection.service.ts |  1 -
 4 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/app/components/artists/artists.component.html b/src/app/components/artists/artists.component.html
index 5f90dc0..33d76a1 100644
--- a/src/app/components/artists/artists.component.html
+++ b/src/app/components/artists/artists.component.html
@@ -1,8 +1,6 @@
 <h1>Artists</h1>
 
 <ul>
-	<li *ngFor="let artist of artists$ | async">
-		{{ artist.$.name | async }}
-	</li>
+	<li *ngFor="let artist of artists$ | async">{{ artist.$.name | async }} ID: {{ artist.$.id | async }}</li>
 </ul>
 <button (click)="updateNames()">updateNames</button>
diff --git a/src/app/models/artist.ts b/src/app/models/artist.ts
index 6148a9a..b78234d 100644
--- a/src/app/models/artist.ts
+++ b/src/app/models/artist.ts
@@ -1,15 +1,10 @@
 import { Attribute } from '@datx/core';
-import { Observable } from 'rxjs';
 import { BaseModel } from './base-model';
 
 export class Artist extends BaseModel {
 	public static endpoint = 'artists';
 	public static type = 'artist';
 
-	public get $(): { [key in keyof Omit<Artist, keyof BaseModel | '$'>]: Observable<Artist[key]> } {
-		return this._observables as any;
-	}
-
 	@Attribute()
 	public name!: string;
 }
diff --git a/src/app/models/base-model.ts b/src/app/models/base-model.ts
index eab708f..7db77b3 100644
--- a/src/app/models/base-model.ts
+++ b/src/app/models/base-model.ts
@@ -4,27 +4,32 @@ import { getMeta } from '@datx/utils';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 export class BaseModel extends jsonapiAngular(Model) {
-	protected _observables: Record<string, Observable<any>> = {};
+	private _observables: Record<string, BehaviorSubject<any>> = {};
+
+	public $: { [key in 'id' | keyof Omit<this, keyof BaseModel | '$'>]: Observable<this[key]> } = {} as any;
 
 	constructor(rawData?: IRawModel, collection?: PureCollection) {
 		super(rawData, collection);
 
-		const fields = getMeta(this, 'fields');
-		Object.keys(fields).forEach((key) => {
-			// @ts-ignore
-			this._observables[key] = new BehaviorSubject(this[key]);
+		const fields = [...Object.keys(getMeta(this, 'fields', {})), 'id'];
+		fields.forEach((key) => {
+			this._observables[key] = new BehaviorSubject((this as any)[key]);
+			(this.$ as any)[key] = this._observables[key].asObservable();
 		});
+
 		this.onPatch((patch) => {
 			if (patch.patchType === PatchType.UPDATE) {
-				Object.keys(patch.newValue || {}).forEach((key) => {
-					// @ts-ignore
-					console.log('next', key, patch.newValue[key]);
-					// @ts-ignore
-					this._observables[key].next(this[key]);
+				const newValue = patch.newValue!;
+				Object.keys(newValue).forEach((key) => {
+					if (key in this._observables) {
+						this._observables[key].next((newValue as any)[key]);
+					} else {
+						this._observables[key] = new BehaviorSubject((newValue as any)[key]);
+						(this.$ as any)[key] = this._observables[key].asObservable();
+					}
 				});
 			}
 		});
-		console.log(fields);
 	}
 
 	public get id(): IType {
diff --git a/src/app/services/collection/collection.service.ts b/src/app/services/collection/collection.service.ts
index a0d9af0..d11078f 100644
--- a/src/app/services/collection/collection.service.ts
+++ b/src/app/services/collection/collection.service.ts
@@ -52,7 +52,6 @@ export abstract class CollectionService<TModel extends IJsonapiModel> {
 	}
 
 	public getAllModels(options?: IRequestOptions, pageSize: number = this.maxPageSize): Observable<Array<TModel>> {
-		console.log('get');
 		return this.getMany({
 			...options,
 			queryParams: {