Finish updating a role functionality

Author: perisicnikola37

app/Http/Controllers/RoleController.php

@@ -60,7 +60,9 @@ public function edit(Role $role)
      */
     public function update(Request $request, string $id)
     {
-        //
+        Role::where('id', $id)->update($request->all());
+
+        return redirect('/roles')->with('success', 'Role has been updated!');
     }
 
     /**

resources/js/Pages/Roles/Edit.vue

@@ -1,18 +1,65 @@
 <template>
-    <div>
-        <AppLayout title="Edit role">
-            Edit role: {{ role.name }}
-        </AppLayout>
-    </div>
+    <AppLayout title="Edit role">
+
+        <template #header>
+            <Breadcrumb :href="'roles'" :title="'Roles'" :property="role" />
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="w-full max-w-xs m-auto">
+                    <form @submit.prevent="submit" class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
+
+                        <div class="mb-4">
+                            <label class="block mb-2 text-sm font-bold text-gray-700" for="name">
+                                Role name
+                            </label>
+                            <input v-model="form.name"
+                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
+                                id="name" type="text">
+                        </div>
+
+                        <div class="flex items-center justify-between">
+                            <Button :form="form"></Button>
+                        </div>
+                    </form>
+                    <p class="text-xs text-center text-gray-500">
+                        &copy;2023 - <a class="text-blue-500" href="https://github.com/perisicnikola37"
+                            target="_blank">@perisicnikola37</a>
+                    </p>
+                </div>
+
+            </div>
+        </div>
+    </AppLayout>
 </template>
 
 <script>
+import Breadcrumb from "@/Components/Breadcrumb.vue";
+import Button from "@/Components/Button.vue";
 import AppLayout from '@/Layouts/AppLayout.vue';
 
 export default {
+    components: {
+        AppLayout,
+        Breadcrumb,
+        Button
+    },
     props: {
         role: Object,
     },
-    components: { AppLayout }
+    data() {
+        return {
+            form: this.$inertia.form({
+                name: this.role.name,
+            })
+        }
+    },
+    methods: {
+        submit() {
+            this.form.put(this.route('roles.update', this.role.id), {
+            })
+        }
+    }
 }
 </script>