index filter, sort

Advaith3600 · Apr 4, 2022 · 60e103b · 60e103b
1 parent 1bfd243
commit 60e103b
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 83 deletions.
diff --git a/src/Http/Controllers/AdminController.php b/src/Http/Controllers/AdminController.php
@@ -4,10 +4,13 @@
 
 use Exception;
 use Illuminate\Http\Request;
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\RedirectResponse;
+use Advaith\SeamlessAdmin\ModelResolver;
 
 class AdminController extends Controller
 {
-    private $resolver;
+    private ModelResolver $resolver;
 
     public function __construct()
     {
@@ -17,7 +20,7 @@ public function __construct()
         $this->resolver = app('modelResolver');
     }
 
-    public function welcome()
+    public function welcome(): View
     {
         return view('seamless::welcome');
     }
@@ -32,15 +35,20 @@ private function resolveType(string $type): string
         return $type;
     }
 
-    public function index($type)
+    public function index($type): View
     {
         $type = $this->resolveType($type);
 
         $fillable = collect((new $type)->getFillable())->diff((new $type)->getHidden());
 
-        $data = $type::orderBy('id', 'desc')
+        $data = $type::orderBy(request()->by ?? 'id', request()->order ?? 'desc')
+            ->when(request()->q, function ($query) use ($fillable) {
+                $search = request()->q;
+                foreach ($fillable as $column)
+                    $query->orWhere($column, 'like', "%{$search}%");
+            })
             ->select((clone $fillable)->add('id')->toArray())
-            ->paginate(10);
+            ->paginate(request()->perPage ?? 10);
 
         return view('seamless::type.index', [
             'type' => $type,
@@ -49,7 +57,7 @@ public function index($type)
         ]);
     }
 
-    public function show($type, $id)
+    public function show($type, $id): View
     {
         $type = $this->resolveType($type);
 
@@ -67,7 +75,7 @@ public function show($type, $id)
         ]);
     }
 
-    public function create($type)
+    public function create($type): View
     {
         $type = $this->resolveType($type);
 
@@ -77,7 +85,7 @@ public function create($type)
         ]);
     }
 
-    public function store($type, Request $request)
+    public function store($type, Request $request): RedirectResponse | string
     {
         $type = $this->resolveType($type);
 
@@ -91,7 +99,7 @@ public function store($type, Request $request)
         }
     }
 
-    public function edit($type, $id)
+    public function edit($type, $id): View
     {
         $type = $this->resolveType($type);
 
@@ -112,7 +120,7 @@ public function edit($type, $id)
         ]);
     }
 
-    public function update($type, $id, Request $request)
+    public function update($type, $id, Request $request): RedirectResponse | string
     {
         $type = $this->resolveType($type);
 
@@ -126,7 +134,7 @@ public function update($type, $id, Request $request)
         }
     }
 
-    public function delete($type, Request $request)
+    public function delete($type, Request $request): View
     {
         $ids = $request->ids;
 
@@ -138,7 +146,7 @@ public function delete($type, Request $request)
         ]);
     }
 
