نمایش تیکت در انتهای پاسخ نامه

src/components/Widgets/Test/TestShow/TestShow.vue

@@ -133,6 +133,50 @@
       کمی صبر کنید...
     </div>
   </div>
+  <q-card v-if="!answerBook.loading && answerBook.ticket"
+          class="q-mt-md">
+    {{ ticket_info.body }}
+    <q-card-section>
+      <div class="row justify-center">
+        <div class="full-width">
+          <q-skeleton v-if="entityLoading"
+                      type="rect"
+                      width="100%"
+                      height="200px" />
+          <template v-else>
+            <q-chat-message v-for="message in ticket_info.replies_info.list"
+                            :key="message.id"
+                            :avatar="message.creator_info.picture ? message.creator_info.picture : '/assets/images/web/default-avatar.png'"
+                            :name="isUserMessage(authenticatedUser, message) ? message.creator_info.firstname + ' ' + message.creator_info.lastname : 'کارشناس'"
+                            text-html
+                            :text="[message.body]"
+                            :sent="!isUserMessage(authenticatedUser, message)">
+              <template v-slot:stamp>
+                <div>
+                  {{ miladiToShamsi(message.creation_time) }}
+                </div>
+              </template>
+            </q-chat-message>
+            <div>
+              <q-input v-model="replyText"
+                       bottom-slots
+                       autogrow
+                       :loading="entityLoading">
+                <template v-slot:after>
+                  <q-btn round
+                         dense
+                         flat
+                         icon="send"
+                         :loading="entityLoading"
+                         @click="sendReply" />
+                </template>
+              </q-input>
+            </div>
+          </template>
+        </div>
+      </div>
+    </q-card-section>
+  </q-card>
 </template>
 
 <script>
@@ -142,6 +186,8 @@ import { APIGateway } from 'src/api/APIGateway.js'
 import { EntityShow, EntityEdit } from 'quasar-crud'
 import { AnswerBook } from 'src/models/AnswerBook.js'
 import { FormBuilderAssist } from 'quasar-form-builder'
+import { Ticket } from 'src/models/Ticket.js'
+import { User } from 'src/models/User.js'
 
 export default {
   name: 'TestShow',
@@ -149,7 +195,11 @@ export default {
   mixins: [mixinWidget],
   data () {
     return {
+      ticket: new Ticket(),
+      replyText: null,
       mounted: false,
+      entityLoading: true,
+      authenticatedUser: new User(),
       overallAnswerInput: [
         // { type: 'input', name: 'overall_answer_text', responseKey: 'overall_answer_text', label: 'متن پاسخ جامع', placeholder: ' ', inputType: 'textarea', col: 'col-12' },
         { type: 'file', name: 'overall_answer_attachment', responseKey: 'overall_answer_attachment', label: 'فایل پیوست جامع', placeholder: ' ', col: 'col-12' }
@@ -160,7 +210,8 @@ export default {
       ],
       questionInputs: [],
       objectionInputs: [
-        { type: 'input', name: 'objection_request', responseKey: 'objection_request', label: 'متن اعتراض', placeholder: ' ', inputType: 'textarea', col: 'col-12' }
+        { type: 'input', name: 'objection_request', responseKey: 'objection_request', label: 'متن اعتراض', placeholder: ' ', inputType: 'textarea', col: 'col-12' },
+        { type: 'hidden', name: 'ticket_info', responseKey: 'ticket_info' }
       ],
       objectionApi: APIGateway.answerBook.APIAdresses.submitObjectionRequest(this.$route.params.answer_book_id),
       participateType: null,
@@ -182,14 +233,42 @@ export default {
       const formattedSeconds = seconds.toString().padStart(2, '0')
 
       return formattedHours + ':' + formattedMinutes + ':' + formattedSeconds
+    },
+    ticket_info () {
+      return this.objectionInputs.find(input => input.name === 'ticket_info').value
     }
   },
   mounted () {
     // this.getAnswerBook()
     this.getTestQuestions()
+    this.loadAuthData()
     this.mounted = true
   },
   methods: {
+    miladiToShamsi (miladi) {
+      return Assist.miladiToShamsi(miladi)
+    },
+    isUserMessage (authenticatedUser, message) {
+      return authenticatedUser.id === message.creator_info.id
+    },
+    loadAuthData () {
+      this.authenticatedUser = this.$store.getters['Auth/user']
+    },
+    sendReply() {
+      this.entityLoading = true
+      const body = this.replyText.replace(/\n/g, '<br>\n')
+      APIGateway.ticket.reply({
+        id: this.answerBook.ticket,
+        body
+      })
+        .then(() => {
+          this.replyText = null
+          this.getTestQuestions()
+        })
+        .catch(() => {
+          this.getTestQuestions()
+        })
+    },
     sendObjection () {
       this.answerBook.loading = true
       this.$refs.objectionEntityEdit.editEntity(false)
@@ -262,14 +341,17 @@ export default {
         .then((answerBook) => {
           this.answerBook = new AnswerBook(answerBook)
           this.answerBook.loading = false
+          this.entityLoading = false
           this.answerBook.answer_sheet_info.list.forEach(() => {
             this.questionInputs.push(this.questionInput)
           })
           this.remainingTime = this.getRemainingTimeInSeconds(this.answerBook.server_time, this.answerBook.attending_start_time, this.answerBook.duration)
           FormBuilderAssist.setAttributeByName(this.objectionInputs, 'objection_request', 'value', this.answerBook.objection_request)
+          FormBuilderAssist.setAttributeByName(this.objectionInputs, 'ticket_info', 'value', new Ticket(this.answerBook.ticket_info))
         })
         .catch(() => {
           this.answerBook.loading = false
+          this.entityLoading = false
           this.backToClassList()
         })
     }