feat: first editable content of the first slide is the master for the title

Author: peterpeterparker

studio/src/app/components/core/app-menu-user/app-menu-user.tsx

@@ -1,4 +1,4 @@
-import {Component, State} from '@stencil/core';
+import {Component, Element, State} from '@stencil/core';
 
 import {Subscription} from 'rxjs';
 import {filter} from 'rxjs/operators';
@@ -22,6 +22,8 @@ import {DeckEditorService} from '../../../services/deck/deck-editor.service';
 })
 export class AppMenuUser {
 
+    @Element() el: HTMLElement;
+
     private authService: AuthService;
     private authSubscription: Subscription;
 
@@ -81,6 +83,9 @@ export class AppMenuUser {
     componentDidLoad() {
         this.deckSubscription = this.deckEditorService.watch().subscribe(async (deck: Deck) => {
             await this.updateDeckList(deck);
+
+            const filter: string = await this.getCurrentFilter();
+            await this.filterDecks(filter);
         });
     }
 
@@ -159,14 +164,14 @@ export class AppMenuUser {
     private filterDecks(value: string): Promise<void> {
         return new Promise<void>((resolve) => {
             if (!value || value === undefined || value === '') {
-                this.filteredDecks = [...this.decks];
+                this.filteredDecks = this.decks ? [...this.decks] : null;
 
                 resolve();
                 return;
             }
 
             if (!this.decks || this.decks.length <= 0) {
-                this.filteredDecks = [...this.decks];
+                this.filteredDecks = this.decks ? [...this.decks] : null;
 
                 resolve();
                 return;
@@ -182,6 +187,26 @@ export class AppMenuUser {
         });
     }
 
+    private getCurrentFilter(): Promise<string> {
+        return new Promise<string>(async (resolve) => {
+            const searchBar: HTMLIonSearchbarElement = this.el.querySelector('ion-searchbar');
+
+            if (!searchBar) {
+                resolve(null);
+                return;
+            }
+
+            const input: HTMLInputElement = await searchBar.getInputElement();
+
+            if (!input) {
+                resolve(null);
+                return;
+            }
+
+            resolve(input.value);
+        });
+    }
+
     render() {
         return <ion-list>
             {this.renderUser()}

studio/src/app/handlers/editor/deck-events/deck-events.handler.tsx

@@ -24,14 +24,16 @@ export class DeckEventsHandler {
     private errorService: ErrorService;
     private deckBusyService: DeckBusyService;
 
-    private userSubscription: Subscription;
     private userService: UserService;
 
     private updateSlideSubscription: Subscription;
     private updateSlideSubject: Subject<HTMLElement> = new Subject();
 
     private deckEditorService: DeckEditorService;
 
+    private updateDeckTitleSubscription: Subscription;
+    private updateDeckTitleSubject: Subject<string> = new Subject();
+
     constructor() {
         this.slideService = SlideService.getInstance();
         this.deckService = DeckService.getInstance();
@@ -56,6 +58,10 @@ export class DeckEventsHandler {
         this.updateSlideSubscription = this.updateSlideSubject.pipe(debounceTime(500)).subscribe(async (element: HTMLElement) => {
             await this.updateSlide(element);
         });
+
+        this.updateDeckTitleSubscription = this.updateDeckTitleSubject.pipe(debounceTime(500)).subscribe(async (title: string) => {
+            await this.updateDeckTitle(title);
+        });
     }
 
     destroy() {
@@ -69,8 +75,8 @@ export class DeckEventsHandler {
             this.updateSlideSubscription.unsubscribe();
         }
 
-        if (this.userSubscription) {
-            this.userSubscription.unsubscribe();
+        if (this.updateDeckTitleSubscription) {
+            this.updateDeckTitleSubscription.unsubscribe();
         }
 
         this.deckEditorService.next(null);
@@ -87,7 +93,7 @@ export class DeckEventsHandler {
             return;
         }
 
-        await this.updateDeck($event.detail);
+        await this.updateDeckAttributes($event.detail);
     };
 
     private onSlideChange = async ($event: CustomEvent) => {
@@ -103,13 +109,20 @@ export class DeckEventsHandler {
             return;
         }
 
-        const parent: HTMLElement = ($event.target as HTMLElement).parentElement;
+        const element: HTMLElement = $event.target as HTMLElement;
+
+        const parent: HTMLElement = element.parentElement;
 
         if (!parent || !parent.nodeName || parent.nodeName.toLowerCase().indexOf('deckgo-slide') <= -1) {
             return;
         }
 
         this.updateSlideSubject.next(parent);
+
+        // The first content editable element on the first slide is the title of the presentation
+        if (parent && !parent.previousElementSibling && !element.previousElementSibling) {
+            this.updateDeckTitleSubject.next(element.textContent);
+        }
     };
 
     private onSlideDelete = async ($event: CustomEvent) => {
@@ -218,7 +231,7 @@ export class DeckEventsHandler {
         });
     }
 
-    private updateDeck(deck: HTMLElement): Promise<void> {
+    private updateDeckAttributes(deck: HTMLElement): Promise<void> {
         return new Promise<void>(async (resolve) => {
             try {
                 if (!deck) {
@@ -238,6 +251,8 @@ export class DeckEventsHandler {
 
                     if (attributes && Object.keys(attributes).length > 0) {
                         currentDeck.attributes = attributes;
+                    } else {
+                        currentDeck.attributes = null;
                     }
 
                     const updatedDeck: Deck = await this.deckService.put(currentDeck);
@@ -255,6 +270,39 @@ export class DeckEventsHandler {
         });
     }
 
+    private updateDeckTitle(title: string): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            try {
+                if (!title || title === undefined || title === '') {
+                    resolve();
+                    return;
+                }
+
+                this.deckBusyService.busy(true);
+
+                this.deckEditorService.watch().pipe(take(1)).subscribe(async (currentDeck: Deck) => {
+                    if (!currentDeck) {
+                        resolve();
+                        return;
+                    }
+
+                    currentDeck.name = title;
+
+                    const updatedDeck: Deck = await this.deckService.put(currentDeck);
+                    this.deckEditorService.next(updatedDeck);
+
+                    this.deckBusyService.busy(false);
+
+                    resolve();
+                });
+            } catch (err) {
+                this.errorService.error(err);
+                this.deckBusyService.busy(false);
+                resolve();
+            }
+        });
+    }
+
     private updateSlide(slide: HTMLElement): Promise<void> {
         return new Promise<void>(async (resolve) => {
             try {

studio/src/components.d.ts

@@ -8,9 +8,9 @@
 import '@stencil/core';
 
 import '@ionic/core';
-import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-inline-editor';
+import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';