Add filters.

src/pages/MantisPage.vue

@@ -5,23 +5,76 @@
       bordered
       class="q-mb-xl"
     >
-      <q-card-section class="row items-center justify-between">
+      <q-card-section class="row items-center justify-between q-gutter-md">
         <div class="text-h4">
           Mantis Tickets
         </div>
-        <q-input
-          dense
-          debounce="300"
-          v-model="searchTerm"
-          placeholder="Search tickets..."
-          @update:model-value="fetchTickets(1)"
-          clearable
-          style="width: 300px"
-        >
-          <template #append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
+        <div class="row items-center q-gutter-sm">
+          <!-- Filters -->
+          <q-select
+            dense
+            outlined
+            v-model="selectedStatus"
+            :options="statusOptions"
+            label="Status"
+            clearable
+            emit-value
+            map-options
+            style="min-width: 120px"
+            @update:model-value="applyFilters"
+          />
+          <q-select
+            dense
+            outlined
+            v-model="selectedPriority"
+            :options="priorityOptions"
+            label="Priority"
+            clearable
+            emit-value
+            map-options
+            style="min-width: 120px"
+            @update:model-value="applyFilters"
+          />
+          <q-select
+            dense
+            outlined
+            v-model="selectedSeverity"
+            :options="severityOptions"
+            label="Severity"
+            clearable
+            emit-value
+            map-options
+            style="min-width: 120px"
+            @update:model-value="applyFilters"
+          />
+          <q-select
+            dense
+            outlined
+            v-model="selectedReporter"
+            :options="reporterOptions"
+            label="Reporter"
+            clearable
+            emit-value
+            map-options
+            style="min-width: 150px"
+            @update:model-value="applyFilters"
+          />
+          <!-- Search Input -->
+          <q-input
+            dense
+            outlined
+            debounce="300"
+            v-model="searchTerm"
+            placeholder="Search tickets..."
+            @update:model-value="applyFilters"
+            clearable
+            style="width: 250px"
+          >
+            <template #append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </div>
       </q-card-section>
 
       <q-table
@@ -123,7 +176,6 @@ import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
 import MantisTicketDialog from 'src/components/MantisTicketDialog.vue';
-
 import { marked } from 'marked';
 
 const props = defineProps({
@@ -143,6 +195,16 @@ 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
 
+// Filter refs
+const selectedStatus = ref(null);
+const selectedPriority = ref(null);
+const selectedSeverity = ref(null);
+const selectedReporter = ref(null);
+const statusOptions = ref([]);
+const priorityOptions = ref([]);
+const severityOptions = ref([]);
+const reporterOptions = ref([]);
+
 const router = useRouter();
 
 const pagination = ref({
@@ -164,6 +226,36 @@ const columns = [
   { name: 'actions', label: 'Actions', field: 'id', align: 'center' },
 ];
 
+// Fetch distinct filter values
+const fetchFilterOptions = async() =>
+{
+  try
+  {
+    const [statusRes, priorityRes, severityRes, reporterRes] = await Promise.all([
+      axios.get('/api/mantis/filters/statuses'),
+      axios.get('/api/mantis/filters/priorities'),
+      axios.get('/api/mantis/filters/severities'),
+      axios.get('/api/mantis/filters/reporters')
+    ]);
+
+    // Format options for q-select
+    const formatOptions = (data) => data.map(value => ({ label: value, value }));
+
+    statusOptions.value = formatOptions(statusRes.data);
+    priorityOptions.value = formatOptions(priorityRes.data);
+    severityOptions.value = formatOptions(severityRes.data);
+    reporterOptions.value = formatOptions(reporterRes.data);
+  }
+  catch (error)
+  {
+    console.error('Error fetching filter options:', error);
+    $q.notify({
+      type: 'negative',
+      message: 'Failed to load filter options.'
+    });
+  }
+};
+
 const fetchTickets = async(page = pagination.value.page) =>
 {
   loading.value = true;
@@ -173,8 +265,17 @@ const fetchTickets = async(page = pagination.value.page) =>
       page: page,
       limit: pagination.value.rowsPerPage,
       search: searchTerm.value || undefined,
-      // Add sorting params if needed based on pagination.sortBy and pagination.descending
+      sortBy: pagination.value.sortBy, // Add sortBy
+      sortOrder: pagination.value.descending ? 'desc' : 'asc', // Add sortOrder
+      // Add filter parameters
+      status: selectedStatus.value || undefined,
+      priority: selectedPriority.value || undefined,
+      severity: selectedSeverity.value || undefined,
+      reporterUsername: selectedReporter.value || undefined,
     };
+    // Remove undefined params
+    Object.keys(params).forEach(key => params[key] === undefined && delete params[key]);
+
     const response = await axios.get('/api/mantis', { params });
     tickets.value = response.data.data;
     pagination.value.rowsNumber = response.data.pagination.total;
@@ -194,6 +295,13 @@ const fetchTickets = async(page = pagination.value.page) =>
   }
 };
 
+// Function to apply filters and reset pagination
+const applyFilters = () =>
+{
+  pagination.value.page = 1; // Reset to first page when filters change
+  fetchTickets();
+};
+
 const handleTableRequest = (props) =>
 {
   const { page, rowsPerPage, sortBy, descending } = props.pagination;
@@ -244,6 +352,7 @@ watch(() => props.ticketId, (newTicketId) =>
 
 onMounted(() =>
 {
+  fetchFilterOptions(); // Fetch filter options on mount
   fetchTickets();
   // Check initial prop value on mount
   if (props.ticketId)