Add bulk report actions

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');