From 08e193423840dca5cdabae6ab5bddf358398d758 Mon Sep 17 00:00:00 2001
From: grey-cat-1908 <grey.cat1908@gmail.com>
Date: Tue, 10 Sep 2024 21:14:53 +0300
Subject: [PATCH] delete and edit question buttons

---
 src/components/edit/ScalePreview.vue    | 22 ++++++------
 src/components/edit/SelectorPreview.vue | 26 +++++++-------
 src/components/edit/TextPreview.vue     | 14 ++++----
 src/views/form/Create.vue               | 48 ++++++++++++++++++++-----
 4 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/src/components/edit/ScalePreview.vue b/src/components/edit/ScalePreview.vue
index 9dc7217..7b58aa9 100644
--- a/src/components/edit/ScalePreview.vue
+++ b/src/components/edit/ScalePreview.vue
@@ -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>
diff --git a/src/components/edit/SelectorPreview.vue b/src/components/edit/SelectorPreview.vue
index 9a2e2c8..a69baff 100644
--- a/src/components/edit/SelectorPreview.vue
+++ b/src/components/edit/SelectorPreview.vue
@@ -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>
diff --git a/src/components/edit/TextPreview.vue b/src/components/edit/TextPreview.vue
index 721d8d1..f117e2d 100644
--- a/src/components/edit/TextPreview.vue
+++ b/src/components/edit/TextPreview.vue
@@ -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>
 
diff --git a/src/views/form/Create.vue b/src/views/form/Create.vue
index 6d7559e..a05923f 100644
--- a/src/views/form/Create.vue
+++ b/src/views/form/Create.vue
@@ -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>