mirror of
https://github.com/grey-cat-1908/formaptix-web.git
synced 2024-09-22 19:21:59 +03:00
delete and edit question buttons
This commit is contained in:
parent
f0432c5925
commit
08e1934238
4 changed files with 68 additions and 42 deletions
|
@ -1,16 +1,14 @@
|
|||
<template>
|
||||
<div class="default-card">
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<div class="rating-options">
|
||||
<label v-for="n in range" :key="n" class="rating-option">
|
||||
<input type="radio" :value="n" class="rating-option--btn" />
|
||||
<span>{{ n }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<div class="rating-options">
|
||||
<label v-for="n in range" :key="n" class="rating-option">
|
||||
<input type="radio" :value="n" class="rating-option--btn" />
|
||||
<span>{{ n }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,18 +1,16 @@
|
|||
<template>
|
||||
<div class="default-card">
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<div class="selector">
|
||||
<div class="selector-options">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
class="selector-option default-button"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
</div>
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<div class="selector">
|
||||
<div class="selector-options">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
class="selector-option default-button"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div class="default-card">
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<div class="text-question">
|
||||
<input class="text-question-input" placeholder="Ответ на вопрос" type="text" readonly />
|
||||
</div>
|
||||
<div class="view-form-q-title">
|
||||
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
|
||||
<p class="form-q-description">{{ description }}</p>
|
||||
</div>
|
||||
<div class="text-question">
|
||||
<input class="text-question-input" placeholder="Ответ на вопрос" type="text" readonly />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -10,34 +10,66 @@ const pages = ref([
|
|||
{ text: 'Тестовый текст 1', questions: [] },
|
||||
{ text: 'лоре ипсум долор сит амет', questions: [] }
|
||||
])
|
||||
const showDialog = ref(false)
|
||||
const showCreateDialog = ref(false);
|
||||
const showEditDialog = ref(false);
|
||||
|
||||
const currentPage = ref(0);
|
||||
const currentQuestion = ref(0);
|
||||
|
||||
function addNewQuestion(event: any) {
|
||||
pages.value[pages.value.length - 1].questions.push(event)
|
||||
showDialog.value = false
|
||||
showCreateDialog.value = false
|
||||
}
|
||||
|
||||
function editQuestion(event: any) {
|
||||
pages.value[currentPage.value].questions[currentQuestion.value] = event;
|
||||
showEditDialog.value = false;
|
||||
}
|
||||
|
||||
function queueQuestionEdit(pageIndex: number, questionIndex: number) {
|
||||
currentPage.value = pageIndex;
|
||||
currentQuestion.value = questionIndex;
|
||||
showEditDialog.value = true;
|
||||
}
|
||||
|
||||
function deletePage(index: number) {
|
||||
let moveTo = index - 1;
|
||||
if (index === 0) {
|
||||
moveTo = index + 1;
|
||||
}
|
||||
pages.value[moveTo].questions.concat(pages.value[index].questions);
|
||||
pages.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function deleteQuestion(pageIndex: number, questionIndex: number) {
|
||||
pages.value[pageIndex].questions.splice(questionIndex, 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QuestionEdit v-if="showDialog" @input="addNewQuestion($event)" />
|
||||
<QuestionEdit v-if="showCreateDialog" @input="addNewQuestion($event)" />
|
||||
<QuestionEdit v-if="showEditDialog" @input="editQuestion($event)" :data="pages[currentPage].questions[currentQuestion]" />
|
||||
<div class="">
|
||||
<button @click="showDialog = true">Создать вопрос</button>
|
||||
<button @click="showCreateDialog = true">Создать вопрос</button>
|
||||
<button @click="pages.push({text: null, questions: []})">Создать страницу</button>
|
||||
<button>Сохранить</button>
|
||||
</div>
|
||||
<div style="user-select: none;">
|
||||
<div v-for="(page, index) in pages">
|
||||
<div v-for="(page, pageIndex) in pages">
|
||||
<div>
|
||||
<h3>Страница {{ index + 1 }}</h3>
|
||||
<h3>Страница {{ pageIndex + 1 }}</h3>
|
||||
<input type="text" placeholder="Описание" v-model="page.text" />
|
||||
<button @click="deletePage(pageIndex)" v-if="pages.length > 1">X</button>
|
||||
</div>
|
||||
<hr />
|
||||
<draggable fallback-class="fallbackStyleClass" ghost-class="ghost" direction="vertical" :force-fallback="true" group="questions" :list="page.questions">
|
||||
<template #item="{ element }">
|
||||
<div style="cursor: move!important;">
|
||||
<template #item="{element, index}">
|
||||
<div class="default-card" style="cursor: move!important;">
|
||||
<TextPreview v-if="element.question_type === 1" :label="element.label" :description="element.description" :required="element.required" />
|
||||
<SelectorPreview v-if="element.question_type === 2" :label="element.label" :description="element.description" :required="element.required" :options="element.options" />
|
||||
<ScalePreview v-if="element.question_type === 3" :label="element.label" :description="element.description" :required="element.required" :min="element.min_value" :max="element.max_value" :minLabel="element.min_label" :maxLabel="element.max_label"/>
|
||||
<button @click="deleteQuestion(pageIndex, index)">X</button>
|
||||
<button @click="queueQuestionEdit(pageIndex, index)">Редактировать</button>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
|
|
Loading…
Reference in a new issue