Skip to content

Commit dac037e

Browse files
timedin-detimedin-de
committed
feat: adding transition to conditional branches
Signed-off-by: TimedIn <git@timedin.net>
1 parent cd5d366 commit dac037e

1 file changed

Lines changed: 140 additions & 113 deletions

File tree

‎src/components/Questions/QuestionConditional.vue‎

Lines changed: 140 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -119,98 +119,107 @@
119119
</p>
120120

121121
<!-- List of branches -->
122-
<div
123-
v-for="(branch, branchIndex) in branches"
124-
:key="branch.id"
125-
class="branch">
126-
<div class="branch__header">
127-
<span class="branch__label">
128-
{{ getBranchLabel(branch, branchIndex) }}
129-
</span>
130-
<NcButton
131-
variant="tertiary"
132-
:aria-label="t('forms', 'Delete branch')"
133-
@click="deleteBranch(branch.id)">
134-
<template #icon>
135-
<NcIconSvgWrapper
136-
:svg="IconDelete"></NcIconSvgWrapper>
137-
</template>
138-
</NcButton>
139-
</div>
140-
141-
<!-- Branch Conditions -->
142-
<div class="branch__conditions">
143-
<BranchConditionEditor
144-
:branch="branch"
145-
:triggerType="triggerType"
146-
:options="options"
147-
@update:branch="
148-
onBranchUpdate(branchIndex, $event)
149-
" />
150-
</div>
151-
152-
<!-- Subquestions for this branch -->
153-
<div class="branch__subquestions">
154-
<QuestionList
155-
v-model="branches[branchIndex].subQuestions"
156-
:getComponent="getSubQuestionComponent"
157-
:getAnswerType="getSubQuestionAnswerType"
158-
:maxStringLengths="maxStringLengths"
159-
:baseIndex="index"
160-
:animation="200"
161-
:formId="formId"
162-
:showInsert="true"
163-
:insertMenuName="t('forms', 'Insert subquestion')"
164-
:answerTypesFilter="subQuestionAnswerTypesFilter"
165-
:hasSubtypes="hasSubtypes"
166-
:isLoadingQuestions="isLoadingQuestions"
167-
@updateProperty="
168-
(idx, prop, val) =>
169-
updateSubQuestion(
170-
branch.id,
171-
branches[branchIndex].subQuestions[idx]
172-
.id,
173-
prop,
174-
val,
175-
)
176-
"
177-
@clone="
178-
(question) =>
179-
cloneSubQuestion(branch.id, question.id)
180-
"
181-
@delete="
182-
(question) =>
183-
deleteSubQuestion(branch.id, question.id)
184-
"
185-
@moveDown="(idx) => onMoveDown(idx, branchIndex)"
186-
@moveUp="(idx) => onMoveUp(idx, branchIndex)"
187-
@orderChange="onQuestionOrderChange(branchIndex)"
188-
@dragStart="isDragging = true"
189-
@dragEnd="isDragging = false"
190-
@addQuestion="
191-
(type, subtype, position) =>
192-
addSubQuestion(branch.id, type, position)
193-
" />
194-
195-
<!-- Add subquestion button -->
196-
<NcActions :aria-label="t('forms', 'Add subquestion')">
197-
<template #icon>
198-
<NcIconSvgWrapper :svg="IconPlus" />
199-
</template>
200-
<NcActionButton
201-
v-for="sqType in subQuestionTypesList"
202-
:key="sqType.type"
203-
:closeAfterClick="true"
204-
@click="addSubQuestion(branch.id, sqType.type)">
122+
<TransitionGroup
123+
tag="div"
124+
:name="isDragging ? undefined : 'branch-list'">
125+
<div
126+
v-for="(branch, branchIndex) in branches"
127+
:key="branch.id"
128+
class="branch">
129+
<div class="branch__header">
130+
<span class="branch__label">
131+
{{ getBranchLabel(branch, branchIndex) }}
132+
</span>
133+
<NcButton
134+
variant="tertiary"
135+
:aria-label="t('forms', 'Delete branch')"
136+
@click="deleteBranch(branch.id)">
137+
<template #icon>
138+
<NcIconSvgWrapper
139+
:svg="IconDelete"></NcIconSvgWrapper>
140+
</template>
141+
</NcButton>
142+
</div>
143+
144+
<!-- Branch Conditions -->
145+
<div class="branch__conditions">
146+
<BranchConditionEditor
147+
:branch="branch"
148+
:triggerType="triggerType"
149+
:options="options"
150+
@update:branch="
151+
onBranchUpdate(branchIndex, $event)
152+
" />
153+
</div>
154+
155+
<!-- Subquestions for this branch -->
156+
<div class="branch__subquestions">
157+
<QuestionList
158+
v-model="branches[branchIndex].subQuestions"
159+
:getComponent="getSubQuestionComponent"
160+
:getAnswerType="getSubQuestionAnswerType"
161+
:maxStringLengths="maxStringLengths"
162+
:baseIndex="index"
163+
:animation="200"
164+
:formId="formId"
165+
:showInsert="true"
166+
:insertMenuName="
167+
t('forms', 'Insert subquestion')
168+
"
169+
:answerTypesFilter="subQuestionAnswerTypesFilter"
170+
:hasSubtypes="hasSubtypes"
171+
:isLoadingQuestions="isLoadingQuestions"
172+
@updateProperty="
173+
(idx, prop, val) =>
174+
updateSubQuestion(
175+
branch.id,
176+
branches[branchIndex].subQuestions[
177+
idx
178+
].id,
179+
prop,
180+
val,
181+
)
182+
"
183+
@clone="
184+
(question) =>
185+
cloneSubQuestion(branch.id, question.id)
186+
"
187+
@delete="
188+
(question) =>
189+
deleteSubQuestion(branch.id, question.id)
190+
"
191+
@moveDown="(idx) => onMoveDown(idx, branchIndex)"
192+
@moveUp="(idx) => onMoveUp(idx, branchIndex)"
193+
@orderChange="onQuestionOrderChange(branchIndex)"
194+
@dragStart="isDragging = true"
195+
@dragEnd="isDragging = false"
196+
@addQuestion="
197+
(type, subtype, position) =>
198+
addSubQuestion(branch.id, type, position)
199+
" />
200+
201+
<!-- Add subquestion button -->
202+
<NcActions
203+
:aria-label="t('forms', 'Add subquestion')">
205204
<template #icon>
206-
<NcIconSvgWrapper :svg="sqType.icon" />
205+
<NcIconSvgWrapper :svg="IconPlus" />
207206
</template>
208-
{{ sqType.label }}
209-
</NcActionButton>
210-
</NcActions>
207+
<NcActionButton
208+
v-for="sqType in subQuestionTypesList"
209+
:key="sqType.type"
210+
:closeAfterClick="true"
211+
@click="
212+
addSubQuestion(branch.id, sqType.type)
213+
">
214+
<template #icon>
215+
<NcIconSvgWrapper :svg="sqType.icon" />
216+
</template>
217+
{{ sqType.label }}
218+
</NcActionButton>
219+
</NcActions>
220+
</div>
211221
</div>
212-
</div>
213-
222+
</TransitionGroup>
214223
<!-- Add new branch button -->
215224
<NcButton variant="secondary" @click="addBranch">
216225
<template #icon>
@@ -221,30 +230,32 @@
221230
</div>
222231

