feat(chore): Add Per Page selector

Status-Page · Mar 18, 2021 · 01eef44 · 01eef44
1 parent 52471f5
commit 01eef44
Show file tree

Hide file tree

Showing 15 changed files with 270 additions and 86 deletions.
diff --git a/app/Http/Livewire/Dashboard/Administration/Users.php b/app/Http/Livewire/Dashboard/Administration/Users.php
@@ -3,14 +3,14 @@
 namespace App\Http\Livewire\Dashboard\Administration;
 
 use App\Events\ActionLog;
+use App\Http\Livewire\DataTable\WithPerPagePagination;
 use App\Models\User;
 use Auth;
 use Livewire\Component;
-use Livewire\WithPagination;
 
 class Users extends Component
 {
-    use WithPagination;
+    use WithPerPagePagination;
 
     protected $listeners = ['refreshData'];
 
@@ -25,7 +25,7 @@ public function render()
         ));
 
         return view('livewire.dashboard.administration.users', [
-            'users' => User::query()->search('name', $this->search)->paginate(),
+            'users' => $this->applyPagination(User::query()->search('name', $this->search)),
         ]);
     }
 

diff --git a/app/Http/Livewire/Dashboard/Incidents/Incidents.php b/app/Http/Livewire/Dashboard/Incidents/Incidents.php
@@ -8,16 +8,14 @@
 namespace App\Http\Livewire\Dashboard\Incidents;
 
 use App\Events\ActionLog;
+use App\Http\Livewire\DataTable\WithPerPagePagination;
 use App\Models\Incident;
-use App\Models\IncidentUpdate;
-use App\Models\Status;
 use Auth;
 use Livewire\Component;
-use Livewire\WithPagination;
 
 class Incidents extends Component
 {
-    use WithPagination;
+    use WithPerPagePagination;
 
     protected $listeners = ['refreshData'];
 
@@ -31,7 +29,7 @@ public function render()
             'message' => 'Incidents',
         ));
         return view('livewire.dashboard.incidents.incidents', [
-            'incidents' => Incident::query()->where([['status', '!=', 3], ['type', '=', 0]])->search('title', $this->search, [['status', '!=', 3], ['type', '=', 0]])->paginate(),
+            'incidents' => $this->applyPagination(Incident::query()->where([['status', '!=', 3], ['type', '=', 0]])->search('title', $this->search, [['status', '!=', 3], ['type', '=', 0]])),
         ]);
     }
 

diff --git a/app/Http/Livewire/Dashboard/Incidents/PastIncidents.php b/app/Http/Livewire/Dashboard/Incidents/PastIncidents.php
@@ -8,16 +8,14 @@
 namespace App\Http\Livewire\Dashboard\Incidents;
 
 use App\Events\ActionLog;
+use App\Http\Livewire\DataTable\WithPerPagePagination;
 use App\Models\Incident;
-use App\Models\IncidentUpdate;
-use App\Models\Status;
 use Auth;
 use Livewire\Component;
-use Livewire\WithPagination;
 
 class PastIncidents extends Component
 {
-    use WithPagination;
+    use WithPerPagePagination;
 
     protected $listeners = ['refreshData'];
 
@@ -31,7 +29,7 @@ public function render()
             'message' => 'Past Incidents',
         ));
         return view('livewire.dashboard.incidents.past-incidents', [
-            'old_incidents' => Incident::query()->where([['status', '=', 3], ['type', '=', 0]])->search('title', $this->search, [['status', '=', 3], ['type', '=', 0]])->paginate(),
+            'old_incidents' => $this->applyPagination(Incident::query()->where([['status', '=', 3], ['type', '=', 0]])->search('title', $this->search, [['status', '=', 3], ['type', '=', 0]])),
         ]);
     }
 

diff --git a/app/Http/Livewire/Dashboard/Maintenances/Maintenances.php b/app/Http/Livewire/Dashboard/Maintenances/Maintenances.php
@@ -8,16 +8,14 @@
 namespace App\Http\Livewire\Dashboard\Maintenances;
 
 use App\Events\ActionLog;
