From 8d3ebdc19ac9fc4766e12535b2fd4ec203592f94 Mon Sep 17 00:00:00 2001
From: dmitrykurmanov <kurmanov.work@gmail.com>
Date: Thu, 6 Jul 2023 19:59:49 +0400
Subject: [PATCH] work for the
 https://github.com/surveyjs/survey-library/issues/6402 (panel-dynamic)

---
 packages/survey-vue-ui/src/PanelDynamic.vue   | 64 +++++++++++++++++++
 .../src/PanelDynamicProgress.vue              | 41 ++++++++++++
 .../src/PanelDynamicProgressV2.vue            | 30 +++++++++
 .../PaneldynamicAddBtn.vue                    | 30 +++++++++
 .../PaneldynamicNextBtn.vue                   | 23 +++++++
 .../PaneldynamicPrevBtn.vue                   | 23 +++++++
 .../PaneldynamicProgressText.vue              | 14 ++++
 .../PaneldynamicRemoveBtn.vue                 | 38 +++++++++++
 .../components/paneldynamic-actions/action.ts | 15 +++++
 packages/survey-vue-ui/src/index.ts           | 19 ++++++
 packages/survey-vue-ui/tests/test.spec.ts     |  2 +-
 11 files changed, 298 insertions(+), 1 deletion(-)
 create mode 100644 packages/survey-vue-ui/src/PanelDynamic.vue
 create mode 100644 packages/survey-vue-ui/src/PanelDynamicProgress.vue
 create mode 100644 packages/survey-vue-ui/src/PanelDynamicProgressV2.vue
 create mode 100644 packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
 create mode 100644 packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue
 create mode 100644 packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue
 create mode 100644 packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicProgressText.vue
 create mode 100644 packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
 create mode 100644 packages/survey-vue-ui/src/components/paneldynamic-actions/action.ts

