Fixed table load and added live user search for scalability

Author: longelas

src/App/Http/Controllers/LaravelLoggerController.php

@@ -86,7 +86,14 @@ public function showAccessLog(Request $request)
 
         self::mapAdditionalDetails($activities);
 
-        $users = config('LaravelLogger.defaultUserModel')::all();
+
+        if(config('LaravelLogger.enableLiveSearch')){
+          // We are querying only the paginated userIds because in a big application querying all user data is performance heavy
+          $user_ids = array_unique($activities->pluck('userId')->toArray());
+          $users = config('LaravelLogger.defaultUserModel')::whereIn(config('LaravelLogger.defaultUserIDField'), $user_ids)->get();
+        }else{
+          $users = config('LaravelLogger.defaultUserModel')::all();
+        }
 
         $data = [
             'activities'        => $activities,
@@ -305,5 +312,22 @@ public function searchActivityLog($query, $request)
         }
 
         return $query;
-    }
+  }
+  /**
+  * Search the database users according to specific criteria.
+  *
+  * @param request
+  *
+  * @return filtered user data
+  */
+  public function liveSearch(Request $request){
+
+    $filteredUsers = config('LaravelLogger.defaultUserModel')::when(request('userid'), function ($q) {
+      return $q->where(config('LaravelLogger.defaultUserIDField'), (int) request('userid', 0));
+    })->when(request('email'), function ($q) {
+      return $q->where('email', 'like', '%' . request('email') . '%');
+    });
+
+    return response()->json($filteredUsers->get()->pluck('email', config('LaravelLogger.defaultUserIDField')), 200);
+  }
 }

src/config/laravel-logger.php

@@ -172,4 +172,7 @@
     'enableFontAwesomeCDN'      => env('LARAVEL_LOGGER_FONT_AWESOME_CDN_ENABLED', true),
     'fontAwesomeCDN'            => env('LARAVEL_LOGGER_FONT_AWESOME_CDN_URL', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'),
 
+    // LiveSearch for scalability
+    'enableLiveSearch'          => env('LARAVEL_LOGGER_LIVE_SEARCH_ENABLED', true),
+
 ];

src/resources/views/logger/activity-log.blade.php

@@ -23,6 +23,8 @@
 @include('LaravelLogger::partials.scripts', ['activities' => $activities])
 @include('LaravelLogger::scripts.confirm-modal', ['formTrigger' => '#confirmDelete'])
 
+
+
 @if(config('LaravelLogger.enableDrillDown'))
 @include('LaravelLogger::scripts.clickable-row')
 @include('LaravelLogger::scripts.tooltip')
@@ -57,6 +59,11 @@
 @section('content')
 
     <div class="container-fluid">
+
+       @if(config('LaravelLogger.enableLiveSearch'))
+       @include('LaravelLogger::partials.form-live-search')
+       @endif
+
        @if(config('LaravelLogger.enableSearch'))
        @include('LaravelLogger::partials.form-search')
        @endif
@@ -131,6 +138,10 @@
         </div>
     </div>
 
+@if(config('LaravelLogger.enableLiveSearch'))
+@include('LaravelLogger::scripts.live-search-script')
+@endif
+
 @include('LaravelLogger::modals.confirm-modal', ['formTrigger' => 'confirmDelete', 'modalClass' => 'danger', 'actionBtnIcon' => 'fa-trash-o'])
 
 @endsection

src/resources/views/partials/form-live-search.blade.php

@@ -0,0 +1,14 @@
+    <div class="row mb-3">
+      <div class="col-12 col-sm-4 col-lg-6 mb-2">
+        User Live Search <small>(use the search button before selecting the dropdown to search for a specific user)</small>
+      </div>
+      <div class="col-12 col-sm-4 col-lg-2 mb-2">
+        <input type="text" id='live_search_email' name='live_search_email' placeholder='Email'>
+      </div>
+      <div class="col-12 col-sm-4 col-lg-2 mb-2">
+        <input type="text" id='live_search_userid' name='live_search_userid' placeholder='UserId'>
+      </div>
+      <div class="col-12 col-sm-4 col-lg-2 mb-2">
+        <input id="live_search_button" class="btn btn-primary btn-block" value="{{ trans('LaravelLogger::laravel-logger.dashboard.search.search') }}">
+      </div>
+    </div>

src/resources/views/partials/form-search.blade.php

@@ -11,7 +11,7 @@
         @endif
         @if(in_array('user',explode(',', config('LaravelLogger.searchFields'))))
             <div class="col-12 col-sm-4 col-lg-2 mb-2">
-                <select class="form-control" name="user">
+                <select class="form-control" id="user_select" name="user">
                     <option value="">{{ trans('LaravelLogger::laravel-logger.dashboard.search.all') }}</option>
                     @foreach($users as $user)
                         <option value="{{ $user->$userIdField }}"{{ request()->get('user') && request()->get('user') == $user->$userIdField ? ' selected':'' }}>{{ $user->name }}</option>

src/resources/views/scripts/live-search-script.php

@@ -0,0 +1,27 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.3/axios.min.js" integrity="sha512-wS6VWtjvRcylhyoArkahZUkzZFeKB7ch/MHukprGSh1XIidNvHG1rxPhyFnL73M0FC1YXPIXLRDAoOyRJNni/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
+<script type="text/javascript">
+    // Script for submitting the livesearch via axios
+  $( "#live_search_button" ).on( "click", function() {
+    axios.post('/activity/live-search', {
+      userid: document.getElementById('live_search_userid').value,
+      email: document.getElementById('live_search_email').value
+    })
+    .then(function (response) {
+        var newOptions = response.data;
+        // console.log(newOptions)
+        var $el = $("#user_select");
+        $el.empty(); // remove old options
+        $.each(newOptions, function(key,value) {
+          $el.append($("<option></option>")
+             .attr("value", key).text(value));
+        });
+        // console.log(response);
+    })
+    .catch(function (error) {
+        console.log(error);
+    });
+});
+
+</script>
+

src/routes/web.php

@@ -21,4 +21,7 @@
     Route::delete('/clear-activity', ['uses' => 'LaravelLoggerController@clearActivityLog'])->name('clear-activity');
     Route::delete('/destroy-activity', ['uses' => 'LaravelLoggerController@destroyActivityLog'])->name('destroy-activity');
     Route::post('/restore-log', ['uses' => 'LaravelLoggerController@restoreClearedActivityLog'])->name('restore-activity');
+
+    // LiveSearch
+    Route::post('/live-search', ['uses' => 'LaravelLoggerController@liveSearch'])->name('liveSearch');
 });