Add a save button

Author: kirjs

apps/codelab/src/app/admin/admin-routing.module.ts

@@ -5,41 +5,34 @@ import { UsersComponent } from './users/users.component';
 import { FeedbackComponent } from './feedback/feedback.component';
 
 import { CommonModule } from '@angular/common';
-import { PresentationListComponent } from './content/presentation-list/presentation-list.component';
-import { PreviewComponent } from './content/presentation-editor/preview/preview.component';
-import { ContentComponent } from './content/presentation-editor/content.component';
+import { NAVIGATION_BASE_URL } from "./content/presentation-editor/services/navigation.service";
+
 
 const routes = [
   {
     path: '',
     component: AdminComponent,
     children: [
-      { path: 'users', component: UsersComponent },
-      { path: 'feedback', component: FeedbackComponent },
+      {path: 'users', component: UsersComponent},
+      {path: 'feedback', component: FeedbackComponent},
     ],
   },
   {
     path: 'content',
-    children: [
-      {
-        path: '',
-        component: PresentationListComponent,
-      },
-      {
-        path: ':presentation/:slide/preview',
-        component: PreviewComponent,
-      },
-      {
-        path: ':presentation/:slide',
-        component: ContentComponent,
-        // children: [{ path: '', ContentComponent }],
-      },
-    ],
+    loadChildren: () => import('./content/presentation-editor/content.module').then(m => m.ContentModule)
   },
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes), CommonModule],
+  imports: [
+    RouterModule.forChild(routes),
+    CommonModule,
+  ],
+  providers: [
+
+    {provide: NAVIGATION_BASE_URL, useValue: 'admin/content'},
+  ],
   exports: [RouterModule],
 })
-export class AdminRoutingModule {}
+export class AdminRoutingModule {
+}

apps/codelab/src/app/admin/admin.module.ts

@@ -9,6 +9,9 @@ import { UsersModule } from './users/users.module';
 import { ContentModule } from './content/presentation-editor/content.module';
 import { PreviewModule } from './content/presentation-editor/preview/preview.module';
 import { PresentationListModule } from './content/presentation-list/presentation-list.module';
+import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
+import { environment } from "../../environments/environment";
+import { getFirestore, provideFirestore } from "@angular/fire/firestore";
 
 @NgModule({
   imports: [
@@ -24,4 +27,5 @@ import { PresentationListModule } from './content/presentation-list/presentation
   ],
   declarations: [AdminComponent],
 })
-export class AdminModule {}
+export class AdminModule {
+}

apps/codelab/src/app/admin/content/presentation-editor/content-routing.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ContentWrapperComponent } from "./content-wrapper/content-wrapper.component";
+import { PresentationListComponent } from "../presentation-list/presentation-list.component";
+import { PreviewComponent } from "./preview/preview.component";
+import { ContentComponent } from "./content.component";
+import { CommonModule } from "@angular/common";
+import { NAVIGATION_BASE_URL } from "./services/navigation.service";
+
+
+const routes = [
+  {
+    path: '',
+    component: ContentWrapperComponent,
+    children: [
+      {
+        path: '',
+        component: PresentationListComponent,
+      },
+      {
+        path: ':presentation/:slide/preview',
+        component: PreviewComponent,
+      },
+      {
+        path: ':presentation/:slide',
+        component: ContentComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes),
+    CommonModule,
+  ],
+  providers: [
+    {provide: NAVIGATION_BASE_URL, useValue: 'admin/content'},
+  ],
+  exports: [RouterModule],
+})
+export class ContentRoutingModule {
+}

apps/codelab/src/app/admin/content/presentation-editor/content-wrapper/content-wrapper.component.css

@@ -0,0 +1,9 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+:host {
+  padding: 0 16px;
+  display: block;
+}

apps/codelab/src/app/admin/content/presentation-editor/content-wrapper/content-wrapper.component.html

@@ -0,0 +1,13 @@
+<div class="wrapper">
+  <div>Content</div>
+  <button mat-button [disabled]="(saveStatus$ | async) !== SaveStatus.UNSAVED" (click)="save()">
+    Save
+    <mat-icon *ngIf="(saveStatus$ | async) === SaveStatus.UNSAVED">
+      radio_button_unchecked
+    </mat-icon>
+    <mat-icon *ngIf="(saveStatus$ | async) === SaveStatus.SAVED">
+      check_circle
+    </mat-icon>
+  </button>
+</div>
+<router-outlet></router-outlet>

apps/codelab/src/app/admin/content/presentation-editor/content-wrapper/content-wrapper.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { AutoSaveService, SaveStatus } from "../services/auto-save.service";
+
+@Component({
+  selector: 'slides-content-wrapper',
+  templateUrl: './content-wrapper.component.html',
+  styleUrls: ['./content-wrapper.component.css'],
+})
+export class ContentWrapperComponent {
+  readonly saveStatus$ = this.autoSaveService.saveStatus$;
+  readonly SaveStatus = SaveStatus;
+
+  constructor(private readonly autoSaveService: AutoSaveService
+  ) {
+    autoSaveService.startAutosave();
+  }
+
+  save(){
+    this.autoSaveService.save();
+  }
+}

apps/codelab/src/app/admin/content/presentation-editor/content.component.ts

