sfp_vue_franchisor_ginastica_cerebro/src/pages/franchisee/FranchiseePage.vue

<template>
  <div>
    <DefaultHeaderPage title="Franqueados" show-filter-icon />

    <div class="q-px-sm">
      <DefaultTable
        title="Lista de Unidades"
        descricao="unidades"
        :feminino="false"
        :columns
        add-item
        open-item
        open-item-route="UnitEditPage"
        :api-call="getUnits"
        add-item-route="UnitAddPage"
      />
    </div>
  </div>
</template>

<script setup>
import { getUnits } from "src/api/unit";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import { ref } from "vue";

const columns = ref([
  {
    name: "fantasy_name",
    label: "Unidade",
    field: "fantasy_name",
    align: "left",
    sortable: true,
  },
  {
    name: "name_responsible",
    label: "Responsável",
    field: "name_responsible",
    align: "left",
    sortable: true,
  },
  {
    name: "location",
    label: "Cidade / Estado",
    field: (row) =>
      row.city && row.state
        ? `${row.city.name} / ${row.state.code}`
        : "—",
    align: "left",
  },
  {
    name: "phone_number",
    label: "Telefone",
    field: "phone_number",
    align: "left",
  },
  {
    name: "email",
    label: "E-mail",
    field: "email",
    align: "left",
  },
  {
    name: "created_at",
    label: "Cadastrado em",
    field: "created_at",
    align: "left",
    sortable: true,
  },
  {
    name: "actions",
    label: "Ações",
    field: null,
    align: "center",
  },
]);
</script>