Started with user edit form

app/Controllers/Http/UsersController.ts

@@ -31,7 +31,7 @@ export default class UsersController {
       .with('UserPolicy')
       .authorize('show', queriedUser)
 
-    return inertia.render('Users/Show', { queriedUser })
+    return inertia.render('Users/Show', { user: queriedUser })
   }
 
   public async edit({ bouncer, params, inertia }: HttpContextContract) {
@@ -41,7 +41,7 @@ export default class UsersController {
       .with("UserPolicy")
       .authorize('edit', queriedUser)
 
-      return inertia.render("Users/Edit", { queriedUser })
+      return inertia.render("Users/Edit", { user: queriedUser })
   }
 
   public async update({}: HttpContextContract) {}

components.d.ts

@@ -8,12 +8,16 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     NButton: typeof import('naive-ui')['NButton']
-    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDivider: typeof import('naive-ui')['NDivider']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NInput: typeof import('naive-ui')['NInput']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NText: typeof import('naive-ui')['NText']
   }
 }

resources/js/Layouts/LoginLayout.vue

@@ -1,6 +1,6 @@
 <template>
     <main class="bg-slate-100 flex justify-center h-screen">
-        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow" :class="class">
+        <div class="m-auto bg-white p-4 border rounded drop-shadow" :class="class">
                 <slot></slot>
         </div>
     </main>

resources/js/components/MainNav.vue

@@ -5,7 +5,7 @@
         mode="horizontal" 
         :options="menuOptions" 
         class="-mx-4"
-    />
+        />
     </div>
 </template>
 

resources/js/pages/Users/Edit.vue

@@ -1,6 +1,81 @@
 <template>
+    <n-menu 
+        mode="horizontal"
+        :options="menuOptions"
+        class="-mx-4"
+    />
+    <n-form
+        :model="userModel"
+        label-placement="left"
+        require-mark-placement="right-hanging"
+        label-width="auto"
+    >
+        <n-form-item label="ID" path="id">
+            <n-text>{{ userModel.id }}</n-text>
+        </n-form-item>
+        <n-form-item label="Benutzername" path="username">
+            <n-input
+                class="align-middle"
+                v-model:value="userModel.username"
+            />
+        </n-form-item>
+        <n-form-item label="Ist Admin?" path="is_admin">
+            <n-checkbox v-model:checked="userModel.is_admin"/>
+        </n-form-item>
+        <n-form-item label="Passwort" path="password">
+            <n-input
+                type="password"
+                show-password-on="mouseclick"
+                placeholder="Passwort"
+                v-model:value="userModel.password"
+            />
+        </n-form-item>
+        <n-form-item label="Passwort wiederholen" path="password_repeat">
+            <n-input
+                type="password"
+                show-password-on="mouseclick"
+                placeholder="Passwort wiederholen"
+                v-model:value="userModel.password_repeat"
+            />
+        </n-form-item>
+    </n-form>
+
+    {{ userModel }}
+    
 
 </template>
 
 <script setup>
+
+import BELayout from '@/layouts/BELayout.vue'
+import { Link } from '@inertiajs/vue3'
+import { h, reactive } from 'vue'
+import { NIcon } from 'naive-ui'
+import {
+    ArrowBackFilled as Back
+} from '@vicons/material'
+
+defineOptions({
+    layout: BELayout
+})
+
+const props = defineProps(['user'])
+
+const userModel = reactive(props.user)
+
+const menuOptions = [
+    {
+        label: () => 
+            h(
+                Link,
+                {
+                    href: "/users",
+                    method: "get",
+                }, 
+                () => "Zurück"
+            ),
+            key: 'back',
+            icon: () => h(NIcon, { component: Back }),
+    }
+]
 </script>

resources/js/pages/Users/Index.vue

@@ -17,6 +17,7 @@ import { h } from 'vue'
 import BELayout from '@/layouts/BELayout.vue'
 import FlashMessages from '@/components/FlashMessages.vue'
 import { NIcon, NButton } from 'naive-ui'
+import { router } from '@inertiajs/vue3'
 
 import {
    AdminPanelSettingsFilled as Admin,
@@ -78,7 +79,7 @@ const columns = [
 ]
 
 function clickEdit(id){
-   console.log("Edit clicked: "+id)
+   router.get('users/'+id+'/edit')
 }
 
 function clickDelete(id){