109 lines
4.3 KiB
Vue
109 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import PluginSlot from '@/components/PluginSlot.vue';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
|
|
const props = defineProps<{
|
|
user: {
|
|
id: number;
|
|
name: string;
|
|
nameOrEmail: string;
|
|
email: string;
|
|
avatar: string;
|
|
phone: string | null;
|
|
birthday: string;
|
|
fullAddress: string;
|
|
lastLogin: string;
|
|
};
|
|
canImpersonate: boolean;
|
|
slots: Array<{ component: string; props: Record<string, unknown> }>;
|
|
}>();
|
|
|
|
const { __ } = useTranslations();
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout
|
|
:title="user.nameOrEmail"
|
|
:heading="user.nameOrEmail"
|
|
:breadcrumbs="[
|
|
{ label: __('Users'), href: route('users.index') },
|
|
{ label: user.nameOrEmail },
|
|
]"
|
|
>
|
|
<div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
|
|
<div :class="props.slots.length ? 'lg:col-span-5 xl:col-span-4' : 'lg:col-span-6 lg:col-start-4'">
|
|
<div class="rounded-lg border border-slate-200 bg-white shadow-sm">
|
|
<div
|
|
class="flex items-center justify-between border-b border-slate-100 px-6 py-4"
|
|
>
|
|
<h6 class="font-medium text-slate-700">{{ __('Details') }}</h6>
|
|
|
|
<small class="flex items-center gap-2">
|
|
<template v-if="canImpersonate">
|
|
<a
|
|
:href="route('impersonate', user.id)"
|
|
class="text-primary-600 hover:underline"
|
|
>
|
|
{{ __('Impersonate') }}
|
|
</a>
|
|
<span class="text-slate-300">|</span>
|
|
</template>
|
|
|
|
<Link
|
|
:href="route('users.edit', user.id)"
|
|
class="text-primary-600 hover:underline"
|
|
>
|
|
{{ __('Edit') }}
|
|
</Link>
|
|
</small>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex flex-col items-center pt-3">
|
|
<img
|
|
:src="user.avatar"
|
|
width="130"
|
|
height="130"
|
|
:alt="user.nameOrEmail"
|
|
class="mb-4 size-[130px] rounded-full border border-slate-200 object-cover p-1"
|
|
/>
|
|
|
|
<h5 v-if="user.name" class="text-lg font-medium text-slate-800">
|
|
{{ user.name }}
|
|
</h5>
|
|
|
|
<a :href="`mailto:${user.email}`" class="mb-2 font-light text-slate-500">
|
|
{{ user.email }}
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="mt-3 divide-y divide-slate-100 border-t border-slate-100">
|
|
<li v-if="user.phone" class="py-3">
|
|
<strong>{{ __('Phone') }}:</strong>
|
|
<a :href="`tel:${user.phone}`" class="text-primary-600">
|
|
{{ user.phone }}
|
|
</a>
|
|
</li>
|
|
<li class="py-3">
|
|
<strong>{{ __('Birthday') }}:</strong> {{ user.birthday }}
|
|
</li>
|
|
<li class="py-3">
|
|
<strong>{{ __('Address') }}:</strong> {{ user.fullAddress }}
|
|
</li>
|
|
<li class="py-3">
|
|
<strong>{{ __('Last Logged In') }}:</strong> {{ user.lastLogin }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="props.slots.length" class="lg:col-span-7 xl:col-span-8">
|
|
<PluginSlot name="user:show" :payloads="props.slots" />
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|