Add default global user profile variable

Author: perisicnikola37

app/Http/Middleware/HandleInertiaRequests.php

@@ -46,7 +46,8 @@ public function share(Request $request): array
             'counts' => [
                 'userCount' => User::count(),
                 'roleCount' => Role::count(),
-            ]
+            ],
+            'avatar' => 'https://painrehabproducts.com/wp-content/uploads/2014/10/facebook-default-no-profile-pic.jpg'
         ]);
     }
-}
+}

resources/js/Pages/Profile/Show.vue

@@ -3,6 +3,7 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue';
 import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
 import SectionBorder from '@/Components/SectionBorder.vue';
+            avatar: thhis.$page.props.avatar
 import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
 import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
@@ -16,13 +17,13 @@ defineProps({
 <template>
     <AppLayout title="Profile">
         <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                 Profile
             </h2>
         </template>
 
         <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <div class="py-10 mx-auto max-w-7xl sm:px-6 lg:px-8">
                 <div v-if="$page.props.jetstream.canUpdateProfileInformation">
                     <UpdateProfileInformationForm :user="$page.props.auth.user" />
 
@@ -36,10 +37,8 @@ defineProps({
                 </div>
 
                 <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
-                    <TwoFactorAuthenticationForm
-                        :requires-confirmation="confirmsTwoFactorAuthentication"
-                        class="mt-10 sm:mt-0"
-                    />
+                    <TwoFactorAuthenticationForm :requires-confirmation="confirmsTwoFactorAuthentication"
+                        class="mt-10 sm:mt-0" />
 
                     <SectionBorder />
                 </div>

resources/js/Pages/Users/Index.vue

@@ -20,8 +20,8 @@
 				<div class="overflow-hidden bg-white shadow-xl sm:rounded-lg">
 
 					<a href="#" @click="deleteSelectedUsers"
-						class="float-left px-4 mt-3 py-2 text-red-400 duration-100 rounded hover:text-red-600">
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6">
+						class="float-left px-4 py-2 mt-3 text-red-400 duration-100 rounded hover:text-red-600">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6">
 							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor"
 								fill="none"
 								d="M3 6h18M6 6l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 4v-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1" />
@@ -58,6 +58,10 @@
 									class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
 									ID
 								</th>
+								<th scope="col"
+									class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
+									Avatar
+								</th>
 								<th scope="col"
 									class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
 									Name
@@ -90,6 +94,11 @@
 										{{ user.id }}
 									</div>
 								</td>
+								<td>
+									<img class="w-10 h-10 mx-auto rounded-full"
+										:src="user.avatar != 'placeholder' ? user.avatar : $page.props.avatar"
+										alt="User profile image">
+								</td>
 								<td class="px-6 py-4 whitespace-nowrap">
 									<div class="flex items-center justify-center">
 
@@ -196,6 +205,13 @@ export default {
 				alert('An error occurred while deleting the selected users.');
 			}
 		},
+		computed: {
+			userAvatar(user) {
+				return this.user.avatar !== 'placeholder'
+					? this.user.avatar
+					: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png';
+			}
+		},
 	}
 }
 </script>

resources/js/Pages/Users/Show.vue

@@ -30,7 +30,8 @@ export default {
         AppLayout
     },
     props: {
-        getUser: Object
+        getUser: Object,
+        avatar: String
     },
     data() {
         return {
@@ -41,7 +42,7 @@ export default {
         userAvatar() {
             return this.getUser.avatar !== 'placeholder'
                 ? this.getUser.avatar
-                : 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png';
+                : this.$page.props.avatar;
         }
     },
     mounted() {