sfp_front_vue_diarista_backoffice/src/pages/payment/PaymentsPage.vue

<template>
  <q-page class="q-pa-md">
    <DefaultHeaderPage />
    <DefaultTable
      ref="tableRef"
      :columns="columns"
      :api-call="getPayments"
      :add-item="false"
      :open-item="true"
      @on-row-click="onRowClick"
    >
      <template #body-cell-status="templateProps">
        <q-td :props="templateProps">
          <q-chip
            :label="statusLabel(templateProps.row.status)"
            :color="paymentStatusColor(templateProps.row.status)"
            text-color="white"
            size="sm"
          />
        </q-td>
      </template>

      <template #body-cell-payment_method="templateProps">
        <q-td :props="templateProps">
          {{ paymentMethodLabel(templateProps.row.payment_method) }}
        </q-td>
      </template>

      <template #body-cell-gross_amount="templateProps">
        <q-td :props="templateProps">
          {{ formatToBRLCurrency(templateProps.row.gross_amount) }}
        </q-td>
      </template>

      <template #body-cell-created_at="templateProps">
        <q-td :props="templateProps">
          {{ formatDateTime(templateProps.row.created_at) }}
        </q-td>
      </template>
    </DefaultTable>
  </q-page>
</template>

<script setup>
import { computed, defineAsyncComponent, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";
import { getPayments } from "src/api/payment";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import { formatToBRLCurrency } from "src/helpers/utils";
import { format, parseISO } from "date-fns";

const ViewPaymentDialog = defineAsyncComponent(
  () => import("src/pages/payment/components/ViewPaymentDialog.vue"),
);

const { t } = useI18n();
const $q = useQuasar();
const tableRef = ref(null);
// const idLabel = "ID";

const columns = computed(() => [
  // {
  //   name: "id",
  //   label: idLabel,
  //   align: "left",
  //   field: "id",
  //   required: true,
  //   sortable: true,
  // },
  {
    name: "schedule_id",
    label: t("payments.schedule_id"),
    align: "left",
    field: (row) => formatByType(row),
    sortable: true,
  },
  {
    name: "client_name",
    label: t("payments.client"),
    align: "left",
    field: (row) => row.client_name || row.client_id || "-",
    sortable: true,
  },
  {
    name: "provider_name",
    label: t("payments.provider"),
    align: "left",
    field: (row) => row.provider_name || row.provider_id || "-",
    sortable: true,
  },
  {
    name: "payment_method",
    label: t("payments.payment_method"),
    align: "left",
    field: "payment_method",
    format: paymentMethodLabel,
    sortable: true,
  },
  {
    name: "status",
    label: t("common.terms.status"),
    align: "center",
    field: "status",
    format: statusLabel,
    sortable: true,
  },
  {
    name: "gross_amount",
    label: t("payments.gross_amount"),
    align: "right",
    field: "gross_amount",
    format: formatToBRLCurrency,
    sortable: true,
  },
  {
    name: "created_at",
    label: t("common.terms.created_at"),
    align: "left",
    field: "created_at",
    format: formatDateTime,
    sortable: true,
  },
]);

function paymentMethodLabel(method) {
  return method ? t(`payments.payment_methods.${method}`) : "-";
}

function statusLabel(status) {
  return status ? t(`payments.statuses.${status}`) : "-";
}

function paymentStatusColor(status) {
  const colors = {
    pending: "orange",
    processing: "blue",
    authorized: "indigo",
    paid: "green",
    failed: "negative",
    cancelled: "grey",
  };
  return colors[status] || "grey";
}

function formatDateTime(value) {
  return value ? format(parseISO(value), "dd/MM/yyyy HH:mm") : "-";
}

const onRowClick = ({ row }) => {
  $q.dialog({
    component: ViewPaymentDialog,
    componentProps: {
      payment: row,
      title: () => t("payments.view_title"),
    },
  });
};

const formatByType = (row) => {
  if (row.schedules[0]?.schedule_type === 'custom') {
      return t('ui.navigation.opportunities') + ' - ' + row.schedules[0]?.id
  } else if (row.schedules[0]?.schedule_type === 'default') {
      return t('ui.navigation.schedules') + ' - ' + row.schedules[0]?.id
  }  
}
</script>