Flex collection & show tag for dev mode

firestore.rules

@@ -1,4 +1,5 @@
 rules_version = '2';
+
 service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
@@ -9,5 +10,11 @@ service cloud.firestore {
       allow list, create: if request.auth != null;
       allow get, update, delete: if request.auth.token.email in resource.data.owners;
     }
+
+    // TODO: This can probably be combined with the above match
+    match /meetings-dev/{meeting} {
+      allow list, create: if request.auth != null;
+      allow get, update, delete: if request.auth.token.email in resource.data.owners;
+    }
   }
 }

package.json

@@ -11,10 +11,11 @@
     "lint": "nx lint",
     "format": "nx format",
     "format:check": "nx format:check",
-    "predeploy": "npm run format && npm run lint && npm run test && npm run build",
+    "predeploy:hosting": "npm run format && npm run lint && npm run test && npm run build",
     "fb": "node_modules/.bin/firebase",
-    "fb:deploy:all": "npm run predeploy && npm run fb -- deploy --only hosting,firestore",
-    "fb:hosting:channel:deploy:stage": "npm run predeploy && npm run fb -- hosting:channel:deploy stage",
+    "fb:deploy:all": "npm run predeploy:hosting && npm run fb -- deploy --only hosting,firestore",
+    "fb:deploy:firestore": "npm run fb -- deploy --only firestore",
+    "fb:hosting:channel:deploy:stage": "npm run predeploy:hosting && npm run fb -- hosting:channel:deploy stage",
     "fb:hosting:channel:list": "npm run fb -- hosting:channel:list"
   },
   "private": true,

src/app/app.component.html

@@ -4,6 +4,15 @@
       <img src="assets/coffee.png" height="40" class="mr-2" />
     </a>
   </ng-template>
+
+  <ng-template *ngIf="isDevMode" pTemplate="end">
+    <p-tag
+      severity="warning"
+      icon="pi pi-exclamation-circle"
+      value="Dev mode"
+      [rounded]="true"
+    ></p-tag>
+  </ng-template>
 </p-menubar>
 
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnDestroy, OnInit, Optional } from '@angular/core';
+import {
+  Component,
+  isDevMode,
+  OnDestroy,
+  OnInit,
+  Optional,
+} from '@angular/core';
 import { Auth, authState } from '@angular/fire/auth';
 import { Router } from '@angular/router';
 import { Subscription, map } from 'rxjs';
@@ -13,6 +19,7 @@ import { AuthService } from './services/auth.service';
 export class AppComponent implements OnInit, OnDestroy {
   navMenuItems$ = this.authService.getNavMenuItems$(this.auth);
   subscriptions = new Subscription();
+  isDevMode = isDevMode();
 
   constructor(
     @Optional() private readonly auth: Auth,

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { MenubarModule } from 'primeng/menubar';
 import { StyleClassModule } from 'primeng/styleclass';
+import { TagModule } from 'primeng/tag';
 import { ToastModule } from 'primeng/toast';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
@@ -24,6 +25,7 @@ import { PagesModule } from './pages/pages.module';
     StyleClassModule, // TODO: Do I need this?
     MenubarModule,
     ConfirmDialogModule,
+    TagModule,
     ToastModule,
     PagesModule,
   ],

src/app/services/meeting.service.ts

@@ -1,5 +1,5 @@
 // nx g s services/meetings
-import { Injectable } from '@angular/core';
+import { Injectable, isDevMode } from '@angular/core';
 import {
   Firestore,
   addDoc,
@@ -39,6 +39,8 @@ import { AuthService } from './auth.service';
   providedIn: 'root',
 })
 export class MeetingService {
+  meetingsPath = isDevMode() ? 'meetings-dev' : 'meetings';
+
   constructor(
     private readonly authService: AuthService,
     private readonly firestore: Firestore,
@@ -47,7 +49,7 @@ export class MeetingService {
   ) {}
 
   load(): Observable<MeetingWithId[]> {
-    return collectionData(collection(this.firestore, 'meetings'), {
+    return collectionData(collection(this.firestore, this.meetingsPath), {
       idField: 'id',
     }).pipe(
       traceUntilFirst('firestore'),
@@ -57,7 +59,7 @@ export class MeetingService {
 
   get(id: string | null): Observable<Meeting | NewMeeting> {
     return id
-      ? from(getDoc(doc(this.firestore, 'meetings', id))).pipe(
+      ? from(getDoc(doc(this.firestore, this.meetingsPath, id))).pipe(
           map((docSnap) => {
             if (docSnap.exists()) {
               // Documents don't have the `id` in the data; add it here so we can parse
@@ -136,12 +138,12 @@ export class MeetingService {
 
   private backendSave(meeting: Meeting, meetingId: string | null) {
     return meetingId
-      ? setDoc(doc(this.firestore, 'meetings', meetingId), meeting)
-      : addDoc(collection(this.firestore, 'meetings'), meeting);
+      ? setDoc(doc(this.firestore, this.meetingsPath, meetingId), meeting)
+      : addDoc(collection(this.firestore, this.meetingsPath), meeting);
   }
 
   delete(id: MeetingId) {
-    return deleteDoc(doc(this.firestore, 'meetings', id));
+    return deleteDoc(doc(this.firestore, this.meetingsPath, id));
   }
 
   getDateDisplay(meeting: Meeting) {