diff --git a/packages/survey-vue-ui/src/PanelDynamic.vue b/packages/survey-vue-ui/src/PanelDynamic.vue
new file mode 100644
index 0000000000..e71388d3a9
--- /dev/null
+++ b/packages/survey-vue-ui/src/PanelDynamic.vue
@@ -0,0 +1,64 @@
+<template>
+  <div :class="question.cssClasses.root">
+    <div v-if="question.getShowNoEntriesPlaceholder()" :class="question.cssClasses.noEntriesPlaceholder">
+      <span>
+        <survey-string :locString="question.locNoEntriesText"></survey-string>
+      </span>
+      <sv-paneldynamic-add-btn :data="{ question }" />
+    </div>
+    <div :class="question.cssClasses.progress" v-if="!getShowLegacyNavigation() && question.isProgressTopShowing && question.isRangeShowing">
+      <div
+        :class="question.cssClasses.progressBar"
+        :style="{ width: question.progress }"
+        role="progressbar"
+      ></div>
+    </div>
+    <survey-paneldynamicprogress
+      v-if="getShowLegacyNavigation() && question.isProgressTopShowing"
+      :question="question"
+    />
+    <template v-for="(panel, index) in getRenderedPanels()" :key="panel.id">
+      <div :class="question.getPanelWrapperCss()">
+        <survey-panel :question="panel" :css="css" />
+        <sv-paneldynamic-remove-btn v-if="question.panelRemoveButtonLocation === 'right' && question.canRemovePanel && panel.state !== 'collapsed'" :data="{ question, panel }" />
+      </div>
+      <hr :class="question.cssClasses.separator" v-if="question.isRenderModeList && index < question.visiblePanelCount - 1" :key="'separator' + panel.id" />
+    </template>
+    <survey-paneldynamicprogress
+      v-if="getShowLegacyNavigation() && question.isProgressBottomShowing"
+      :question="question"
+    />
+    <sv-paneldynamic-add-btn v-if="getShowLegacyNavigation() && question.isRenderModeList" :data="{ question }" />
+    <survey-paneldynamicprogress-v2 v-if="question.showNavigation" :question="question" />
+  </div>
+</template>
+
+<script lang="ts">
+import { PanelModel, QuestionPanelDynamicModel } from "survey-core";
+import { QuestionVue } from "./base";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  mixins: [QuestionVue],
+  name: "survey-paneldynamic",
+  props: {
+    question: QuestionPanelDynamicModel,
+  },
+  data: (vm: any) => {
+    return {
+      getRenderedPanels(): PanelModel[] {
+        if (vm.question.isRenderModeList) return vm.question.panels;
+        const panels = [];
+        if (vm.question.currentPanel) {
+          panels.push(vm.question.currentPanel);
+        }
+        return panels;
+      },
+      getShowLegacyNavigation() {
+        return vm.question["showLegacyNavigation"];
+      },
+    };
+  },
+});
+</script>
diff --git a/packages/survey-vue-ui/src/PanelDynamicProgress.vue b/packages/survey-vue-ui/src/PanelDynamicProgress.vue
new file mode 100644
index 0000000000..d783da2993
--- /dev/null
+++ b/packages/survey-vue-ui/src/PanelDynamicProgress.vue
@@ -0,0 +1,41 @@
+<template>
+  <div :class="this.getСssClass()">
+    <div style="clear: both" :class="this.getСssClass()">
+      <div :class="question.cssClasses.progressContainer">
+          <sv-paneldynamic-prev-btn :data="{ question: question }" />
+        <div :class="question.cssClasses.progress" v-if="question.isRangeShowing">
+          <div
+            :class="question.cssClasses.progressBar"
+            :style="{ width: question.progress }"
+            role="progressbar"
+          ></div>
+        </div>
+          <sv-paneldynamic-next-btn :data="{ question: question }" />
+      </div>
+      <sv-paneldynamic-add-btn :data="{ question: question }" />
+      <sv-paneldynamic-progress-text :data="{ question: question }" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { QuestionPanelDynamicModel } from "survey-core";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  name: "survey-paneldynamicprogress",
+  props: {
+    question: QuestionPanelDynamicModel,
+  },
+  data: (vm: any) => {
+    return {
+      getСssClass() {
+        return vm.question.isProgressTopShowing
+          ? vm.question.cssClasses.progressTop
+          : vm.question.cssClasses.progressBottom;
+      },
+    };
+  },
+});
+</script>
diff --git a/packages/survey-vue-ui/src/PanelDynamicProgressV2.vue b/packages/survey-vue-ui/src/PanelDynamicProgressV2.vue
new file mode 100644
index 0000000000..25ede494f1
--- /dev/null
+++ b/packages/survey-vue-ui/src/PanelDynamicProgressV2.vue
@@ -0,0 +1,30 @@
+<template>
+  <div :class="question.cssClasses.footer" v-if="!!question.cssClasses.footer">
+     <hr :class="question.cssClasses.separator"/>
+     <div :class="question.cssClasses.progress" v-if="question.isRangeShowing && question.isProgressBottomShowing">
+       <div
+         :class="question.cssClasses.progressBar"
+         :style="{ width: question.progress }"
+         role="progressbar"
+       ></div>
+     </div>
+     <div :class="question.cssClasses.footerButtonsContainer" v-if="question.footerToolbar.visibleActions.length">
+         <sv-action-bar :model="question.footerToolbar"/>
+     </div>
+ </div>
+</template>
+
+<script lang="ts">
+import { QuestionPanelDynamicModel } from "survey-core";
+import { defineComponent } from "vue";
+import PanelDynamicProgress from "./PanelDynamicProgress.vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  name: "survey-paneldynamicprogress-v2",
+  props: {
+    question: QuestionPanelDynamicModel,
+  },
+  mixins: [PanelDynamicProgress],
+});
+</script>
diff --git a/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
new file mode 100644
index 0000000000..cd3b810a41
--- /dev/null
+++ b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
@@ -0,0 +1,30 @@
+<template>
+  <button
+    type="button"
+    v-if="question.canAddPanel"
+    :class="question.getAddButtonCss()"
+    @click="addPanelClick"
+  >
+    <span :class="question.cssClasses.buttonAddText">
+      {{ question.panelAddText }}
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+import { PaneldynamicActionMixin } from "./action";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  mixins: [PaneldynamicActionMixin],
+  name: "sv-paneldynamic-add-btn",
+  data: (vm: any) => {
+    return {
+      addPanelClick() {
+        vm.question.addPanelUI();
+      },
+    };
+  },
+});
+</script>
diff --git a/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue
new file mode 100644
index 0000000000..9c114b605e
--- /dev/null
+++ b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue
@@ -0,0 +1,23 @@
+<template>
+  <div :title="question.panelNextText" @click="nextPanelClick" :class="question.getNextButtonCss()">
+    <sv-svg-icon :iconName="question.cssClasses.progressBtnIcon" :size="'auto'"></sv-svg-icon>
+  </div>
+</template>
+
+<script lang="ts">
+import { PaneldynamicActionMixin } from "./action";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  mixins: [PaneldynamicActionMixin],
+  name: "sv-paneldynamic-next-btn",
+  data: (vm: any) => {
+    return {
+      nextPanelClick() {
+        vm.question.goToNextPanel();
+      },
+    };
+  },
+});
+</script>
diff --git a/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue
new file mode 100644
index 0000000000..e95afb7e98
--- /dev/null
+++ b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue
@@ -0,0 +1,23 @@
+<template>
+  <div :title="question.panelPrevText" @click="prevPanelClick" :class="question.getPrevButtonCss()">
+    <sv-svg-icon :iconName="question.cssClasses.progressBtnIcon" :size="'auto'"></sv-svg-icon>
+  </div>
+</template>
+
+<script lang="ts">
+import { PaneldynamicActionMixin } from "./action";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  mixins: [PaneldynamicActionMixin],
+  name: "sv-paneldynamic-prev-btn",
+  data: (vm: any) => {
+    return {
+      prevPanelClick() {
+        vm.question.goToPrevPanel();
+      },
+    };
+  },
+});
+</script>
diff --git a/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicProgressText.vue b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicProgressText.vue
new file mode 100644
index 0000000000..c707dde82e
--- /dev/null
+++ b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicProgressText.vue
@@ -0,0 +1,14 @@
+<template>
+  <div :class="question.cssClasses.progressText">{{ question.progressText }}</div>
+</template>
+
+<script lang="ts">
+import { PaneldynamicActionMixin } from "./action";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  mixins: [PaneldynamicActionMixin],
+  name: "sv-paneldynamic-progress-text",
+});
+</script>
diff --git a/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
new file mode 100644
index 0000000000..b47b697224
--- /dev/null
+++ b/packages/survey-vue-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
@@ -0,0 +1,38 @@
+<template>
+  <button
+    type="button"
+    :class="question.getPanelRemoveButtonCss()"
+    @click="removePanelClick(panel)"
+  >
+    <span :class="question.cssClasses.buttonRemoveText">{{
+      question.panelRemoveText
+    }}</span>
+    <span :class="question.cssClasses.iconRemove"></span>
+  </button>
+</template>
+
+<script lang="ts">
+import { PaneldynamicActionMixin } from "./action";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  // eslint-disable-next-line
+  mixins: [PaneldynamicActionMixin],
+  name: "sv-paneldynamic-remove-btn",
+  data: (vm: any) => {
+    return {
+      removePanelClick(panel: any) {
+        if (!vm.question.isInputReadOnly) {
+          vm.question.removePanelUI(panel);
+        }
+      },
+    };
+  },
+  computed: {
+    // readonly
+    panel(vm: any): any {
+      return (vm.item && vm.item.data.panel) || vm.data.panel;
+    },
+  },
+});
+</script>
diff --git a/packages/survey-vue-ui/src/components/paneldynamic-actions/action.ts b/packages/survey-vue-ui/src/components/paneldynamic-actions/action.ts
new file mode 100644
index 0000000000..326a28d978
--- /dev/null
+++ b/packages/survey-vue-ui/src/components/paneldynamic-actions/action.ts
@@ -0,0 +1,15 @@
+import type { ComponentOptions } from "vue";
+import { Action, QuestionPanelDynamicModel } from "survey-core";
+
+export const PaneldynamicActionMixin: ComponentOptions = {
+  props: {
+    data: Object,
+    item: Action,
+  },
+  computed: {
+    // readonly
+    question(vm: any): QuestionPanelDynamicModel {
+      return (vm.item && vm.item.data.question) || vm.data.question;
+    },
+  },
+};
diff --git a/packages/survey-vue-ui/src/index.ts b/packages/survey-vue-ui/src/index.ts
index 1fa37f5525..edcb5ba1e8 100644
--- a/packages/survey-vue-ui/src/index.ts
+++ b/packages/survey-vue-ui/src/index.ts
@@ -55,6 +55,15 @@ import MatrixHeaderRequired from "./MatrixHeaderRequired.vue";
 import MatrixCell from "./MatrixCell.vue";
 import MatrixDynamic from "./MatrixDynamic.vue";
 
