feat: adiciona botao de editar e excluir

src/api/support_reply.js

@@ -10,6 +10,11 @@ export const createSupportReply = async (ticketId, payload) => {
   return data.payload;
 };
 
+export const updateSupportReply = async (ticketId, id, payload) => {
+  const { data } = await api.put(`/support-ticket/${ticketId}/replies/${id}`, payload);
+  return data.payload;
+};
+
 export const deleteSupportReply = async (ticketId, id) => {
   const { data } = await api.delete(`/support-ticket/${ticketId}/replies/${id}`);
   return data;

src/pages/support/components/AddEditReplyDialog.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <div style="width: 100%; max-width: 600px">
+      <q-card class="overflow-hidden" style="width: 100%">
+        <DefaultDialogHeader
+          :title="replyItem ? 'Editar Comentário' : 'Responder Suporte'"
+          @close="onDialogCancel"
+        />
+
+        <q-form ref="formRef" @submit="onOKClick">
+          <q-card-section class="q-pt-sm">
+            <DefaultInput
+              v-model="replyText"
+              label="Descreva a resposta"
+              type="textarea"
+              class="col-12"
+            />
+          </q-card-section>
+
+          <q-card-actions align="right" class="q-px-md q-pb-md">
+            <q-btn
+              outline
+              color="primary"
+              label="Cancelar"
+              @click="onDialogCancel"
+            />
+            <q-btn
+              color="primary"
+              :label="replyItem ? 'Salvar' : 'Responder'"
+              type="submit"
+              :loading="loading"
+            />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useDialogPluginComponent } from "quasar";
+
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import { createSupportReply, updateSupportReply } from "src/api/support_reply";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { ticketId, replyItem } = defineProps({
+  ticketId: {
+    type: Number,
+    required: true,
+  },
+  replyItem: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+const loading = ref(false);
+const replyText = ref(replyItem?.reply ?? null);
+
+const onOKClick = async () => {
+  loading.value = true;
+  try {
+    if (replyItem) {
+      await updateSupportReply(ticketId, replyItem.id, { reply: replyText.value });
+    } else {
+      await createSupportReply(ticketId, { reply: replyText.value });
+    }
+    onDialogOK(true);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>

src/pages/support/components/AddEditTicketDialog.vue

@@ -111,6 +111,8 @@
                     :reply="reply.reply"
                     :created-at="reply.created_at"
                     :user-name="reply.user_name"
+                    @edit="onEditComment(reply)"
+                    @delete="onDeleteComment(reply)"
                   />
                 </template>
                 <div
@@ -168,8 +170,8 @@ import {
   updateSupportTicket,
 } from "src/api/support_ticket";
 import CloseTicketDialog from "./CloseTicketDialog.vue";
-import AddReplyDialog from "./AddReplyDialog.vue";
-import { getSupportReplies } from "src/api/support_reply";
+import AddEditReplyDialog from "./AddEditReplyDialog.vue";
+import { getSupportReplies, deleteSupportReply } from "src/api/support_reply";
 
 defineEmits([...useDialogPluginComponent.emits]);
 
@@ -238,13 +240,34 @@ const buildPayload = () => ({
 
 const onAddComment = () => {
   $q.dialog({
-    component: AddReplyDialog,
+    component: AddEditReplyDialog,
     componentProps: { ticketId: ticket.id },
   }).onOk(() => {
     loadReplies();
   });
 };
 
+const onEditComment = (reply) => {
+  $q.dialog({
+    component: AddEditReplyDialog,
+    componentProps: { ticketId: ticket.id, replyItem: reply },
+  }).onOk(() => {
+    loadReplies();
+  });
+};
+
+const onDeleteComment = (reply) => {
+  $q.dialog({
+    title: "Excluir Comentário",
+    message: "Tem certeza que deseja excluir este comentário?",
+    cancel: { outline: true, color: "primary", label: "Cancelar" },
+    ok: { color: "negative", label: "Excluir" },
+  }).onOk(async () => {
+    await deleteSupportReply(ticket.id, reply.id);
+    loadReplies();
+  });
+};
+
 onMounted(() => {
   loadReplies();
 });

src/pages/support/components/TicketCommentCard.vue

@@ -1,15 +1,41 @@
 <template>
   <q-card flat bordered class="q-pa-md">
-    <div class="text-body2">
-      <span class="text-weight-medium">Resposta:</span> {{ reply }}
-    </div>
-    <div class="text-caption text-grey-6 q-mt-xs">
-      {{ createdAt }} &mdash; {{ userName }}
+    <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px">
+      <div style="flex: 1">
+        <div class="text-body2">
+          <span class="text-weight-medium">Resposta:</span> {{ reply }}
+        </div>
+        <div class="text-caption text-grey-6 q-mt-xs">
+          {{ createdAt }} &mdash; {{ userName }}
+        </div>
+      </div>
+      <div style="display: flex; gap: 4px; flex-shrink: 0">
+        <q-btn
+          flat
+          dense
+          round
+          icon="mdi-pencil-outline"
+          size="sm"
+          color="primary"
+          @click="$emit('edit')"
+        />
+        <q-btn
+          flat
+          dense
+          round
+          icon="mdi-trash-can-outline"
+          size="sm"
+          color="negative"
+          @click="$emit('delete')"
+        />
+      </div>
     </div>
   </q-card>
 </template>
 
 <script setup>
+defineEmits(["edit", "delete"]);
+
 defineProps({
   reply: {
     type: String,