checkpoint: demo

apps/demo-api/src/app/function/auth/auth.function.ts

@@ -9,6 +9,7 @@ export const initUserOnCreate = onEventWithDemoNestContext<UserRecord>((withNest
   functions.auth.user().onCreate(withNest(async (nest, data: UserRecord, context) => {
     const uid = data.uid;
 
+    console.log('Init user: ', uid, context);
 
     if (uid) {
       await nest.profileActions.initProfileForUid(uid);

apps/demo-firebase/src/lib/collection.ts

@@ -1,13 +1,18 @@
 import { FirestoreContext } from '@dereekb/firebase';
+import { guestbookEntryFirestoreCollectionFactory, GuestbookEntryFirestoreCollectionFactory, guestbookFirestoreCollection, GuestbookFirestoreCollection, GuestbookFirestoreCollections } from './guestbook';
 import { profileFirestoreCollection, ProfileFirestoreCollection, ProfileFirestoreCollections, profilePrivateDataFirestoreCollectionFactory, ProfilePrivateDataFirestoreCollectionFactory } from './profile/profile';
 
-export abstract class DemoFirestoreCollections implements ProfileFirestoreCollections {
+export abstract class DemoFirestoreCollections implements ProfileFirestoreCollections, GuestbookFirestoreCollections {
+  abstract readonly guestbookFirestoreCollection: GuestbookFirestoreCollection;
+  abstract readonly guestbookEntryCollectionFactory: GuestbookEntryFirestoreCollectionFactory;
   abstract readonly profileFirestoreCollection: ProfileFirestoreCollection;
   abstract readonly profilePrivateDataCollectionFactory: ProfilePrivateDataFirestoreCollectionFactory;
 }
 
 export function makeDemoFirestoreCollections(firestoreContext: FirestoreContext): DemoFirestoreCollections {
   return {
+    guestbookFirestoreCollection: guestbookFirestoreCollection(firestoreContext),
+    guestbookEntryCollectionFactory: guestbookEntryFirestoreCollectionFactory(firestoreContext),
     profileFirestoreCollection: profileFirestoreCollection(firestoreContext),
     profilePrivateDataCollectionFactory: profilePrivateDataFirestoreCollectionFactory(firestoreContext)
   };

apps/demo-firebase/src/lib/guestbook/guestbook.query.ts

@@ -0,0 +1,5 @@
+import { FirestoreQueryConstraint, where } from "@dereekb/firebase";
+
+export function guestbookEntryWithUsername(username: string): FirestoreQueryConstraint {
+  return where('username', '==', username);
+}

apps/demo-firebase/src/lib/guestbook/guestbook.ts

@@ -0,0 +1,121 @@
+import { CollectionReference, AbstractFirestoreDocument, makeSnapshotConverterFunctions, firestoreString, firestoreDate, FirestoreCollection, UserRelatedById, DocumentReferenceRef, FirestoreContext, FirestoreCollectionWithParent, firestoreBoolean } from "@dereekb/firebase";
+
+export interface GuestbookFirestoreCollections {
+  guestbookFirestoreCollection: GuestbookFirestoreCollection;
+  guestbookEntryCollectionFactory: GuestbookEntryFirestoreCollectionFactory;
+}
+
+// MARK: Guestbook
+export interface Guestbook {
+  /**
+   * Whether or not this guestbook should show up in the list.
+   * 
+   * If not active, this item is still considered locked.
+   */
+  active: boolean;
+  /**
+   * Guestbook name
+   */
+  name: string;
+  /**
+   * Whether or not this guestbook and it's entries can still be edited.
+   */
+  locked: boolean;
+  /**
+   * Last date the guestbook was updated at.
+   */
+  lockedAt: Date;
+}
+
+export interface GuestbookRef extends DocumentReferenceRef<Guestbook> { }
+
+export class GuestbookDocument extends AbstractFirestoreDocument<Guestbook, GuestbookDocument> { }
+
+export const guestbookCollectionPath = 'guestbook';
+
+export const guestbookConverter = makeSnapshotConverterFunctions<Guestbook>({
+  fields: {
+    active: firestoreBoolean(),
+    name: firestoreString(),
+    locked: firestoreBoolean(),
+    lockedAt: firestoreDate()
+  }
+});
+
+export function guestbookCollectionReference(context: FirestoreContext): CollectionReference<Guestbook> {
+  return context.collection(guestbookCollectionPath).withConverter<Guestbook>(guestbookConverter);
+}
+
+export type GuestbookFirestoreCollection = FirestoreCollection<Guestbook, GuestbookDocument>;
+
+export function guestbookFirestoreCollection(firestoreContext: FirestoreContext): GuestbookFirestoreCollection {
+  return firestoreContext.firestoreCollection({
+    itemsPerPage: 50,
+    collection: guestbookCollectionReference(firestoreContext),
+    makeDocument: (accessor, documentAccessor) => new GuestbookDocument(accessor, documentAccessor),
+    firestoreContext
+  });
+}
+
+// MARK: Guestbook Entry
+export interface GuestbookEntry extends UserRelatedById {
+  /**
+   * Arbitrary word without spaces
+   */
+  word: string;
+  /**
+   * Guestbook message.
+   */
+  message: string;
+  /**
+   * Arbitrary string for signature
+   */
+  signed: string;
+  /**
+   * Date the entry was last updated at.
+   */
+  updatedAt: Date;
+  /**
+   * Date the entry was originally created at.
+   */
+  createdAt: Date;
+}
+
+export interface GuestbookEntryRef extends DocumentReferenceRef<GuestbookEntry> { }
+
+export class GuestbookEntryDocument extends AbstractFirestoreDocument<GuestbookEntry, GuestbookEntryDocument> { }
+
+export const guestbookEntryCollectionPath = 'guestbookEntry';
+
+export const guestbookEntryConverter = makeSnapshotConverterFunctions<GuestbookEntry>({
+  fields: {
+    word: firestoreString(),
+    message: firestoreString(),
+    signed: firestoreString(),
+    updatedAt: firestoreDate(),
+    createdAt: firestoreDate({ saveDefaultAsNow: true })
+  }
+});
+
+export function guestbookEntryCollectionReferenceFactory(context: FirestoreContext): (guestbook: GuestbookDocument) => CollectionReference<GuestbookEntry> {
+  return (guestbook: GuestbookDocument) => {
+    return context.subcollection(guestbook.documentRef, guestbookEntryCollectionPath).withConverter<GuestbookEntry>(guestbookEntryConverter);
+  };
+}
+
+export type GuestbookEntryFirestoreCollection = FirestoreCollectionWithParent<GuestbookEntry, Guestbook, GuestbookEntryDocument>;
+export type GuestbookEntryFirestoreCollectionFactory = (parent: GuestbookDocument) => GuestbookEntryFirestoreCollection;
+
+export function guestbookEntryFirestoreCollectionFactory(firestoreContext: FirestoreContext): GuestbookEntryFirestoreCollectionFactory {
+  const factory = guestbookEntryCollectionReferenceFactory(firestoreContext);
+
+  return (parent: GuestbookDocument) => {
+    return firestoreContext.firestoreCollectionWithParent({
+      itemsPerPage: 50,
+      collection: factory(parent),
+      makeDocument: (accessor, documentAccessor) => new GuestbookEntryDocument(accessor, documentAccessor),
+      firestoreContext,
+      parent
+    });
+  }
+}

apps/demo-firebase/src/lib/guestbook/index.ts

@@ -0,0 +1,2 @@
+export * from './guestbook';
+export * from './guestbook.query';

apps/demo-firebase/src/lib/index.ts

@@ -1,2 +1,3 @@
+export * from './guestbook';
 export * from './profile';
 export * from './collection';

apps/demo-firebase/src/lib/profile/profile.api.ts

@@ -1,6 +1,6 @@
 import { Profile } from './profile';
 import { Expose } from "class-transformer";
-import { FirebaseFunctionMap, FirebaseFunctionMapFactory, firebaseFunctionMapFactory, FirebaseFunctionMapFunction, FirebaseFunctionTypeConfigMap } from "@dereekb/firebase";
+import { FirebaseFunctionMap, firebaseFunctionMapFactory, FirebaseFunctionTypeConfigMap } from "@dereekb/firebase";
 import { IsNotEmpty, IsOptional, IsString, MaxLength } from "class-validator";
 
 export class SetProfileUsernameParams {

apps/demo/src/app/container/layout.component.html

@@ -12,6 +12,10 @@
       <button mat-button>Demo</button>
     </dbx-anchor>
     <span class="spacer"></span>
+    <dbx-anchor [anchor]="emulator">
+      <button mat-flat-button color="accent">Emulator Enabled</button>
+    </dbx-anchor>
+    <span class="spacer"></span>
     <dbx-anchor [anchor]="toggleDarkTheme">
       <button mat-button>Toggle Dark Theme</button>
     </dbx-anchor>

apps/demo/src/app/container/layout.component.ts

@@ -1,6 +1,7 @@
 import { DbxStyleService } from '@dereekb/dbx-web';
 import { ClickableAnchor } from '@dereekb/dbx-core';
 import { Component } from '@angular/core';
+import { environment } from '../../environments/environment';
 
 @Component({
   templateUrl: './layout.component.html',
@@ -31,4 +32,17 @@ export class AppLayoutComponent {
 
   constructor(readonly dbxStyleService: DbxStyleService) { }
 
+  get showEmulatorButton() {
+    return (environment.firebase.emulators.useEmulators === true);
+  }
+
+  get emulator(): ClickableAnchor {
+    const ui = environment.firebase.emulators?.ui;
+
+    return (ui) ? {
+      url: `http://${ui.host ?? 'localhost'}:${ui.port}`,
+      target: '_blank'
+    } : {};
+  }
+
 }

apps/demo/src/app/modules/demo/container/home.component.html

@@ -2,8 +2,11 @@
   <dbx-content-container>
     <dbx-content-box>
       <h2>Demo App</h2>
-      <p>This is the public view of the demo app.</p>
+      <p>This is the public view of the demo app. Anyone can see this page whether or not they are logged in.</p>
       <p>You can login or go to the app <dbx-link ref="demo.app">here</dbx-link>.</p>
+      <dbx-anchor ref="demo.app">
+        <button mat-button>Go to App</button>
+      </dbx-anchor>
     </dbx-content-box>
   </dbx-content-container>
 </dbx-content-page>

apps/demo/src/app/modules/demo/container/layout.component.ts

@@ -12,21 +12,29 @@ import { DbxFirebaseAuthService } from '@dereekb/dbx-firebase';
 export class DemoLayoutComponent {
 
   readonly everyoneAnchors = [{
-    title: 'Home',
+    title: 'Public Home',
     ref: 'demo.home',
     icon: 'home'
   }];
 
   readonly adminAnchors = [{
-    title: 'Home',
+    title: 'Admin Home',
     ref: 'demo.home',
     icon: 'home'
   }];
 
   readonly userAnchors = [{
-    title: 'Home',
-    ref: 'demo.home',
+    title: 'App Home',
+    ref: 'demo.app.home',
     icon: 'home'
+  }, {
+    title: 'Guest Book',
+    ref: 'demo.app.guestbook.list',
+    icon: 'list'
+  }, {
+    title: 'Your Profile',
+    ref: 'demo.app.profile',
+    icon: 'person'
   }];
 
   readonly navAnchors$: Observable<ClickableAnchorLinkSegueRef[]> = of({

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

@@ -0,0 +1 @@
+<ui-view></ui-view>

apps/demo/src/app/modules/demo/modules/app/modules/guestbook/container/layout.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './layout.component.html'
+})
+export class DemoGuestbookLayoutComponent {}

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './list.component.html'
+})
+export class DemoGuestbookListPageComponent {
+
+  constructor() { }
+
+}

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

@@ -0,0 +1,5 @@
+<dbx-two-column-right header="Guestbook">
+  <dbx-content-container>
+    <p>View Guest Book</p>
+  </dbx-content-container>
+</dbx-two-column-right>

apps/demo/src/app/modules/demo/modules/app/modules/guestbook/container/list.right.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './list.right.component.html'
+})
+export class DemoGuestbookListPageRightComponent {}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { UIRouterModule } from '@uirouter/angular';
+import { STATES } from './guestbook.router';
+import { DemoAppSharedModule } from '../../../shared/demo.app.shared.module';
+import { DemoGuestbookListPageRightComponent } from './container/list.right.component';
+import { DemoGuestbookListPageComponent } from './container/list.component';
+import { DemoGuestbookLayoutComponent } from './container/layout.component';
+
+@NgModule({
+  imports: [
+    DemoAppSharedModule,
+    UIRouterModule.forChild({
+      states: STATES
+    })
+  ],
+  declarations: [
+    DemoGuestbookLayoutComponent,
+    DemoGuestbookListPageComponent,
+    DemoGuestbookListPageRightComponent
+  ],
+})
+export class DemoGuestbookModule { }

apps/demo/src/app/modules/demo/modules/app/modules/guestbook/guestbook.router.ts

@@ -0,0 +1,27 @@
+import { Ng2StateDeclaration } from '@uirouter/angular';
+import { DemoGuestbookLayoutComponent } from './container/layout.component';
+import { DemoGuestbookListPageComponent } from './container/list.component';
+import { DemoGuestbookListPageRightComponent } from './container/list.right.component';
+
+export const layoutState: Ng2StateDeclaration = {
+  url: '/guestbook',
+  name: 'demo.app.guestbook',
+  redirectTo: 'demo.app.guestbook.list',
+  component: DemoGuestbookLayoutComponent
+};
+
+export const guestbookListState: Ng2StateDeclaration = {
+  name: 'demo.app.guestbook.list',
+  component: DemoGuestbookListPageComponent
+};
+
+export const guestbookListRightState: Ng2StateDeclaration = {
+  url: '/:id',
+  name: 'demo.app.guestbook.list.guestbook',
+  component: DemoGuestbookListPageRightComponent
+};
+
+export const STATES: Ng2StateDeclaration[] = [
+  layoutState,
+  guestbookListState
+];

apps/demo/src/app/modules/demo/modules/app/modules/profile/container/layout.component.html

@@ -0,0 +1,3 @@
+<dbx-content-container>
+  <ui-view></ui-view>
+</dbx-content-container>

apps/demo/src/app/modules/demo/modules/app/modules/profile/container/layout.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './layout.component.html'
+})
+export class DemoProfileLayoutComponent {}

apps/demo/src/app/modules/demo/modules/app/modules/profile/container/profile.component.html

@@ -0,0 +1 @@
+<p>Profile</p>

apps/demo/src/app/modules/demo/modules/app/modules/profile/container/profile.component.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './profile.component.html'
+})
+export class DemoProfileViewComponent {}

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

@@ -0,0 +1,20 @@
+import { DemoProfileViewComponent } from './container/profile.component';
+import { DemoProfileLayoutComponent } from './container/layout.component';
+import { NgModule } from '@angular/core';
+import { UIRouterModule } from '@uirouter/angular';
+import { STATES } from './profile.router';
+import { AppSharedModule } from '@/shared/app.shared.module';
+
+@NgModule({
+  imports: [
+    AppSharedModule,
+    UIRouterModule.forChild({
+      states: STATES
+    })
+  ],
+  declarations: [
+    DemoProfileLayoutComponent,
+    DemoProfileViewComponent
+  ],
+})
+export class DemoProfileModule { }