Merge pull request #428 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Http/Controllers/Admin/AdminReportController.php

@@ -81,4 +81,35 @@ trait AdminReportController
 
         return $this;
     }
+
+    protected function actionMap()
+    {
+        return [
+            '1' => 'ignore',
+            '2' => 'cw',
+            '3' => 'unlist',
+            '4' => 'delete',
+            '5' => 'shadowban',
+            '6' => 'ban'
+        ];
+    }
+
+    public function bulkUpdateReport(Request $request)
+    {
+        $this->validate($request, [
+            'action' => 'required|integer|min:1|max:10',
+            'ids'    => 'required|array'
+        ]);
+        $action = $this->actionMap()[$request->input('action')];
+        $ids = $request->input('ids');
+        $reports = Report::whereIn('id', $ids)->whereNull('admin_seen')->get();
+        foreach($reports as $report) {
+            $this->handleReportAction($report, $action);
+        }
+        $res = [
+            'message' => 'Success',
+            'code'    => 200
+        ];
+        return response()->json($res);
+    }
 }

resources/views/admin/reports/home.blade.php

@@ -17,9 +17,39 @@
 
   <hr>
 
+  <div class="mb-3 bulk-actions d-none">
+    <div class="d-flex justify-content-between">
+      <span>
+        <span class="bulk-count font-weight-bold" data-count="0">
+          0
+        </span>
+        <span class="bulk-desc"> items selected</span>
+      </span>
+      <span class="d-inline-flex">
+        <select class="custom-select custom-select-sm font-weight-bold bulk-action">
+          <option selected disabled="">Select Bulk Action</option>
+          <option value="1">Ignore</option>
+          <option value="2">Add C/W</option>
+          <option value="3">Unlist from timelines</option>
+        </select>
+        <a class="btn btn-outline-primary btn-sm ml-3 font-weight-bold apply-bulk" href="#">
+          Apply
+        </a>
+      </span>
+    </div>
+  </div>
+
   <table class="table table-responsive">
-    <thead class="thead-dark">
+    <thead class="bg-light">
       <tr>
+        <th scope="col">
+          <div class="">
+            <div class="custom-control custom-checkbox table-check">
+              <input type="checkbox" class="custom-control-input" id="row-check-all">
+              <label class="custom-control-label" for="row-check-all"></label>
+            </div>
+          </div>
+        </th>
         <th scope="col">#</th>
         <th scope="col">Reporter</th>
         <th scope="col">Type</th>
@@ -31,11 +61,18 @@
     <tbody>
       @foreach($reports as $report)
       <tr>
-        <th scope="row">
+        <td class="py-0">
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input row-check-item" id="row-check-{{$report->id}}" data-resolved="{{$report->admin_seen?'true':'false'}}" data-id="{{$report->id}}">
+            <label class="custom-control-label" for="row-check-{{$report->id}}"></label>
+          </div>
+        </td>
+        <td>
           <a href="{{$report->url()}}" class="btn btn-sm btn-outline-primary">
             {{$report->id}}
           </a>
-        </th>
+          
+        </td>
         <td class="font-weight-bold"><a href="{{$report->reporter->url()}}">{{$report->reporter->username}}</a></td>
         <td class="font-weight-bold">{{$report->type}}</td>
         <td class="font-weight-bold"><a href="{{$report->reported()->url()}}">{{str_limit($report->reported()->url(), 25)}}</a></td>
@@ -54,9 +91,80 @@
   </div>
 @endsection
 
+@push('styles')
+<style type="text/css">
+  .custom-control-label:after, .custom-control-label:before {
+    top: auto;
+    bottom: auto;
+  }
+  .table-check .custom-control-label {
+    top: -11px;
+  }
+</style>
+@endpush
+
 @push('scripts')
   <script type="text/javascript">
     $(document).ready(function() {
+
+      $(document).on('click', '#row-check-all', function(e) {
+        let el = $(this);
+        let attr = el.attr('checked');
+
+        if (typeof attr !== typeof undefined && attr !== false) {
+          $('.bulk-actions').addClass('d-none');
+          $('.row-check-item[data-resolved=false]').removeAttr('checked').prop('checked', false);
+          el.removeAttr('checked').prop('checked', false);
+        } else {
+          $('.bulk-actions').removeClass('d-none');
+          el.attr('checked', '').prop('checked', true);
+          $('.row-check-item[data-resolved=false]').attr('checked', '').prop('checked', true);
+        }
+
+        let len = $('.row-check-item[checked]').length;
+        $('.bulk-count').text(len).attr('data-count', len);
+      });
+
+      $(document).on('click', '.row-check-item', function(e) {
+        var el = $(this)[0];
+        let len = $('.bulk-count').attr('data-count');
+        if(el.checked == true) {
+          len++;
+          $('.bulk-count').text(len).attr('data-count', len);
+        } else {
+          len--;
+          $('.bulk-count').text(len).attr('data-count', len);   
+        }
+        if(len == 0) {
+          $('.bulk-actions').addClass('d-none');
+          $('#row-check-all').prop('checked', false);
+        } else {
+          $('.bulk-actions').removeClass('d-none');
+        }
+      });
+
+      $(document).on('click', '.apply-bulk', function(e) {
+        e.preventDefault();
+        let ids = $('.row-check-item:checked').map(function(i,k) {
+          return $(this).attr('data-id');
+        }).get();
+        let action = $('.bulk-action option:selected').val();
+        if(action == 'Select Bulk Action') {
+          swal('Error', 'You need to select a bulk action first.', 'error');
+          $('.bulk-action').focus();
+          return;
+        }
+        axios.post('/i/admin/reports/bulk',{
+          'action': action,
+          'ids': ids
+        }).then(function(res) {
+          swal('Success', 'Bulk Update was successful!', 'success');
+          window.location.href = window.location.href;
+        }).catch(function(res) {
+          swal('Ooops!', 'Something went wrong', 'error');
+        });
+      });
+
       $('.human-size').each(function(d,a) {
         let el = $(a);
         let size = el.data('bytes');

resources/views/admin/reports/show.blade.php

@@ -8,7 +8,7 @@
   <div class="card">
     <div class="card-body">
       <h5 class="card-title">Reported: <a href="{{$report->reported()->url()}}">{{$report->reported()->url()}}</a></h5>
-      <h6 class="card-subtitle mb-2 text-muted">Reported by: <a href="{{$report->reporter->url()}}">{{$report->reporter->username}}</a> <span class="badge badge-primary">admin</span></h6>
+      <h6 class="card-subtitle mb-2 text-muted">Reported by: <a href="{{$report->reporter->url()}}">{{$report->reporter->username}}</a></h6>
       <p class="card-text text-muted">
         <span class="font-weight-bold text-dark">Message: </span>
         {{$report->message ?? 'No message provided.'}}

routes/web.php

@@ -7,6 +7,7 @@ Route::domain(config('pixelfed.domain.admin'))->prefix('i/admin')->group(functio
     Route::get('reports', 'AdminController@reports')->name('admin.reports');
     Route::get('reports/show/{id}', 'AdminController@showReport');
     Route::post('reports/show/{id}', 'AdminController@updateReport');
+    Route::post('reports/bulk', 'AdminController@bulkUpdateReport');
     Route::redirect('statuses', '/statuses/list');
     Route::get('statuses/list', 'AdminController@statuses')->name('admin.statuses');
     Route::get('statuses/show/{id}', 'AdminController@showStatus');