PetschStudios/KanbanGit
3
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 24 Wiki Activity

Add profile avatar uploads #104

Merged
Twyco merged 5 commits from codex/profile-avatars into main 2026-06-24 14:57:19 +00:00
Conversation 0 Commits 5 Files Changed 25
+89 -46
5 changed files with 89 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1f16393dca - Show all commits
resources/js/components/AppHeader.vue
+2 -16
View File
@@ -5,7 +5,6 @@ import { computed } from 'vue';
import AppLogo from '@/components/AppLogo.vue'; import AppLogo from '@/components/AppLogo.vue';
import AppLogoIcon from '@/components/AppLogoIcon.vue'; import AppLogoIcon from '@/components/AppLogoIcon.vue';
import Breadcrumbs from '@/components/Breadcrumbs.vue'; import Breadcrumbs from '@/components/Breadcrumbs.vue';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
DropdownMenu, DropdownMenu,
@@ -33,10 +32,10 @@ import {
} from '@/components/ui/tooltip'; } from '@/components/ui/tooltip';
import UserMenuContent from '@/components/UserMenuContent.vue'; import UserMenuContent from '@/components/UserMenuContent.vue';
import { useCurrentUrl } from '@/composables/useCurrentUrl'; import { useCurrentUrl } from '@/composables/useCurrentUrl';
import { getInitials } from '@/composables/useInitials';
import { toUrl } from '@/lib/utils'; import { toUrl } from '@/lib/utils';
import { dashboard } from '@/routes/index'; import { dashboard } from '@/routes/index';
import type { BreadcrumbItem, NavItem } from '@/types'; import type { BreadcrumbItem, NavItem } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
type Props = { type Props = {
breadcrumbs?: BreadcrumbItem[]; breadcrumbs?: BreadcrumbItem[];
@@ -245,20 +244,7 @@ const rightNavItems: NavItem[] = [
size="icon" size="icon"
class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2" class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2"
> >
<Avatar <UserAvatar rounded />
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>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-56"> <DropdownMenuContent align="end" class="w-56">
resources/js/components/UserInfo.vue
+2 -7
View File
@@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useInitials } from '@/composables/useInitials'; import { useInitials } from '@/composables/useInitials';
import type { User } from '@/types'; import type { User } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
type Props = { type Props = {
user: User; user: User;
@@ -22,12 +22,7 @@ const showAvatar = computed(
</script> </script>
<template> <template>
<Avatar class="h-8 w-8 overflow-hidden rounded-lg"> <UserAvatar />
<AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
<AvatarFallback class="rounded-lg text-black dark:text-white">
{{ getInitials(user.name) }}
</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight"> <div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">{{ user.name }}</span> <span class="truncate font-medium">{{ user.name }}</span>
resources/js/components/ui/avatar/UserAvatar.vue
+41
View File
@@ -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>
resources/js/pages/admin/users/Index.vue
+42 -9
View File
@@ -1,6 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { Form, Head, Link } from '@inertiajs/vue3'; 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 UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
import Heading from '@/components/Heading.vue'; import Heading from '@/components/Heading.vue';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -19,6 +26,7 @@ import {
index as adminUsers, index as adminUsers,
} from '@/routes/admin/users'; } from '@/routes/admin/users';
import type { AdminUsersPageProps, BreadcrumbItem } from '@/types'; import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
const props = defineProps<AdminUsersPageProps>(); const props = defineProps<AdminUsersPageProps>();
@@ -111,8 +119,13 @@ const hasPermission = (actorId: number, permission: string) =>
> >
<td class="px-4 py-4"> <td class="px-4 py-4">
<div <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 }} {{ user.name }}
</div> </div>
</td> </td>
@@ -122,7 +135,9 @@ const hasPermission = (actorId: number, permission: string) =>
<td class="px-4 py-4"> <td class="px-4 py-4">
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<Badge <Badge
v-if="user.must_change_password_on_next_login" v-if="
user.must_change_password_on_next_login
"
variant="outline" variant="outline"
class="gap-1.5" class="gap-1.5"
> >
@@ -170,10 +185,24 @@ const hasPermission = (actorId: number, permission: string) =>
</td> </td>
<td class="px-4 py-4"> <td class="px-4 py-4">
<div class="flex justify-end"> <div class="flex justify-end">
<div class="flex flex-wrap justify-end gap-3"> <div
<Button as-child size="sm" variant="outline"> class="flex flex-wrap justify-end gap-3"
<Link :href="editAdminUser(user.id)"> >
<Pencil class="size-4" /> <Button
as-child
size="sm"
variant="outline"
>
<Link
:href="
editAdminUser(
user.id,
)
"
>
<Pencil
class="size-4"
/>
Edit Edit
</Link> </Link>
</Button> </Button>
@@ -195,7 +224,9 @@ const hasPermission = (actorId: number, permission: string) =>
<input <input
type="checkbox" type="checkbox"
name="permissions[]" name="permissions[]"
:value="option.value" :value="
option.value
"
:checked=" :checked="
hasPermission( hasPermission(
user.id, user.id,
@@ -209,7 +240,9 @@ const hasPermission = (actorId: number, permission: string) =>
}}</span> }}</span>
</label> </label>
<div class="w-full sm:hidden" /> <div
class="w-full sm:hidden"
/>
<Button <Button
type="submit" type="submit"
resources/js/pages/settings/Profile.vue
+2 -14
View File
@@ -6,7 +6,6 @@ import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileCo
import DeleteUser from '@/components/DeleteUser.vue'; import DeleteUser from '@/components/DeleteUser.vue';
import Heading from '@/components/Heading.vue'; import Heading from '@/components/Heading.vue';
import InputError from '@/components/InputError.vue'; import InputError from '@/components/InputError.vue';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
@@ -14,8 +13,8 @@ import AppLayout from '@/layouts/AppLayout.vue';
import SettingsLayout from '@/layouts/settings/Layout.vue'; import SettingsLayout from '@/layouts/settings/Layout.vue';
import { edit } from '@/routes/profile/index'; import { edit } from '@/routes/profile/index';
import { send } from '@/routes/verification'; import { send } from '@/routes/verification';
import { getInitials } from '@/composables/useInitials';
import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types'; import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
defineProps<SettingsProfilePageProps>(); defineProps<SettingsProfilePageProps>();
@@ -94,18 +93,7 @@ onBeforeUnmount(() => {
<div class="grid gap-3"> <div class="grid gap-3">
<Label for="avatar">Profile picture</Label> <Label for="avatar">Profile picture</Label>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<Avatar class="size-16 overflow-hidden rounded-lg"> <UserAvatar class="size-16" />
<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>
<div class="grid flex-1 gap-2"> <div class="grid flex-1 gap-2">
<div class="flex flex-col gap-2 sm:flex-row"> <div class="flex flex-col gap-2 sm:flex-row">
<Input <Input