feat: edit deck title in publish modal

Author: peterpeterparker

studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx

@@ -1,4 +1,7 @@
-import {Component, Prop, State, Watch} from '@stencil/core';
+import {Component, Event, EventEmitter, Prop, State, Watch} from '@stencil/core';
+
+import {Subject, Subscription} from 'rxjs';
+import {debounceTime} from 'rxjs/operators';
 
 import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
@@ -39,8 +42,23 @@ export class AppFeedCard {
     @State()
     private formattedPublication: string;
 
+    @Event() private editCaption: EventEmitter<string>;
+
+    private captionSubscription: Subscription;
+    private captionSubject: Subject<string> = new Subject<string>();
+
     async componentWillLoad() {
         await this.formatPublication();
+
+        this.captionSubscription = this.captionSubject.pipe(debounceTime(500)).subscribe(async (title: string) => {
+            this.editCaption.emit(title);
+        });
+    }
+
+    componentDidUnload() {
+        if (this.captionSubscription) {
+            this.captionSubscription.unsubscribe();
+        }
     }
 
     @Watch('publication')
@@ -53,7 +71,6 @@ export class AppFeedCard {
         });
     }
 
-
     private handleTagInput($event: UIEvent) {
         const tag: string = ($event.target as InputTargetEvent).value;
 
@@ -88,6 +105,17 @@ export class AppFeedCard {
         });
     }
 
