UI Bilesenleri

Bu proje, PrimeVue uzerine kurulu birkac ortak UI yardimcisi kullanir.

Global overlay'ler

AdminLayout.vue, admin alani icin su bilesenleri bir kez render eder:

• @lvntr/components/ui/ConfirmDialogComponent.vue
• @lvntr/components/ui/ToastComponent.vue
• @lvntr/components/ui/AppDialog.vue

Bu bilesenler her sayfada yeniden yazilmak yerine composable ve sayfa mantigi uzerinden tetiklenir.

AppDialog ve useDialog()

AppDialog, useDialog() ile birlikte calisarak dinamik Vue bilesenlerini tek bir ortak dialog icinde gosteren yapidir.

import { useDialog } from '@/composables/useDialog';
import UserForm from '@/pages/Admin/Users/components/UserForm.vue';

const dialog = useDialog();

dialog.open(UserForm, { inDialog: true }, 'Kullaniciyi duzenle', {
    refreshKey: 'users-table',
    width: '640px',
});

Async mod

await dialog.openAsync(UserForm, '/roles/1/data', 'Kaydi duzenle', {
    refreshKey: 'users-table',
    mapResponse: (data) => ({ role: data }),
});

ConfirmDialogComponent ve useConfirm()

Onay dialog'u global olarak bir kez mount edilir ve sayfalar sadece useConfirm() cagirir.

import { router } from '@inertiajs/vue3';
import { useConfirm } from '@/composables/useConfirm';

const { confirmDelete } = useConfirm();

confirmDelete(() => {
    router.delete('/users/1');
});

ToastComponent

ToastComponent, ortak PrimeVue toast container'idir. Bu projede genellikle su kaynaklardan beslenir:

• AdminLayout.vue icindeki flash mesajlari
• useApi() hata yonetimi

AvatarUpload

Avatar yukleme icin hazir bir gorsel secici/yukleyici bilesenidir.

<AvatarUpload
    :avatar-url="user.avatar_url"
    upload-url="/user/avatar"
    delete-url="/user/avatar"
/>

Dahili davranislar:

• FileReader ile anlik onizleme
• fetch ile yukleme
• useConfirm() ile silme onayi
• basarili yukleme veya silme sonrasi Inertia reload

PageLoading

PageLoading.vue, Inertia gecisleri sirasinda skeleton overlay gosterir.

<PageLoading>
    <template #skeleton>
        <SkeletonTable :rows="6" :columns="4" />
    </template>

    <YourPageContent />
</PageLoading>

UI Components

This project uses a small set of global UI helpers on top of PrimeVue.

Global overlays

AdminLayout.vue renders these once for the whole admin area:

• @lvntr/components/ui/ConfirmDialogComponent.vue
• @lvntr/components/ui/ToastComponent.vue
• @lvntr/components/ui/AppDialog.vue

These components are meant to be triggered from composables and page logic instead of being recreated in every page.

AppDialog and useDialog()

AppDialog works with useDialog() to render dynamic Vue components in a single shared dialog.

import { useDialog } from '@/composables/useDialog';
import UserForm from '@/pages/Admin/Users/components/UserForm.vue';

const dialog = useDialog();

dialog.open(UserForm, { inDialog: true }, 'Edit user', {
    refreshKey: 'users-table',
    width: '640px',
});

Async mode

await dialog.openAsync(UserForm, '/roles/1/data', 'Edit user', {
    refreshKey: 'users-table',
    mapResponse: (data) => ({ role: data }),
});

ConfirmDialogComponent and useConfirm()

The confirm dialog is globally mounted and styled once. Pages only call useConfirm().

import { router } from '@inertiajs/vue3';
import { useConfirm } from '@/composables/useConfirm';

const { confirmDelete } = useConfirm();

confirmDelete(() => {
    router.delete('/users/1');
});

ToastComponent

ToastComponent is the shared PrimeVue toast container. In this project, it is typically fed by:

• flash messages from AdminLayout.vue
• useApi() error handling

AvatarUpload

Avatar upload is a ready-made image picker/uploader component.

<AvatarUpload
    :avatar-url="user.avatar_url"
    upload-url="/user/avatar"
    delete-url="/user/avatar"
/>

Built-in behavior:

• instant preview with FileReader
• upload via fetch
• delete confirmation through useConfirm()
• Inertia reload after successful upload or delete

PageLoading

PageLoading.vue shows a skeleton overlay during Inertia navigation.

<PageLoading>
    <template #skeleton>
        <SkeletonTable :rows="6" :columns="4" />
    </template>

    <YourPageContent />
</PageLoading>