sfp_vue_franchisee_ginastica_cerebro/src/pages/students/components/EditStudentDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card
      class="q-dialog-plugin overflow-hidden"
      style="width: 100%; max-width: 1400px"
    >
      <DefaultDialogHeader title="Dados do Aluno" @close="onDialogCancel" />

      <q-card-section class="q-pt-sm" style="height: 65vh; overflow-y: auto">
        <CustomTabComponent
          v-model:active-tab="currentTab"
          :tabs="tabs"
          class="q-mb-md"
        />

        <div v-show="currentTab === 'profile'">
          <StudentDataTab ref="studentDataTabRef" :student="props.student" />
        </div>

        <div v-show="currentTab === 'responsible'">
          <ResponsibleTab :student-id="props.student.id" />
        </div>

        <div v-if="canViewContracts" v-show="currentTab === 'contracts'">
          <ContractTab :student="props.student" />
        </div>

        <div v-show="currentTab === 'history'">
          <HistoryTab />
        </div>

        <div v-show="currentTab === 'media'">
          <MediaTab ref="mediaTabRef" :student-id="props.student.id" />
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn
          outline
          color="primary"
          label="CANCELAR"
          @click="onDialogCancel"
        />
        <q-btn
          color="primary"
          label="SALVAR"
          :loading="saving"
          @click="handleSave"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { computed, ref, watch, useTemplateRef, defineAsyncComponent } from "vue";
import { useDialogPluginComponent } from "quasar";
import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { updateStudent } from "src/api/student";
import { permissionStore } from "src/stores/permission";

const StudentDataTab = defineAsyncComponent(
  () => import("src/pages/students/tabs/StudentDataTab.vue"),
);
const ResponsibleTab = defineAsyncComponent(
  () => import("src/pages/students/tabs/ResponsibleTab.vue"),
);
const ContractTab = defineAsyncComponent(
  () => import("src/pages/students/tabs/ContractTab.vue"),
);
const HistoryTab = defineAsyncComponent(
  () => import("src/pages/students/tabs/HistoryTab.vue"),
);
const MediaTab = defineAsyncComponent(
  () => import("src/pages/students/tabs/MediaTab.vue"),
);

const props = defineProps({
  student: {
    type: Object,
    required: true,
  },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const studentDataTabRef = useTemplateRef("studentDataTabRef");
const mediaTabRef = useTemplateRef("mediaTabRef");

const currentTab = ref("profile");
const permissions = permissionStore();
const canViewContracts = computed(() =>
  permissions.getAccess("franchisee_contracts", "view"),
);

watch(currentTab, (tab) => {
  if (tab === "media") mediaTabRef.value?.refresh();
});

const { loading: saving, execute } = useSubmitHandler({
  onSuccess: () => onDialogOK(true),
});

const tabs = computed(() => [
  { name: "profile", label: "Perfil do Aluno" },
  { name: "responsible", label: "Responsáveis" },
  ...(canViewContracts.value
    ? [{ name: "contracts", label: "Contratos" }]
    : []),
  { name: "history", label: "Frequência" },
  { name: "media", label: "Mídias" },
]);

async function handleSave() {
  const valid = await (studentDataTabRef.value?.validate() ?? true);
  if (!valid) return;

  const studentPayload = studentDataTabRef.value.buildPayload();
  await execute(() => updateStudent(studentPayload, props.student.id));
}
</script>