From 1b2dbd06c5cc0b96700a3d4264a0ff18625d1a53 Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 11:02:53 -0700 Subject: [PATCH 1/9] feat(admin): add Groups Management functionality and middleware - Introduced GroupsController for managing groups via API. - Added AdminMiddleware to restrict access to admin routes. - Created GroupsManagement Vue component for the admin interface. - Updated AdminController to include a route for groups management. - Added corresponding Blade view for groups management. - Updated navigation to include a link to Groups Management. All this is boilerplate and we will be adding more functionality to it. That said, we needed to wrap the web route with the AdminMiddleware as any regular user could access /stats and /admin/groups. --- app/Http/Controllers/API/GroupsController.php | 78 +++++++++++++++++++ app/Http/Controllers/AdminController.php | 5 ++ app/Http/Middleware/AdminMiddleware.php | 45 +++++++++++ bootstrap/app.php | 1 + resources/js/app.js | 2 + .../js/components/admin/GroupsManagement.vue | 19 +++++ resources/views/admin/groups.blade.php | 23 ++++++ resources/views/layouts/navbar.blade.php | 1 + routes/api.php | 5 ++ routes/web.php | 3 +- 10 files changed, 181 insertions(+), 1 deletion(-) create mode 100644 app/Http/Controllers/API/GroupsController.php create mode 100644 app/Http/Middleware/AdminMiddleware.php create mode 100644 resources/js/components/admin/GroupsManagement.vue create mode 100644 resources/views/admin/groups.blade.php diff --git a/app/Http/Controllers/API/GroupsController.php b/app/Http/Controllers/API/GroupsController.php new file mode 100644 index 0000000000..0e61ef4e3f --- /dev/null +++ b/app/Http/Controllers/API/GroupsController.php @@ -0,0 +1,78 @@ +withCount(['allConfirmedHosts', 'allConfirmedRestarters']); + + $perPage = min($request->input('per_page', 100), 500); + $groups = $query->paginate($perPage); + + // Transform data for frontend + $transformedGroups = $groups->getCollection()->map(function ($group) { + return $this->transformGroup($group); + }); + + return response()->json([ + 'success' => true, + 'data' => $transformedGroups, + 'pagination' => [ + 'current_page' => $groups->currentPage(), + 'last_page' => $groups->lastPage(), + 'per_page' => $groups->perPage(), + 'total' => $groups->total(), + 'from' => $groups->firstItem(), + 'to' => $groups->lastItem(), + ] + ]); + + } catch (\Exception $e) { + Log::error('Error fetching groups: ' . $e->getMessage()); + return response()->json([ + 'success' => false, + 'message' => 'Failed to fetch groups', + 'error' => config('app.debug') ? $e->getMessage() : null + ], 500); + } + } + + /** + * Transform group data for frontend + */ + private function transformGroup($group): array + { + // Get country name from country code + $countryDisplay = null; + if ($group->country_code) { + $countryDisplay = \App\Helpers\Fixometer::getCountryFromCountryCode($group->country_code); + } + + return [ + 'idgroups' => $group->idgroups, + 'name' => $group->name, + 'location' => $group->location, + 'postcode' => $group->postcode, + 'area' => $group->area, + 'country_code' => $group->country_code, + 'country_display' => $countryDisplay, + 'approved' => (bool) $group->approved, + 'archived_at' => $group->archived_at, + 'created_at' => $group->created_at, + 'networks' => $group->networks, + 'group_tags' => $group->group_tags, + 'all_confirmed_hosts_count' => $group->all_confirmed_hosts_count, + 'all_confirmed_restarters_count' => $group->all_confirmed_restarters_count, + ]; + } +} \ No newline at end of file diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php index 3c88e6fd53..92971eb5d5 100644 --- a/app/Http/Controllers/AdminController.php +++ b/app/Http/Controllers/AdminController.php @@ -105,4 +105,9 @@ public static function getStats2() 'wasteTotal' => $stats[0]->powered_waste, // + $stats[0]->unpowered_waste, ]; } + + public static function groups() + { + return view('admin.groups'); + } } diff --git a/app/Http/Middleware/AdminMiddleware.php b/app/Http/Middleware/AdminMiddleware.php new file mode 100644 index 0000000000..fd60bb58df --- /dev/null +++ b/app/Http/Middleware/AdminMiddleware.php @@ -0,0 +1,45 @@ +expectsJson()) { + return response()->json([ + 'success' => false, + 'message' => 'Authentication required' + ], 401); + } + return redirect()->guest(route('login')); + } + + if (!Fixometer::hasRole($user, 'Administrator')) { + if ($request->expectsJson()) { + return response()->json([ + 'success' => false, + 'message' => 'Administrator access required' + ], 403); + } + abort(403, 'Administrator access required'); + } + + return $next($request); + } +} \ No newline at end of file diff --git a/bootstrap/app.php b/bootstrap/app.php index c1f11a764c..a4bef9cce8 100644 --- a/bootstrap/app.php +++ b/bootstrap/app.php @@ -83,6 +83,7 @@ 'AcceptUserInvites' => \App\Http\Middleware\AcceptUserInvites::class, 'ensureAPIToken' => \App\Http\Middleware\EnsureAPIToken::class, 'customApiAuth' => \App\Http\Middleware\CustomApiTokenAuth::class, + 'admin' => \App\Http\Middleware\AdminMiddleware::class, 'localeSessionRedirect' => \Mcamara\LaravelLocalization\Middleware\LocaleSessionRedirect::class, 'localeViewPath' => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationViewPath::class, 'localizationRedirect' => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRedirectFilter::class, diff --git a/resources/js/app.js b/resources/js/app.js index 01e88c3914..addd49756c 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -40,6 +40,7 @@ import EventAddEdit from './components/EventAddEdit.vue' import EventsRequiringModeration from './components/EventsRequiringModeration' import EventPage from './components/EventPage.vue' import FixometerPage from './components/FixometerPage' +import GroupsManagement from './components/admin/GroupsManagement.vue' import GroupsPage from './components/GroupsPage.vue' import GroupPage from './components/GroupPage.vue' import GroupAddEditPage from './components/GroupAddEditPage.vue' @@ -1309,6 +1310,7 @@ jQuery(document).ready(function () { 'eventsrequiringmoderation': EventsRequiringModeration, 'eventpage': EventPage, 'fixometerpage': FixometerPage, + 'groupsmanagement': GroupsManagement, 'groupspage': GroupsPage, 'grouppage': GroupPage, 'groupaddeditpage': GroupAddEditPage, diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue new file mode 100644 index 0000000000..a5d10c3763 --- /dev/null +++ b/resources/js/components/admin/GroupsManagement.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/resources/views/admin/groups.blade.php b/resources/views/admin/groups.blade.php new file mode 100644 index 0000000000..ce6eb50a72 --- /dev/null +++ b/resources/views/admin/groups.blade.php @@ -0,0 +1,23 @@ +@extends('layouts.app') + +@section('title') +Groups Management +@endsection + +@section('content') +
+
+
+
+ +
+
+
+
+@endsection + +@section('scripts') + +@endsection \ No newline at end of file diff --git a/resources/views/layouts/navbar.blade.php b/resources/views/layouts/navbar.blade.php index 211a614e21..bdb0a342f8 100644 --- a/resources/views/layouts/navbar.blade.php +++ b/resources/views/layouts/navbar.blade.php @@ -133,6 +133,7 @@
  • Brands
  • Skills
  • Group tags
    • +
  • Groups Management
  • Categories
  • Users
  • Roles
    • diff --git a/routes/api.php b/routes/api.php index 75d5db32f8..374c20b762 100644 --- a/routes/api.php +++ b/routes/api.php @@ -109,6 +109,11 @@ }); }); + // Admin Groups Management API + Route::prefix('/admin/groups')->middleware(['auth:api', App\Http\Middleware\AdminMiddleware::class])->group(function() { + Route::get('/', [App\Http\Controllers\API\GroupsController::class, 'index']); + }); + Route::get('/items', [API\ItemController::class, 'listItemsv2']); Route::prefix('/alerts')->group(function() { diff --git a/routes/web.php b/routes/web.php index 08106ca78d..c5b41dd8ae 100644 --- a/routes/web.php +++ b/routes/web.php @@ -405,8 +405,9 @@ }); //Admin Controller - Route::prefix('admin')->group(function () { + Route::prefix('admin')->middleware(App\Http\Middleware\AdminMiddleware::class)->group(function () { Route::get('/stats', [AdminController::class, 'stats']); + Route::get('/groups', [AdminController::class, 'groups'])->name('admin.groups'); }); //Category Controller From 99415299a97fe3d2d05d0b4e0298e3289a70c4f1 Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 13:26:17 -0700 Subject: [PATCH 2/9] feat(groups): groups table component - Enhanced GroupsController to support sorting by various fields. - Added GroupsTable component for displaying groups with pagination and sorting. - Integrated API call for fetching groups in GroupsManagement component. The group actions are not implemented yet, but the table view is working. --- app/Http/Controllers/API/GroupsController.php | 42 +- resources/js/api/groups.js | 11 + .../js/components/admin/GroupsManagement.vue | 97 ++++ resources/js/components/admin/GroupsTable.vue | 415 ++++++++++++++++++ resources/views/admin/groups.blade.php | 6 - 5 files changed, 555 insertions(+), 16 deletions(-) create mode 100644 resources/js/api/groups.js create mode 100644 resources/js/components/admin/GroupsTable.vue diff --git a/app/Http/Controllers/API/GroupsController.php b/app/Http/Controllers/API/GroupsController.php index 0e61ef4e3f..03999a4c73 100644 --- a/app/Http/Controllers/API/GroupsController.php +++ b/app/Http/Controllers/API/GroupsController.php @@ -16,6 +16,30 @@ public function index(Request $request): JsonResponse $query = Group::with(['networks', 'group_tags']) ->withCount(['allConfirmedHosts', 'allConfirmedRestarters']); + // Handle sorting + $sortBy = $request->input('sort_by', 'name'); + $sortDirection = $request->input('sort_direction', 'asc'); + + // Validate sort direction + if (!in_array(strtolower($sortDirection), ['asc', 'desc'])) { + $sortDirection = 'asc'; + } + + // Map frontend column names to database columns + $sortableColumns = [ + 'name' => 'name', + 'location' => 'location', + 'confirmed_hosts_count' => 'all_confirmed_hosts_count', + 'confirmed_restarters_count' => 'all_confirmed_restarters_count', + 'approved' => 'approved', + 'created_at' => 'created_at', + ]; + + // Default to name if invalid sort field + $sortColumn = $sortableColumns[$sortBy] ?? 'name'; + + $query->orderBy($sortColumn, $sortDirection); + $perPage = min($request->input('per_page', 100), 500); $groups = $query->paginate($perPage); @@ -27,14 +51,12 @@ public function index(Request $request): JsonResponse return response()->json([ 'success' => true, 'data' => $transformedGroups, - 'pagination' => [ - 'current_page' => $groups->currentPage(), - 'last_page' => $groups->lastPage(), - 'per_page' => $groups->perPage(), - 'total' => $groups->total(), - 'from' => $groups->firstItem(), - 'to' => $groups->lastItem(), - ] + 'current_page' => $groups->currentPage(), + 'last_page' => $groups->lastPage(), + 'per_page' => $groups->perPage(), + 'total' => $groups->total(), + 'from' => $groups->firstItem(), + 'to' => $groups->lastItem(), ]); } catch (\Exception $e) { @@ -71,8 +93,8 @@ private function transformGroup($group): array 'created_at' => $group->created_at, 'networks' => $group->networks, 'group_tags' => $group->group_tags, - 'all_confirmed_hosts_count' => $group->all_confirmed_hosts_count, - 'all_confirmed_restarters_count' => $group->all_confirmed_restarters_count, + 'confirmed_hosts_count' => $group->all_confirmed_hosts_count, + 'confirmed_restarters_count' => $group->all_confirmed_restarters_count, ]; } } \ No newline at end of file diff --git a/resources/js/api/groups.js b/resources/js/api/groups.js new file mode 100644 index 0000000000..df9d66a256 --- /dev/null +++ b/resources/js/api/groups.js @@ -0,0 +1,11 @@ +import axios from "axios"; + +const API_BASE = "/api/v2/admin/groups"; + +export default { + // Fetch groups with pagination and filtering + async fetchGroups(params = {}) { + const response = await axios.get(API_BASE, { params }); + return response.data; + }, +}; diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue index a5d10c3763..a02a5653d6 100644 --- a/resources/js/components/admin/GroupsManagement.vue +++ b/resources/js/components/admin/GroupsManagement.vue @@ -3,12 +3,109 @@

    Groups Management

    + + + diff --git a/resources/js/components/admin/GroupsTable.vue b/resources/js/components/admin/GroupsTable.vue new file mode 100644 index 0000000000..eb2c393720 --- /dev/null +++ b/resources/js/components/admin/GroupsTable.vue @@ -0,0 +1,415 @@ + + + + + \ No newline at end of file diff --git a/resources/views/admin/groups.blade.php b/resources/views/admin/groups.blade.php index ce6eb50a72..a3aec884bf 100644 --- a/resources/views/admin/groups.blade.php +++ b/resources/views/admin/groups.blade.php @@ -15,9 +15,3 @@ @endsection - -@section('scripts') - -@endsection \ No newline at end of file From b8fd0b56deaa887b58b0d39293c5d047d3813e84 Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 14:42:35 -0700 Subject: [PATCH 3/9] feat(groups): implement group action handling and confirmation modal - Added performAction method in GroupsController to handle group actions such as approve, unapprove, archive, unarchive, and delete. - Introduced ConfirmationModal component for user confirmation before performing actions on groups. - Updated GroupsManagement component to integrate the confirmation modal and handle group actions. - Enhanced GroupsTable component to trigger actions via the modal. - Added API routes for performing a group action. This update provides a complete flow for managing group actions in the admin interface. --- app/Http/Controllers/API/GroupsController.php | 71 +++++ resources/js/api/groups.js | 6 + .../js/components/admin/ConfirmationModal.vue | 240 +++++++++++++++++ .../js/components/admin/GroupsManagement.vue | 247 ++++++++++-------- resources/js/components/admin/GroupsTable.vue | 16 +- routes/api.php | 1 + 6 files changed, 470 insertions(+), 111 deletions(-) create mode 100644 resources/js/components/admin/ConfirmationModal.vue diff --git a/app/Http/Controllers/API/GroupsController.php b/app/Http/Controllers/API/GroupsController.php index 03999a4c73..e63002030d 100644 --- a/app/Http/Controllers/API/GroupsController.php +++ b/app/Http/Controllers/API/GroupsController.php @@ -69,6 +69,77 @@ public function index(Request $request): JsonResponse } } + public static function performAction(int $group_id, string $action): JsonResponse + { + try { + $group = Group::findOrFail($group_id); + + switch ($action) { + case 'approve': + $group->approved = true; + $group->save(); + $message = "Group '{$group->name}' has been approved successfully."; + break; + + case 'unapprove': + $group->approved = false; + $group->save(); + $message = "Group '{$group->name}' has been unapproved successfully."; + break; + + case 'archive': + $group->archived_at = now(); + $group->save(); + $message = "Group '{$group->name}' has been archived successfully."; + break; + + case 'unarchive': + $group->archived_at = null; + $group->save(); + $message = "Group '{$group->name}' has been unarchived successfully."; + break; + + case 'delete': + $groupName = $group->name; + if (!$group->canDelete()) { + throw new \Exception("Group '{$groupName}' cannot be deleted because it has events with devices."); + } + $group->delete(); + $message = "Group '{$groupName}' has been deleted successfully."; + break; + + default: + throw new \Exception("Invalid action: {$action}"); + } + + $result = [ + 'message' => $message, + 'group' => $action === 'delete' ? + ['id' => $group->idgroups, 'deleted' => true] : + [ + 'id' => $group->idgroups, + 'name' => $group->name, + 'approved' => (bool) $group->approved, + 'archived' => $group->archived_at !== null, + 'deleted' => false + ] + ]; + + return response()->json([ + 'success' => true, + 'message' => $result['message'], + 'group' => $result['group'] + ]); + + } catch (\Exception $e) { + Log::error('Error performing action: ' . $e->getMessage()); + return response()->json([ + 'success' => false, + 'message' => 'Failed to perform action' + ], 500); + } + } + /** * Transform group data for frontend */ diff --git a/resources/js/api/groups.js b/resources/js/api/groups.js index df9d66a256..de2c59be8c 100644 --- a/resources/js/api/groups.js +++ b/resources/js/api/groups.js @@ -8,4 +8,10 @@ export default { const response = await axios.get(API_BASE, { params }); return response.data; }, + + // Perform single action on a group + async performAction(groupId, action) { + const response = await axios.post(`${API_BASE}/${groupId}/${action}`); + return response.data; + }, }; diff --git a/resources/js/components/admin/ConfirmationModal.vue b/resources/js/components/admin/ConfirmationModal.vue new file mode 100644 index 0000000000..4bd9ab9436 --- /dev/null +++ b/resources/js/components/admin/ConfirmationModal.vue @@ -0,0 +1,240 @@ + + + + + \ No newline at end of file diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue index a02a5653d6..fee67a32b3 100644 --- a/resources/js/components/admin/GroupsManagement.vue +++ b/resources/js/components/admin/GroupsManagement.vue @@ -1,116 +1,153 @@ - + - + +.groups-management { + padding: 20px; +} + diff --git a/resources/js/components/admin/GroupsTable.vue b/resources/js/components/admin/GroupsTable.vue index eb2c393720..c049713074 100644 --- a/resources/js/components/admin/GroupsTable.vue +++ b/resources/js/components/admin/GroupsTable.vue @@ -95,32 +95,32 @@
    • - + Edit
    • - + Archive
    • - + Unarchive
    • - + Approve
    • - + Unapprove
    • - + Delete
      • @@ -245,6 +245,10 @@ export default { this.$emit("sort-change", field, direction); }, + handleAction(group, action) { + this.$emit("action", group, action); + }, + getSortIcon(field) { if (this.sortField !== field) { return "sort-icon"; diff --git a/routes/api.php b/routes/api.php index 374c20b762..8466dc5034 100644 --- a/routes/api.php +++ b/routes/api.php @@ -112,6 +112,7 @@ // Admin Groups Management API Route::prefix('/admin/groups')->middleware(['auth:api', App\Http\Middleware\AdminMiddleware::class])->group(function() { Route::get('/', [App\Http\Controllers\API\GroupsController::class, 'index']); + Route::post('{id}/{action}', [App\Http\Controllers\API\GroupsController::class, 'performAction']); }); Route::get('/items', [API\ItemController::class, 'listItemsv2']); From d77c8e765c5ee898572bfe81a0adf90cb99b6311 Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 15:35:07 -0700 Subject: [PATCH 4/9] feat(groups): add bulk action handling for groups management - Refactored GroupsController to include performBulkActions method for handling bulk operations on groups. - Updated performAction method to accept a Group object for better reusability. - Enhanced GroupsManagement component to support bulk actions via a new GroupsBulkAction component. - Integrated error handling in ConfirmationModal for better user feedback. - Updated API routes to accommodate bulk action requests. This allows us to modify multiple groups at once. --- app/Http/Controllers/API/GroupsController.php | 134 +++++++++++------- resources/js/api/groups.js | 7 + .../js/components/admin/ConfirmationModal.vue | 8 ++ .../js/components/admin/GroupsBulkAction.vue | 92 ++++++++++++ .../js/components/admin/GroupsManagement.vue | 32 ++++- routes/api.php | 3 +- 6 files changed, 216 insertions(+), 60 deletions(-) create mode 100644 resources/js/components/admin/GroupsBulkAction.vue diff --git a/app/Http/Controllers/API/GroupsController.php b/app/Http/Controllers/API/GroupsController.php index e63002030d..9cf82dd97f 100644 --- a/app/Http/Controllers/API/GroupsController.php +++ b/app/Http/Controllers/API/GroupsController.php @@ -69,68 +69,18 @@ public function index(Request $request): JsonResponse } } - public static function performAction(int $group_id, string $action): JsonResponse + public static function performSingleAction(int $group_id, string $action): JsonResponse { try { $group = Group::findOrFail($group_id); - - switch ($action) { - case 'approve': - $group->approved = true; - $group->save(); - $message = "Group '{$group->name}' has been approved successfully."; - break; - - case 'unapprove': - $group->approved = false; - $group->save(); - $message = "Group '{$group->name}' has been unapproved successfully."; - break; - - case 'archive': - $group->archived_at = now(); - $group->save(); - $message = "Group '{$group->name}' has been archived successfully."; - break; - - case 'unarchive': - $group->archived_at = null; - $group->save(); - $message = "Group '{$group->name}' has been unarchived successfully."; - break; - - case 'delete': - $groupName = $group->name; - if (!$group->canDelete()) { - throw new \Exception("Group '{$groupName}' cannot be deleted because it has events with devices."); - } - $group->delete(); - $message = "Group '{$groupName}' has been deleted successfully."; - break; - - default: - throw new \Exception("Invalid action: {$action}"); - } - - $result = [ - 'message' => $message, - 'group' => $action === 'delete' ? - ['id' => $group->idgroups, 'deleted' => true] : - [ - 'id' => $group->idgroups, - 'name' => $group->name, - 'approved' => (bool) $group->approved, - 'archived' => $group->archived_at !== null, - 'deleted' => false - ] - ]; + + $result = self::performAction($group, $action); return response()->json([ 'success' => true, 'message' => $result['message'], - 'group' => $result['group'] + 'group' => $result ]); - } catch (\Exception $e) { Log::error('Error performing action: ' . $e->getMessage()); return response()->json([ @@ -140,6 +90,82 @@ public static function performAction(int $group_id, string $action): JsonRespons } } + public static function performBulkActions(Request $request, string $action): JsonResponse + { + try { + $group_ids = $request->input('group_ids'); + $groups = Group::whereIn('idgroups', $group_ids)->get(); + + $failedGroups = []; + + foreach ($groups as $group) { + try { + self::performAction($group, $action); + } catch (\Exception $e) { + $failedGroups[] = $e->getMessage(); + } + } + + if (count($failedGroups) > 0) { + throw new \Exception(implode(', ', $failedGroups)); + } + + return response()->json([ + 'success' => true, + 'message' => 'Bulk actions performed successfully' + ]); + + } catch (\Exception $e) { + Log::error('Error performing bulk actions: ' . $e->getMessage()); + return response()->json([ + 'success' => false, + 'message' => 'Failed to perform bulk actions. ' . $e->getMessage() + ], 500); + } + } + + private static function performAction(Group $group, string $action): array + { + switch ($action) { + case 'approve': + $group->approved = true; + $group->save(); + break; + + case 'unapprove': + $group->approved = false; + $group->save(); + break; + + case 'archive': + $group->archived_at = now(); + $group->save(); + break; + + case 'unarchive': + $group->archived_at = null; + $group->save(); + break; + + case 'delete': + $groupName = $group->name; + if (!$group->canDelete()) { + throw new \Exception("Group '{$groupName}' cannot be deleted because it has events with devices."); + } + $group->delete(); + break; + + default: + throw new \Exception("Invalid action: {$action}"); + } + + return [ + 'id' => $group->idgroups, + 'name' => $group->name, + 'message' => "Group '{$group->name}' has been {$action} successfully." + ]; + } + /** * Transform group data for frontend */ diff --git a/resources/js/api/groups.js b/resources/js/api/groups.js index de2c59be8c..673ac319f0 100644 --- a/resources/js/api/groups.js +++ b/resources/js/api/groups.js @@ -14,4 +14,11 @@ export default { const response = await axios.post(`${API_BASE}/${groupId}/${action}`); return response.data; }, + + async performBulkActions(groupIds, action) { + const response = await axios.post(`${API_BASE}/bulk/${action}`, { + group_ids: groupIds, + }); + return response.data; + }, }; diff --git a/resources/js/components/admin/ConfirmationModal.vue b/resources/js/components/admin/ConfirmationModal.vue index 4bd9ab9436..a3775df14d 100644 --- a/resources/js/components/admin/ConfirmationModal.vue +++ b/resources/js/components/admin/ConfirmationModal.vue @@ -26,6 +26,10 @@ +
      + {{ error }} +
      +
      + + + :groups="confirmationModal.groups" :error="confirmationModal.error" @confirm="handleModalConfirm" + @cancel="handleModalCancel" /> + + diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue index 408662c623..423ad56767 100644 --- a/resources/js/components/admin/GroupsManagement.vue +++ b/resources/js/components/admin/GroupsManagement.vue @@ -1,9 +1,23 @@ @@ -22,6 +39,8 @@ import GroupsTable from "./GroupsTable.vue"; import GroupsBulkAction from "./GroupsBulkAction.vue"; import ConfirmationModal from "./ConfirmationModal.vue"; +import GroupsCsvUploadModal from "./GroupsCsvUploadModal.vue"; +import ImportResultsModal from "./ImportResultsModal.vue"; import groupsApi from "../../api/groups.js"; export default { @@ -30,6 +49,8 @@ export default { GroupsTable, GroupsBulkAction, ConfirmationModal, + GroupsCsvUploadModal, + ImportResultsModal, }, data() { @@ -38,14 +59,17 @@ export default { loading: false, selectedGroups: [], totalCount: 0, - + showCsvUploadModal: false, confirmationModal: { show: false, action: null, groups: [], error: null, }, - + alert: { + message: "", + type: "success", + }, pagination: { currentPage: 1, @@ -55,6 +79,16 @@ export default { }, sortField: "name", sortDirection: "asc", + + uploadProgress: 0, + uploading: false, + + importResults: { + show: false, + type: 'success', // 'success', 'partial', 'error' + created: 0, + errors: [], + }, }; }, @@ -164,6 +198,111 @@ export default { this.confirmationModal.action = null; this.confirmationModal.groups = []; }, + + async handleUpload(file) { + if (!file) return; + + this.uploadProgress = 0; + this.uploading = true; + + try { + const response = await groupsApi.importGroups( + file, + (progressEvent) => { + // Update progress based on actual upload progress + this.uploadProgress = Math.round( + (progressEvent.loaded * 100) / progressEvent.total, + ); + }, + ); + + this.showCsvUploadModal = false; + + if (response.success) { + const { created, errors } = response?.data ?? {}; + + if (errors && errors.length > 0) { + // Partial success - some groups created, some failed + this.showImportResults({ + type: 'partial', + created: created || 0, + errors: errors, + }); + } else { + // Complete success + this.showAlert(response.message, "success"); + } + + this.loadGroups(); + } else { + // Complete failure + this.showImportResults({ + type: 'error', + created: 0, + errors: [response.message || 'Import failed'], + }); + } + } catch (error) { + console.error("CSV Upload Error:", error); + this.showCsvUploadModal = false; + + // Extract meaningful error message from response + let errorMessage = 'Upload failed. Please try again.'; + let errors = []; + + if (error.response?.data) { + errorMessage = error.response.data.message || errorMessage; + + // Check if there are detailed errors in the response + if (error.response.data.errors) { + if (Array.isArray(error.response.data.errors)) { + errors = error.response.data.errors; + } else if (typeof error.response.data.errors === 'object') { + // Laravel validation errors format + errors = Object.values(error.response.data.errors).flat(); + } + } + } else if (error.message) { + errorMessage = error.message; + } + + if (errors.length > 0) { + this.showImportResults({ + type: 'error', + created: 0, + errors: errors, + }); + } else { + this.showAlert(errorMessage, "danger"); + } + } finally { + this.uploading = false; + this.uploadProgress = 0; + } + }, + + clearAlert() { + this.alert.message = ""; + this.alert.type = "success"; + }, + + showAlert(message, type) { + this.alert.message = message; + this.alert.type = type; + }, + + showImportResults(results) { + this.importResults = { + show: true, + type: results.type, + created: results.created, + errors: results.errors || [], + }; + }, + + closeImportResults() { + this.importResults.show = false; + }, }, }; diff --git a/resources/js/components/admin/ImportResultsModal.vue b/resources/js/components/admin/ImportResultsModal.vue new file mode 100644 index 0000000000..690a2b8663 --- /dev/null +++ b/resources/js/components/admin/ImportResultsModal.vue @@ -0,0 +1,322 @@ + + + + + \ No newline at end of file diff --git a/routes/api.php b/routes/api.php index 1ce66a2087..ed8e2ce183 100644 --- a/routes/api.php +++ b/routes/api.php @@ -112,6 +112,7 @@ // Admin Groups Management API Route::prefix('/admin/groups')->middleware(['auth:api', App\Http\Middleware\AdminMiddleware::class])->group(function() { Route::get('/', [App\Http\Controllers\API\GroupsController::class, 'index']); + Route::post('import', [App\Http\Controllers\API\GroupsController::class, 'importGroups']); Route::post('bulk/{action}', [App\Http\Controllers\API\GroupsController::class, 'performBulkActions']); Route::post('{id}/{action}', [App\Http\Controllers\API\GroupsController::class, 'performSingleAction']); }); From 6b1acb6beafafd41d61179db5dd7870032bcb9bb Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 16:53:07 -0700 Subject: [PATCH 6/9] feat(groups): enhance groups management with pagination and page size selection - Updated GroupsManagement component to include page size selection for group listings. - Enhanced GroupsTable component to display pagination information and allow page size changes. - Added computed properties to manage pagination state and improve user experience. - Implemented methods to handle page size changes and update the displayed groups accordingly. --- .../js/components/admin/GroupsManagement.vue | 14 +- resources/js/components/admin/GroupsTable.vue | 401 +++++++++++------- 2 files changed, 264 insertions(+), 151 deletions(-) diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue index 423ad56767..4c7235ef27 100644 --- a/resources/js/components/admin/GroupsManagement.vue +++ b/resources/js/components/admin/GroupsManagement.vue @@ -23,7 +23,8 @@ + @select-all="handleSelectAll" @page-change="handlePageChange" @page-size-change="handlePageSizeChange" + @sort-change="handleSortChange" /> - + @@ -57,7 +58,8 @@
      {{ group.name }} - Archived + Archived
      {{group.networks.map(n => n.name).join(', ')}}
      @@ -86,14 +88,12 @@
      -
      - - + +
      +
      + + + per page +
      +
      + Showing {{ pagination.from }} to {{ pagination.to }} of {{ pagination.total }} groups +
      +
      + + +
      + +
      @@ -160,115 +181,124 @@ import moment from "moment"; export default { - name: "GroupsTable", - props: { - groups: { - type: Array, - default: () => [], - }, - loading: { - type: Boolean, - default: false, - }, - selectedGroups: { - type: Array, - default: () => [], - }, - pagination: { - type: Object, - default: () => ({ - currentPage: 1, - totalPages: 0, - total: 0, - }), - }, - sortField: { - type: String, - default: "name", - }, - sortDirection: { - type: String, - default: "asc", - }, - }, - - computed: { - allSelected() { - return ( - this.groups.length > 0 && - this.selectedGroups.length === this.groups.length - ); - }, - - visiblePages() { - const pages = []; - const current = this.pagination.currentPage; - const total = this.pagination.totalPages; - - let start = Math.max(1, current - 2); - let end = Math.min(total, current + 2); - - // Adjust for when we're near the beginning or end - if (current <= 3) { - end = Math.min(total, 5); - } - if (current >= total - 2) { - start = Math.max(1, total - 4); - } - - for (let i = start; i <= end; i++) { - pages.push(i); - } - - return pages; - }, - }, - - methods: { - isSelected(group) { - return this.selectedGroups.some((g) => g.idgroups === group.idgroups); - }, - - handleSelect(group, event) { - this.$emit("select", group, event.target.checked); - }, - - handleSelectAll(event) { - this.$emit("select-all", event.target.checked); - }, - - handleSort(field) { - const direction = - this.sortField === field && this.sortDirection === "asc" - ? "desc" - : "asc"; - this.$emit("sort-change", field, direction); - }, - - handleAction(group, action) { - this.$emit("action", group, action); - }, - - getSortIcon(field) { - if (this.sortField !== field) { - return "sort-icon"; - } - return this.sortDirection === "asc" - ? "sort-icon sort-up" - : "sort-icon sort-down"; - }, - - changePage(page) { - if (page >= 1 && page <= this.pagination.totalPages) { - this.$emit("page-change", page); - } - }, - - formatDate(dateString) { - if (!dateString) return ""; - return moment(dateString).format("MMM DD, YYYY"); - }, - }, + name: "GroupsTable", + props: { + groups: { + type: Array, + default: () => [], + }, + loading: { + type: Boolean, + default: false, + }, + selectedGroups: { + type: Array, + default: () => [], + }, + pagination: { + type: Object, + default: () => ({ + currentPage: 1, + totalPages: 0, + total: 0, + perPage: 25, + from: 0, + to: 0, + }), + }, + sortField: { + type: String, + default: "name", + }, + sortDirection: { + type: String, + default: "asc", + }, + }, + + computed: { + allSelected() { + return ( + this.groups.length > 0 && + this.selectedGroups.length === this.groups.length + ); + }, + + visiblePages() { + const pages = []; + const current = this.pagination.currentPage; + const last = this.pagination.totalPages; + + // Show max 7 pages + let start = Math.max(1, current - 3); + let end = Math.min(last, current + 3); + + // Adjust if we're near the beginning or end + if (current <= 4) { + end = Math.min(last, 7); + } + if (current >= last - 3) { + start = Math.max(1, last - 6); + } + + for (let i = start; i <= end; i++) { + pages.push(i); + } + + return pages; + }, + }, + + methods: { + isSelected(group) { + return this.selectedGroups.some((g) => g.idgroups === group.idgroups); + }, + + handleSelect(group, event) { + this.$emit("select", group, event.target.checked); + }, + + handleSelectAll(event) { + this.$emit("select-all", event.target.checked); + }, + + handleSort(field) { + const direction = + this.sortField === field && this.sortDirection === "asc" + ? "desc" + : "asc"; + this.$emit("sort-change", field, direction); + }, + + handleAction(group, action) { + this.$emit("action", group, action); + }, + + getSortIcon(field) { + if (this.sortField !== field) { + return "sort-icon"; + } + return this.sortDirection === "asc" + ? "sort-icon sort-up" + : "sort-icon sort-down"; + }, + + changePage(page) { + if (page >= 1 && page <= this.pagination.totalPages) { + this.$emit("page-change", page); + } + }, + + handlePageSizeChange(event) { + const newPageSize = Number.parseInt(event.target.value); + this.$emit("page-size-change", newPageSize); + }, + + formatDate(dateString) { + if (!dateString) return ""; + return moment(dateString).format("MMM DD, YYYY"); + }, + }, }; @@ -309,28 +339,60 @@ export default { /* Column width specifications to prevent layout shift */ .table th:nth-child(1), -.table td:nth-child(1) { width: 40px; } /* Checkbox */ +.table td:nth-child(1) { + width: 40px; +} + +/* Checkbox */ .table th:nth-child(2), -.table td:nth-child(2) { width: 25%; } /* Name */ +.table td:nth-child(2) { + width: 25%; +} + +/* Name */ .table th:nth-child(3), -.table td:nth-child(3) { width: 20%; } /* Location */ +.table td:nth-child(3) { + width: 20%; +} + +/* Location */ .table th:nth-child(4), -.table td:nth-child(4) { width: 10%; } /* Hosts */ +.table td:nth-child(4) { + width: 10%; +} + +/* Hosts */ .table th:nth-child(5), -.table td:nth-child(5) { width: 10%; } /* Volunteers */ +.table td:nth-child(5) { + width: 10%; +} + +/* Volunteers */ .table th:nth-child(6), -.table td:nth-child(6) { width: 10%; } /* Status */ +.table td:nth-child(6) { + width: 10%; +} + +/* Status */ .table th:nth-child(7), -.table td:nth-child(7) { width: 15%; } /* Created At */ +.table td:nth-child(7) { + width: 15%; +} + +/* Created At */ .table th:nth-child(8), -.table td:nth-child(8) { width: 120px; } /* Actions */ +.table td:nth-child(8) { + width: 120px; +} + +/* Actions */ /* Prevent text overflow in fixed-width cells */ .table td { @@ -340,8 +402,10 @@ export default { } /* Allow wrapping for specific content */ -.table td:nth-child(2), /* Name column */ -.table td:nth-child(3) { /* Location column */ +.table td:nth-child(2), +/* Name column */ +.table td:nth-child(3) { + /* Location column */ white-space: normal; word-wrap: break-word; } @@ -395,7 +459,8 @@ export default { /* Prevent layout shift by reserving space for sort icons */ .sortable { position: relative; - padding-right: 20px; /* Reserve space for the icon */ + padding-right: 20px; + /* Reserve space for the icon */ } .sortable .sort-icon { @@ -403,7 +468,8 @@ export default { right: 8px; top: 50%; transform: translateY(-50%); - margin-left: 0; /* Remove left margin since we're using absolute positioning */ + margin-left: 0; + /* Remove left margin since we're using absolute positioning */ } .dropdown-menu { @@ -416,4 +482,39 @@ export default { overflow-x: auto; /* Do not set overflow: hidden here! */ } + +/* Form control styling */ +.form-control-sm { + height: calc(1.5em + 0.5rem + 2px); + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + border-radius: 0.2rem; +} + +/* Pagination styling to match GroupsManagement */ +.pagination { + margin-bottom: 0; +} + +.page-link { + cursor: pointer; + border-color: #dee2e6 !important; +} + +.page-link:hover { + border-color: #adb5bd !important; + background-color: #e9ecef !important; + color: #222 !important; +} + +.page-item.active .page-link { + border-color: #222 !important; + background-color: #222 !important; + color: white !important; +} + +.page-item.disabled .page-link { + cursor: not-allowed; + border-color: #dee2e6 !important; +} \ No newline at end of file From 8267740f4164f5b000e7f772d81d7027b42af0f3 Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 16:55:13 -0700 Subject: [PATCH 7/9] feat(groups): add scroll-to-top button in GroupsManagement component - Implemented a floating scroll-to-top button that appears when the user scrolls down more than 300px. - Added methods to handle the visibility of the button and smooth scrolling to the top of the page. - Updated styles for the button to enhance user experience and visibility. --- .../js/components/admin/GroupsManagement.vue | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue index 4c7235ef27..0c33e9f41c 100644 --- a/resources/js/components/admin/GroupsManagement.vue +++ b/resources/js/components/admin/GroupsManagement.vue @@ -33,6 +33,11 @@ + +
      + ▲ +
      +
      @@ -92,11 +97,18 @@ export default { created: 0, errors: [], }, + + showScrollToTop: false, }; }, mounted() { this.loadGroups(); + window.addEventListener('scroll', this.handleScroll); + }, + + beforeDestroy() { + window.removeEventListener('scroll', this.handleScroll); }, methods: { @@ -315,6 +327,19 @@ export default { closeImportResults() { this.importResults.show = false; }, + + handleScroll() { + // Show scroll-to-top button when user scrolls down more than 300px + this.showScrollToTop = window.scrollY > 300; + }, + + scrollToTop() { + // Smooth scroll to top of page + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }, }, }; @@ -323,4 +348,45 @@ export default { .groups-management { padding: 20px; } + +.scroll-to-top-btn { + box-shadow: 5px 5px 0 0 #222; + border: solid 1px #222; + padding: 10px; + border-radius: 0; + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + background-color: white; + color: #222; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + opacity: 0; + visibility: hidden; + transform: translateY(20px); + z-index: 1000; +} + +.scroll-to-top-btn:hover { + background-color: white; + transform: translateY(0); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); +} + +.scroll-to-top-btn.show { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.scroll-to-top-btn .chevron-up { + font-size: 16px; + font-weight: bold; + line-height: 1; +} From ab2a07cca2979b7877c2af2fb6039980afec3a57 Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 18:55:55 -0700 Subject: [PATCH 8/9] feat(groups): implement export groups functionality - Added exportGroups method in GroupsController to handle exporting groups as a CSV file. - Implemented filtering options for search, status, archived, network, and country in the export process. - Created generateCsvContent method to format group data into CSV format. - Updated API routes to include the new export endpoint for groups. - Enhanced GroupsManagement component to include an export button and handle the CSV download process. --- app/Http/Controllers/API/GroupsController.php | 134 ++++++++++++++++++ resources/js/api/groups.js | 7 + .../js/components/admin/GroupsManagement.vue | 45 +++++- routes/api.php | 1 + 4 files changed, 186 insertions(+), 1 deletion(-) diff --git a/app/Http/Controllers/API/GroupsController.php b/app/Http/Controllers/API/GroupsController.php index 1c6b8695e7..116d21a00a 100644 --- a/app/Http/Controllers/API/GroupsController.php +++ b/app/Http/Controllers/API/GroupsController.php @@ -262,6 +262,140 @@ public static function importGroups(Request $request): JsonResponse } } + public static function exportGroups(Request $request) + { + try { + // Build query with same logic as index method + $query = Group::with(['networks', 'group_tags']); + + // Apply search filter + if ($request->filled('search')) { + $search = $request->input('search'); + $query->where(function($q) use ($search) { + $q->where('name', 'like', "%{$search}%") + ->orWhere('location', 'like', "%{$search}%") + ->orWhere('postcode', 'like', "%{$search}%") + ->orWhere('area', 'like', "%{$search}%"); + }); + } + + // Apply status filter + if ($request->filled('status')) { + $status = $request->input('status'); + if ($status === 'approved') { + $query->where('approved', true); + } elseif ($status === 'pending') { + $query->where('approved', false); + } + } + + // Apply archived filter + if ($request->filled('archived')) { + $archived = $request->input('archived'); + if ($archived === 'yes') { + $query->whereNotNull('archived_at'); + } elseif ($archived === 'no') { + $query->whereNull('archived_at'); + } + } + + // Apply network filter + if ($request->filled('network')) { + $networkId = $request->input('network'); + $query->whereHas('networks', function($q) use ($networkId) { + $q->where('networks.id', $networkId); + }); + } + + // Apply country filter + if ($request->filled('country')) { + $countryCode = $request->input('country'); + $query->where('country_code', $countryCode); + } + + $groups = $query->orderBy('name', 'asc')->get(); + + // Create CSV content + $filename = 'groups_export_' . date('Y-m-d_H-i-s') . '.csv'; + $csvContent = self::generateCsvContent($groups); + + // Return CSV as download + return response($csvContent) + ->header('Content-Type', 'text/csv') + ->header('Content-Disposition', 'attachment; filename="' . $filename . '"') + ->header('Cache-Control', 'no-cache, no-store, must-revalidate') + ->header('Pragma', 'no-cache') + ->header('Expires', '0'); + + } catch (\Exception $e) { + Log::error('Error exporting groups CSV: ' . $e->getMessage()); + return response()->json([ + 'success' => false, + 'message' => 'Failed to export groups' + ], 500); + } + } + + + private static function generateCsvContent($groups) + { + $csvData = []; + + // Add headers + $csvData[] = [ + 'ID', 'Name', 'Location', 'Postcode', 'Area', 'Country Code', + 'Latitude', 'Longitude', 'Website', 'Phone', 'Email', + 'Approved', 'Archived', 'Networks', 'Tags', 'Description', + 'Hosts Count', 'Restarters Count', 'Created At' + ]; + + // Add data rows + foreach ($groups as $group) { + // Get country name from country code + $countryDisplay = null; + if ($group->country_code) { + $countryDisplay = \App\Helpers\Fixometer::getCountryFromCountryCode($group->country_code); + } + + // Manually calculate counts + $confirmedHostsCount = $group->allConfirmedHosts()->count(); + $confirmedRestartersCount = $group->allConfirmedRestarters()->count(); + + $csvData[] = [ + $group->idgroups, + $group->name, + $group->location, + $group->postcode, + $group->area, + $group->country_code, + $group->latitude, + $group->longitude, + $group->website, + $group->phone, + $group->email, + $group->approved ? 'Yes' : 'No', + $group->archived_at ? 'Yes' : 'No', + $group->networks->pluck('name')->join(', '), + $group->group_tags->pluck('tag_name')->join(', '), + $group->free_text, + $confirmedHostsCount, + $confirmedRestartersCount, + $group->created_at ? $group->created_at->format('Y-m-d H:i:s') : '' + ]; + } + + // Convert to CSV string + $output = fopen('php://temp', 'r+'); + foreach ($csvData as $row) { + fputcsv($output, $row); + } + rewind($output); + $csvContent = stream_get_contents($output); + fclose($output); + + return $csvContent; + } + /** * Transform group data for frontend */ diff --git a/resources/js/api/groups.js b/resources/js/api/groups.js index fe145beb79..91a89573f0 100644 --- a/resources/js/api/groups.js +++ b/resources/js/api/groups.js @@ -34,4 +34,11 @@ export default { }); return response.data; }, + + async exportGroups() { + const response = await axios.get(`${API_BASE}/export`, { + responseType: "blob", + }); + return response; + }, }; diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue index 0c33e9f41c..45d50a3e4d 100644 --- a/resources/js/components/admin/GroupsManagement.vue +++ b/resources/js/components/admin/GroupsManagement.vue @@ -5,7 +5,10 @@

      Groups Management

      {{ totalCount }} groups - +
      + + +
      @@ -66,6 +69,7 @@ export default { selectedGroups: [], totalCount: 0, showCsvUploadModal: false, + exporting: false, confirmationModal: { show: false, action: null, @@ -223,6 +227,45 @@ export default { this.confirmationModal.groups = []; }, + async handleExport() { + this.exporting = true; + + try { + const response = await groupsApi.exportGroups(); + + // Extract filename from response headers if available + const contentDisposition = response.headers["content-disposition"]; + let filename = `groups_export_${new Date().toISOString().split("T")[0]}.csv`; + + if (contentDisposition) { + const filenameMatch = contentDisposition.match(/filename="(.+)"/); + if (filenameMatch) { + filename = filenameMatch[1]; + } + } + + // Create download URL from blob response + const url = window.URL.createObjectURL(response.data); + const link = document.createElement("a"); + link.href = url; + link.download = filename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + window.URL.revokeObjectURL(url); + + this.showAlert("Groups exported successfully!", "success"); + } catch (error) { + console.error("Export error:", error); + this.showAlert( + `Error exporting groups: ${error.response?.data?.message || error.message}`, + "danger", + ); + } finally { + this.exporting = false; + } + }, + async handleUpload(file) { if (!file) return; diff --git a/routes/api.php b/routes/api.php index ed8e2ce183..1d7f5c64e4 100644 --- a/routes/api.php +++ b/routes/api.php @@ -112,6 +112,7 @@ // Admin Groups Management API Route::prefix('/admin/groups')->middleware(['auth:api', App\Http\Middleware\AdminMiddleware::class])->group(function() { Route::get('/', [App\Http\Controllers\API\GroupsController::class, 'index']); + Route::get('/export', [App\Http\Controllers\API\GroupsController::class, 'exportGroups']); Route::post('import', [App\Http\Controllers\API\GroupsController::class, 'importGroups']); Route::post('bulk/{action}', [App\Http\Controllers\API\GroupsController::class, 'performBulkActions']); Route::post('{id}/{action}', [App\Http\Controllers\API\GroupsController::class, 'performSingleAction']); From 36aa92f14d9951c247dabce000a2b0b0f621ac50 Mon Sep 17 00:00:00 2001 From: Angel de la Torre Date: Tue, 8 Jul 2025 19:08:43 -0700 Subject: [PATCH 9/9] feat(groups): add search functionality to GroupsManagement component - Implemented a search bar in the GroupsManagement component to filter groups by name, location, postcode, or area. - Enhanced GroupsController to handle search queries and apply filters to the group retrieval process. - Added debounce functionality to optimize API calls during search input. - Included visual feedback for search results and a clear search option. --- app/Http/Controllers/API/GroupsController.php | 11 +++ .../js/components/admin/GroupsManagement.vue | 73 +++++++++++++++++++ 2 files changed, 84 insertions(+) diff --git a/app/Http/Controllers/API/GroupsController.php b/app/Http/Controllers/API/GroupsController.php index 116d21a00a..2f62ee5179 100644 --- a/app/Http/Controllers/API/GroupsController.php +++ b/app/Http/Controllers/API/GroupsController.php @@ -18,6 +18,17 @@ public function index(Request $request): JsonResponse $query = Group::with(['networks', 'group_tags']) ->withCount(['allConfirmedHosts', 'allConfirmedRestarters']); + // Apply search filter + if ($request->filled('search')) { + $search = $request->input('search'); + $query->where(function($q) use ($search) { + $q->where('name', 'like', "%{$search}%") + ->orWhere('location', 'like', "%{$search}%") + ->orWhere('postcode', 'like', "%{$search}%") + ->orWhere('area', 'like', "%{$search}%"); + }); + } + // Handle sorting $sortBy = $request->input('sort_by', 'name'); $sortDirection = $request->input('sort_direction', 'asc'); diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue index 45d50a3e4d..2cacd69fce 100644 --- a/resources/js/components/admin/GroupsManagement.vue +++ b/resources/js/components/admin/GroupsManagement.vue @@ -11,6 +11,24 @@
      + +
      +
      +
      + +
      + +
      +
      + + {{ searchResultsText }} + +
      +
      +
      {{ alert.message }}