-    public function destroy($type, Request $request)
+    public function destroy($type, Request $request): RedirectResponse | string
     {
         $type = $this->resolveType($type);
         $ids = $request->ids;

diff --git a/src/resources/assets/css/app.css b/src/resources/assets/css/app.css
diff --git a/src/resources/assets/js/type-index.js b/src/resources/assets/js/type-index.js
diff --git a/src/resources/assets/src/js/type-index.js b/src/resources/assets/src/js/type-index.js
@@ -1,18 +1,5 @@
 import { createApp } from 'vue';
 
-document.querySelectorAll('[data-link]').forEach(elem => {
-    elem.addEventListener('click', event => {
-        event.preventDefault();
-        location.href = elem.dataset.link;
-    });
-});
-
-document.querySelectorAll('[data-link] a').forEach(elem => {
-    elem.addEventListener('click', event => {
-        event.stopPropagation();
-    });
-});
-
 createApp({
     data() {
         return {
@@ -27,6 +14,38 @@ createApp({
         checkAll(ids) {
             if (this.selected.size === ids.length) this.selected = new Set;
             else this.selected = new Set(ids)
+        },
+        massDeleteURI() {
+            return encodeURI([...this.selected].map((u, i) => `ids[${i}]=${u}`).join('&'));
+        },
+        redirect(url) {
+            location.href = url;
+        },
+        sort(by, order) {
+            const query = {};
+            decodeURIComponent(location.search)
+                .slice(1)
+                .split('&')
+                .forEach(item => {
+                    if (item === '') return;
+                    const _query = item.split('=');
+                    query[_query[0]] = _query[1];
+                });
+
+            if (by === query['by'] && order === 'desc') {
+                delete query['by'];
+                delete query['order'];
+            } else {
+                if (query['by'] === by) query['order'] = order === 'asc' ? 'desc' : 'asc';
+                else query['order'] = 'asc';
+                query['by'] = by;
+            }
+
+            const array = [];
+            for (const key of Object.keys(query))
+                array.push(`${key}=${query[key]}`);
+
+            location.search = `?${array.join('&')}`;
         }
     }
 }).mount('#app')
diff --git a/src/resources/assets/src/scss/_helper.scss b/src/resources/assets/src/scss/_helper.scss
@@ -1,4 +1,4 @@
-$green: #27ae60;
+$green: #20a056;
 $grey: #444;
 $yellow: #e4cf1b;
 $red: #cc2626;
@@ -74,3 +74,41 @@ table {
         padding: 6px 12px;
     }
 }
+
+.search {
+    position: relative;
+
+    input {
+        padding-right: 34px;
+    }
+
+    .icon {
+        position: absolute;
+        top: 50%;
+        right: 1rem;
+        transform: translateY(-50%);
+        cursor: pointer;
+
+        svg { width: 16px; }
+    }
+}
+
+.sort {
+    cursor: pointer;
+
+    svg {
+        width: 14px;
+        height: 14px;
+
+        $scale: 1.2;
+        $offset: 1px;
+        &.up { transform: translateY($offset) scale($scale); }
+        &.down { transform: translateY(-$offset) scale($scale); }
+    }
+
+    $opacity: 0.4;
+    &.up svg.down { opacity: $opacity; }
+    &.down svg.up { opacity: $opacity; }
+
+    &.light svg { opacity: $opacity; }
+}
diff --git a/src/resources/views/type/create.blade.php b/src/resources/views/type/create.blade.php
@@ -38,8 +38,14 @@ class="input"
             </div>
 
             <div class="flex gap-2 mt-4 justify-end">
-                <a href="{{ route('admin.type.index', request()->type) }}" class="btn grey">Cancel</a>
-                <button class="btn" type="submit">Create</button>
+                <a href="{{ route('admin.type.index', request()->type) }}" class="btn grey">
+                    <i data-feather="x"></i>
+                    Cancel
+                </a>
+                <button class="btn" type="submit">
+                    <i data-feather="plus"></i>
+                    Create
+                </button>
             </div>
         </form>
     </div>

diff --git a/src/resources/views/type/delete.blade.php b/src/resources/views/type/delete.blade.php
@@ -29,8 +29,14 @@
                 you are doing before proceeding.</p>
 
             <div class="mt-4 flex justify-end gap-2">
-                <a href="{{ route('admin.type.index', request()->type) }}" class="btn grey">Cancel</a>
-                <button class="btn red" onclick="document.getElementById('del').submit()">Delete</button>
+                <a href="{{ route('admin.type.index', request()->type) }}" class="btn grey">
+                    <i data-feather="x"></i>
+                    Cancel
+                </a>
+                <button class="btn red" onclick="document.getElementById('del').submit()">
+                    <i data-feather="trash-2"></i>
+                    Delete
+                </button>
             </div>
 
             <form action="{{ route('admin.type.destroy', [request()->type, 'ids' => $ids]) }}" method="post" id="del">

diff --git a/src/resources/views/type/edit.blade.php b/src/resources/views/type/edit.blade.php
@@ -40,8 +40,14 @@ class="input"
             </div>
 
             <div class="flex gap-2 mt-4 justify-end">
-                <a href="{{ route('admin.type.index', request()->type) }}" class="btn grey">Cancel</a>
-                <button class="btn" type="submit">Edit</button>
+                <a href="{{ route('admin.type.index', request()->type) }}" class="btn grey">
+                    <i data-feather="x"></i>
+                    Cancel
+                </a>
+                <button class="btn" type="submit">
+                    <i data-feather="edit"></i>
+                    Edit
+                </button>
             </div>
         </form>
     </div>