sfp_vue_franchisee_ginastica_cerebro/src/pages/unit/UnitActionPage.vue

<template>
  <div>
    <DefaultHeaderPage title="Dados da Unidade" />

    <CustomTabComponent
      v-model:active-tab="activeTab"
      :tabs="allTabs"
      class="q-mb-md"
    />

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

    <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 { computed, ref } from "vue";
import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
import { userStore } from "src/stores/user";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import CustomTabComponent from "src/components/shared/CustomTabComponent.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 PartnersTab from "src/pages/unit/tabs/PartnersTab.vue";
import UnitDataTab from "src/pages/unit/tabs/UnitDataTab.vue";

const store = userStore();

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

const activeTab = ref("unit_data");

const unitId = computed(() => store.user?.unit_id ?? null);

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" },
];
</script>