Display selected category full path

Author: parth-ka-patel

resources/js/components/FormField.vue

@@ -1,26 +1,38 @@
 <template>
-  <default-field :field="field" :errors="errors" :show-help-text="false">
+  <default-field :field="field" :errors="errors" :show-help-text="false" class="categories-tree">
     <template slot="field">
-      <div :dir="field.rtl ? 'rtl' : 'ltr'" class="p-2 nova-tree-attach-many">
-        <treeselect v-model="selectedValues"
-            :id="field.name"
-            :multiple="field.multiple"
-            :options="field.options"
-            :flat="field.flatten"
-            :searchable="field.searchable"
-            :always-open="field.alwaysOpen"
-            :disabled="field.disabled"
-            :sort-value-by="field.sortValueBy"
-            :placeholder="field.placeholder"
-            :max-height="field.maxHeight"
-            :value-consists-of="field.valueConsistsOf"
-            :normalizer="normalizer"
-        />
+      <div class="flex">
+        <div :dir="field.rtl ? 'rtl' : 'ltr'" class="w-3/5 nova-tree-attach-many">
+          <treeselect v-model="selectedValues"
+                      :id="field.name"
+                      :multiple="field.multiple"
+                      :options="field.options"
+                      :flat="field.flatten"
+                      :searchable="field.searchable"
+                      :always-open="field.alwaysOpen"
+                      :disabled="field.disabled"
+                      :sort-value-by="field.sortValueBy"
+                      :placeholder="field.placeholder"
+                      :max-height="field.maxHeight"
+                      :value-consists-of="field.valueConsistsOf"
+                      :normalizer="normalizer"
+          />
+        </div>
+        <div class="w-2/5 pl-8 pt-2" v-if="field.displayPath && fullUrl">
+          <ul class="category-list pl-6">
+            <li class="py-1 text-80 text-sm capitalize" v-for="(url,index) in fullUrl" :key="index"><strong>{{ index }}</strong> {{ url }}</li>
+          </ul>
+        </div>
       </div>
     </template>
   </default-field>
 </template>
 
+<style type="text/css">
+.categories-tree .py-6.px-8.w-1\/2 { width: 80%; }
+.category-list { list-style: none;}
+</style>
+
 <script>
 import {FormField, HandlesValidationErrors} from 'laravel-nova'
 
@@ -37,9 +49,28 @@ export default {
   {
     return {
       selectedValues: null,
+      fullUrl:null,
     };
   },
+  watch: {
+    selectedValues: function(val) {
+      //do something when the data changes.
+      if (val) {
+        this.getCategoryFullPath(val);
+      }
+    }
+  },
   methods: {
+    getCategoryFullPath(val){
+      Nova.request().get('/nova-vendor/nova-nested-tree-attach-many/get-category-full-path',{
+        params:{
+          categories: val || this.selectedValues,
+        }
+      })
+          .then( ( data ) => {
+            this.fullUrl = data.data;
+          } );
+    },
     normalizer( node )
     {
       return {
@@ -79,6 +110,9 @@ export default {
                 {
                     this.selectedValues = data.data || [];
                 }
+                if (this.selectedValues.length > 0){
+                  this.getCategoryFullPath(this.selectedValues);
+                }
             } );
       }
       else

routes/api.php

@@ -1,3 +1,4 @@
 <?php
 
 Route::get('/{resource}/{resourceId}/attached/{relationship}/{idKey}', 'PhoenixLib\NovaNestedTreeAttachMany\Http\Controllers\NestedTreeController@attached');
+Route::get('/get-category-full-path', 'PhoenixLib\NovaNestedTreeAttachMany\Http\Controllers\NestedTreeController@getCategoryFullPath');

src/Http/Controllers/NestedTreeController.php

@@ -2,6 +2,7 @@
 
 namespace PhoenixLib\NovaNestedTreeAttachMany\Http\Controllers;
 
+use App\Models\Category;
 use Illuminate\Routing\Controller;
 use Laravel\Nova\Http\Requests\NovaRequest;
 use PhoenixLib\NovaNestedTreeAttachMany\Domain\Relation\RelationHandlerFactory;
@@ -23,4 +24,20 @@ public function attached(NovaRequest $request, $resource, $resourceId, $relation
 
         return $handler->retrieve($model, $relationship, $idKey);
     }
+
+    public function getCategoryFullPath(\Laravel\Nova\Http\Requests\NovaRequest $request){
+        $categories = $request->input('categories');
+        $urls = [];
+        if ($categories){
+            foreach ($categories as $key => $value){
+                $category = Category::with(["stores" => function($q){
+                    return $q->select('store_name');
+                }])->where("category_id",$value)->first();
+                $category_tree = "[ " . $category->categoryBreadcrumb() . " ]";
+                $stores = implode(' | ',array_column($category->stores->toArray(), 'store_name'));
+                $urls[$category["category_name"]] = $category_tree.' | '.$stores;
+            }
+        }
+        return $urls;
+    }
 }

src/NestedTreeAttachManyField.php

@@ -96,6 +96,15 @@ public function searchable(bool $searchable): NestedTreeAttachManyField
         return $this;
     }
 
+    public function displayPath(bool $displayPath = false): NestedTreeAttachManyField
+    {
+        $this->withMeta([
+            'displayPath' => $displayPath,
+        ]);
+
+        return $this;
+    }
+
     public function withIdKey(string $idKey = 'id'): NestedTreeAttachManyField
     {
         $this->withMeta([