+use App\Http\Livewire\DataTable\WithPerPagePagination;
 use App\Models\Incident;
-use App\Models\IncidentUpdate;
-use App\Models\Status;
 use Auth;
 use Livewire\Component;
-use Livewire\WithPagination;
 
 class Maintenances extends Component
 {
-    use WithPagination;
+    use WithPerPagePagination;
 
     protected $listeners = ['refreshData'];
 
@@ -31,7 +29,7 @@ public function render()
             'message' => 'Maintenances',
         ));
         return view('livewire.dashboard.maintenances.maintenances', [
-            'maintenances' => Incident::query()->where([['status', '!=', 3], ['type', '=', 1]])->search('title', $this->search, [['status', '!=', 3], ['type', '=', 1]])->paginate(),
+            'maintenances' => $this->applyPagination(Incident::query()->where([['status', '!=', 3], ['type', '=', 1]])->search('title', $this->search, [['status', '!=', 3], ['type', '=', 1]])),
         ]);
     }
 

diff --git a/app/Http/Livewire/Dashboard/Maintenances/PastMaintenances.php b/app/Http/Livewire/Dashboard/Maintenances/PastMaintenances.php
@@ -8,16 +8,14 @@
 namespace App\Http\Livewire\Dashboard\Maintenances;
 
 use App\Events\ActionLog;
+use App\Http\Livewire\DataTable\WithPerPagePagination;
 use App\Models\Incident;
-use App\Models\IncidentUpdate;
-use App\Models\Status;
 use Auth;
 use Livewire\Component;
-use Livewire\WithPagination;
 
 class PastMaintenances extends Component
 {
-    use WithPagination;
+    use WithPerPagePagination;
 
     protected $listeners = ['refreshData'];
 
@@ -31,7 +29,7 @@ public function render()
             'message' => 'Past Incidents',
         ));
         return view('livewire.dashboard.maintenances.past-maintenances', [
-            'old_maintenances' => Incident::query()->where([['status', '=', 3], ['type', '=', 1]])->search('title', $this->search, [['status', '=', 3], ['type', '=', 1]])->paginate(),
+            'old_maintenances' => $this->applyPagination(Incident::query()->where([['status', '=', 3], ['type', '=', 1]])->search('title', $this->search, [['status', '=', 3], ['type', '=', 1]])),
         ]);
     }
 

diff --git a/app/Http/Livewire/Dashboard/Metrics/Metrics.php b/app/Http/Livewire/Dashboard/Metrics/Metrics.php
@@ -3,14 +3,14 @@
 namespace App\Http\Livewire\Dashboard\Metrics;
 
 use App\Events\ActionLog;
+use App\Http\Livewire\DataTable\WithPerPagePagination;
 use App\Models\Metric;
 use Auth;
 use Livewire\Component;
-use Livewire\WithPagination;
 
 class Metrics extends Component
 {
-    use WithPagination;
+    use WithPerPagePagination;
 
     protected $listeners = ['refreshData'];
 
@@ -25,10 +25,14 @@ public function render()
         ));
 
         return view('livewire.dashboard.metrics.metrics', [
-            'metrics' => Metric::query()->orderBy('order')->search('title', $this->search, [], 'order')->paginate(),
+            'metrics' => $this->applyPagination(Metric::query()->orderBy('order')->search('title', $this->search, [], 'order')),
         ]);
     }
 
+    public function updatedSearch(){
+        $this->resetPage();
+    }
+
     public function refreshData(){
         // Placeholder
     }

