feat: adiciona comentarios em ticket

src/pages/support/components/AddEditTicketDialog.vue

@@ -1,14 +1,23 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <div style="width: 100%; max-width: 1100px">
-      <q-card class="overflow-hidden" style="width: 100%">
+      <q-card style="height: 500px; display: flex; flex-direction: column; overflow: hidden">
         <DefaultDialogHeader
           :title="ticket ? 'Editar Ticket' : 'Novo Ticket'"
           @close="onDialogCancel"
         />
 
-        <q-form ref="formRef" @submit="onOKClick">
-          <q-card-section class="q-pt-sm">
+        <q-form
+          ref="formRef"
+          style="
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+          "
+          @submit="onOKClick"
+        >
+          <q-card-section class="q-pt-sm" style="flex: 1; overflow-y: auto; min-height: 0">
             <CustomTabComponent
               v-if="ticket?.id"
               v-model:active-tab="currentTab"
@@ -73,7 +82,10 @@
 
             <!-- Tab: Comentários -->
             <div v-show="currentTab === 'comentarios'">
-              <div v-if="ticket?.status === 'in_progress'" class="flex justify-end q-mb-sm">
+              <div
+                v-if="ticket?.status === 'in_progress'"
+                class="flex justify-end q-mb-sm"
+              >
                 <q-btn
                   color="primary"
                   icon="mdi-plus"
@@ -82,19 +94,36 @@
                   @click="onAddComment"
                 />
               </div>
-              <div style="max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;">
-                <TicketCommentCard
-                  v-for="reply in replies"
-                  :key="reply.id"
-                  :reply="reply.reply"
-                  :created-at="reply.created_at"
-                  :user-name="reply.user_name"
-                />
+              <div
+                style="
+                  height: 100%;
+                  max-height: 340px;
+                  overflow-y: auto;
+                  display: flex;
+                  flex-direction: column;
+                  gap: 8px;
+                "
+              >
+                <template v-if="replies.length">
+                  <TicketCommentCard
+                    v-for="reply in replies"
+                    :key="reply.id"
+                    :reply="reply.reply"
+                    :created-at="reply.created_at"
+                    :user-name="reply.user_name"
+                  />
+                </template>
+                <div
+                  v-else
+                  class="flex flex-center full-height text-grey-5 text-body2"
+                >
+                  Nenhum comentário registrado.
+                </div>
               </div>
             </div>
           </q-card-section>
 
-          <q-card-actions align="right" class="q-px-md q-pb-md">
+          <q-card-actions align="right" class="q-px-md q-pb-md" style="flex-shrink: 0">
             <q-btn
               outline
               color="primary"
@@ -134,7 +163,10 @@ import UnitSelect from "src/components/selects/UnitSelect.vue";
 import TicketCommentCard from "./TicketCommentCard.vue";
 import { userStore } from "src/stores/user";
 import { useQuasar } from "quasar";
-import { createSupportTicket, updateSupportTicket } from "src/api/support_ticket";
+import {
+  createSupportTicket,
+  updateSupportTicket,
+} from "src/api/support_ticket";
 import CloseTicketDialog from "./CloseTicketDialog.vue";
 import AddReplyDialog from "./AddReplyDialog.vue";
 import { getSupportReplies } from "src/api/support_reply";
@@ -185,20 +217,23 @@ const unitTargetOptions = [
 ];
 
 const form = ref({
-  title:       ticket?.title ?? null,
-  severity:    ticket?.severity ?? null,
-  scope:       ticket?.scope ?? null,
-  sector:      ticket?.sector ?? null,
+  title: ticket?.title ?? null,
+  severity: ticket?.severity ?? null,
+  scope: ticket?.scope ?? null,
+  sector: ticket?.sector ?? null,
   description: ticket?.description ?? null,
 });
 
 const buildPayload = () => ({
-  title:       form.value.title,
-  severity:    form.value.severity,
-  scope:       form.value.scope,
-  sector:      form.value.sector || null,
+  title: form.value.title,
+  severity: form.value.severity,
+  scope: form.value.scope,
+  sector: form.value.sector || null,
   description: form.value.description || null,
-  unit_id:     form.value.scope === "specific" ? (selectedUnit.value?.value ?? null) : null,
+  unit_id:
+    form.value.scope === "specific"
+      ? (selectedUnit.value?.value ?? null)
+      : null,
 });
 
 const onAddComment = () => {