feat: persist deck attributes

Author: peterpeterparker

studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx

@@ -39,6 +39,7 @@ export class AppEditorToolbar {
     @Event() private slideDelete: EventEmitter<HTMLElement>;
 
     @Event() private slideDidChange: EventEmitter<HTMLElement>;
+    @Event() private deckDidChange: EventEmitter<HTMLElement>;
 
     private subscription: Subscription;
     private deckBusyService: DeckBusyService;
@@ -425,7 +426,7 @@ export class AppEditorToolbar {
             this.selectedElement.style.color = $event.target.value;
         }
 
-        await this.emitSlideChange();
+        await this.emitChange();
     };
 
     // Background
@@ -490,7 +491,7 @@ export class AppEditorToolbar {
             this.selectedElement.style.background = $event.target.value;
         }
 
-        await this.emitSlideChange();
+        await this.emitChange();
     };
 
     private async openSlotType($event: UIEvent) {
@@ -542,21 +543,26 @@ export class AppEditorToolbar {
 
             await this.initSelectedElement(element);
 
-            await this.emitSlideChange();
+            await this.emitChange();
 
             resolve();
         });
     }
 
-    private emitSlideChange(): Promise<void> {
+    private emitChange(): Promise<void> {
         return new Promise<void>((resolve) => {
             if (!this.selectedElement || !this.selectedElement.parentElement) {
                 resolve();
                 return;
             }
 
-            // If not deck or slide, then parent is the container slide
-            this.slideDidChange.emit(this.deckOrSlide ? this.selectedElement : this.selectedElement.parentElement);
+            if (this.applyToAllDeck) {
+                const deckElement: HTMLElement = this.deckOrSlide ? this.selectedElement.parentElement : this.selectedElement.parentElement.parentElement;
+                this.deckDidChange.emit(deckElement);
+            } else {
+                // If not deck or slide, then parent is the container slide
+                this.slideDidChange.emit(this.deckOrSlide ? this.selectedElement : this.selectedElement.parentElement);
+            }
 
             resolve();
         });

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

@@ -3,7 +3,7 @@ import {debounceTime, filter, take} from 'rxjs/operators';
 
 import {Slide, SlideAttributes, SlideTemplate} from '../../../models/slide';
 import {User} from '../../../models/user';
-import {Deck} from '../../../models/deck';
+import {Deck, DeckAttributes} from '../../../models/deck';
 
 import {Utils} from '../../../utils/core/utils';
 
@@ -48,6 +48,7 @@ export class DeckEventsHandler {
         this.el = el;
 
         this.el.addEventListener('input', this.onSlideInputChange, false);
+        this.el.addEventListener('deckDidChange', this.onDeckChange, false);
         this.el.addEventListener('slideDidChange', this.onSlideChange, false);
         this.el.addEventListener('slideDidLoad', this.onSlideDidLoad, false);
         this.el.addEventListener('slideDelete', this.onSlideDelete, false);
@@ -59,6 +60,7 @@ export class DeckEventsHandler {
 
     destroy() {
         this.el.removeEventListener('input', this.onSlideInputChange, true);
+        this.el.removeEventListener('deckDidChange', this.onDeckChange, true);
         this.el.removeEventListener('slideDidChange', this.onSlideChange, true);
         this.el.removeEventListener('slideDidLoad', this.onSlideDidLoad, true);
         this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
@@ -80,6 +82,14 @@ export class DeckEventsHandler {
         }
     };
 
+    private onDeckChange = async ($event: CustomEvent) => {
+        if (!$event || !$event.detail) {
+            return;
+        }
+
+        await this.updateDeck($event.detail);
+    };
+
     private onSlideChange = async ($event: CustomEvent) => {
         if (!$event || !$event.detail) {
             return;
@@ -208,6 +218,43 @@ export class DeckEventsHandler {
         });
     }
 
+    private updateDeck(deck: HTMLElement): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            try {
+                if (!deck) {
+                    resolve();
+                    return;
+                }
+
+                this.deckBusyService.busy(true);
+
+                this.deckEditorService.watch().pipe(take(1)).subscribe(async (currentDeck: Deck) => {
+                    if (!currentDeck) {
+                        resolve();
+                        return;
+                    }
+
+                    const attributes: DeckAttributes = await this.getDeckAttributes(deck);
+
+                    if (attributes && Object.keys(attributes).length > 0) {
+                        currentDeck.attributes = attributes;
+                    }
+
+                    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 {
@@ -323,6 +370,18 @@ export class DeckEventsHandler {
         })
     }
 
+    private getDeckAttributes(deck: HTMLElement): Promise<DeckAttributes> {
+        return new Promise<DeckAttributes>((resolve) => {
+            let attributes: DeckAttributes = {};
+
+            if (deck.getAttribute('style')) {
+                attributes.style = deck.getAttribute('style');
+            }
+
+            resolve(attributes);
+        })
+    }
+
     private cleanSlideContent(content: string): Promise<string> {
         return new Promise<string>((resolve) => {
             if (!content || content.length <= 0) {

studio/src/app/models/deck.tsx

@@ -1,6 +1,11 @@
+export interface DeckAttributes {
+    style?: string;
+}
+
 export interface Deck {
     id?: string;
     slides: string[];
     name: string;
     owner_id: string;
+    attributes?: DeckAttributes;
 }

studio/src/components.d.ts

@@ -77,6 +77,7 @@ export namespace Components {
   }
   interface AppEditorToolbarAttributes extends StencilHTMLAttributes {
     'onBlockSlide'?: (event: CustomEvent<boolean>) => void;
+    'onDeckDidChange'?: (event: CustomEvent<HTMLElement>) => void;
     'onSlideDelete'?: (event: CustomEvent<HTMLElement>) => void;
     'onSlideDidChange'?: (event: CustomEvent<HTMLElement>) => void;
   }