+import PanelDynamic from "./PanelDynamic.vue";
+import PanelDynamicProgress from "./PanelDynamicProgress.vue";
+import PanelDynamicProgressV2 from "./PanelDynamicProgressV2.vue";
+import PaneldynamicAddBtn from "./components/paneldynamic-actions/PaneldynamicAddBtn.vue";
+import PaneldynamicNextBtn from "./components/paneldynamic-actions/PaneldynamicNextBtn.vue";
+import PaneldynamicPrevBtn from "./components/paneldynamic-actions/PaneldynamicPrevBtn.vue";
+import PaneldynamicRemoveBtn from "./components/paneldynamic-actions/PaneldynamicRemoveBtn.vue";
+import PaneldynamicProgressText from "./components/paneldynamic-actions/PaneldynamicProgressText.vue";
+
 import Errors from "./Errors.vue";
 import QuestionComment from "./QuestionComment.vue";
 import TitleElement from "./components/title/TitleElement.vue";
@@ -124,6 +133,7 @@ export function registerComponents(app: any) {
   app.component("sv-boolean-checkbox", BooleanCheckbox);
   app.component("survey-multipletext", MultipleText);
   app.component("survey-multipletext-item", MultipletextItem);
+
   app.component("survey-matrix", Matrix);
   app.component("survey-matrixdropdown", MatrixDropdown);
   app.component("survey-matrixtable", MatrixTable);
@@ -131,6 +141,15 @@ export function registerComponents(app: any) {
   app.component("survey-matrixcell", MatrixCell);
   app.component("survey-matrixdynamic", MatrixDynamic);
 
+  app.component("survey-paneldynamic", PanelDynamic);
+  app.component("survey-paneldynamicprogress", PanelDynamicProgress);
+  app.component("survey-paneldynamicprogress-v2", PanelDynamicProgressV2);
+  app.component("sv-paneldynamic-add-btn", PaneldynamicAddBtn);
+  app.component("sv-paneldynamic-next-btn", PaneldynamicNextBtn);
+  app.component("sv-paneldynamic-prev-btn", PaneldynamicPrevBtn);
+  app.component("sv-paneldynamic-remove-btn", PaneldynamicRemoveBtn);
+  app.component("sv-paneldynamic-progress-text", PaneldynamicProgressText);
+
   app.component("sv-components-container", Container);
   app.component("sv-progress-pages", Progress);
   app.component("sv-progress-questions", Progress);
diff --git a/packages/survey-vue-ui/tests/test.spec.ts b/packages/survey-vue-ui/tests/test.spec.ts
index 29022f9023..bda069233b 100644
--- a/packages/survey-vue-ui/tests/test.spec.ts
+++ b/packages/survey-vue-ui/tests/test.spec.ts
@@ -51,7 +51,7 @@ class ExpectAssertAdapter {
   }
 }
 
-const whiteList = ["matrix"];
+const whiteList = ["paneldynamic"];
 
 describe("etalon tests", () => {
   markupTests.forEach((markupTest) => {