feat: added dbxFirebaseModelLoaderModule

- added FirestoreItemPageLimit
- can now configure maxPageLoadLimit on a per-instance basis, instead of only at the factory level
- added DbxListViewWrapper abstract class, as AbstractDbxListWrapperDirective does not implement dbxListView, and we need a way to pass the values through

apps/demo/src/app/modules/demo/modules/app/modules/guestbook/container/list.component.html

@@ -1,7 +1,7 @@
-<dbx-two-column>
+<dbx-two-column dbxTwoColumnContext>
   <dbx-two-block left>
     <dbx-two-column-head top></dbx-two-column-head>
-    <demo-guestbook-list></demo-guestbook-list>
+    <demo-guestbook-list dbxFirebaseModelLoaderList demoGuestbookLoader></demo-guestbook-list>
   </dbx-two-block>
   <ui-view right></ui-view>
 </dbx-two-column>

apps/demo/src/app/modules/demo/modules/shared/demo.app.shared.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { AppSharedModule } from '@/shared/app.shared.module';
 import { DemoSharedProfileModule } from './profile/profile.module';
 import { DemoSharedGuestbookModule } from './guestbook/guestbook.module';
+import { DbxFirebaseModule } from '@dereekb/dbx-firebase';
 
 @NgModule({
   exports: [
     AppSharedModule,
+    DbxFirebaseModule,
     DemoSharedGuestbookModule,
     DemoSharedProfileModule
   ]

apps/demo/src/app/modules/demo/modules/shared/guestbook/component/guestbook.entry.list.component.ts

@@ -1,13 +1,14 @@
 import { GuestbookEntry } from '@dereekb/demo-firebase';
 import { Component } from "@angular/core";
-import { AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListViewItemComponent, AbstractDbxSelectionListViewDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DbxSelectionValueListViewConfig, ProvideDbxListView, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DbxValueAsListItem } from "@dereekb/dbx-web";
+import { AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListViewItemComponent, AbstractDbxSelectionListViewDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DbxSelectionValueListViewConfig, ProvideDbxListView, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DbxValueAsListItem, ProvideDbxListViewWrapper } from "@dereekb/dbx-web";
 import { of } from "rxjs";
 
 export type GuestbookEntryWithSelection = DbxValueAsListItem<GuestbookEntry>;
 
 @Component({
   selector: 'demo-guestbook-entry-list',
-  template: DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE
+  template: DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE,
+  providers: ProvideDbxListViewWrapper(DemoGuestbookEntryListComponent)
 })
 export class DemoGuestbookEntryListComponent extends AbstractDbxSelectionListWrapperDirective<GuestbookEntry> {
 

apps/demo/src/app/modules/demo/modules/shared/guestbook/component/guestbook.list.component.ts

@@ -1,13 +1,14 @@
 import { Guestbook } from '@dereekb/demo-firebase';
 import { Component } from "@angular/core";
-import { AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListViewItemComponent, AbstractDbxSelectionListViewDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DbxSelectionValueListViewConfig, ProvideDbxListView, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DbxValueAsListItem } from "@dereekb/dbx-web";
+import { AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListViewItemComponent, AbstractDbxSelectionListViewDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DbxSelectionValueListViewConfig, ProvideDbxListView, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DbxValueAsListItem, ProvideDbxListViewWrapper } from "@dereekb/dbx-web";
 import { of } from "rxjs";
 
 export type GuestbookWithSelection = DbxValueAsListItem<Guestbook>;
 
 @Component({
   selector: 'demo-guestbook-list',
-  template: DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE
+  template: DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE,
+  providers: ProvideDbxListViewWrapper(DemoGuestbookListComponent)
 })
 export class DemoGuestbookListComponent extends AbstractDbxSelectionListWrapperDirective<Guestbook> {
 

apps/demo/src/app/modules/demo/modules/shared/guestbook/component/guestbook.loader.directive.ts

@@ -0,0 +1,15 @@
+import { Directive } from "@angular/core";
+import { AbstractDbxFirebaseModelLoaderDirective, ProvideDbxFirebaseModelLoader } from "@dereekb/dbx-firebase";
+import { DemoFirestoreCollections, Guestbook, GuestbookDocument } from "@dereekb/demo-firebase";
+
+@Directive({
+  selector: '[demoGuestbookLoader]',
+  providers: ProvideDbxFirebaseModelLoader(DemoGuestbookLoaderDirective)
+})
+export class DemoGuestbookLoaderDirective extends AbstractDbxFirebaseModelLoaderDirective<Guestbook, GuestbookDocument> {
+
+  constructor(collections: DemoFirestoreCollections) {
+    super(collections.guestbookFirestoreCollection);
+  }
+
+}

apps/demo/src/app/modules/demo/modules/shared/guestbook/guestbook.module.ts

@@ -2,12 +2,14 @@ import { NgModule } from '@angular/core';
 import { AppSharedModule } from '@/shared/app.shared.module';
 import { DemoGuestbookListComponent, DemoGuestbookListViewComponent, DemoGuestbookListViewItemComponent } from './component/guestbook.list.component';
 import { DemoGuestbookEntryListComponent, DemoGuestbookEntryListViewComponent, DemoGuestbookEntryListViewItemComponent } from './component/guestbook.entry.list.component';
+import { DemoGuestbookLoaderDirective } from './component/guestbook.loader.directive';
 
 @NgModule({
   imports: [
     AppSharedModule
   ],
   declarations: [
+    DemoGuestbookLoaderDirective,
     DemoGuestbookListComponent,
     DemoGuestbookListViewComponent,
     DemoGuestbookListViewItemComponent,
@@ -16,6 +18,7 @@ import { DemoGuestbookEntryListComponent, DemoGuestbookEntryListViewComponent, D
     DemoGuestbookEntryListViewItemComponent
   ],
   exports: [
+    DemoGuestbookLoaderDirective,
     DemoGuestbookListComponent,
     DemoGuestbookEntryListComponent
   ]

firestore.rules

@@ -2,7 +2,7 @@ rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
-      allow read, write: if false;
+      allow read, write: if true;
     }
   }
 }

packages/dbx-firebase/src/lib/index.ts

@@ -2,3 +2,4 @@ export * from './auth';
 export * from './firebase';
 export * from './firestore';
 export * from './model';
+export * from './module';

packages/dbx-firebase/src/lib/model/index.ts

@@ -1,2 +1,2 @@
-export * from './list';
-// export * from './model.module';
+export * from './loader';
+export * from './model.module';

packages/dbx-firebase/src/lib/model/loader/index.ts

@@ -0,0 +1,5 @@
+export * from './model.loader.directive';
+export * from './model.loader.instance';
+export * from './model.loader.list.directive';
+export * from './model.loader.module';
+export * from './model.loader';

packages/dbx-firebase/src/lib/model/loader/model.loader.directive.ts

@@ -0,0 +1,106 @@
+import { collection } from 'firebase/firestore';
+import { Observable } from 'rxjs';
+import { FirestoreCollection, FirestoreDocument, FirestoreQueryConstraint } from '@dereekb/firebase';
+import { Directive, Input, OnDestroy, OnInit } from "@angular/core";
+import { ArrayOrValue, Maybe } from '@dereekb/util';
+import { DbxFirebaseModelLoader } from './model.loader';
+import { dbxFirebaseModelLoaderInstance, DbxFirebaseModelLoaderInstance } from './model.loader.instance';
+import { SubscriptionObject } from '@dereekb/rxjs';
+
+/**
+ * Abstract directive DbxFirebaseModelLoader implementation that wraps a DbxFirebaseModelLoaderInstance.
+ */
+@Directive()
+export abstract class AbstractDbxFirebaseModelLoaderInstanceDirective<T, D extends FirestoreDocument<T> = FirestoreDocument<T>> implements DbxFirebaseModelLoader<T>, OnInit, OnDestroy {
+
+  readonly constraints$ = this.instance.constraints$;;
+  readonly firestoreIteration$ = this.instance.firestoreIteration$;
+  readonly pageLoadingState$ = this.instance.pageLoadingState$;
+
+  ngOnInit(): void {
+    this.instance.init();
+  }
+
+  ngOnDestroy(): void {
+    this.instance.destroy();
+  }
+
+  constructor(readonly instance: DbxFirebaseModelLoaderInstance<T, D>) { }
+
+  // MARK: Inputs
+  @Input()
+  get maxPages(): Maybe<number> {
+    return this.instance.maxPages;
+  }
+
+  set maxPages(maxPages: Maybe<number>) {
+    this.instance.maxPages = maxPages;
+  }
+
+  @Input()
+  get itemsPerPage(): Maybe<number> {
+    return this.instance.itemsPerPage;
+  }
+
+  set itemsPerPage(itemsPerPage: Maybe<number>) {
+    this.instance.itemsPerPage = itemsPerPage;
+  }
+
+  @Input()
+  set constraints(constraints: Maybe<ArrayOrValue<FirestoreQueryConstraint>>) {
+    this.instance.setConstraints(constraints);
+  }
+
+  // MARK: DbxFirebaseModelList
+  next() {
+    this.instance.next();
+  }
+
+  reset() {
+    this.instance.reset();
+  }
+
+  setConstraints(constraints: Maybe<ArrayOrValue<FirestoreQueryConstraint>>) {
+    this.instance.setConstraints(constraints);
+  }
+
+}
+
+/**
+ * AbstractDbxFirebaseModelLoaderInstanceDirective extension with a constructor that is more simple to use.
+ */
+@Directive()
+export abstract class AbstractDbxFirebaseModelLoaderDirective<T, D extends FirestoreDocument<T> = FirestoreDocument<T>> extends AbstractDbxFirebaseModelLoaderInstanceDirective<T, D>{
+
+  constructor(collection: FirestoreCollection<T, D>) {
+    super(dbxFirebaseModelLoaderInstance(collection));
+  }
+
+}
+
+/**
+ * AbstractDbxFirebaseModelLoaderInstanceDirective extension with a constructor that is more simple to use.
+ */
+@Directive()
+export abstract class AbstractDbxFirebaseAsyncModelLoaderInstanceDirective<T, D extends FirestoreDocument<T> = FirestoreDocument<T>> extends AbstractDbxFirebaseModelLoaderInstanceDirective<T, D>{
+
+  abstract readonly collection$: Observable<FirestoreCollection<T, D>>;
+  private readonly _collectionSub = new SubscriptionObject();
+
+  constructor() {
+    super(dbxFirebaseModelLoaderInstance(undefined));
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this._collectionSub.subscription = this.collection$.subscribe((collection) => {
+      this.instance.setCollection(collection);
+    });
+  }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this._collectionSub.destroy();
+  }
+
+}