User filter (#22)

w1lldone · Jan 10, 2022 · d15630c · d15630c
1 parent df9a0d1
commit d15630c
Show file tree

Hide file tree

Showing 7 changed files with 352 additions and 20 deletions.
diff --git a/app/Http/Controllers/OrganizationUserController.php b/app/Http/Controllers/OrganizationUserController.php
@@ -8,17 +8,22 @@
 
 class OrganizationUserController extends Controller
 {
+    use UserFilter;
+
     public function index(Request $request, Organization $organization)
     {
         $this->authorize('view', $organization);
 
         $query = $organization->users();
 
+        $query = $this->filterUser($query, $request);
+
         $users = $query->paginate();
 
         return Inertia::render('Organization/UserIndex', [
             'users' => $users,
-            'organization' => $organization
+            'organization' => $organization,
+            'query' => $request->all()
         ]);
     }
 

diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
@@ -12,6 +12,8 @@
 
 class UserController extends Controller
 {
+    use UserFilter;
+
     /**
      * Display a listing of the resource.
      *
@@ -25,13 +27,7 @@ public function index(Request $request)
 
         $query->select('id', 'name', 'email', 'is_superadmin', 'role', 'id_number');
 
-        if ($request->filled('keyword')) {
-            $query->where(function ($user) use ($request)
-            {
-                $user->where('name', 'like', "%$request->keyword%")
-                    ->orWhere('id_number', 'like', "%$request->keyword");
-            });
-        }
+        $query = $this->filterUser($query, $request);
 
         $users = $query->with('address')->paginate()->appends($request->all());
 
@@ -40,7 +36,8 @@ public function index(Request $request)
         }
 
         return Inertia::render('User/Index', [
-            'users' => $users
+            'users' => $users,
+            'query' => $request->all()
         ]);
     }
 

diff --git a/app/Http/Controllers/UserFilter.php b/app/Http/Controllers/UserFilter.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\Request;
+
+/**
+ * User Filter Trait
+ */
+trait UserFilter
+{
+    public function filterUser($query, Request $request)
+    {
+        if ($request->filled('keyword')) {
+            $query = $query->where(function ($user) use ($request) {
+                $user->where('name', 'like', "%$request->keyword%")
+                ->orWhere('id_number', 'like', "%$request->keyword")
+                ->orWhere('email', 'like', "%$request->keyword");
+            });
+        }
+
+        return $query;
+    }
+}
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/resources/js/Components/User/Filter.vue b/resources/js/Components/User/Filter.vue
@@ -0,0 +1,47 @@
+<template>
+  <form @submit.prevent="submit()">
+    <div class="input-group bg-white">
+      <input
+        v-model="form.keyword"
+        type="search"
+        class="form-control bg-white"
+        placeholder="Cari nama, email atau NIK"
+        aria-label="Cari nama, email atau NIK"
+        aria-describedby="button-addon2"
+      />
+      <button class="btn btn-primary" type="submit" id="button-addon2">
+        <i class="fa fa-search"></i>
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  props: {
+    submitUrl: String,
+    query: Object,
+  },
+  data() {
+    return {
+      form: this.$inertia.form({
+        keyword: null,
+      }),
+    };
+  },
+  mounted() {
+    this.form = { ...this.form, ...this.query };
+  },
+  methods: {
+    submit() {
+      this.form.get(this.submitUrl);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bg-white {
+  background: white !important;
+}
+</style>
diff --git a/resources/js/Pages/Organization/UserIndex.vue b/resources/js/Pages/Organization/UserIndex.vue
@@ -12,7 +12,8 @@
       <div class="col-md-8">
         <NavShow :organization="organization" class="mb-3"></NavShow>
 
-        <div class="d-flex justify-content-end mb-3">
+        <div class="d-flex justify-content-md-between mb-3">
+            <Filter :submitUrl="route('organization.user.index', organization.id)" :query="query"></Filter>
           <UserAddModal :organization="organization"></UserAddModal>
         </div>
 
@@ -71,11 +72,13 @@ import NavShow from "@/Components/Organization/NavShow.vue";
 import Status from "@/Components/Status.vue";
 import DeleteButton from "@/Components/DeleteButton.vue";
 import UserAddModal from "@/Components/Organization/UserAddModal.vue";
+import Filter from '@/Components/User/Filter.vue';
 
 export default {
   props: {
     users: Object,
     organization: Object,
+    query: Object
   },
   components: {
     AuthenticatedLayout,
@@ -86,6 +89,7 @@ export default {
     Status,
     DeleteButton,
     UserAddModal,
+    Filter
   },
 };
 </script>

diff --git a/resources/js/Pages/User/Index.vue b/resources/js/Pages/User/Index.vue
@@ -6,7 +6,8 @@
     <div class="row justify-content-center">
       <div class="col-md-8">
           <Status></Status>
-        <div class="d-flex justify-content-end mb-3">
+        <div class="d-flex justify-content-md-between mb-3">
+            <Filter :query="query" :submitUrl="route('user.index')"></Filter>
           <InertiaLink
             :href="route('user.create')"
             class="btn btn-primary"
@@ -58,17 +59,20 @@ import AuthenticatedLayout from "@/Layouts/Auth.vue";
 import { Head, InertiaLink } from "@inertiajs/inertia-vue3";
 import Pagination from "@/Components/Pagination.vue";
 import Status from '@/Components/Status.vue';
+import Filter from '@/Components/User/Filter.vue';
 
 export default {
   components: {
     Head,
     AuthenticatedLayout,
     Pagination,
     InertiaLink,
-    Status
+    Status,
+    Filter
   },
   props: {
     users: Object,
+    query: Object
   },
 };
 </script>