sfp_vue_franchisor_ginastica_cerebro/src/pages/unit/UnitActionPage.vue

<template>
  <div>
    <DefaultHeaderPage title="Cadastro de Unidade" />

    <CustomTabComponent v-model:active-tab="activeTab" :tabs />

    <UnitDataTab
      v-show="activeTab === 'unit_data'"
      v-model:form="form"
      :unit-id="unitId"
      :get-form-as-form-data="getFormAsFormData"
      :set-update-form-as-original="setUpdateFormAsOriginal"
    />

    <template v-if="unitId">
      <PartnersTab v-show="activeTab === 'partners'" :unit-id="unitId" />
      <ContractsTab v-show="activeTab === 'contracts'" :unit-id="unitId" />
      <FinancialTab v-show="activeTab === 'financial'" :unit-id="unitId" />
      <HistoryTab v-show="activeTab === 'history'" :unit-id="unitId" />
      <MediasTab v-show="activeTab === 'medias'" :unit-id="unitId" />
    </template>
  </div>
</template>

<script setup>
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
import UnitDataTab from "src/pages/unit/tabs/UnitDataTab.vue";
import PartnersTab from "src/pages/unit/tabs/PartnersTab.vue";
import ContractsTab from "src/pages/unit/tabs/ContractsTab.vue";
import FinancialTab from "src/pages/unit/tabs/FinancialTab.vue";
import HistoryTab from "src/pages/unit/tabs/HistoryTab.vue";
import MediasTab from "src/pages/unit/tabs/MediasTab.vue";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";

const route = useRoute();
const unitId = computed(() =>
  route.params.id ? Number(route.params.id) : null,
);

const { form, getFormAsFormData, setUpdateFormAsOriginal } =
  useFormUpdateTracker({
    fantasy_name: null,
    social_reason: null,
    cnpj: null,
    state_registration: null,
    name_responsible: null,
    street: null,
    address_number: null,
    postal_code: null,
    neighborhood: null,
    complement: null,
    city_id: null,
    state_id: null,
    email: null,
    secondary_email: null,
    phone_number: null,
    cell_number: null,
  });

const activeTab = ref("unit_data");

const allTabs = [
  { name: "unit_data", label: "Dados da Unidade" },
  { name: "partners", label: "Sócios" },
  { name: "contracts", label: "Contratos" },
  { name: "financial", label: "Financeiro" },
  { name: "history", label: "Histórico" },
  { name: "medias", label: "Mídias" },
];

const tabs = computed(() => (unitId.value ? allTabs : allTabs.slice(0, 1)));
</script>