Update segment page to accept id query from url

resources/assets/vue/components/segments/elements/SegmentCompanyComponent.vue

@@ -2,7 +2,7 @@
     <div class="w-100">
         <validation-wrapper-component
             selectable
-            :validator="$v.parameters.type"
+            :validator="$v.parameters.id"
         >
             <label>Segment</label>
             <selectable-component
@@ -10,20 +10,22 @@
                     route('api.segment.list') + `?filters={%22type%22:${type}}`
                 "
                 :section="section"
+                :value="3"
                 valueColumn="id"
                 :labelColumn="['name']"
-                v-model="parameters.type"
+                v-model="parameters.id"
                 @input="onSelect"
+                
             ></selectable-component>
         </validation-wrapper-component>
         <list-component
-            v-if="segmentId"
+            v-if="parameters.id"
             class="mt-4"
-            :key="segmentId"
-            :section="`segments_${segmentId}`"
+            :key="parameters.id"
+            :section="`segments_${parameters.id}`"
             :endpoint="route('api.company.list')"
             :options="{
-                segments_in: [segmentId],
+                segments_in: [parameters.id],
                 with_total_payments: true,
                 recency: '2022-02-15',
                 frequency: 15,
@@ -84,31 +86,33 @@ export default {
             type: Number,
             required: true,
         },
+        id: {
+            type: Number,
+            default: null,
+        }
     },
     data() {
         return {
             parameters: {
-                type: null,
+                id: null,
             },
-            segmentId: null,
         };
     },
     validations: {
         parameters: {
-            type: {},
+            id: {},
         },
     },
     methods: {
         onSelect(val) {
-            this.segmentId = val;
-        },
-    },
-    watch: {
-        segmentId(newVal, oldVal) {
-            if (newVal !== oldVal) {
-                // console.log(newVal, oldVal);
-            }
+            this.parameters.id = val
         },
+    },   
+    created(){
+        const id = new URL(location.href).searchParams.get('id')
+        if(id){
+            this.parameters.id = id
+        }
     },
     mixins: [componentHandler],
 };

resources/views/pages/segments/_tabs.blade.php

@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col b-r b-white">
         <div class="row fs-12 text-center">
-            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="segment1">
+            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton @if($active==1) active @endif" tab-name="segment1">
                 <div class="row justify-content-center m-b-5">
                     <div class="col-auto">
                         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;">
@@ -45,7 +45,7 @@
     </div>
     <div class="col b-r b-white">
         <div class="row fs-12 text-center">
-            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="segment2">
+            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton @if($active==2) active @endif" tab-name="segment2">
                 <div class="row justify-content-center m-b-5">
                     <div class="col-auto">
                         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;">
@@ -89,7 +89,7 @@
     </div>
     <div class="col b-r b-white">
         <div class="row fs-12 text-center">
-            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="segment3">
+            <div class="col p-t-20 p-b-20 bg-master-lighter tabButton @if($active==3) active @endif" tab-name="segment3">
                 <div class="row justify-content-center m-b-5">
                     <div class="col-auto">
                         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0 0 172 172" style=" fill:#000000;">

resources/views/pages/segments/index.blade.php

@@ -1,17 +1,23 @@
 @extends('layouts.base_portal')
 @section('inner_content')
-
+@php
+    if($segment){
+        $active = $segment->type;
+    }else{
+        $active = 1;
+    }
+@endphp
 <div class=" tabsContainer p-3 p-b-0 p-md-0">
     @include('pages.segments._tabs')
     <div class="row">
         <div class="col bg-white padding-25">
-            <div class="row tabsContainer tabContent m-l-0 m-r-0" tab-name="segment1">
+            <div class="row tabsContainer tabContent m-l-0 m-r-0 @if($active!==1) hide @endif" tab-name="segment1">
                 <segment-company-component section="standardSegmentSection" :type="1" />
             </div>
-            <div class="row tabsContainer tabContent m-l-0 m-r-0 hide" tab-name="segment2">
+            <div class="row tabsContainer tabContent m-l-0 m-r-0 @if($active!==2) hide @endif" tab-name="segment2">
                 <segment-company-component section="customSegmentSection" :type="2" />
             </div>
-            <div class="row tabsContainer tabContent m-l-0 m-r-0 hide" tab-name="segment3">
+            <div class="row tabsContainer tabContent m-l-0 m-r-0 @if($active!==3) hide @endif" tab-name="segment3">
                 <segment-company-component section="labelSegmentSection" :type="3" />
             </div>
 

routes/web.php

@@ -235,6 +235,12 @@ Route::get('/supplier/pi/export', function(){
 });
 
 
-Route::get('/segments', function () {   
-    return view('pages.segments.index');
+Route::get('/segments', function (Request $request) {
+    $segment = null;
+
+    if ($request->has('id')) {
+        $segment = App\Models\Segment::find($request->id);
+    }
+
+    return view('pages.segments.index', compact('segment'));
 })->name('segments');