Mantis summary updates.

src/pages/MantisPage.vue

@@ -61,6 +61,23 @@
             />
           </q-td>
         </template>
+        <template #body-cell-actions="actionsProps">
+          <q-td
+            :props="actionsProps"
+            class="text-center"
+          >
+            <q-btn
+              size="sm"
+              color="info"
+              icon="summarize"
+              round
+              flat
+              dense
+              @click.stop="showTicketSummary(actionsProps.row.id)"
+              :title="'Show summary for ticket ' + actionsProps.row.id"
+            />
+          </q-td>
+        </template>
       </q-table>
     </q-card>
 
@@ -69,6 +86,34 @@
       :ticket-id="selectedTicketId"
       @close="closeDialog"
     />
+
+    <!-- New Summary Dialog -->
+    <q-dialog
+      v-model="showSummaryDialog"
+    >
+      <q-card
+        style="max-width: max(75%, 500px)"
+      >
+        <q-card-section class="row items-center q-pb-none q-mb-md">
+          <div class="text-h4">
+            Summary for Ticket #{{ summaryTicketId }}
+          </div>
+          <q-space />
+          <q-btn
+            icon="close"
+            flat
+            round
+            dense
+            v-close-popup
+          />
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section class="summary-content">
+          <div v-html="summaryContent" />
+        </q-card-section>
+      </q-card>
+    </q-dialog>
   </q-page>
 </template>
 
@@ -79,6 +124,8 @@ import axios from 'axios';
 import { useQuasar } from 'quasar';
 import MantisTicketDialog from 'src/components/MantisTicketDialog.vue';
 
+import { marked } from 'marked';
+
 const props = defineProps({
   ticketId: {
     type: [String, Number],
@@ -92,6 +139,9 @@ const loading = ref(false);
 const searchTerm = ref('');
 const showDialog = ref(false);
 const selectedTicketId = ref(null);
+const showSummaryDialog = ref(false); // New state for summary dialog
+const summaryContent = ref(''); // New state for summary content
+const summaryTicketId = ref(null); // New state for summary ticket ID
 
 const router = useRouter();
 
@@ -111,6 +161,7 @@ const columns = [
   { name: 'severity', label: 'Severity', field: 'severity', align: 'center', sortable: true },
   { name: 'reporterUsername', label: 'Reporter', field: 'reporterUsername', align: 'left', sortable: true },
   { name: 'updatedAt', label: 'Last Updated', field: 'updatedAt', align: 'left', sortable: true, format: (val) => new Date(val).toLocaleString() },
+  { name: 'actions', label: 'Actions', field: 'id', align: 'center' },
 ];
 
 const fetchTickets = async(page = pagination.value.page) =>
@@ -241,9 +292,57 @@ const getSeverityColor = (severity) =>
   return 'primary';
 };
 
+// Function to fetch and display ticket summary
+const showTicketSummary = async(ticketId) =>
+{
+  $q.loading.show({
+    message: 'Generating Ticket Summary...',
+    // spinner: QSpinnerGears,
+    spinnerColor: 'white'
+  });
+  if (!ticketId)
+  {
+    $q.loading.hide(); // Hide loading if no ticketId
+    return;
+  }
+  try
+  {
+    const response = await axios.get(`/api/mantis/summary/${ticketId}`);
+
+    // Store summary data and show the dialog
+    summaryContent.value = marked(response.data?.summary || 'No summary available');
+    //Turn anything surrounded by `[]` into a span with a class of "label"
+    summaryContent.value = summaryContent.value.replace(/\[(.*?)\]/g, '<span class="label">[$1]</span>');
+    summaryTicketId.value = ticketId;
+    showSummaryDialog.value = true;
+  }
+  catch (error)
+  {
+    console.error('Error fetching ticket summary:', error);
+    $q.notify({
+      type: 'negative',
+      message: `Failed to fetch summary for ticket #${ticketId}: ${error.response?.data?.message || error.message}`
+    });
+  }
+  finally
+  {
+    $q.loading.hide();
+  }
+};
 
 </script>
 
 <style scoped>
 /* Add any specific styles here */
+.summary-content:deep(h6) {
+  margin: 0;
+}
+
+.summary-content:deep(span.label) {
+  font-family: monospace;
+}
+
+.summary-content:deep(span.label):after {
+  content: ' - ';
+}
 </style>