ppeasy_vg12/resources/js/pages/users/Edit.vue

<script setup lang="ts">
import { router, useForm } from '@inertiajs/vue3';
import { computed, ref } from 'vue';
import AvatarCard from '@/components/users/AvatarCard.vue';
import LoginDetailsForm from '@/components/users/LoginDetailsForm.vue';
import TwoFactorPanel from '@/components/users/TwoFactorPanel.vue';
import UserDetailsForm from '@/components/users/UserDetailsForm.vue';
import Button from '@/components/ui/Button.vue';
import Message from '@/components/ui/Message.vue';
import type { SelectOption } from '@/components/ui/Select.vue';
import Tabs from '@/components/ui/Tabs.vue';
import { useSettings, useTranslations } from '@/composables/useVanguard';
import AppLayout from '@/layouts/AppLayout.vue';
import type {
    AvatarSource,
    LoginDetailsFormData,
    TwoFactorState,
    UserDetailsFormData,
    UserFormPayload,
} from '@/types';

const props = defineProps<{
    user: UserFormPayload;
    roles: SelectOption[];
    statuses: SelectOption[];
    countries: SelectOption[];
    avatarSources: AvatarSource[];
    twoFactor: TwoFactorState;
    showForcePasswordChange: boolean;
    activeTab?: string;
}>();

const { __ } = useTranslations();
const { setting } = useSettings();

const details = useForm<UserDetailsFormData>({
    role_id: props.user.role_id,
    status: props.user.status,
    first_name: props.user.first_name,
    last_name: props.user.last_name,
    birthday: props.user.birthday,
    phone: props.user.phone,
    address: props.user.address,
    country_id: props.user.country_id,
});

const login = useForm<LoginDetailsFormData>({
    email: props.user.email,
    username: props.user.username,
    password: '',
    password_confirmation: '',
    force_password_change: props.user.force_password_change,
});

const approving = ref(false);

const tabs = computed(() => {
    const items = [
        { value: 'details', label: __('User Details') },
        { value: 'login', label: __('Login Details') },
    ];

    if (setting('2fa.enabled')) {
        items.push({ value: '2fa', label: __('Two-Factor Authentication') });
    }

    return items;
});

const tab = ref(props.activeTab ?? 'details');

function approve(): void {
    approving.value = true;

    router.put(
        route('users.update.approve', props.user.id),
        {},
        { preserveScroll: true, onFinish: () => (approving.value = false) },
    );
}
</script>

<template>
    <AppLayout
        :title="__('Edit User')"
        :heading="user.nameOrEmail"
        :breadcrumbs="[
            { label: __('Users'), href: route('users.index') },
            { label: user.nameOrEmail, href: route('users.show', user.id) },
            { label: __('Edit') },
        ]"
    >
        <Message v-if="user.waitingApproval" severity="warn" class="mb-4">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <span>
                    {{ __('The user is waiting on your approval to be able to access the website.') }}
                </span>

                <Button
                    icon="fa fa-refresh"
                    :label="__('Approve')"
                    :loading="approving"
                    @click="approve"
                />
            </div>
        </Message>

        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <div class="lg:col-span-2">
                <div class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
                    <Tabs v-model="tab" :tabs="tabs">
                        <template #details>
                            <form
                                @submit.prevent="
                                    details.put(route('users.update.details', user.id), {
                                        preserveScroll: true,
                                    })
                                "
                            >
                                <UserDetailsForm
                                    v-model="details"
                                    :roles="roles"
                                    :statuses="statuses"
                                    :countries="countries"
                                    :errors="details.errors"
                                    :submit-label="__('Update Details')"
                                    :processing="details.processing"
                                />
                            </form>
                        </template>

                        <template #login>
                            <form
                                @submit.prevent="
                                    login.put(route('users.update.login-details', user.id), {
                                        preserveScroll: true,
                                    })
                                "
                            >
                                <LoginDetailsForm
                                    v-model="login"
                                    edit
                                    :errors="login.errors"
                                    :show-force-password-change="showForcePasswordChange"
                                    :submit-label="__('Update Details')"
                                    :processing="login.processing"
                                />
                            </form>
                        </template>

                        <template #2fa>
                            <TwoFactorPanel :user-id="user.id" :two-factor="twoFactor" />
                        </template>
                    </Tabs>
                </div>
            </div>

            <AvatarCard
                :avatar="user.avatar"
                :name-or-email="user.nameOrEmail"
                :sources="avatarSources"
                :upload-url="route('user.update.avatar', user.id)"
                :external-url="route('user.update.avatar.external', user.id)"
            />
        </div>
    </AppLayout>
</template>