show user first impl.

app/Controllers/Http/UsersController.ts

@@ -24,7 +24,15 @@ export default class UsersController {
 
   public async store({}: HttpContextContract) {}
 
-  public async show({}: HttpContextContract) {}
+  public async show({ bouncer, params, inertia }: HttpContextContract) {
+    const queriedUser: User = await User.findByOrFail('id', params.id)
+    
+    await bouncer
+      .with('UserPolicy')
+      .authorize('show', queriedUser)
+
+    return inertia.render('Users/Show', { queriedUser })
+  }
 
   public async edit({}: HttpContextContract) {}
 

components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']

resources/js/components/MainNav.vue

@@ -7,26 +7,34 @@
     />
 </template>
 
-<script setup>
+<script lang="ts" setup>
     import { Link, usePage } from '@inertiajs/vue3'
-    import { h, ref, watch } from 'vue';
-    import { NIcon, NButton } from 'naive-ui'
+    import { h, ref } from 'vue';
+    import type { Ref, Component } from 'vue'
+    import type { MenuOption } from 'naive-ui'
+    import type { User } from '../types/User'
+    import { NIcon } from 'naive-ui'
     import {
         GroupsFilled as Users,
         EventNoteFilled as Events,
-        LogOutFilled as Logout
+        LogOutFilled as Logout,
+        SettingsRound as Settings,
+        PersonRound as Profile,
     } from '@vicons/material'
 
-    const { request, isAdmin } = usePage().props
-    const activeKey = ref(request.url)
+    const activeKey: Ref<string> = ref((usePage().props.request as any)?.url)
+    const user: User = usePage().props.user as User
+    
+    console.log(usePage().props.request)
 
-    const menuOptions = ref([])
-    menuOptions.value.push({
+    const menuOptions: MenuOption[] = []
+
+    menuOptions.push({
         label: () =>
             h(
                 Link, {
                     href: "/events",
-                    methode: "get"
+                    method: "get"
                 },
                 () => "Veranstaltungen"
             ),
@@ -34,7 +42,7 @@
             icon: renderIcon(Events)
     })
 
-    if(isAdmin) menuOptions.value.push({
+    if(user.is_admin) menuOptions.push({
         label: () => 
             h(
                 Link, {
@@ -47,9 +55,25 @@
             icon: renderIcon(Users)
     })
 
-    menuOptions.value.push({
-        label: () =>
-            h(
+    menuOptions.push({
+        label: "Einstellungen",
+        key: "einstellungen",
+        icon: renderIcon(Settings),
+        children: [{
+            label: () => h(
+                Link, {
+                    href: "/users/"+user.id,
+                    method: "get",
+                    as: "button"
+                },
+                () => "Mein Profil"
+            ),
+            key: 'profile',
+            icon: renderIcon(Profile)
+
+        },
+        {
+            label: () => h(
                 Link, {
                     href: "/logout",
                     method: "post",
@@ -59,11 +83,15 @@
             ),
             key: '/logout',
             icon: renderIcon(Logout)
+        }]
+    })
+    menuOptions.push({
+        
     })
 
     
 
-    function renderIcon(icon) {
+    function renderIcon(icon: Component) {
         return () => h(NIcon, null, { default: () => h(icon) })
 
     }

resources/js/pages/Users/Show.vue

@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+<script lang="ts" setup>
+import BELayout from '@/layouts/BELayout.vue'
+//import FlashMessages from '@/components/FlashMessages.vue'
+
+defineOptions({ layout: BELayout })
+
+
+</script>

resources/js/types/User.ts

@@ -0,0 +1,10 @@
+import type { DateTime } from 'luxon'
+
+export type User = {
+    id: Number,
+    username: String,
+    is_admin: Boolean,
+    updated_at: DateTime,
+    created_at: DateTime,
+    remember_me_token: String | null,
+}

start/inertia.ts

@@ -11,8 +11,8 @@
 import Inertia from '@ioc:EidelLev/Inertia'
 
 Inertia.share({
-  //errors: ({session}) => session.flashMessages.get('errors'),
+  errors: ({ session }) => session.flashMessages.get('errors'),
   request: ({ request }) => request,
-  isAdmin: ({ auth }) => auth.user?.isAdmin,
+  user: ({ auth }) => auth.user,
   flashMessages: ({ session }) => session.flashMessages.all(),
 }).version(() => Inertia.manifestFile('public/assets/manifest.json'))