fix project TS warnings + add user alerts for navigating away from ro…

…utes with unsaved editor work
ramp4-pcar4 · May 19, 2023 · 7fcd872 · 7fcd872
1 parent 2b0731d
commit 7fcd872
Show file tree

Hide file tree

Showing 36 changed files with 439 additions and 279 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'prettier/prettier': ['error', { endOfLine: 'auto' }],
+        'sort-imports': ['error', {"ignoreCase": true, "ignoreDeclarationSort": true }],
         '@typescript-eslint/no-var-requires': 'off'
     },
     globals: {

diff --git a/src/app.vue b/src/app.vue
@@ -11,7 +11,7 @@ import { Route } from 'vue-router';
 @Component({})
 export default class App extends Vue {
     @Watch('$route', { immediate: true })
-    onRouteUpdate(to: Route, from: Route) {
+    onRouteUpdate(to: Route): void {
         this.$i18n.locale = to.params.lang ?? 'en';
         document.title = this.$t(to.meta?.title).toString();
     }

diff --git a/src/components/editor/chart-editor.vue b/src/components/editor/chart-editor.vue
@@ -59,8 +59,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { ChartConfig } from '@/definitions';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { ChartConfig, ChartPanel, ConfigFileStructure, Highchart, SourceCounts } from '@/definitions';
 import ChartPanelV from '@/components/panels/chart-panel.vue';
 import ChartPreviewV from '@/components/editor/helpers/chart-preview.vue';
 import ConfirmationModalV from '@/components/editor/helpers/confirmation-modal.vue';
@@ -75,17 +75,15 @@ import draggable from 'vuedraggable';
     }
 })
 export default class ChartEditorV extends Vue {
-    @Prop() panel!: any;
-    @Prop() configFileStructure!: any;
+    @Prop() panel!: ChartPanel;
+    @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() lang!: string;
-    @Prop() sourceCounts!: any;
-
-    $modals: any;
+    @Prop() sourceCounts!: SourceCounts;
 
     edited = false;
 
     chartConfigs = [] as Array<ChartConfig>;
-    modalEditor = {} as any;
+    modalEditor = {} as typeof highed.ModalEditor;
 
     mounted(): void {
         // attach highcharts modal editor to summoner node
@@ -99,8 +97,7 @@ export default class ChartEditorV extends Vue {
                         options: 'plugins csv json'
                     }
                 },
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (chart: any) => {
+                (chart: Highchart) => {
                     this.createNewChart(chart.toString());
                 }
             );

diff --git a/src/components/editor/dynamic-editor.vue b/src/components/editor/dynamic-editor.vue
@@ -87,12 +87,25 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import {
+    ChartConfig,
+    ChartPanel,
+    ConfigFileStructure,
+    DefaultConfigs,
+    DynamicChildItem,
+    DynamicPanel,
+    ImagePanel,
+    MapPanel,
+    PanelType,
+    SlideshowPanel,
+    SourceCounts
+} from '@/definitions';
+
 import ChartEditorV from './chart-editor.vue';
 import ImageEditorV from './image-editor.vue';
 import TextEditorV from './text-editor.vue';
 import MapEditorV from './map-editor.vue';
-import { DefaultConfigs, PanelType } from '@/definitions';
 
 @Component({
     components: {
@@ -104,12 +117,12 @@ import { DefaultConfigs, PanelType } from '@/definitions';
     }
 })
 export default class DynamicEditorV extends Vue {
-    @Prop() panel!: any;
-    @Prop() configFileStructure!: any;
+    @Prop() panel!: DynamicPanel;
+    @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() lang!: string;
-    @Prop() sourceCounts!: any;
+    @Prop() sourceCounts!: SourceCounts;
 
-    editors = {
+    editors: Record<string, string> = {
         text: 'text-editor',
         image: 'image-editor',
         slideshow: 'image-editor',
@@ -152,8 +165,8 @@ export default class DynamicEditorV extends Vue {
     newSlideName = '';
     newSlideType = 'text';
 
-    get idUsed(): any {
-        return this.panel.children.some((ch: any) => ch.id === this.newSlideName);
+    get idUsed(): boolean {
+        return this.panel.children.some((ch: DynamicChildItem) => ch.id === this.newSlideName);
     }
 
     changePanel(target: string): void {
@@ -168,46 +181,54 @@ export default class DynamicEditorV extends Vue {
 
         // Image Panel to Slideshow Panel Conversion
         if (this.panel.children[this.editingSlide].panel.type === 'image') {
-            this.panel.children[this.editingSlide].panel = {
-                type: 'slideshow',
-                images: [this.panel.children[this.editingSlide].panel]
+            (this.panel.children[this.editingSlide].panel as SlideshowPanel) = {
+                type: PanelType.Slideshow,
+                images: [this.panel.children[this.editingSlide].panel as ImagePanel]
             };
         }
     }
 
-    removeSlide(item: any): void {
-        const panel = this.panel.children.find((panel: any, idx: number) => idx === item).panel;
+    removeSlide(item: number): void {
+        const panel = this.panel.children.find((panel: DynamicChildItem, idx: number) => idx === item)?.panel;
 
         // Update source counts based on which panel is removed.
-        switch (panel.type) {
-            case 'map':
-                this.sourceCounts[panel.config] -= 1;
-                if (this.sourceCounts[panel.config] === 0) {
-                    this.configFileStructure.zip.remove(`${panel.config.substring(panel.config.indexOf('/') + 1)}`);
+        switch (panel?.type) {
+            case 'map': {
+                const mapPanel = panel as MapPanel;
+                this.sourceCounts[mapPanel.config] -= 1;
+                if (this.sourceCounts[mapPanel.config] === 0) {
+                    this.configFileStructure.zip.remove(
+                        `${mapPanel.config.substring(mapPanel.config.indexOf('/') + 1)}`
+                    );
                 }
                 break;
+            }
 
-            case 'chart':
-                panel.charts.forEach((chart: any) => {
+            case 'chart': {
+                const chartPanel = panel as ChartPanel;
+                chartPanel.charts.forEach((chart: ChartConfig) => {
                     this.sourceCounts[chart.src] -= 1;
                     if (this.sourceCounts[chart.src] === 0) {
                         this.configFileStructure.zip.remove(`${chart.src.substring(chart.src.indexOf('/') + 1)}`);
                     }
                 });
                 break;
+            }
 
-            case 'slideshow':
-                panel.images.forEach((image: any) => {
+            case 'slideshow': {
+                const slideshowPanel = panel as SlideshowPanel;
+                slideshowPanel.images.forEach((image: ImagePanel) => {
                     this.sourceCounts[image.src] -= 1;
                     if (this.sourceCounts[image.src] === 0) {
                         this.configFileStructure.zip.remove(`${image.src.substring(image.src.indexOf('/') + 1)}`);
                     }
                 });
                 break;
+            }
         }
 
         // Remove the panel itself.
-        this.panel.children = this.panel.children.filter((panel: any, idx: number) => idx !== item);
+        this.panel.children = this.panel.children.filter((panel: DynamicChildItem, idx: number) => idx !== item);
 
         // If the slide being removed is the currently selected slide, unselect it.
         if (this.editingSlide === item) {
@@ -228,8 +249,11 @@ export default class DynamicEditorV extends Vue {
     }
 
     saveChanges(): void {
-        if (this.$refs.slide !== undefined && typeof (this.$refs.slide as any).saveChanges === 'function') {
-            (this.$refs.slide as any).saveChanges();
+        if (
+            this.$refs.slide !== undefined &&
+            typeof (this.$refs.slide as ImageEditorV | ChartEditorV).saveChanges === 'function'
+        ) {
+            (this.$refs.slide as ImageEditorV | ChartEditorV).saveChanges();
         }
     }
 }

diff --git a/src/components/editor/editor.vue b/src/components/editor/editor.vue
@@ -87,7 +87,7 @@
                                 />
                             </svg>
                         </span>
-                        <span class="align-middle inline-block">Edit Project Metadata</span>
+                        <span class="align-middle inline-block">{{ $t('editor.editMetadata') }}</span>
                     </button>
                 </div>
                 <slide-toc
@@ -124,10 +124,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
-import { StoryRampConfig, Slide } from '@/definitions';
-
-const axios = require('axios').default;
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { ConfigFileStructure, MetadataContent, Slide, SourceCounts, StoryRampConfig } from '@/definitions';
 
 import Circle2 from 'vue-loading-spinner/src/components/Circle2.vue';
 import SlideEditorV from './slide-editor.vue';
@@ -148,21 +146,19 @@ export default class EditorV extends Vue {
     @Prop() configs!: {
         [key: string]: StoryRampConfig | undefined;
     };
-    @Prop() configFileStructure!: any;
-    @Prop() sourceCounts!: any;
-    @Prop() metadata!: any;
+    @Prop() configFileStructure!: ConfigFileStructure | undefined;
+    @Prop() sourceCounts!: SourceCounts;
+    @Prop() metadata!: MetadataContent;
     @Prop() slides!: Slide[];
     @Prop() configLang!: string;
     @Prop() saving!: boolean;
     @Prop() unsavedChanges!: boolean;
-    @Prop() editExisting!: boolean;
 
     // Form properties.
     uuid = '';
     logoImage: undefined | File = undefined;
-    currentSlide: any = '';
+    currentSlide: Slide | string = '';
     slideIndex = -1;
-    $modals: any;
 
     @Watch('slides', { deep: true })
     onSlidesEdited(): void {
@@ -175,8 +171,8 @@ export default class EditorV extends Vue {
     }
 
     created(): void {
-        window.addEventListener('beforeunload', this.beforeWindowUnload);
         this.uuid = this.$route.params.uid;
+        window.addEventListener('beforeunload', this.beforeWindowUnload);
     }
 
     mounted(): void {
@@ -185,7 +181,7 @@ export default class EditorV extends Vue {
             threshold: [1]
         });
 
-        observer.observe(document.querySelector('.editor-header')!);
+        observer.observe(document.querySelector('.editor-header') as Element);
     }
 
     beforeDestroy(): void {
@@ -198,18 +194,19 @@ export default class EditorV extends Vue {
     selectSlide(index: number): void {
         // save changes to current slide before changing slides
         if (this.$refs.slide !== undefined) {
-            (this.$refs.slide as any).saveChanges();
+            (this.$refs.slide as SlideEditorV).saveChanges();
         }
 
         // Quickly swap to loading page, and then swap to new slide. Allows Vue to re-draw page correctly.
         this.currentSlide = {
+            title: '',
             panel: [{ type: 'loading-page' }, { type: 'loading-page' }]
         };
 
         setTimeout(() => {
             this.currentSlide = index === -1 ? '' : (this.slides as Slide[])[index];
             this.slideIndex = index;
-            (this.$refs.slide as any).panelIndex = 0;
+            (this.$refs.slide as SlideEditorV).panelIndex = 0;
             window.scrollTo(0, 0);
         }, 5);
     }
@@ -219,7 +216,7 @@ export default class EditorV extends Vue {
      */
     updateSlides(slides: Slide[]): void {
         this.slides = slides;
-        this.slideIndex = this.slides.indexOf(this.currentSlide);
+        this.slideIndex = this.slides.indexOf(this.currentSlide as Slide);
     }
 
     /**
@@ -228,11 +225,11 @@ export default class EditorV extends Vue {
     preview(): void {
         // save current slide final changes before previewing product
         if (this.$refs.slide !== undefined) {
-            (this.$refs.slide as any).saveChanges();
+            (this.$refs.slide as SlideEditorV).saveChanges();
         }
         const routeData = this.$router.resolve({ name: 'preview' });
         const previewTab = window.open(routeData.href, '_blank');
-        (previewTab as any).props = {
+        (previewTab as Window).props = {
             config: JSON.parse(JSON.stringify(this.configs[this.configLang])),
             configFileStructure: this.configFileStructure
         };
@@ -241,14 +238,14 @@ export default class EditorV extends Vue {
     saveChanges(): void {
         // save current slide final changes before generating config file
         if (this.$refs.slide !== undefined) {
-            (this.$refs.slide as any).saveChanges();
+            (this.$refs.slide as SlideEditorV).saveChanges();
         }
 
         // emit save changes event
         this.$emit('save-changes');
     }
 
-    beforeWindowUnload(e: any): void {
+    beforeWindowUnload(e: BeforeUnloadEvent): void {
         // show popup if when leaving page with unsaved changes
         if (this.unsavedChanges && !window.confirm()) {
             e.preventDefault();

diff --git a/src/components/editor/helpers/chart-preview.vue b/src/components/editor/helpers/chart-preview.vue
@@ -60,8 +60,15 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { ChartConfig, DQVChartConfig, PieSeriesData, PieDataRow, LineSeriesData } from '@/definitions';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import {
+    ChartConfig,
+    ConfigFileStructure,
+    DQVChartConfig,
+    LineSeriesData,
+    PieDataRow,
+    PieSeriesData
+} from '@/definitions';
 import ChartV from '@/components/panels/helpers/chart.vue';
 
 @Component({
@@ -71,13 +78,13 @@ import ChartV from '@/components/panels/helpers/chart.vue';
 })
 export default class ChartPreviewV extends Vue {
     @Prop() chart!: ChartConfig;
-    @Prop() configFileStructure!: any;
+    @Prop() configFileStructure!: ConfigFileStructure;
 
     loading = true;
     chartIdx = 0;
     chartConfig = {};
     chartName = '';
-    modalEditor: any = undefined;
+    modalEditor: typeof highed.ModalEditor = undefined;
 
     mounted(): void {
         this.chartConfig = this.chart;
@@ -104,7 +111,7 @@ export default class ChartPreviewV extends Vue {
                 },
                 defaultChartOptions: chartOptions
             },
-            (newChart: any) => {
+            (newChart: string) => {
                 const chart = JSON.parse(newChart);
                 const chartConfig = {
                     name: chart.title.text,

diff --git a/src/components/editor/helpers/confirmation-modal.vue b/src/components/editor/helpers/confirmation-modal.vue
@@ -18,8 +18,6 @@ export default class MetadataEditorV extends Vue {
     @Prop() message!: string;
     @Prop() name!: string;
 
-    $modals: any;
-
     onOk(): void {
         this.$emit('Ok');
         this.$modals.hide(this.name);

diff --git a/src/components/editor/helpers/image-preview.vue b/src/components/editor/helpers/image-preview.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import { ImageFile } from '@/definitions';
 
 @Component({})