sfp_vue_franchisor_ginastica_cerebro/src/pages/unit/tabs/ContractsTab.vue

<template>
  <div class="q-pa-md">
    <DefaultTable
      ref="tableRef"
      :columns="columns"
      :api-call="loadContracts"
      :show-search-field="true"
      :add-item="true"
      :female="false"
      title="Contratos"
      description="Contratos"
      @on-add-item="openCreateDialog"
    >
      <template #body-cell-contract_dates="{ row }">
        <q-td>{{ formatDateYMDtoDMY(row.start_date) }} - {{ formatDateYMDtoDMY(row.end_date) }}</q-td>
      </template>

      <template #body-cell-tbr_fixed_value="{ row }">
        <q-td>{{ formatToBRLCurrency(row.tbr_fixed_value) }}</q-td>
      </template>

      <template #body-cell-actions="{ row: contract }">
        <q-td align="center">
          <div class="row no-wrap" style="gap: 4px">
            <q-btn
              flat
              round
              dense
              icon="mdi-file-edit-outline"
              size="sm"
              @click="openEditDialog(contract)"
            />
            <q-btn
              flat
              round
              dense
              icon="mdi-trash-can-outline"
              size="sm"
              color="negative"
              @click="confirmDelete(contract)"
            />
          </div>
        </q-td>
      </template>
    </DefaultTable>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import {
  getFranchiseeContractsByUnit,
  deleteFranchiseeContract,
} from "src/api/franchisee_contract";
import { formatDateYMDtoDMY, formatToBRLCurrency } from "src/helpers/utils";

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

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

const props = defineProps({
  unitId: {
    type: Number,
    default: null,
  },
});

const $q = useQuasar();
const tableRef = ref(null);

const loadContracts = () => getFranchiseeContractsByUnit(props.unitId);

function openCreateDialog() {
  $q.dialog({
    component: CreateContractDialog,
    componentProps: { unitId: props.unitId },
  }).onOk(() => {
    tableRef.value?.refresh();
  });
}

function openEditDialog(contract) {
  $q.dialog({
    component: EditContractDialog,
    componentProps: { unitId: props.unitId, contract },
  }).onOk(() => {
    tableRef.value?.refresh();
  });
}

function confirmDelete(contract) {
  $q.dialog({
    title: "Excluir contrato",
    message: `Deseja excluir o contrato #${contract.protocol}?`,
    ok: { color: "negative", label: "Excluir" },
    cancel: { color: "primary", outline: true, label: "Cancelar" },
  }).onOk(async () => {
    await deleteFranchiseeContract(contract.id);
    tableRef.value?.refresh();
  });
}

const columns = [
  {
    name: "protocol",
    label: "Contrato",
    field: "protocol",
    align: "left",
  },
  {
    name: "contract_dates",
    label: "Data Inicial - Final",
    field: "start_date",
    align: "left",
  },
  {
    name: "tbr_fixed_value",
    label: "TBR",
    field: "tbr_fixed_value",
    align: "left",
  },
  {
    name: "actions",
    label: "Ações",
    field: "actions",
    align: "center",
  },
];
</script>