223232
<!-- Submit Mode: Show only the active branch's subquestions -->
224-
<div v-else-if="activeBranches?.length" class="active-subquestions">
225-
<div
226-
v-for="activeBranch in activeBranches"
227-
:key="activeBranch.id">
228-
<component
229-
:is="getSubQuestionComponentName(subQuestion.type)"
230-
v-for="(
231-
subQuestion, subIndex
232-
) in activeBranch.subQuestions"
233-
:key="subQuestion.id"
234-
ref="subQuestions"
235-
v-bind="subQuestion"
236-
:formId="formId"
237-
:index="subIndex + index + 1"
238-
:maxStringLengths="maxStringLengths"
239-
:answerType="
240-
getSubQuestionAnswerTypeConfig(subQuestion.type)
241-
"
242-
:readOnly="true"
243-
:values="getSubQuestionValues(subQuestion.id)"
244-
@update:values="
245-
onSubQuestionValueChange(subQuestion.id, $event)
246-
" />
247-
</div>
233+
<div v-else class="active-subquestions">
234+
<TransitionGroup tag="div" name="branch-list">
235+
<div
236+
v-for="activeBranch in activeBranches"
237+
:key="activeBranch.id">
238+
<component
239+
:is="getSubQuestionComponentName(subQuestion.type)"
240+
v-for="(
241+
subQuestion, subIndex
242+
) in activeBranch.subQuestions"
243+
:key="subQuestion.id"
244+
ref="subQuestions"
245+
v-bind="subQuestion"
246+
:formId="formId"
247+
:index="subIndex + index + 1"
248+
:maxStringLengths="maxStringLengths"
249+
:answerType="
250+
getSubQuestionAnswerTypeConfig(subQuestion.type)
251+
"
252+
:readOnly="true"
253+
:values="getSubQuestionValues(subQuestion.id)"
254+
@update:values="
255+
onSubQuestionValueChange(subQuestion.id, $event)
256+
" />
257+
</div>
258+
</TransitionGroup>
248259
</div>
249260
</div>
250261
</div>
@@ -1223,4 +1234,20 @@ export default {
12231234
padding-left: 16px;
12241235
border-left: 3px solid var(--color-primary-element);
12251236
}
1237+
1238+
.branch-list-move,
1239+
.branch-list-enter-active,
1240+
.branch-list-leave-active {
1241+
transition: all var(--animation-slow) ease;
1242+
}
1243+
1244+
.branch-list-enter-from,
1245+
.branch-list-leave-to {
1246+
opacity: 0;
1247+
transform: translateX(var(--clickable-area-large));
1248+
}
1249+
1250+
.branch-list-leave-active {
1251+
position: absolute;
1252+
}
12261253
</style>

0 commit comments

Comments
 (0)