Finish update user functionality

Author: perisicnikola37

app/Http/Controllers/UserController.php

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

resources/js/Pages/Users/Create.vue

@@ -76,7 +76,7 @@ import Button from '@/Components/Button.vue';
 export default {
     components: {
         AppLayout,
-        Button
+        Button,
     },
     props: {
         errors: Object,

resources/js/Pages/Users/Edit.vue

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

resources/js/Pages/Users/Index.vue

@@ -22,11 +22,9 @@
 						<div class="mb-3 xl:w-96">
 							<div class="relative flex items-stretch w-4/5 mb-3 input-group">
 
-								<input type="text" v-model="term" @keyup="search">
-
-								<!-- <input id="search" type='text' v-model="term" @keyup="search"
+								<input id="search" type='text' v-model="term" @keyup="search"
 									class="outline-none focus:ring-0 rounded-r-none form-control relative min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0"
-									placeholder="Search..."> -->
+									placeholder="Search...">
 
 								<button
 									class="rounded-l-none btn px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700  focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center"
@@ -139,9 +137,15 @@ export default {
 		}
 	},
 	methods: {
-		deleteUser(user) {
-			if (!confirm('Are you sure you want to delete user?')) return;
-			this.$inertia.delete(route('users.destroy', user.id));
+		confirmAction(message, callback) {
+			if (confirm(message)) {
+				callback();
+			}
+		},
+		deleteUser: function (user) {
+			this.confirmAction('Are you sure you want to delete user?', function () {
+				this.$inertia.delete(route('users.destroy', user.id));
+			}.bind(this));
 		},
 		search() {
 			this.$inertia.replace(this.route('users.index', { term: this.term }))