fixed #147

src/components/Widgets/Ticket/AdminTicketShow/AdminTicketShow.vue

@@ -86,97 +86,22 @@
                             :name="message.read ? 'done_all' : 'done'" />
                   </template>
                 </q-chat-message>
-                <div class="row">
-                  <div class="col-md-10 col-sm-9 col-12">
-                    <q-editor v-model="replyText"
-                              :toolbar="[
-                                [
-                                  {
-                                    label: $q.lang.editor.align,
-                                    icon: $q.iconSet.editor.align,
-                                    fixedLabel: true,
-                                    list: 'only-icons',
-                                    options: ['left', 'center', 'right', 'justify']
-                                  },
-                                  'bold', 'italic', 'strike', 'underline', 'quote', 'unordered', 'ordered'
-                                ],
-                                ['token', 'hr', 'link', 'custom_btn', 'print', 'fullscreen'],
-                                [
-                                  {
-                                    label: $q.lang.editor.formatting,
-                                    icon: $q.iconSet.editor.formatting,
-                                    list: 'no-icons',
-                                    options: [
-                                      'p',
-                                      'h1',
-                                      'h2',
-                                      'h3',
-                                      'h4',
-                                      'h5',
-                                      'h6',
-                                      'code'
-                                    ]
-                                  },
-                                  {
-                                    label: $q.lang.editor.fontSize,
-                                    icon: $q.iconSet.editor.fontSize,
-                                    fixedLabel: true,
-                                    fixedIcon: true,
-                                    list: 'no-icons',
-                                    options: [
-                                      'size-1',
-                                      'size-2',
-                                      'size-3',
-                                      'size-4',
-                                      'size-5',
-                                      'size-6',
-                                      'size-7'
-                                    ]
-                                  },
-                                  {
-                                    label: $q.lang.editor.defaultFont,
-                                    icon: $q.iconSet.editor.font,
-                                    fixedIcon: true,
-                                    list: 'no-icons',
-                                    options: [
-                                      'default_font',
-                                      'arial',
-                                      'arial_black',
-                                      'comic_sans',
-                                      'courier_new',
-                                      'impact',
-                                      'lucida_grande',
-                                      'times_new_roman',
-                                      'verdana'
-                                    ]
-                                  },
-                                  'removeFormat'
-                                ],
-
-                                ['undo', 'redo', 'viewsource']
-                              ]"
-                              :fonts="{
-                                arial: 'Arial',
-                                arial_black: 'Arial Black',
-                                comic_sans: 'Comic Sans MS',
-                                courier_new: 'Courier New',
-                                impact: 'Impact',
-                                lucida_grande: 'Lucida Grande',
-                                times_new_roman: 'Times New Roman',
-                                verdana: 'Verdana'
-                              }"
-                              min-height="5rem" />
-                  </div>
-                  <div class="col-md-2 col-sm-3 col-12 flex justify-center items-center">
-                    <q-btn round
-                           dense
-                           flat
-                           icon="send"
-                           label="ارسال پاسخ"
-                           :loading="entityLoading"
-                           @click="sendReply" />
-                  </div>
+                <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>
+
                 <div class="q-mt-md">
                   <q-btn outline
                          color="red"
