mrkrk/formaptix-web
1
0
Fork 0
mirror of https://github.com/grey-cat-1908/formaptix-web.git synced 2024-09-22 19:21:59 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

delete and edit question buttons

Browse source
This commit is contained in:
grey-cat-1908 2024-09-10 21:14:53 +03:00
parent f0432c5925
commit 08e1934238
4 changed files with 68 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/edit/ScalePreview.vue
View file

@ -1,16 +1,14 @@
<template> <template>
<div class="default-card"> <div class="view-form-q-title">
<div class="view-form-q-title"> <h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3> <p class="form-q-description">{{ description }}</p>
<p class="form-q-description">{{ description }}</p> </div>
</div> <div class="rating">
<div class="rating"> <div class="rating-options">
<div class="rating-options"> <label v-for="n in range" :key="n" class="rating-option">
<label v-for="n in range" :key="n" class="rating-option"> <input type="radio" :value="n" class="rating-option--btn" />
<input type="radio" :value="n" class="rating-option--btn" /> <span>{{ n }}</span>
<span>{{ n }}</span> </label>
</label>
</div>
</div> </div>
</div> </div>
</template> </template>

26
src/components/edit/SelectorPreview.vue
View file

@ -1,18 +1,16 @@
<template> <template>
<div class="default-card"> <div class="view-form-q-title">
<div class="view-form-q-title"> <h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3> <p class="form-q-description">{{ description }}</p>
<p class="form-q-description">{{ description }}</p> </div>
</div> <div class="selector">
<div class="selector"> <div class="selector-options">
<div class="selector-options"> <div
<div v-for="(option, index) in options"
v-for="(option, index) in options" :key="index"
:key="index" class="selector-option default-button"
class="selector-option default-button" >
> <span>{{ option.label }}</span>
<span>{{ option.label }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>

14
src/components/edit/TextPreview.vue
View file

@ -1,12 +1,10 @@
<template> <template>
<div class="default-card"> <div class="view-form-q-title">
<div class="view-form-q-title"> <h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3>
<h3 class="form-q-title">{{ label }} <span style="color: red" v-if="required">*</span></h3> <p class="form-q-description">{{ description }}</p>
<p class="form-q-description">{{ description }}</p> </div>
</div> <div class="text-question">
<div class="text-question"> <input class="text-question-input" placeholder="Ответ на вопрос" type="text" readonly />
<input class="text-question-input" placeholder="Ответ на вопрос" type="text" readonly />
</div>
</div> </div>
</template> </template>

48
src/views/form/Create.vue
View file

@ -10,34 +10,66 @@ const pages = ref([
{ text: 'Тестовый текст 1', questions: [] }, { text: 'Тестовый текст 1', questions: [] },
{ text: 'лоре ипсум долор сит амет', 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) { function addNewQuestion(event: any) {
pages.value[pages.value.length - 1].questions.push(event) 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> </script>
<template> <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=""> <div class="">
<button @click="showDialog = true">Создать вопрос</button> <button @click="showCreateDialog = true">Создать вопрос</button>
<button @click="pages.push({text: null, questions: []})">Создать страницу</button> <button @click="pages.push({text: null, questions: []})">Создать страницу</button>
<button>Сохранить</button> <button>Сохранить</button>
</div> </div>
<div style="user-select: none;"> <div style="user-select: none;">
<div v-for="(page, index) in pages"> <div v-for="(page, pageIndex) in pages">
<div> <div>
<h3>Страница {{ index + 1 }}</h3> <h3>Страница {{ pageIndex + 1 }}</h3>
<input type="text" placeholder="Описание" v-model="page.text" /> <input type="text" placeholder="Описание" v-model="page.text" />
<button @click="deletePage(pageIndex)" v-if="pages.length > 1">X</button>
</div> </div>
<hr /> <hr />
<draggable fallback-class="fallbackStyleClass" ghost-class="ghost" direction="vertical" :force-fallback="true" group="questions" :list="page.questions"> <draggable fallback-class="fallbackStyleClass" ghost-class="ghost" direction="vertical" :force-fallback="true" group="questions" :list="page.questions">
<template #item="{ element }"> <template #item="{element, index}">
<div style="cursor: move!important;"> <div class="default-card" style="cursor: move!important;">
<TextPreview v-if="element.question_type === 1" :label="element.label" :description="element.description" :required="element.required" /> <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" /> <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"/> <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> </div>
</template> </template>
</draggable> </draggable>