From d98601521a71662169bd95251337707fddbfde5f Mon Sep 17 00:00:00 2001
From: Gordon Lin <75815453+gordlin@users.noreply.github.com>
Date: Fri, 30 Aug 2024 16:18:47 -0400
Subject: [PATCH] Hide panel change warnings when no changes made

---
 src/components/slide-editor.vue | 82 ++++++++++++++++++++++++++++++++-
 1 file changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/components/slide-editor.vue b/src/components/slide-editor.vue
index 2f49f366..27950cc5 100644
--- a/src/components/slide-editor.vue
+++ b/src/components/slide-editor.vue
@@ -34,7 +34,13 @@
                             class="editor-input rounded-none cursor-pointer w-4 h-4"
                             v-model="rightOnly"
                             :disabled="rightOnly && determineEditorType(currentSlide.panel[panelIndex]) === 'dynamic'"
-                            @change.stop="$vfm.open(`right-only-${slideIndex}`)"
+                            @change.stop="
+                                if (currentSlide.panel.length > 1 && panelModified(currentSlide.panel[0])) {
+                                    $vfm.open(`right-only-${slideIndex}`);
+                                } else {
+                                    toggleRightOnly();
+                                }
+                            "
                         />
                         <span class="mx-2 font-bold">{{ $t('editor.slides.centerSlide') }}</span>
                         <input
@@ -236,8 +242,14 @@
                         <select
                             ref="typeSelector"
                             @input="
-                                $vfm.open(`change-slide-${slideIndex}`);
                                 newType = ($event.target as HTMLInputElement).value;
+                                if (panelModified(currentSlide.panel[panelIndex])) {
+                                    $vfm.open(`change-slide-${slideIndex}`);
+                                } else {
+                                    changePanelType(determineEditorType(currentSlide.panel[panelIndex]), newType);
+                                    toggleCenterPanel();
+                                    toggleCenterSlide();
+                                }
                             "
                             :value="determineEditorType(currentSlide.panel[panelIndex])"
                         >
@@ -334,6 +346,7 @@ import SlideshowEditorV from './slideshow-editor.vue';
 import LoadingPageV from './helpers/loading-page.vue';
 import DynamicEditorV from './dynamic-editor.vue';
 import ConfirmationModalV from './helpers/confirmation-modal.vue';
+import { toRaw } from 'vue';
 
 @Options({
     components: {
@@ -383,6 +396,63 @@ export default class SlideEditorV extends Vue {
         this.currentSlide ? (this.rightOnly = this.currentSlide.panel.length === 1) : false;
     }
 
+    panelModified(panel: BasePanel): boolean {
+        const prevType = this.currentSlide.panel[this.panelIndex].type;
+        const startingConfig: DefaultConfigs = {
+            text: {
+                type: PanelType.Text,
+                title: '',
+                content: ''
+            },
+            dynamic: {
+                type: PanelType.Dynamic,
+                title:
+                    this.currentSlide.panel[0] && prevType === 'text'
+                        ? (this.currentSlide.panel[0] as TextPanel).title
+                        : '',
+                titleTag: '',
+                content:
+                    this.currentSlide.panel[0] && prevType === 'text'
+                        ? (this.currentSlide.panel[0] as TextPanel).content
+                        : '',
+                children: []
+            },
+            slideshow: {
+                type: PanelType.Slideshow,
+                items: [],
+                userCreated: true
+            },
+            image: {
+                type: PanelType.Image,
+                src: ''
+            },
+            chart: {
+                type: PanelType.Chart,
+                src: ''
+            },
+            map: {
+                type: PanelType.Map,
+                config: `${this.configFileStructure.uuid}/ramp-config/${
+                    this.configFileStructure.uuid
+                }-map-${this.getNumberOfMaps()}.json`,
+                title: '',
+                scrollguard: false
+            },
+            video: {
+                type: PanelType.Video,
+                title: '',
+                videoType: '',
+                src: ''
+            }
+        };
+        const oldStartingConfig = JSON.parse(JSON.stringify(startingConfig[panel.type as keyof DefaultConfigs]));
+
+        let newConfig = Object.assign({}, toRaw(panel));
+        newConfig.customStyles = newConfig.customStyles || undefined;
+
+        return JSON.stringify(oldStartingConfig) !== JSON.stringify(newConfig);
+    }
+
     changePanelType(prevType: string, newType: string): void {
         const startingConfig: DefaultConfigs = {
             text: {
@@ -628,6 +698,14 @@ export default class SlideEditorV extends Vue {
             }
         }
     }
+
+    getNumberOfMaps(): number {
+        let n = 0;
+        this.configFileStructure.rampConfig.forEach((f) => {
+            n += 1;
+        });
+        return n;
+    }
 }
 </script>