sfp_front_vue_diarista_backoffice/src/pages/supportRequest/SupportRequestsPage.vue

<template>
  <div>
    <DefaultHeaderPage />
    <div>
      <div class="row q-px-sm q-mb-sm">
        <q-select
          v-model="statusFilter"
          :options="statusOptions"
          :label="$t('support_request.fields.status')"
          emit-value
          map-options
          dense
          outlined
          clearable
          style="min-width: 220px"
        />
      </div>
      <DefaultTableServerSide
        :key="statusFilter ?? 'all'"
        ref="tableRef"
        :columns="columns"
        :api-call="apiCall"
        :add-item="false"
        :rows-per-page="10"
        open-item
        @on-row-click="onRowClick"
      >
        <template #body-cell-status="slotProps">
          <q-td :props="slotProps">
            <q-badge :color="statusColor(slotProps.row.status)" :label="statusLabel(slotProps.row.status)" />
          </q-td>
        </template>
      </DefaultTableServerSide>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, useTemplateRef, computed, ref } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { getSupportRequests } from "src/api/supportRequest";

import DefaultTableServerSide from "src/components/defaults/DefaultTableServerSide.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const SupportRequestDetailDialog = defineAsyncComponent(() =>
  import("src/pages/supportRequest/components/SupportRequestDetailDialog.vue")
);

const $q = useQuasar();
const tableRef = useTemplateRef("tableRef");
const { t } = useI18n();

const statusFilter = ref(null);

const apiCall = (params) => getSupportRequests({ ...params, status: statusFilter.value });

const statusOptions = computed(() => [
  { label: t("support_request.status.pending"), value: "pending" },
  { label: t("support_request.status.in_progress"), value: "in_progress" },
  { label: t("support_request.status.resolved"), value: "resolved" },
]);

const categoryLabel = (category) => t(`support_request.categories.${category}`, category);
const statusLabel = (status) => t(`support_request.status.${status}`, status);
const userTypeLabel = (type) =>
  type ? t(`support_request.user_types.${type.toLowerCase()}`, type) : "—";
const statusColor = (status) =>
  ({ pending: "orange", in_progress: "blue", resolved: "green" }[status] || "grey");

const columns = computed(() => [
  {
    name: "title",
    label: t("support_request.fields.title"),
    field: "title",
    align: "left",
    sortable: false,
  },
  {
    name: "category",
    label: t("support_request.fields.category"),
    field: (row) => categoryLabel(row.category),
    align: "left",
    sortable: false,
  },
  {
    name: "name",
    label: t("support_request.fields.name"),
    field: "name",
    align: "left",
    sortable: false,
  },
  {
    name: "user_type",
    label: t("support_request.fields.user_type"),
    field: (row) => userTypeLabel(row.user_type),
    align: "left",
    sortable: false,
  },
  {
    name: "status",
    label: t("support_request.fields.status"),
    field: (row) => statusLabel(row.status),
    align: "left",
    sortable: false,
  },
  {
    name: "created_at",
    label: t("common.terms.created_at"),
    field: "created_at",
    align: "left",
    sortable: false,
  },
]);

const onRowClick = ({ row }) => {
  $q.dialog({
    component: SupportRequestDetailDialog,
    componentProps: {
      supportRequest: row,
    },
  }).onOk(async (updated) => {
    if (updated) {
      tableRef.value.refresh();
    }
  });
};
</script>