Add profile avatar uploads #104
@@ -5,7 +5,6 @@ import { computed } from 'vue';
|
||||
import AppLogo from '@/components/AppLogo.vue';
|
||||
import AppLogoIcon from '@/components/AppLogoIcon.vue';
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -33,10 +32,10 @@ import {
|
||||
} from '@/components/ui/tooltip';
|
||||
import UserMenuContent from '@/components/UserMenuContent.vue';
|
||||
import { useCurrentUrl } from '@/composables/useCurrentUrl';
|
||||
import { getInitials } from '@/composables/useInitials';
|
||||
import { toUrl } from '@/lib/utils';
|
||||
import { dashboard } from '@/routes/index';
|
||||
import type { BreadcrumbItem, NavItem } from '@/types';
|
||||
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
|
||||
|
||||
type Props = {
|
||||
breadcrumbs?: BreadcrumbItem[];
|
||||
@@ -245,20 +244,7 @@ const rightNavItems: NavItem[] = [
|
||||
size="icon"
|
||||
class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2"
|
||||
>
|
||||
<Avatar
|
||||
class="size-8 overflow-hidden rounded-full"
|
||||
>
|
||||
<AvatarImage
|
||||
v-if="auth.user.avatar"
|
||||
:src="auth.user.avatar"
|
||||
:alt="auth.user.name"
|
||||
/>
|
||||
<AvatarFallback
|
||||
class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
|
||||
>
|
||||
{{ getInitials(auth.user?.name) }}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<UserAvatar rounded />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" class="w-56">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { useInitials } from '@/composables/useInitials';
|
||||
import type { User } from '@/types';
|
||||
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
|
||||
|
||||
type Props = {
|
||||
user: User;
|
||||
@@ -22,12 +22,7 @@ const showAvatar = computed(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Avatar class="h-8 w-8 overflow-hidden rounded-lg">
|
||||
<AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
|
||||
<AvatarFallback class="rounded-lg text-black dark:text-white">
|
||||
{{ getInitials(user.name) }}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<UserAvatar />
|
||||
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-medium">{{ user.name }}</span>
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { getInitials } from "@/composables/useInitials";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@/components/ui/avatar/index";
|
||||
import { usePage } from "@inertiajs/vue3";
|
||||
import { computed, PropType } from "vue";
|
||||
import { UserModel } from "@/types/models/user-model";
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object as PropType<UserModel>,
|
||||
},
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const page = usePage();
|
||||
const auth = computed(() => page.props.auth);
|
||||
|
||||
const user = computed(() => props.user ?? auth.value.user)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
|
||||
<AvatarImage
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
:alt="user.name"
|
||||
/>
|
||||
<AvatarFallback
|
||||
class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
|
||||
>
|
||||
{{ getInitials(auth.user?.name) }}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</template>
|
||||
@@ -1,6 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head, Link } from '@inertiajs/vue3';
|
||||
import { FolderPlus, KeyRound, Pencil, Shield, UserPlus, Users } from 'lucide-vue-next';
|
||||
import {
|
||||
FolderPlus,
|
||||
KeyRound,
|
||||
Pencil,
|
||||
Shield,
|
||||
UserPlus,
|
||||
Users,
|
||||
} from 'lucide-vue-next';
|
||||
import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -19,6 +26,7 @@ import {
|
||||
index as adminUsers,
|
||||
} from '@/routes/admin/users';
|
||||
import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
|
||||
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
|
||||
|
||||
const props = defineProps<AdminUsersPageProps>();
|
||||
|
||||
@@ -111,8 +119,13 @@ const hasPermission = (actorId: number, permission: string) =>
|
||||
>
|
||||
<td class="px-4 py-4">
|
||||
<div
|
||||
class="text-foreground font-medium"
|
||||
class="text-foreground items-medium flex items-center"
|
||||
>
|
||||
<UserAvatar
|
||||
:user="user"
|
||||
class="mr-2 size-8"
|
||||
rounded
|
||||
/>
|
||||
{{ user.name }}
|
||||
</div>
|
||||
</td>
|
||||
@@ -122,7 +135,9 @@ const hasPermission = (actorId: number, permission: string) =>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Badge
|
||||
v-if="user.must_change_password_on_next_login"
|
||||
v-if="
|
||||
user.must_change_password_on_next_login
|
||||
"
|
||||
variant="outline"
|
||||
class="gap-1.5"
|
||||
>
|
||||
@@ -170,10 +185,24 @@ const hasPermission = (actorId: number, permission: string) =>
|
||||
</td>
|
||||
<td class="px-4 py-4">
|
||||
<div class="flex justify-end">
|
||||
<div class="flex flex-wrap justify-end gap-3">
|
||||
<Button as-child size="sm" variant="outline">
|
||||
<Link :href="editAdminUser(user.id)">
|
||||
<Pencil class="size-4" />
|
||||
<div
|
||||
class="flex flex-wrap justify-end gap-3"
|
||||
>
|
||||
<Button
|
||||
as-child
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
<Link
|
||||
:href="
|
||||
editAdminUser(
|
||||
user.id,
|
||||
)
|
||||
"
|
||||
>
|
||||
<Pencil
|
||||
class="size-4"
|
||||
/>
|
||||
Edit
|
||||
</Link>
|
||||
</Button>
|
||||
@@ -195,7 +224,9 @@ const hasPermission = (actorId: number, permission: string) =>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="permissions[]"
|
||||
:value="option.value"
|
||||
:value="
|
||||
option.value
|
||||
"
|
||||
:checked="
|
||||
hasPermission(
|
||||
user.id,
|
||||
@@ -209,7 +240,9 @@ const hasPermission = (actorId: number, permission: string) =>
|
||||
}}</span>
|
||||
</label>
|
||||
|
||||
<div class="w-full sm:hidden" />
|
||||
<div
|
||||
class="w-full sm:hidden"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
|
||||
@@ -6,7 +6,6 @@ import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileCo
|
||||
import DeleteUser from '@/components/DeleteUser.vue';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -14,8 +13,8 @@ import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import SettingsLayout from '@/layouts/settings/Layout.vue';
|
||||
import { edit } from '@/routes/profile/index';
|
||||
import { send } from '@/routes/verification';
|
||||
import { getInitials } from '@/composables/useInitials';
|
||||
import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types';
|
||||
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
|
||||
|
||||
defineProps<SettingsProfilePageProps>();
|
||||
|
||||
@@ -94,18 +93,7 @@ onBeforeUnmount(() => {
|
||||
<div class="grid gap-3">
|
||||
<Label for="avatar">Profile picture</Label>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="size-16 overflow-hidden rounded-lg">
|
||||
<AvatarImage
|
||||
v-if="displayedAvatar"
|
||||
:src="displayedAvatar"
|
||||
:alt="user.name"
|
||||
/>
|
||||
<AvatarFallback
|
||||
class="rounded-lg font-semibold text-black dark:text-white"
|
||||
>
|
||||
{{ getInitials(user.name) }}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<UserAvatar class="size-16" />
|
||||
<div class="grid flex-1 gap-2">
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<Input
|
||||
|
||||
Reference in New Issue
Block a user