Work for #5551 - Implement TOC navigation - added TOC navigation to vue

surveyjs · Feb 13, 2023 · 5f0e0bc · 5f0e0bc
1 parent 3a2236b
commit 5f0e0bc
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 39 deletions.
diff --git a/src/entries/vue-ui-model.ts b/src/entries/vue-ui-model.ts
@@ -49,6 +49,7 @@ export { PanelDynamicProgress } from "../vue/paneldynamicprogress.vue";
 export { PanelDynamicProgressV2 } from "../vue/paneldynamicprogressV2.vue";
 export { Progress } from "../vue/progress.vue";
 export { ProgressButtons } from "../vue/progressButtons.vue";
+export { ProgressToc } from "../vue/progressToc.vue";
 export { TimerPanel } from "../vue/timerpanel.vue";
 export { Panel } from "../vue/panel.vue";
 export { FlowPanel } from "../vue/flowpanel.vue";
@@ -87,6 +88,7 @@ export { SurveyNavigationButton } from "../vue/components/survey-actions/survey-
 export { Skeleton } from "../vue/components/skeleton.vue";
 export { BrandInfo } from "../vue/components/brand-info.vue";
 export { NotifierComponent } from "../vue/components/notifier.vue";
+export { ComponentsContainer } from "../vue/components/container.vue";
 
 import { SurveyModel } from "survey-core";
 

diff --git a/src/vue/components/container.vue b/src/vue/components/container.vue
@@ -0,0 +1,38 @@
+<template>
+  <div className="sd-components-column">
+  <template v-for="(component, index) in components">
+    <component 
+      :is="component.component"
+      :survey="survey"
+      :model="component.data"
+    ></component>
+  </template>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop, Watch } from "vue-property-decorator";
+import { SurveyModel } from "survey-core";
+import { BaseVue } from "../base";
+
+@Component
+export class ComponentsContainer extends BaseVue {
+  @Prop() survey: SurveyModel;
+  @Prop() container: string;
+  components: Array<any>;
+  constructor() {
+    super();
+    this.components = this.survey.getContainerContent(this.container as any);
+  }
+  @Watch("survey")
+  @Watch("container")
+  onPropertyChanged(value: string, oldValue: string) {
+    this.components = this.survey.getContainerContent(this.container as any);
+  }
+}
+
+Vue.component("sv-components-container", ComponentsContainer);
+
+export default ComponentsContainer;
+</script>
diff --git a/src/vue/progressToc.vue b/src/vue/progressToc.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="containerCss">
+    <sv-list :model="listModel"></sv-list>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+import { SurveyModel, createTOCListModel } from "survey-core";
+
+@Component
+export class ProgressToc extends Vue {
+  @Prop() survey: SurveyModel;
+  @Prop() css: any;
+  containerCss = "";
+  public listModel: any = undefined;
+  constructor() {
+    super();
+    this.listModel = createTOCListModel(this.survey);
+  }
+}
+
+Vue.component("sv-progress-toc", ProgressToc);
+export default ProgressToc;
+</script>
diff --git a/src/vue/survey.vue b/src/vue/survey.vue
@@ -4,50 +4,26 @@
       <div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
       <div :class="css.container">
         <survey-header :survey="vueSurvey" />
-          <component
-                v-if="vueSurvey.isShowProgressBarOnTop && !vueSurvey.isShowStartingPage"
-                :is="'sv-progress-' + vueSurvey.progressBarType.toLowerCase()"
-                :survey="vueSurvey"
-                :css="css"
-              />
-          <survey-timerpanel
-            v-if="vueSurvey.isTimerPanelShowingOnTop && !vueSurvey.isShowStartingPage"
-            :timerModel="vueSurvey.timerModel"
-            :css="css"
-          />
+        <sv-components-container :survey="vueSurvey" :container="'top'"></sv-components-container>
         <template
           v-if="vueSurvey.isShowingPage"
         >
-          <div :class="vueSurvey.bodyCss"  :style="{maxWidth: survey.renderedWidth}" :id="pageId">
-            <sv-action-bar
-              v-if="vueSurvey.isNavigationButtonsShowingOnTop"
-              :key="navId + 'top'"
-              :model="vueSurvey.navigationBar"
-            />
-            <survey-page
-              :key="pageKey"
-              :survey="vueSurvey"
-              :page="vueSurvey.activePage"
-              :css="css"
-            />
-            <component
-              v-if="vueSurvey.isShowProgressBarOnBottom && !vueSurvey.isShowStartingPage"
-              :is="'sv-progress-' + vueSurvey.progressBarType.toLowerCase()"
-              :survey="vueSurvey"
-              :css="css"
-            />
-            <sv-action-bar
-              v-if="vueSurvey.isNavigationButtonsShowingOnBottom"
-              :key="navId + 'bottom'"
-              :model="vueSurvey.navigationBar"
-            />
+          <div :class="vueSurvey.bodyContainerCss">
+            <sv-components-container :survey="vueSurvey" :container="'left'"></sv-components-container>
+            <div :class="vueSurvey.bodyCss"  :style="{maxWidth: survey.renderedWidth}" :id="pageId">
+              <sv-components-container :survey="vueSurvey" :container="'innertop'"></sv-components-container>
+              <survey-page
+                :key="pageKey"
+                :survey="vueSurvey"
+                :page="vueSurvey.activePage"
+                :css="css"
+              />
+              <sv-components-container :survey="vueSurvey" :container="'innerbottom'"></sv-components-container>
+            </div>
+            <sv-components-container :survey="vueSurvey" :container="'right'"></sv-components-container>
           </div>
         </template>
-        <survey-timerpanel
-              v-if="vueSurvey.isTimerPanelShowingOnBottom && !vueSurvey.isShowStartingPage"
-              :timerModel="vueSurvey.timerModel"
-              :css="css"
-            />
+        <sv-components-container :survey="vueSurvey" :container="'bottom'"></sv-components-container>
         <div v-if="hasCompletedPage">
           <div
             v-html="getProcessedCompletedHtml()"