diff --git a/app/Http/Livewire/DataTable/WithPerPagePagination.php b/app/Http/Livewire/DataTable/WithPerPagePagination.php
@@ -0,0 +1,32 @@
+<?php
+/*
+ * Copyright (c) 2021 by HerrTxbias.
+ *
+ * Using / Editing this without my consent is not allowed.
+ */
+
+namespace App\Http\Livewire\DataTable;
+
+use Livewire\WithPagination;
+
+trait WithPerPagePagination
+{
+    use WithPagination;
+
+    public $perPage = 25;
+
+    public function mountWithPerPagePagination()
+    {
+        $this->perPage = session()->get('perPage', $this->perPage);
+    }
+
+    public function updatedPerPage($value)
+    {
+        session()->put('perPage', $value);
+    }
+
+    public function applyPagination($query)
+    {
+        return $query->paginate($this->perPage);
+    }
+}
diff --git a/public/js/app.js b/public/js/app.js
@@ -3800,6 +3800,38 @@ __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
 __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/alpine.js");
 
+var root = document.querySelector('[drag-root]');
+root.querySelectorAll('[drag-item]').forEach(function (el) {
+  el.addEventListener('dragstart', function (e) {
+    e.target.setAttribute('dragging', true);
+  });
+  el.addEventListener('drop', function (e) {
+    e.target.classList.remove('bg-yellow-100');
+    var draggingEl = root.querySelector('[dragging]');
+    e.target.before(draggingEl); // Refresh the livewire component
+
+    var component = Livewire.find(e.target.closest('[wire\\:id]').getAttribute('wire:id'));
+    var orderIds = Array.from(root.querySelectorAll('[drag-item]')).map(function (itemEl) {
+      return itemEl.getAttribute('drag-item');
+    });
+    var method = root.getAttribute('drag-root');
+    component.call(method, orderIds);
+  });
+  el.addEventListener('dragenter', function (e) {
+    e.target.classList.add('bg-yellow-100');
+    e.preventDefault();
+  });
+  el.addEventListener('dragover', function (e) {
+    return e.preventDefault();
+  });
+  el.addEventListener('dragleave', function (e) {
+    e.target.classList.remove('bg-yellow-100');
+  });
+  el.addEventListener('dragend', function (e) {
+    e.target.removeAttribute('dragging');
+  });
+});
+
 /***/ }),
 
 /***/ "./resources/js/bootstrap.js":

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -7,3 +7,47 @@
 require('./bootstrap');
 
 require('alpinejs');
+
+let root = document.querySelector('[drag-root]')
+
+root.querySelectorAll('[drag-item]').forEach(el => {
+    el.addEventListener('dragstart', e => {
+        e.target.setAttribute('dragging', true)
+    })
+
+    el.addEventListener('drop', e => {
+        e.target.classList.remove('bg-yellow-100')
+
+        let draggingEl = root.querySelector('[dragging]')
+
+        e.target.before(draggingEl)
+
+        // Refresh the livewire component
+        let component = Livewire.find(
+            e.target.closest('[wire\\:id]').getAttribute('wire:id')
+        )
+
+        let orderIds = Array.from(root.querySelectorAll('[drag-item]'))
+            .map(itemEl => itemEl.getAttribute('drag-item'))
+
+        let method = root.getAttribute('drag-root')
+
+        component.call(method, orderIds)
+    })
+
+    el.addEventListener('dragenter', e => {
+        e.target.classList.add('bg-yellow-100')
+
+        e.preventDefault()
+    })
+
+    el.addEventListener('dragover', e => e.preventDefault())
+
+    el.addEventListener('dragleave', e => {
+        e.target.classList.remove('bg-yellow-100')
+    })
+
+    el.addEventListener('dragend', e => {
+        e.target.removeAttribute('dragging')
+    })
+})
diff --git a/resources/views/livewire/dashboard/administration/users.blade.php b/resources/views/livewire/dashboard/administration/users.blade.php
@@ -7,8 +7,25 @@
 
     <div class="py-12">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 flex-col space-y-4">
