fix: event test form

src/components/Widgets/Other/Shop/ShopCompleteInfo/ShopCompleteInfo.vue

@@ -128,9 +128,7 @@
           پرسشنامه
         </q-banner>
         <show-event-test v-if="!eventTestAnswerBook.loading"
-                         :answer-book-id="eventTestAnswerBook.id"
-                         @sentsuccess="editEntity"
-                         @sentfailed="sentTestFailed" />
+                         :answer-book-id="eventTestAnswerBook.id" />
         <div v-else>
           کمی صبر کنید...
         </div>
@@ -268,6 +266,15 @@ export default {
       this.getEventTest()
     }
     this.mounted = true
+
+    this.$bus.on('event-confirmation-step-test-sent-answer-sending', () => {
+    })
+    this.$bus.on('event-confirmation-step-test-sent-answer-success', () => {
+      this.successSentTest()
+    })
+    this.$bus.on('event-confirmation-step-test-sent-answer-failed', () => {
+      this.sentTestFailed()
+    })
   },
   methods: {
     getEventTest () {
@@ -293,6 +300,9 @@ export default {
     sentTestFailed () {
       this.panel = 'userInfo'
     },
+    successSentTest () {
+      this.editEntity()
+    },
     editEntity () {
       if (this.eventTestAnswerBook.id && this.panel !== 'eventTest') {
         this.panel = 'eventTest'

src/components/Widgets/Other/Shop/ShopCompleteInfo/components/AllQuestions.vue

@@ -1,27 +1,58 @@
 <template>
   <div class="AllQuestions">
-    <q-list separator>
-      <!--      <q-item v-for="(question, questionIndex) in answerBook.test_info.test_set_info.test_set_questions"-->
-      <q-item v-for="(answerSheet, answerSheetIndex) in answerBook.answer_sheet_info.list"
-              :key="answerSheetIndex"
-              clickable>
-        <q-item-section>
-          <q-item-label v-html="'<span>' + (answerSheetIndex + 1) + ' - </span>' + answerSheet.test_set_question_info.question_info.text" />
-          <q-item-label>
-            <entity-create v-if="mounted"
-                           :ref="'entityCreate_' + answerSheetIndex.toString()"
-                           v-model:value="questionInputs[answerSheetIndex]"
-                           :api="singleQuestionSendAnswerApi"
-                           :default-layout="false"
-                           :show-close-button="false"
-                           :show-edit-button="false"
-                           :show-expand-button="false"
-                           :show-save-button="false"
-                           :show-reload-button="false" />
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-    </q-list>
+    <div class="question-navigator">
+      <q-btn v-if="questionPanel < answerBook.answer_sheet_info.list.length"
+             color="indigo-7"
+             outline
+             size="sm"
+             class="btn-next-question"
+             @click="changeQuestion(questionPanel + 1)">
+        سوال بعدی
+        <q-icon name="arrow_back_ios" />
+      </q-btn>
+      <q-btn v-if="questionPanel > 1"
+             color="indigo-7"
+             outline
+             size="sm"
+             class="btn-prev-question"
+             @click="changeQuestion(questionPanel - 1)">
+        <q-icon name="arrow_forward_ios" />
+        سوال قبلی
+      </q-btn>
+      <q-linear-progress size="32px"
+                         :value="(questionPanel / answerBook.answer_sheet_info.list.length)"
+                         color="light-blue-5">
+        <div class="absolute-full flex flex-center">
+          <q-badge color="white"
+                   text-color="accent">
+            سوال
+            {{ questionPanel }}
+            از
+            {{ answerBook.answer_sheet_info.list.length }}
+          </q-badge>
+        </div>
+      </q-linear-progress>
+    </div>
+    <q-tab-panels v-model="questionPanel"
+                  animated>
+      <q-tab-panel v-for="(answerSheet, answerSheetIndex) in answerBook.answer_sheet_info.list"
+                   :key="answerSheetIndex"
+                   :name="(answerSheetIndex + 1)">
+        <div v-html="'<span>' + (answerSheetIndex + 1) + ' - </span>' + answerSheet.test_set_question_info.question_info.text" />
+        <div>
+          <entity-create v-if="mounted"
+                         :ref="'entityCreate_' + answerSheetIndex.toString()"
+                         v-model:value="questionInputs[answerSheetIndex]"
+                         :api="singleQuestionSendAnswerApi"
+                         :default-layout="false"
+                         :show-close-button="false"
+                         :show-edit-button="false"
+                         :show-expand-button="false"
+                         :show-save-button="false"
+                         :show-reload-button="false" />
+        </div>
+      </q-tab-panel>
+    </q-tab-panels>
     <q-separator class="q-my-lg" />
     <q-card-actions class="flex justify-end AllQuestionsForm">
       <q-btn color="primary"
@@ -51,19 +82,13 @@ export default {
       default: new AnswerBook()
     }
   },
-  emits: ['sending', 'sentsuccess', 'sentfailed'],
   data () {
     return {
       mounted: false,
+      questionPanel: 1,
       questionInputs: [],
       singleQuestionSendAnswerApi: APIGateway.answerSheet.APIAdresses.base,
-      api: APIGateway.answerBook.APIAdresses.submitOverallAnswer(this.$route.params.answer_book_id),
-      inputs: [
-        // { type: 'inputEditor', name: 'answer_text', label: 'متن پاسخ', placeholder: ' ', col: 'col-12' },
-        { type: 'input', name: 'answer_text', label: 'متن پاسخ', placeholder: ' ', inputType: 'textarea', col: 'col-12' },
-        { type: 'file', name: 'answer_attachment', label: 'فایل جامع پاسخ سوالات', placeholder: ' ', col: 'col-12' },
-        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'ارسال پرسشنامه', placeholder: ' ', atClick: () => {}, col: 'col-12' }
-      ]
+      api: APIGateway.answerBook.APIAdresses.submitOverallAnswer(this.$route.params.answer_book_id)
     }
   },
   mounted () {
@@ -71,15 +96,14 @@ export default {
     this.mounted = true
   },
   methods: {
+    changeQuestion (newNumber) {
+      this.questionPanel = newNumber
+    },
     setInputs () {
-      FormBuilderAssist.setAttributeByName(this.inputs, 'btn', 'atClick', this.sendAnswers)
-      FormBuilderAssist.setAttributeByName(this.inputs, 'answer_text', 'value', this.answerBook.overall_answer_text)
-      FormBuilderAssist.setAttributeByName(this.inputs, 'answer_attachment', 'value', this.answerBook.overall_answer_attachment)
-
       this.answerBook.answer_sheet_info.list.forEach((answerSheetItem, answerSheetIndex) => {
         this.questionInputs.push([
-          { type: 'input', name: 'answer_text', label: 'متن پاسخ', placeholder: ' ', inputType: 'textarea', col: 'col-12' },
-          { type: 'file', name: 'answer_attachment', label: 'فایل پیوست', placeholder: ' ', col: 'col-12' },
+          { type: 'input', name: 'answer_text', label: 'متن پاسخ', placeholder: ' ', value: answerSheetItem.answer_text, inputType: 'textarea', col: 'col-12' },
+          { type: 'file', name: 'answer_attachment', label: 'فایل پیوست', placeholder: ' ', value: answerSheetItem.answer_attachment, col: 'col-12' },
           { type: 'hidden', name: 'answer_book', value: this.answerBook.id },
           { type: 'hidden', name: 'test_set_question', value: answerSheetItem.test_set_question },
           {
@@ -89,10 +113,23 @@ export default {
             label: 'ثبت پاسخ',
             placeholder: ' ',
             atClick: () => {
+              const answerText = FormBuilderAssist.getInputsByName(this.questionInputs[answerSheetIndex], 'answer_text').value
+              if (!answerText) {
+                this.$q.notify({
+                  type: 'negative',
+                  message: 'لطفا متن پاسخ را کامل کنید.'
+                })
+                return
+              }
               const entityCreate = this.$refs['entityCreate_' + answerSheetIndex.toString()][0]
               entityCreate.entityLoading = true
               entityCreate.createEntity(false)
                 .then(() => {
+                  if (this.questionPanel < this.answerBook.answer_sheet_info.list.length) {
+                    this.changeQuestion(this.questionPanel + 1)
+                  } else if (this.questionPanel === this.answerBook.answer_sheet_info.list.length) {
+                    this.confirmAnswers()
+                  }
                   entityCreate.entityLoading = false
                 })
                 .catch(() => {
@@ -105,38 +142,13 @@ export default {
       })
     },
     confirmAnswers () {
-      this.$emit('sending')
+      this.$bus.emit('event-confirmation-step-test-sent-answer-sending')
       APIGateway.answerBook.confirmAnswers(this.answerBook.id)
         .then(() => {
-          this.$emit('sentsuccess')
-        })
-        .catch(() => {
-          this.$emit('sentfailed')
-        })
-    },
-    sendAnswers () {
-      const answerText = FormBuilderAssist.getInputsByName(this.inputs, 'answer_text').value
-      if (!answerText) {
-        this.$q.notify({
-          type: 'negative',
-          message: 'لطفا متن پاسخ را کامل کنید.'
-        })
-        return
-      }
-
-      this.$emit('sending')
-      this.$refs.entityCreate.createEntity(false)
-        .then(() => {
-          APIGateway.answerBook.confirmAnswers(this.answerBook.id)
-            .then(() => {
-              this.$emit('sentsuccess')
-            })
-            .catch(() => {
-              this.$emit('sentfailed')
-            })
+          this.$bus.emit('event-confirmation-step-test-sent-answer-success')
         })
         .catch(() => {
-          this.$emit('sentfailed')
+          this.$bus.emit('event-confirmation-step-test-sent-answer-failed')
         })
     }
   }
@@ -145,16 +157,17 @@ export default {
 
 <style scoped lang="scss">
 .AllQuestions {
-  :deep(.q-list) {
-    .q-item {
-      .q-item__section {
-        display: inline-block;
+  .question-navigator {
+    position: relative;
+    :deep(.q-btn) {
+      position: absolute;
+      top: 0;
+      z-index: 2;
+      &.btn-next-question {
+        right: 0;
       }
-      .q-badge {
-        background: #ACBCAE 0 0 no-repeat padding-box;
-        border-radius: 18px;
-        height: 32px;
-        padding: 4px 16px;
+      &.btn-prev-question {
+        left: 0;
       }
     }
   }

src/components/Widgets/Other/Shop/ShopCompleteInfo/components/ShowEventTest.vue

@@ -6,10 +6,7 @@
       </q-card-section>
       <q-separator />
       <template v-if="mounted">
-        <all-questions :answer-book="localAnswerBook"
-                       @sentsuccess="onAllQuestionsSentSuccess"
-                       @sending="onAllQuestionsSending"
-                       @sentfailed="onAllQuestionsSentFailed" />
+        <all-questions :answer-book="localAnswerBook" />
       </template>
     </q-card>
     <div v-else>
@@ -32,7 +29,6 @@ export default {
       default: null
     }
   },
-  emits: ['sending', 'sentsuccess', 'sentfailed'],
   data () {
     return {
       mounted: false,
@@ -47,22 +43,28 @@ export default {
   mounted () {
     this.getTestQuestions()
     this.mounted = true
+    this.$bus.on('event-confirmation-step-test-sent-answer-sending', () => {
+      this.onAllQuestionsSending()
+    })
+    this.$bus.on('event-confirmation-step-test-sent-answer-success', () => {
+      this.onAllQuestionsSentSuccess()
+    })
+    this.$bus.on('event-confirmation-step-test-sent-answer-failed', () => {
+      this.onAllQuestionsSentFailed()
+    })
   },
   methods: {
     onAllQuestionsSending () {
-      this.$emit('sending')
       this.localAnswerBook.loading = true
     },
     onAllQuestionsSentSuccess () {
-      this.$emit('sentsuccess')
       this.localAnswerBook.loading = false
     },
     onAllQuestionsSentFailed () {
-      this.$emit('sentfailed')
       this.localAnswerBook.loading = false
     },
     backToClassList () {
-      this.$emit('sentfailed')
+      this.$bus.emit('event-confirmation-step-get-test-failed')
     },
     getAnswerBook () {
       this.localAnswerBook.loading = true