+    private onCaptionInput($event: UIEvent) {
+        if (!this.editable) {
+            return;
+        }
+
+        const title: string = ($event as InputUIEvent).target.textContent;
+        if (title && title !== undefined && title !== '') {
+            this.captionSubject.next(title);
+        }
+    }
+
     render() {
         return <ion-card class={this.editable ? "ion-no-margin" : undefined}>
             {this.renderCardContent()}
@@ -99,7 +127,7 @@ export class AppFeedCard {
             {this.renderMiniature()}
 
             <ion-card-header>
-                <ion-card-title class="ion-text-uppercase" contentEditable={this.editable}>{this.caption}</ion-card-title>
+                <ion-card-title class="ion-text-uppercase" contentEditable={this.editable} onInput={(e: UIEvent) => this.onCaptionInput(e)}>{this.caption}</ion-card-title>
 
                 <ion-card-subtitle class="ion-text-lowercase">
                     {this.renderTags()}

studio/src/app/definitions/input.d.ts

@@ -1,3 +1,7 @@
 interface InputTargetEvent extends EventTarget {
     value: string;
 }
+
+interface InputUIEvent extends UIEvent {
+    target: HTMLElement;
+}

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

@@ -286,6 +286,8 @@ export class DeckEventsHandler {
                         return;
                     }
 
+                    // TODO: Add a check, we should not update the title from the slide in case it would have been set in the publication
+
                     currentDeck.name = title;
 
                     const updatedDeck: Deck = await this.deckService.put(currentDeck);

studio/src/app/modals/editor/app-publish/app-publish.tsx

@@ -1,10 +1,16 @@
-import {Component, Element, Listen, Prop, State} from '@stencil/core';
+import {Component, Element, Listen, State} from '@stencil/core';
 
 import {take} from 'rxjs/operators';
 
 import {AuthUser} from '../../../models/auth-user';
 
+
+import {Deck} from '../../../models/deck';
+
 import {AuthService} from '../../../services/auth/auth.service';
+import {DeckEditorService} from '../../../services/deck/deck-editor.service';
+import {DeckService} from '../../../services/deck/deck.service';
+import {ErrorService} from '../../../services/error/error.service';
 
 @Component({
     tag: 'app-publish',
@@ -16,20 +22,41 @@ export class AppPublish {
 
     private authService: AuthService;
 
-    @Prop()
-    caption: string;
+    @State()
+    private caption: string;
 
-    @Prop()
-    description: string;
+    @State()
+    private description: string;
 
     @State()
     private author: string;
 
     @State()
     private today: Date = new Date();
 
+    @State()
+    private disablePublish: boolean = false;
+
+    private deckEditorService: DeckEditorService;
+    private deckService: DeckService;
+
+    private errorService: ErrorService;
+
     constructor() {
         this.authService = AuthService.getInstance();
+
+        this.deckEditorService = DeckEditorService.getInstance();
+        this.deckService = DeckService.getInstance();
+
+        this.errorService = ErrorService.getInstance();
+    }
+
+    async componentWillLoad() {
+        this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
+            if (deck) {
+                this.caption = deck.name;
+            }
+        });
     }
 
     async componentDidLoad() {
@@ -49,6 +76,44 @@ export class AppPublish {
         await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss();
     }
 
+    @Listen('editCaption')
+    async onEditCaption(e: CustomEvent) {
+        await this.updateDeck(e.detail);
+    }
+
+    private updateDeck(title: string): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            if (!title || title === undefined || title === '') {
+                resolve();
+                return;
+            }
+
+            this.disablePublish = true;
+
+            try {
+                this.deckEditorService.watch().pipe(take(1)).subscribe(async (deck: Deck) => {
+                    if (!deck || !deck.id) {
+                        this.disablePublish = false;
+                        resolve();
+                        return;
+                    }
+
+                    deck.name = title;
+
+                    const updatedDeck: Deck = await this.deckService.put(deck);
+                    this.deckEditorService.next(updatedDeck);
+
+                    this.disablePublish = false;
+                });
+            } catch (err) {
+                this.disablePublish = false;
+                this.errorService.error(err);
+            }
+
+            resolve();
+        });
+    }
+
     render() {
         return [
             <ion-header>
@@ -62,12 +127,15 @@ export class AppPublish {
                 </ion-toolbar>
             </ion-header>,
             <ion-content padding>
-                <p>Edit the title and summary of your presentation and add or change tags (up to 5) to make your presentation more inviting to readers</p>
+                <p>Edit the title and summary of your presentation and add or change tags (up to 5) to make your
+                    presentation more inviting to readers</p>
 
-                <app-feed-card compact={false} miniature={false} editable={true} author={this.author} publication={this.today} caption={this.caption} description={this.description}></app-feed-card>
+                <app-feed-card compact={false} miniature={false} editable={true} author={this.author}
+                               publication={this.today} caption={this.caption}
+                               description={this.description}></app-feed-card>
 
                 <div class="ion-padding ion-text-center">
-                    <ion-button shape="round" color="primary">
+                    <ion-button shape="round" color="primary" disabled={this.disablePublish}>
                         <ion-label class="ion-text-uppercase">Publish now</ion-label>
                     </ion-button>
                 </div>

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -22,11 +22,6 @@ import {EditorHelper} from '../../../helpers/editor/editor.helper';
 import {DeckAction} from '../../../popovers/editor/app-deck-actions/deck-action';
 import {DeckEditorService} from '../../../services/deck/deck-editor.service';
 
-interface FirstSlideContent {
-    title: string;
-    content: string;
-}
-
 @Component({
     tag: 'app-editor',
     styleUrl: 'app-editor.scss'
@@ -309,33 +304,6 @@ export class AppEditor {
         });
     }
 
-    private getFirstSlideContent(): Promise<FirstSlideContent> {
-        return new Promise<FirstSlideContent>(async (resolve) => {
-            let title: string = '';
-            let content: string = '';
-
-            const slide: HTMLElement = this.el.querySelector('deckgo-deck > *:first-child');
-
-            if (slide && slide.tagName && slide.tagName.toLowerCase().indexOf('deckgo-slide') > -1) {
-                const titleElement: HTMLElement = slide.querySelector('[slot="title"]');
-                const contentElement: HTMLElement = slide.querySelector('[slot="content"]');
-
-                if (titleElement) {
-                    title = titleElement.textContent;
-                }
-
-                if (contentElement) {
-                    content = contentElement.textContent;
-                }
-            }
-
-            resolve({
-                title: title,
-                content: content
-            });
-        });
-    }
-
     @Listen('actionOpenSlideAdd')
     async onActionOpenSlideAdd($event: CustomEvent) {
         if (!$event || !$event.detail) {
@@ -403,14 +371,8 @@ export class AppEditor {
             return;
         }
 
-        const firstSlide: FirstSlideContent = await this.getFirstSlideContent();
-
         const modal: HTMLIonModalElement = await this.modalController.create({
-            component: 'app-publish',
-            componentProps: {
-                caption: firstSlide.title,
-                description: firstSlide.content
-            }
+            component: 'app-publish'
         });
 
         modal.onDidDismiss().then(async (_detail: OverlayEventDetail) => {

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';
@@ -107,6 +107,7 @@ export namespace Components {
     'description'?: string;
     'editable'?: boolean;
     'miniature'?: boolean;
+    'onEditCaption'?: (event: CustomEvent<string>) => void;
     'publication'?: Date;
   }
 
@@ -119,14 +120,8 @@ export namespace Components {
   interface AppGif {}
   interface AppGifAttributes extends StencilHTMLAttributes {}
 
-  interface AppPublish {
-    'caption': string;
-    'description': string;
-  }
-  interface AppPublishAttributes extends StencilHTMLAttributes {
-    'caption'?: string;
-    'description'?: string;
-  }
+  interface AppPublish {}
+  interface AppPublishAttributes extends StencilHTMLAttributes {}
 
   interface AppSlideNavigate {
     'slides': string[];