-            <div class="w-1/3">
-                <x-jet-input type="text" wire:model="search" placeholder="Search users..." class="w-full"></x-jet-input>
+            <div class="flex justify-between">
+                <div class="w-1/3 flex space-x-2">
+                    <x-jet-input type="text" wire:model="search" placeholder="Search Metrics..." class="w-full"></x-jet-input>
+                </div>
+
+                <div class="space-x-2 flex items-center">
+                    <x-input.group borderless paddingless for="perPage" label="Per Page">
+                        <x-input.select wire:model="perPage" id="perPage" class="rounded-md">
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                        </x-input.select>
+                    </x-input.group>
+
+                    @can('add_users')
+                        @livewire('dashboard.administration.modals.user-add-modal')
+                    @endcan
+                </div>
             </div>
             <x-table>
                 <x-slot name="head">
@@ -17,11 +34,7 @@
                     <x-table.heading>{{ __('users.table.head.email') }}</x-table.heading>
                     <x-table.heading>{{ __('users.table.head.deactivated') }}</x-table.heading>
                     <x-table.heading>{{ __('users.table.head.role') }}</x-table.heading>
-                    <x-table.heading>
-                        @can('add_users')
-                            @livewire('dashboard.administration.modals.user-add-modal')
-                        @endcan
-                    </x-table.heading>
+                    <x-table.heading></x-table.heading>
                 </x-slot>
                 <x-slot name="body">
                     @forelse($users as $user)

diff --git a/resources/views/livewire/dashboard/incidents/incidents.blade.php b/resources/views/livewire/dashboard/incidents/incidents.blade.php
@@ -7,8 +7,25 @@
 
     <div class="py-12">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 flex-col space-y-4">
-            <div class="w-1/3">
-                <x-jet-input type="text" wire:model="search" placeholder="Search incidents..." class="w-full"></x-jet-input>
+            <div class="flex justify-between">
+                <div class="w-1/3 flex space-x-2">
+                    <x-jet-input type="text" wire:model="search" placeholder="Search Metrics..." class="w-full"></x-jet-input>
+                </div>
+
+                <div class="space-x-2 flex items-center">
+                    <x-input.group borderless paddingless for="perPage" label="Per Page">
+                        <x-input.select wire:model="perPage" id="perPage" class="rounded-md">
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                        </x-input.select>
+                    </x-input.group>
+
+                    @can('add_incidents')
+                        @livewire('dashboard.incidents.modals.incident-add-modal')
+                    @endcan
+                </div>
             </div>
             <x-table>
                 <x-slot name="head">
@@ -17,11 +34,7 @@
                     <x-table.heading>{{ __('incidents.table.head.status') }}</x-table.heading>
                     <x-table.heading>{{ __('incidents.table.head.impact') }}</x-table.heading>
                     <x-table.heading>{{ __('incidents.table.head.reporter') }}</x-table.heading>
-                    <x-table.heading>
-                        @can('add_incidents')
-                            @livewire('dashboard.incidents.modals.incident-add-modal')
-                        @endcan
-                    </x-table.heading>
+                    <x-table.heading></x-table.heading>
                 </x-slot>
                 <x-slot name="body">
                     @forelse($incidents as $incident)

diff --git a/resources/views/livewire/dashboard/incidents/past-incidents.blade.php b/resources/views/livewire/dashboard/incidents/past-incidents.blade.php
@@ -7,8 +7,21 @@
 
     <div class="py-12 space-y-4">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 flex-col space-y-4">
-            <div class="w-1/3">
-                <x-jet-input type="text" wire:model="search" placeholder="Search past incidents..." class="w-full"></x-jet-input>
+            <div class="flex justify-between">
+                <div class="w-1/3 flex space-x-2">
+                    <x-jet-input type="text" wire:model="search" placeholder="Search Metrics..." class="w-full"></x-jet-input>
+                </div>
+
+                <div class="space-x-2 flex items-center">
+                    <x-input.group borderless paddingless for="perPage" label="Per Page">
+                        <x-input.select wire:model="perPage" id="perPage" class="rounded-md">
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                        </x-input.select>
+                    </x-input.group>
+                </div>
             </div>
             <x-table>
                 <x-slot name="head">