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

<template>
  <div class="q-pa-md">
    <template v-if="view === 'list'">
      <div class="row justify-end q-mb-md">
        <q-btn
          icon="add"
          color="primary-2"
          style="height: 40px; width: 40px"
          @click="view = 'form'"
        />
      </div>

      <div class="row q-col-gutter-md">
        <div v-for="(partner, index) in partners" :key="index" class="col-3">
          <PartnerCardComponent :partner />
        </div>
      </div>
    </template>

    <template v-else>
      <div class="column justify-center items-center q-mb-lg">
        <AvatarImageComponent @update:file="onAvatarChange" />

        <div class="row full-width q-mt-md q-col-gutter-sm">
          <DefaultInput
            v-model="form.full_name"
            label="Nome completo"
            class="col-12"
            outlined
          />

          <DefaultInput
            v-model="form.social_name"
            label="Nome social"
            class="col-6"
            outlined
          />

          <DefaultInput
            v-model="form.role"
            label="Função"
            class="col-6"
            outlined
          />

          <DefaultInput v-model="form.cpf" label="CPF" class="col-6" outlined />

          <DefaultInput v-model="form.rg" label="RG" class="col-6" outlined />

          <DefaultInput
            v-model="form.address"
            label="Endereço"
            class="col-8"
            outlined
          />

          <DefaultInput
            v-model="form.address_number"
            label="Número"
            class="col-4"
            outlined
          />

          <DefaultInput
            v-model="form.zip_code"
            label="CEP"
            class="col-3"
            outlined
          />

          <DefaultInput
            v-model="form.neighborhood"
            label="Bairro"
            class="col-5"
            outlined
          />

          <DefaultInput
            v-model="form.city_state"
            label="Cidade / Estado"
            class="col-4"
            outlined
          />

          <DefaultInput
            v-model="form.complement"
            label="Complemento"
            class="col-12"
            outlined
          />

          <DefaultInput
            v-model="form.primary_email"
            label="E-mail Principal"
            class="col-6"
            outlined
          />

          <DefaultInput
            v-model="form.secondary_email"
            label="E-mail Secundário"
            class="col-6"
            outlined
          />

          <DefaultInput
            v-model="form.phone"
            label="Telefone"
            class="col-6"
            outlined
          />

          <DefaultInput
            v-model="form.cellphone_number"
            label="Celular"
            class="col-6"
            outlined
          />
        </div>

        <div class="row justify-end q-mt-md items-end full-width q-px-xs">
          <div class="row q-gutter-sm">
            <q-btn
              label="Cancelar"
              color="primary"
              outline
              @click="view = 'list'"
            />
            <q-btn label="Salvar" color="primary" />
            <q-btn
              icon="mdi-paperclip-plus"
              color="primary"
              style="height: 40px; width: 40px"
            />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import AvatarImageComponent from "src/components/shared/AvatarImageComponent.vue";
import PartnerCardComponent from "src/components/shared/PartnerCardComponent.vue";
import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";

const view = ref("list");

const partners = ref([
  { social_name: null, role: null, avatarUrl: null, color: "#ff8340" },
]);

const { form } = useFormUpdateTracker({
  full_name: null,
  social_name: null,
  role: null,
  cpf: null,
  rg: null,
  address: null,
  address_number: null,
  zip_code: null,
  neighborhood: null,
  city_state: null,
  complement: null,
  primary_email: null,
  secondary_email: null,
  phone: null,
  cellphone_number: null,
});

function onAvatarChange(file) {
  console.log("Avatar file selected:", file);
}
</script>