@@ -35,10 +35,12 @@ export class ContentComponent {
   );
 
   constructor(
-    readonly contentService: ContentService,
-    readonly navigationService: NavigationService,
-    readonly activeRoute: ActivatedRoute
-  ) {}
+    private readonly contentService: ContentService,
+    private readonly navigationService: NavigationService,
+    private readonly activeRoute: ActivatedRoute
+  ) {
+
+  }
 
   addSlide(presentationId: string) {
     this.contentService.addSlide(presentationId);

apps/codelab/src/app/admin/content/presentation-editor/content.module.ts

@@ -9,25 +9,26 @@ import { SidePanelModule } from './side-panel/side-panel.module';
 import { ContentService } from './services/content.service';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import {
-  NAVIGATION_BASE_URL,
-  NavigationService,
-} from './services/navigation.service';
+import { NavigationService, } from './services/navigation.service';
 import { getFirestore, provideFirestore } from "@angular/fire/firestore";
 import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
 import { environment } from "../../../../environments/environment";
+import { ContentRoutingModule } from "./content-routing.module";
+import { ContentWrapperComponent } from "./content-wrapper/content-wrapper.component";
+import { AutoSaveService } from "./services/auto-save.service";
 
 @NgModule({
-  declarations: [ContentComponent],
-  exports: [ContentComponent],
+  declarations: [ContentComponent, ContentWrapperComponent],
+  exports: [ContentComponent, ContentWrapperComponent],
   providers: [
     NavigationService,
     ContentService,
-    { provide: NAVIGATION_BASE_URL, useValue: 'admin/content' },
+    AutoSaveService,
   ],
   imports: [
     provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
-    provideFirestore(()=>getFirestore()),
+    provideFirestore(() => getFirestore()),
+    ContentRoutingModule,
     CommonModule,
     SlideEditorModule,
     AngularFirestoreModule,
@@ -38,4 +39,5 @@ import { environment } from "../../../../environments/environment";
     MatButtonModule,
   ],
 })
-export class ContentModule {}
+export class ContentModule {
+}

apps/codelab/src/app/admin/content/presentation-editor/services/auto-save.service.ts

@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { auditTime, skip, take, takeUntil, tap } from "rxjs/operators";
+import { ContentService } from "./content.service";
+import { BehaviorSubject, ReplaySubject } from "rxjs";
+
+export enum SaveStatus {
+  UNSAVED = 1,
+  SAVING,
+  SAVED
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AutoSaveService {
+  readonly onDestroy$ = new ReplaySubject<void>();
+  private readonly saveStatus = new BehaviorSubject(SaveStatus.SAVING);
+  readonly saveStatus$ = this.saveStatus.asObservable();
+
+  constructor(private readonly contentService: ContentService) {
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(null);
+    this.onDestroy$.complete();
+  }
+
+  startAutosave() {
+    this.contentService.state$
+      .pipe(
+        skip(1),
+        tap(() => {
+          this.saveStatus.next(SaveStatus.UNSAVED);
+        }),
+        auditTime(2500),
+        takeUntil(this.onDestroy$),
+      )
+      .subscribe(() => {
+        this.save();
+      });
+  }
+
+  save() {
+    this.contentService.state$.pipe(
+      take(1),
+      takeUntil(this.onDestroy$),
+    ).subscribe((presentations) => {
+      this.saveStatus.next(SaveStatus.SAVING);
+      this.contentService.saveState(presentations);
+      this.saveStatus.next(SaveStatus.SAVED);
+    });
+
+  }
+}

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable, OnDestroy } from '@angular/core';
 import { merge, Subject } from 'rxjs';
-import { auditTime, distinctUntilChanged, map, scan, shareReplay, take, takeUntil, } from 'rxjs/operators';
+import { distinctUntilChanged, map, scan, shareReplay, take, tap, } from 'rxjs/operators';
 import { nanoid } from 'nanoid';
 import { ContentBlock, ContentPresentation } from '../types';
 import { reducer } from '../reducer';
@@ -12,23 +12,23 @@ const DOC_KEY = 'presentations';
 
 @Injectable({providedIn: 'root'})
 export class ContentService implements OnDestroy {
-  private firestore: Firestore = inject(Firestore);
   public readonly currentSlideIndex$ = this.navigationService.currentSlideIndex$;
 
+  readonly onDestroy$ = new Subject();
+  private firestore: Firestore = inject(Firestore);
   private readonly presentations = collection(this.firestore, DOC_KEY);
-  private readonly presentations$ = docData(doc(this.presentations, DOC_KEY))
+  private readonly presentationDoc = doc(this.presentations, DOC_KEY);
+  private readonly presentations$ = docData(this.presentationDoc)
     .pipe(
       distinctUntilChanged((a, b) => {
-        debugger;
         return JSON.stringify(a) === JSON.stringify(b);
       }),
       map((doc: any) => {
+        console.log('update');
         return doc?.presentations || [];
       })
     );
-
   private readonly localActions$ = new Subject();
-
   readonly allActions$ = merge(
     this.presentations$.pipe(
       // TODO(kirjs): actually make it work
@@ -45,25 +45,20 @@ export class ContentService implements OnDestroy {
 
   public readonly state$ = this.allActions$.pipe(
     scan((state: ContentPresentation[], action: any) => {
+      console.log('aAaaa');
       return reducer(state, action);
     }, {}),
-    shareReplay(1)
+    shareReplay(1),
+    tap(() => {
+      console.log('kmon');
+    }),
   );
 
   constructor(
     private readonly navigationService: NavigationService
   ) {
-    // TODO: There should be a better way
-
-    this.state$
-      .pipe(auditTime(2000), takeUntil(this.onDestroy$))
-      .subscribe((presentations) => {
-        setDoc(doc(this.presentations, DOC_KEY), {presentations});
-      });
   }
 
-  readonly onDestroy$ = new Subject();
-
   uniqueId() {
     return nanoid();
   }
@@ -240,4 +235,9 @@ export class ContentService implements OnDestroy {
 
     this.dispatch(presentationId, action);
   }
+
+  saveState(presentations) {
+    console.log('save');
+    setDoc(this.presentationDoc, {presentations});
+  }
 }