Skip to content

Commit

Permalink
work for the #6402 (panel-dynamic)
Browse files Browse the repository at this point in the history
  • Loading branch information
dmitry-kurmanov committed Jul 6, 2023
1 parent e1c98d8 commit 8d3ebdc
Show file tree
Hide file tree
Showing 11 changed files with 298 additions and 1 deletion.
64 changes: 64 additions & 0 deletions packages/survey-vue-ui/src/PanelDynamic.vue
Original file line number Diff line number Diff line change
@@ -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>
41 changes: 41 additions & 0 deletions packages/survey-vue-ui/src/PanelDynamicProgress.vue
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 30 additions & 0 deletions packages/survey-vue-ui/src/PanelDynamicProgressV2.vue
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
},
},
};
19 changes: 19 additions & 0 deletions packages/survey-vue-ui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -124,13 +133,23 @@ 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);
app.component("survey-matrixheaderrequired", MatrixHeaderRequired);
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);
Expand Down
2 changes: 1 addition & 1 deletion packages/survey-vue-ui/tests/test.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ class ExpectAssertAdapter {
}
}

const whiteList = ["matrix"];
const whiteList = ["paneldynamic"];

describe("etalon tests", () => {
markupTests.forEach((markupTest) => {
Expand Down

0 comments on commit 8d3ebdc

Please sign in to comment.