Merge pull request #368 from yileifeng/preview-lang-route

Modify routes and add option to change config lang in preview mode
ramp4-pcar4 · Aug 21, 2024 · 824dec8 · 824dec8
2 parents 03142a9 + a5ed861
commit 824dec8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 24 deletions.
diff --git a/src/components/editor.vue b/src/components/editor.vue
@@ -324,10 +324,13 @@ export default class EditorV extends Vue {
         }
 
         setTimeout(() => {
-            const routeData = this.$router.resolve({ name: 'preview' });
+            const routeData = this.$router.resolve({
+                name: 'preview',
+                params: { lang: this.configLang, uid: this.uuid }
+            });
             const previewTab = window.open(routeData.href, '_blank');
             (previewTab as Window).props = {
-                config: JSON.parse(JSON.stringify(this.configs[this.configLang])),
+                configs: this.configs,
                 configFileStructure: this.configFileStructure
             };
         }, 5);

diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
@@ -1306,28 +1306,28 @@ export default class MetadataEditorV extends Vue {
         }
     }
 
-    highlightNext() {
+    highlightNext(): void {
         if (this.highlightedIndex < this.getStorylines.length - 1) {
             this.highlightedIndex++;
             this.scrollIntoView();
         }
     }
 
-    highlightPrevious() {
+    highlightPrevious(): void {
         if (this.highlightedIndex > 0) {
             this.highlightedIndex--;
             this.scrollIntoView();
         }
     }
 
-    selectHighlighted() {
+    selectHighlighted(): void {
         if (this.highlightedIndex !== -1) {
             const selectedStoryline = this.getStorylines[this.highlightedIndex];
             this.selectUuid(selectedStoryline.uuid);
         }
     }
 
-    scrollIntoView() {
+    scrollIntoView(): void {
         this.$nextTick(() => {
             const container = this.$el.querySelector('.overflow-y-auto');
             const activeItem = container.querySelector('li.bg-gray-300');

diff --git a/src/components/preview.vue b/src/components/preview.vue
@@ -15,6 +15,10 @@
                 <div class="w-mobile-full truncate">
                     <span class="font-semibold text-lg m-1">{{ config.title }}</span>
                 </div>
+
+                <button @click="changeLang" class="editor-button bg-black text-white hover:bg-gray-900">
+                    <span class="inline-block">{{ lang === 'en' ? $t('editor.lang.fr') : $t('editor.lang.en') }}</span>
+                </button>
             </header>
 
             <storylines-intro :config="config.introSlide" :configFileStructure="configFileStructure" />
@@ -81,15 +85,21 @@ export default class StoryPreviewV extends Vue {
     } = { en: undefined, fr: undefined };
 
     created(): void {
-        const uid = this.$route.params.uid as string;
+        this.uid = this.$route.params.uid as string;
         this.lang = this.$route.params.lang as string;
 
-        if (uid) {
+        // if config file structure passed from session (from main editor page)
+        if (window.props) {
+            this.config = JSON.parse(JSON.stringify(window.props.configs[this.lang]));
+            this.configs = window.props.configs;
+            this.configFileStructure = window.props.configFileStructure;
+            this.loadStatus = 'loaded';
+        } else {
             this.savedProduct = true;
             // attempt to fetch saved config file from the server (TODO: setup as express route?)
-            fetch(this.apiUrl + `/retrieve/${uid}`).then((res: Response) => {
+            fetch(this.apiUrl + `/retrieve/${this.uid}`).then((res: Response) => {
                 if (res.status === 404) {
-                    console.error(`There does not exist a saved product with UID ${uid}.`);
+                    console.error(`There does not exist a saved product with UID ${this.uid}.`);
                     // redirect to canada.ca 404 page on invalid URL params
                     // window.location.href = 'https://www.canada.ca/errors/404.html';
                 } else {
@@ -101,8 +111,18 @@ export default class StoryPreviewV extends Vue {
                             const chartsFolder = configZip.folder('charts');
                             const rampConfigFolder = configZip.folder('ramp-config');
 
+                            // save EN and FR storylines configurations (for lang switching)
+                            const enFile = configZip.file(`${this.uid}_en.json`);
+                            const frFile = configZip.file(`${this.uid}_fr.json`);
+                            enFile?.async('string').then((res: string) => {
+                                this.configs['en'] = JSON.parse(res);
+                            });
+                            frFile?.async('string').then((res: string) => {
+                                this.configs['fr'] = JSON.parse(res);
+                            });
+
                             this.configFileStructure = {
-                                uuid: uid,
+                                uuid: this.uid,
                                 zip: configZip,
                                 configs: this.configs as unknown as { [key: string]: StoryRampConfig },
                                 assets: {
@@ -116,7 +136,7 @@ export default class StoryPreviewV extends Vue {
                                 rampConfig: rampConfigFolder as JSZip
                             };
 
-                            const configFile = configZip.file(`${uid}_${this.lang}.json`);
+                            const configFile = configZip.file(`${this.uid}_${this.lang}.json`);
                             configFile?.async('string').then((configContent: string) => {
                                 const config = JSON.parse(configContent) as StoryRampConfig;
                                 this.config = config;
@@ -136,10 +156,6 @@ export default class StoryPreviewV extends Vue {
                         .catch((error: AxiosError) => console.log(error.response || error));
                 });
             });
-        } else {
-            this.config = window.props.config;
-            this.configFileStructure = window.props.configFileStructure;
-            this.loadStatus = 'loaded';
         }
 
         // set page lang
@@ -148,9 +164,26 @@ export default class StoryPreviewV extends Vue {
         this.$i18n.locale = this.lang;
     }
 
+    // reload preview page with FR config
+    changeLang(): void {
+        const newLang = this.lang === 'en' ? 'fr' : 'en';
+        const routeData = this.$router.resolve({
+            name: 'preview',
+            params: { lang: newLang, uid: this.uid }
+        });
+
+        // update window props on refresh (to prevent having to fetch from server again)
+        const refreshTab = window.open(routeData.href, '_self');
+        (refreshTab as Window).props = {
+            configs: this.configs,
+            configFileStructure: this.configFileStructure
+        };
+        this.$forceUpdate();
+    }
+
     updateActiveIndex(idx: number): void {
         this.activeChapterIndex = idx;
-        //determine header height
+        // determine header height
         const headerH = document.getElementById('story-header');
         if (headerH) {
             this.headerHeight = headerH.clientHeight;

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -49,16 +49,10 @@ const routes = [
         props: true,
         meta: { title: 'editor.window.title' }
     },
-    {
-        path: '/:lang/editor-preview',
-        component: StoryPreviewV,
-        name: 'preview',
-        props: true,
-        meta: { title: 'story.window.title' }
-    },
     {
         path: '/:lang/editor-preview/:uid',
         component: StoryPreviewV,
+        name: 'preview',
         meta: { title: 'story.window.title' }
     }
 ];