User segment functionality

- Working on showing the Users of a Segment re-using the user table component. - Ran pint and lint - Fixed the route issue
amitavroy · Jan 7, 2025 · 0058dac · 0058dac
1 parent 2014f26
commit 0058dac
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 105 deletions.
diff --git a/app/Domain/Segment/Actions/SegmentUserMapAction.php b/app/Domain/Segment/Actions/SegmentUserMapAction.php
@@ -11,9 +11,7 @@ class SegmentUserMapAction
 {
     public function __construct(
         private readonly SegmentRuleService $segmentRuleService
-    )
-    {
-    }
+    ) {}
 
     /**
      * @throws Exception

diff --git a/app/Domain/Segment/Services/SegmentRuleService.php b/app/Domain/Segment/Services/SegmentRuleService.php
@@ -54,7 +54,7 @@ public function segmentQuery(Segment $segment): Builder
         $rules->each(function ($rule) use ($query) {
             $allowedRules = $this->getRuleMapping();
 
-            if (!$allowedRules->has($rule['rule_name'])) {
+            if (! $allowedRules->has($rule['rule_name'])) {
                 throw new Exception('No such rule exist');
             }
 

diff --git a/app/Http/Controllers/SegmentUserController.php b/app/Http/Controllers/SegmentUserController.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Domain\Segment\Models\Segment;
+use Illuminate\Http\Request;
+
+class SegmentUserController extends Controller
+{
+    public function index(Segment $segment)
+    {
+        $users = $segment->customers()->paginate(10);
+
+        return inertia('SegmentUser/Index', [
+            'segment' => $segment,
+            'users' => $users,
+        ]);
+    }
+
+    public function create() {}
+
+    public function store(Request $request) {}
+
+    public function show($id) {}
+
+    public function edit($id) {}
+
+    public function update(Request $request, $id) {}
+
+    public function destroy($id) {}
+}
diff --git a/resources/js/Pages/Home/Index.vue b/resources/js/Pages/Home/Index.vue
@@ -17,7 +17,7 @@ const {
   recent_order_count,
   top_customers,
   recent_customer_count,
-  top_products
+  top_products,
 } = defineProps({
   random_number: Number,
   order_count: Number,
@@ -26,7 +26,7 @@ const {
   recent_order_count: Object,
   top_products: Object,
   top_customers: Object,
-  recent_customer_count: Object
+  recent_customer_count: Object,
 })
 usePoll(20000)
 </script>

diff --git a/resources/js/Pages/Segment/Create.vue b/resources/js/Pages/Segment/Create.vue
@@ -7,7 +7,7 @@ import SegmentForm from './SegmentForm.vue'
 const breadCrumb = [
   { name: 'Commerce', link: route('product.index') },
   { name: 'Segments', link: route('segment.index') },
-  { name: 'Create segment', link: null }
+  { name: 'Create segment', link: null },
 ]
 </script>
 
@@ -19,7 +19,11 @@ const breadCrumb = [
     </PageContainer>
 
     <div class="grid">
-      <SegmentForm :url="route('segment.store')" :is-create="true" :rules="{}" />
+      <SegmentForm
+        :url="route('segment.store')"
+        :is-create="true"
+        :rules="{}"
+      />
     </div>
   </div>
 </template>
diff --git a/resources/js/Pages/Segment/SegmentForm.vue b/resources/js/Pages/Segment/SegmentForm.vue
@@ -12,27 +12,27 @@ import InputCheckbox from '../../Components/InputCheckbox.vue'
 const { initialData, url, isCreate, rules } = defineProps({
   initialData: {
     type: Object as () => ISegmentData,
-    default: () => ({})
+    default: () => ({}),
   },
   url: {
     type: String,
-    required: true
+    required: true,
   },
   isCreate: {
     type: Boolean,
-    default: true
+    default: true,
   },
   rules: {
     type: Array,
-    required: true
-  }
+    required: true,
+  },
 })
 
 const form = useForm({
   name: initialData.name || '',
   description: initialData.description || '',
   rules: initialData.rules || [],
-  is_active: initialData.is_active
+  is_active: initialData.is_active,
 })
 
 const rulesOptions = reactive([])
@@ -46,7 +46,7 @@ onMounted(() => {
   rules.forEach((rule) => {
     rulesOptions.push({
       label: rule.friendly_name,
-      value: rule.machine_name
+      value: rule.machine_name,
     })
   })
 })
@@ -59,12 +59,12 @@ const addNewRuleToSegment = () => {
   if (selected.value === 'total_purchase_value') {
     form.rules.push({
       rule_name: 'total_purchase_value',
-      value: 0
+      value: 0,
     })
   } else if (selected.value === 'minimum_purchase_value') {
     form.rules.push({
       rule_name: 'minimum_purchase_value',
-      value: 0
+      value: 0,
     })
   }
 }

diff --git a/resources/js/Pages/Segment/SegmentTable.vue b/resources/js/Pages/Segment/SegmentTable.vue
@@ -3,7 +3,7 @@ import { Link, router } from '@inertiajs/vue3'
 import Pagination from '../../Components/Pagination.vue'
 
 const { segments } = defineProps({
-  segments: Object,
+  segments: Object
 })
 
 function deleteSegment(segmentId) {
@@ -18,92 +18,114 @@ function deleteSegment(segmentId) {
     class="min-w-full divide-y divide-gray-200 table-fixed dark:divide-gray-600"
   >
     <thead class="bg-gray-100 dark:bg-gray-700">
-      <tr>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
-        >
-          Name
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
-        >
-          Description
-        </th>
-        <th
-          scope="col"
-          class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
-        >
-          Actions
-        </th>
-      </tr>
+    <tr>
+      <th
+        scope="col"
+        class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
+      >
+        Name
+      </th>
+      <th
+        scope="col"
+        class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
+      >
+        Description
+      </th>
+      <th
+        scope="col"
+        class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
+      >
+        Actions
+      </th>
+    </tr>
     </thead>
     <tbody
       class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
     >
-      <tr
-        class="hover:bg-gray-100 dark:hover:bg-gray-700"
-        v-if="segments?.data && segments.data.length > 0"
-        v-for="segment in segments?.data"
+    <tr
+      class="hover:bg-gray-100 dark:hover:bg-gray-700"
+      v-if="segments?.data && segments.data.length > 0"
+      v-for="segment in segments?.data"
+    >
+      <td
+        class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white"
+      >
+        <Link :href="route('segment.show', { segment: segment.id })"
+        >{{ segment.name }}
+        </Link>
+      </td>
+      <td
+        class="max-w-sm p-4 overflow-hidden text-base font-normal text-gray-500 truncate xl:max-w-xs dark:text-gray-400"
       >
-        <td
-          class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white"
+        {{ segment.description }}
+      </td>
+      <td class="p-4 space-x-2 whitespace-nowrap text-right">
+        <Link
+          :href="route('segment.users.index', { segment: segment.id })"
+          id="updateProductButton"
+          class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         >
-          <Link :href="route('segment.show', { segment: segment.id })"
-            >{{ segment.name }}
-          </Link>
-        </td>
-        <td
-          class="max-w-sm p-4 overflow-hidden text-base font-normal text-gray-500 truncate xl:max-w-xs dark:text-gray-400"
+          <svg
+            class="w-4 h-4 mr-2"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
+            ></path>
+            <path
+              fill-rule="evenodd"
+              d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          Segment users
+        </Link>
+        <Link
+          :href="route('segment.show', { segment: segment.id })"
+          id="updateProductButton"
+          class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         >
-          {{ segment.description }}
-        </td>
-        <td class="p-4 space-x-2 whitespace-nowrap">
-          <Link
-            :href="route('segment.show', { segment: segment.id })"
-            id="updateProductButton"
-            class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          <svg
+            class="w-4 h-4 mr-2"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              class="w-4 h-4 mr-2"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
-              ></path>
-              <path
-                fill-rule="evenodd"
-                d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            Update
-          </Link>
-          <button
-            @click="deleteSegment(segment.id)"
-            type="button"
-            id="deleteSegmentButton"
-            class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900"
+            <path
+              d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"
+            ></path>
+            <path
+              fill-rule="evenodd"
+              d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          Update
+        </Link>
+        <button
+          @click="deleteSegment(segment.id)"
+          type="button"
+          id="deleteSegmentButton"
+          class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900"
+        >
+          <svg
+            class="w-4 h-4 mr-2"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              class="w-4 h-4 mr-2"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            Delete item
-          </button>
-        </td>
-      </tr>
+            <path
+              fill-rule="evenodd"
+              d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          Delete item
+        </button>
+      </td>
+    </tr>
     </tbody>
   </table>
 

diff --git a/resources/js/Pages/SegmentUser/Index.vue b/resources/js/Pages/SegmentUser/Index.vue
@@ -0,0 +1,37 @@
+<script setup>
+import PageContainer from '../../Components/PageContainer.vue'
+import Breadcrumb from '../../Components/Breadcrumb.vue'
+import PageTitle from '../../Components/PageTitle.vue'
+import UserTable from '../User/UserTable.vue'
+
+const { users, segment } = defineProps({
+  users: {
+    type: Object,
+    required: true
+  },
+  segment: {
+    type: Object,
+    required: true
+  }
+})
+const breadCrumb = [{ name: 'Notifications', link: route('user.index') }]
+</script>
+
+<template>
+  <div>
+    <PageContainer>
+      <div class="mb-4">
+        <Breadcrumb :links="breadCrumb" />
+        <PageTitle title="Customers in this segment" />
+      </div>
+
+      <div
+        class="items-center justify-between block sm:flex md:divide-x md:divide-gray-100 dark:divide-gray-700"
+      >
+        <div class="flex items-center mb-4 sm:mb-0"></div>
+      </div>
+    </PageContainer>
+
+    <UserTable :users="users" />
+  </div>
+</template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,9 +11,7 @@ class SegmentUserMapAction @@
     {
         public function __construct(
             private readonly SegmentRuleService $segmentRuleService
-        )
-        {
-        }
+        ) {}
         /**
          * @throws Exception
@@ Expand Down @@