nuxt-start/pages/profile/index.vue

<template>
  <div>
    <AppMenu />
    <div class="flex justify-center items-center border-b mb-3 border-primary">
      <div class="py-3 text-center">Adataim</div>
    </div>
    <div class="p-3 space-y-3">
      <PageLoading v-if="isLoading" />
      <div v-if="!hasAllRequiredData" class="p-3 bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-600 rounded-lg text-yellow-800 dark:text-yellow-200 text-sm">
        <i class="pi pi-exclamation-triangle mr-2"></i>
        Kérjük, töltsd ki az összes kötelező adatot a folytatáshoz!
      </div>
      <FloatLabel variant="on">
        <InputText id="name" v-model="user.nev" class="w-full" :invalid="!user.nev" />
        <label for="name">Név</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="email" v-model="user.email" class="w-full" :invalid="!user.email" />
        <label for="email">E-mail</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="telefon" v-model="user.telefon" class="w-full" :invalid="!user.telefon" />
        <label for="telefon">Telefon</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="anyja_neve" v-model="user.anyja_neve" class="w-full" :invalid="!user.anyja_neve" />
        <label for="anyja_neve">Anyja neve</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="szuletesi_hely" v-model="user.szuletesi_hely" class="w-full" :invalid="!user.szuletesi_hely" />
        <label for="szuletesi_hely">Születési hely</label>
      </FloatLabel>

      <div class="p-floatlabel p-floatlabel-on p-inputtext p-component" :class="{ 'p-invalid': !user.szuletesi_ido }"
        style="height: 47px;">
        <Birthday v-model="user.szuletesi_ido" />
        <label for=""
          style="transform: matrix(1, 0, 0, 1, 0, -30); font-size: 13.5px; font-weight: normal;padding:0px 2px;"
          class="bg-inherit" :class="{ 'p-invalid': !user.szuletesi_ido }">Születési idő</label>
      </div>

      <FloatLabel variant="on">
        <InputText id="nemzetiseg" v-model="user.nemzetiseg" class="w-full" :invalid="!user.nemzetiseg" />
        <label for="nemzetiseg">Állampolgárság</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="szigszam" v-model="user.szigszam" class="w-full" :invalid="!user.szigszam" />
        <label for="szigszam">Személyi igazolvány / Útlevél száma</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="jogositvany_szama" v-model="user.jogositvany_szama" class="w-full"
          :invalid="!user.jogositvany_szama" />
        <label for="jogositvany_szama">Jogosítvány száma</label>
      </FloatLabel>
      <FloatLabel variant="on">
        <InputText id="lakcim" v-model="user.lakcim" class="w-full" :invalid="!user.lakcim" />
        <label for="lakcim">Lakcím</label>
      </FloatLabel>
      <div class="flex items-center gap-2">
        <ToggleSwitch v-model="sameAddress" />
        <span class="text-sm">Tartózkodási cím megegyezik a lakcímmel</span>
      </div>
      <FloatLabel v-if="!sameAddress" variant="on">
        <InputText id="tartozkodasicim" v-model="user.tartozkodasicim" class="w-full"
          :invalid="!user.tartozkodasicim" />
        <label for="tartozkodasicim">Tartózkodási cím</label>
      </FloatLabel>
      
      <div>
        Lakcím:
      </div>
      <UserAddress v-model="lakcimData" />

      <Dialog v-model:visible="showDialog" modal :header="dialogType === 'success' ? 'Sikeres' : 'Hiba'" :style="{ width: '20rem' }">
        <div class="flex items-center gap-3">
          <i :class="dialogType === 'success' ? 'pi pi-check-circle text-green-500' : 'pi pi-times-circle text-red-500'" style="font-size: 2rem"></i>
          <span>{{ dialogMessage }}</span>
        </div>
        <div class="border-b border border-red-500 mt-3 mb-2" v-if="dialogErrors"></div>
        <div v-for="err in dialogErrors" class="text-sm">
          &bull; {{ err }}
        </div>
        <template #footer>
          <Button label="Rendben" @click="showDialog = false" class="w-full" />
        </template>
      </Dialog>
      <div class="">
        <Button @click="save()" class="w-full min-w-20" icon="pi pi-save">Adatok mentése</Button>
      </div>
      <div class="pt-6">
        <Button @click="logout()" severity="danger" variant="link" class="w-full" icon="pi pi-sign-out">Kijelentkezés</Button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const isLoading = ref(false)
const sameAddress = ref(true)
const authStore = useAuthStore()
const { user, rent } = storeToRefs(authStore)
const { loadToken } = useAuthToken()
const { apiRequest } = useApi()
const showDialog = ref(false)
const dialogType = ref<'success' | 'error'>('success')
const dialogMessage = ref('')
const dialogErrors = ref()
const lakcimData = ref()
// Kötelező mezők listája
const requiredFields = [
  'nev',
  'email',
  'telefon',
  'anyja_neve',
  'szuletesi_hely',
  'szuletesi_ido',
  'nemzetiseg',
  'szigszam',
  'jogositvany_szama',
  'lakcim'
] as const

// Ellenőrzi, hogy minden kötelező mező ki van-e töltve
const hasAllRequiredData = computed(() => {
  if (!user.value) return false
  const userData = user.value as unknown as Record<string, any>
  return requiredFields.every(field => {
    const value = userData[field]
    return value && (typeof value !== 'string' || value.trim() !== '')
  })
})

async function save() {
  isLoading.value = true
  const token = await   loadToken()
  console.log(token)
  dialogErrors.value = null
  const data = await apiRequest<{ success: boolean; message: string }>('/update_profile',
    {
      headers: {
        'auth-key': token || ''
      },
      method: 'POST',
      body: {
        sameAddress: sameAddress.value,
        user: user.value
      }
    }
  )
  isLoading.value = false

  if (data.success) {
    dialogType.value = 'success'
    dialogMessage.value = data.message
  } else {
    dialogType.value = 'error'
    dialogMessage.value = data.message || 'Hiba történt'
    dialogErrors.value = data?.errors
  }
  showDialog.value = true
}

async function logout() {
  await authStore.logout()
}
</script>

<style></style>