@@ -463,9 +388,10 @@ export default {
     },
     sendReply() {
       this.entityLoading = true
+      const body = this.replyText.replace(/\n/g, '<br>\n')
       APIGateway.ticket.reply({
         id: this.$route.params.id,
-        body: this.replyText
+        body
       })
         .then(() => {
           this.$refs.entityEdit.getData()

src/components/Widgets/Ticket/TicketCreate/TicketCreate.vue

@@ -22,6 +22,7 @@
                      title="نقش جدید"
                      :api="api"
                      :default-layout="false"
+                     :before-send-data="beforeSendData"
                      :entity-id-key-in-response="entityIdKeyInResponse"
                      :show-route-param-key="showRouteParamKey"
                      :index-route-name="indexRouteName"
@@ -76,7 +77,7 @@ export default {
         { type: 'select', name: 'category', responseKey: 'category', options: [], label: 'دسته', placeholder: ' ', col: 'col-md-4 col-12' },
         { type: 'input', name: 'title', responseKey: 'title', label: 'عنوان', placeholder: ' ', col: 'col-md-4 col-12' },
         { type: 'separator', name: 'separator', size: '0', label: 'توضیحات عنوان اینجا قرار میگیرد', col: 'col-12' },
-        { type: 'inputEditor', name: 'body', label: 'متن درخواست', col: 'col-md-12 col-12' },
+        { type: 'input', name: 'body', label: 'متن درخواست', placeholder: ' ', autogrow: true, col: 'col-md-12 col-12' },
         { type: 'file', name: 'attachment', label: 'انتخاب فایل ضمیمه', col: 'col-md-3 col-12' },
         { type: 'hidden', name: 'owner', value: 1 },
         { type: 'hidden', name: 'source_type', value: null },
@@ -101,6 +102,10 @@ export default {
     })
   },
   methods: {
+    beforeSendData () {
+      const body = FormBuilderAssist.getInputsByName(this.inputs, 'body').value
+      FormBuilderAssist.setAttributeByName(this.inputs, 'body', 'value', body.replace(/\n/g, '<br>\n'))
+    },
     checkSource () {
       const sourceId = this.$route.query.source_id
       const sourceType = this.$route.query.source_type

src/components/Widgets/Ticket/TicketShow/TicketShow.vue

@@ -67,96 +67,20 @@
                     </div>
                   </template>
                 </q-chat-message>
-                <div class="row">
-                  <div class="col-md-10 col-sm-9 col-12">
-                    <q-editor v-model="replyText"
-                              :toolbar="[
-                                [
-                                  {
-                                    label: $q.lang.editor.align,
-                                    icon: $q.iconSet.editor.align,
-                                    fixedLabel: true,
-                                    list: 'only-icons',
-                                    options: ['left', 'center', 'right', 'justify']
-                                  },
-                                  'bold', 'italic', 'strike', 'underline', 'quote', 'unordered', 'ordered'
-                                ],
-                                ['token', 'hr', 'link', 'custom_btn', 'print', 'fullscreen'],
-                                [
-                                  {
-                                    label: $q.lang.editor.formatting,
-                                    icon: $q.iconSet.editor.formatting,
-                                    list: 'no-icons',
-                                    options: [
-                                      'p',
-                                      'h1',
-                                      'h2',
-                                      'h3',
-                                      'h4',
-                                      'h5',
-                                      'h6',
-                                      'code'
-                                    ]
-                                  },
-                                  {
-                                    label: $q.lang.editor.fontSize,
-                                    icon: $q.iconSet.editor.fontSize,
-                                    fixedLabel: true,
-                                    fixedIcon: true,
-                                    list: 'no-icons',
-                                    options: [
-                                      'size-1',
-                                      'size-2',
-                                      'size-3',
-                                      'size-4',
-                                      'size-5',
-                                      'size-6',
-                                      'size-7'
-                                    ]
-                                  },
-                                  {
-                                    label: $q.lang.editor.defaultFont,
-                                    icon: $q.iconSet.editor.font,
-                                    fixedIcon: true,
-                                    list: 'no-icons',
-                                    options: [
-                                      'default_font',
-                                      'arial',
-                                      'arial_black',
-                                      'comic_sans',
-                                      'courier_new',
-                                      'impact',
-                                      'lucida_grande',
-                                      'times_new_roman',
-                                      'verdana'
-                                    ]
-                                  },
-                                  'removeFormat'
-                                ],
-
-                                ['undo', 'redo', 'viewsource']
-                              ]"
-                              :fonts="{
-                                arial: 'Arial',
-                                arial_black: 'Arial Black',
-                                comic_sans: 'Comic Sans MS',
-                                courier_new: 'Courier New',
-                                impact: 'Impact',
-                                lucida_grande: 'Lucida Grande',
-                                times_new_roman: 'Times New Roman',
-                                verdana: 'Verdana'
-                              }"
-                              min-height="5rem" />
-                  </div>
-                  <div class="col-md-2 col-sm-3 col-12 flex justify-center items-center">
-                    <q-btn round
-                           dense
-                           flat
-                           icon="send"
-                           label="ارسال پاسخ"
-                           :loading="entityLoading"
-                           @click="sendReply" />
-                  </div>
+                <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>