create shared assets folder

src/components/dynamic-editor.vue

@@ -92,6 +92,10 @@
                     :centerSlide="centerSlide"
                     :dynamicSelected="dynamicSelected"
                     @slide-edit="$emit('slide-edit')"
+                    @shared-asset="(assetName: string) => {
+                        console.log('emitting shared-asset event from dynamic editor');
+                        $emit('shared-asset', assetName);
+                    }"
                 ></component>
             </div>
         </div>

src/components/editor.vue

@@ -217,6 +217,8 @@
                     :slideIndex="slideIndex"
                     @slide-change="selectSlide"
                     @slides-updated="updateSlides"
+                    @shared-asset="onSharedAsset"
+                    @process-panel="panelHelper"
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -279,6 +281,8 @@
                     :slideIndex="slideIndex"
                     @slide-change="selectSlide"
                     @slides-updated="updateSlides"
+                    @shared-asset="onSharedAsset"
+                    @process-panel="panelHelper"
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -298,6 +302,7 @@
                     :slideIndex="slideIndex"
                     :isLast="slideIndex === slides.length - 1"
                     :uid="uuid"
+                    @shared-asset="onSharedAsset"
                     @slide-change="selectSlide"
                     @slide-edit="onSlidesEdited"
                     @custom-slide-updated="updateCustomSlide"
@@ -332,14 +337,17 @@
 <script lang="ts">
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
 import {
+    BasePanel,
     ConfigFileStructure,
     HelpSection,
+    ImagePanel,
     MetadataContent,
     MultiLanguageSlide,
     Slide,
     SourceCounts,
     StoryRampConfig,
-    TextPanel
+    TextPanel,
+    VideoPanel
 } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
 import axios from 'axios';
@@ -404,9 +412,74 @@ export default class EditorV extends Vue {
 
     @Watch('slides', { deep: true })
     onSlidesEdited(): void {
+        console.log('editor - slide edit event emitted');
         this.$emit('save-status', true);
     }
 
+    /**
+     * Executes a callback for each ImagePanel/VideoPanel within the provided BasePanel
+     *
+     * @param panel The panel which we are processing
+     * @param callback The callback function that is called on each ImagePanel/VideoPanel in the provided BasePanel
+     * @param callbackArgs The additional argument(s) for the callback function (can be empty)
+     */
+    panelHelper(panel: BasePanel, callback: (panel: ImagePanel | VideoPanel, ...args) => void, ...callbackArgs): void {
+        switch (panel.type) {
+            case 'slideshow':
+                panel.items.forEach((item) => this.panelHelper(item, callback, ...callbackArgs));
+                break;
+            case 'dynamic':
+                panel.children.forEach((child) => this.panelHelper(child.panel, callback, ...callbackArgs));
+                break;
+            case 'image':
+            case 'video':
+                callback(panel, ...callbackArgs);
+        }
+    }
+
+    // move asset from opposite lang's assets folder to shared assets folder
+    onSharedAsset(assetName: string, oppositeLang: string): void {
+        console.log('editor - asset to be moved to shared asset folder');
+        console.log(assetName);
+        const oppositeConfig = this.configs[oppositeLang];
+        console.log('opposte lang');
+        console.log(oppositeLang);
+        console.log('opposite langs config (before)');
+        console.log(JSON.parse(JSON.stringify(oppositeConfig)));
+        console.log('opposite langs slides (before)');
+        console.log(JSON.parse(JSON.stringify(oppositeConfig?.slides)));
+
+        const updateAssetSrc = (panel: ImagePanel | VideoPanel, assetName: string, oppositeLang: string) => {
+            if (panel.src) {
+                let assetSrc = panel.src.split('/');
+                const assetFolder = assetSrc[2];
+                if (panel.src.includes(assetName) && assetFolder === oppositeLang) {
+                    console.log('need to change to shared');
+                    assetSrc[2] = 'shared';
+                    panel.src = assetSrc.join('/');
+                }
+            }
+        };
+
+        oppositeConfig?.slides.forEach((slide) => {
+            console.log('current slide');
+            console.log(JSON.parse(JSON.stringify(slide)));
+            slide.panel.forEach((panel) => {
+                console.log('current panel');
+                console.log(JSON.parse(JSON.stringify(panel)));
+                this.panelHelper(panel, updateAssetSrc, assetName, oppositeLang);
+            });
+        });
+
+        console.log('opposite langs config (after)');
+        console.log(JSON.parse(JSON.stringify(oppositeConfig)));
+        console.log('opposite langs slides (after)');
+        console.log(JSON.parse(JSON.stringify(oppositeConfig?.slides)));
+
+        this.$emit('save-status', true);
+        console.log(' ');
+    }
+
     @Watch('metadata', { deep: true })
     onMetadataEdited(): void {
         this.$emit('save-status', true);
@@ -467,15 +540,17 @@ export default class EditorV extends Vue {
             panel: [{ type: 'loading-page' }, { type: 'loading-page' }]
         };
 
+        const newLang = lang ? lang : this.configLang ? this.configLang : 'en';
+        this.$emit('lang-change', newLang);
+
         setTimeout(() => {
             if (index === -1 || !this.loadSlides) {
                 this.currentSlide = '';
             } else {
-                const selectedLang = (lang ?? this.configLang) as keyof MultiLanguageSlide;
+                const selectedLang = newLang as keyof MultiLanguageSlide;
                 const selectedSlide = this.loadSlides[index][selectedLang];
                 this.currentSlide = selectedSlide ?? '';
             }
-
             this.slideIndex = index;
             (this.$refs.slide as SlideEditorV).panelIndex = 0;
             (this.$refs.slide as SlideEditorV).advancedEditorView = false;

src/components/helpers/custom-editor.vue

@@ -129,6 +129,7 @@ export default class CustomEditorV extends Vue {
     }
 
     saveChanges(): void {
+        console.log('customeditor.vue - saving changes after opening advanced editor ');
         this.$emit('config-edited', this.updatedConfig);
         this.edited = false;