Finish multi delete users functionality

Author: perisicnikola37

README.md

@@ -54,6 +54,7 @@ This application includes the following features:
 - Browser sessions
 - Full text searching
 - Pagination
+- Multi delete users
 
 ## Contributing
 

app/Http/Controllers/UserController.php

@@ -78,4 +78,12 @@ public function destroy(string $id)
 
         return back()->with('delete', 'User has been deleted!');
     }
-}
+
+    public function deleteMultiple(Request $request)
+    {
+        $userIds = $request->input('ids');
+        User::whereIn('id', $userIds)->delete();
+
+        return redirect()->route('users.index')->with('success', 'Operation successfully!');
+    }
+}

resources/js/Pages/Users/Index.vue

@@ -18,6 +18,16 @@
 
 			<div class="mx-auto max-w-7xl sm:px-6 lg:px-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">
+							<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" />
+						</svg>
+					</a>
+
 					<div class="flex justify-end mt-3">
 						<div class="mb-3 xl:w-96">
 							<div class="relative flex items-stretch w-4/5 mb-3 input-group">
@@ -39,9 +49,15 @@
 							</div>
 						</div>
 					</div>
+
 					<table class="min-w-full divide-y divide-gray-200">
 						<thead class="bg-gray-50">
 							<tr>
+								<th scope="col"></th>
+								<th scope="col"
+									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">
 									Name
@@ -65,8 +81,18 @@
 						</thead>
 						<tbody class="bg-white divide-y divide-gray-200">
 							<tr v-for="user in users.data" :key="user.id">
+								<td>
+									<input type="checkbox" v-model="selectedUsers" :value="user.id"
+										class="ml-5 outline-none" />
+								</td>
+								<td class="px-6 py-4 whitespace-nowrap">
+									<div class="text-sm text-center text-gray-900">
+										{{ user.id }}
+									</div>
+								</td>
 								<td class="px-6 py-4 whitespace-nowrap">
 									<div class="flex items-center justify-center">
+
 										<div class="ml-4">
 											<div class="text-sm font-medium text-gray-900">
 												<inertia-link class="transition hover:text-blue-500"
@@ -109,6 +135,7 @@
 												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 										</svg>
 									</a>
+
 								</td>
 							</tr>
 						</tbody>
@@ -133,6 +160,7 @@ export default {
 	},
 	data() {
 		return {
+			selectedUsers: [],
 			term: this.$page.term || '',
 		}
 	},
@@ -150,6 +178,24 @@ export default {
 		search() {
 			this.$inertia.replace(this.route('users.index', { term: this.term }))
 		},
+		async deleteSelectedUsers() {
+			if (this.selectedUsers.length === 0) {
+				return;
+			}
+
+			const confirmed = confirm(`Are you sure you want to delete ${this.selectedUsers.length} user(s)?`);
+			if (!confirmed) {
+				return;
+			}
+
+			try {
+				await this.$inertia.post('/users/delete', { ids: this.selectedUsers });
+				this.selectedUsers = [];
+			} catch (error) {
+				console.error(error);
+				alert('An error occurred while deleting the selected users.');
+			}
+		},
 	}
 }
 </script>

routes/web.php

@@ -15,6 +15,9 @@
     ]);
 });
 
+Route::post('/users/delete', [UserController::class, 'deleteMultiple'])->name('users.delete');
+
+
 Route::resource('/users', UserController::class);
 Route::resource('/roles', RoleController::class);