feature -- ability to use package as field without relations, as example with package whitecube/nova-flexible-content

Author: phoenix

dist/js/field.js

@@ -64,6 +64,7 @@ Here are a few customization options
 - `->withAlwaysOpen(bool $alwaysOpen)` // - by default select is open, but you can change it behavior
 - `->withFlatten(bool $flatten)` // - by default flatten is enabled, but you can change it behavior
 - `->useSingleSelect()` // - ability for select only one value
+- `->useAsField()` // - ability to write result to field without relations
 
 
 ### Authorization

package-lock.json

@@ -4,14 +4,45 @@
       <div v-for="(value, index) in field.value" :style="{
         'marginTop': index === 0 ? '0' : '6px'
       }">
-        {{ value[field.labelKey] }}
+          <template v-if="!field.useAsField">
+            {{ value[field.labelKey] }}
+          </template>
+          <template v-else-if="items[value]">
+            {{items[value][field.labelKey]}}
+          </template>
       </div>
     </template>
   </panel-item>
 </template>
 
 <script>
 export default {
-  props: ['resourceName', 'resourceId', 'field']
+  props: ['resourceName', 'resourceId', 'field'],
+    mounted() {
+        if(this.field.useAsField) {
+            for( let item of this.field.options ) {
+                this.treeFlatten(item);
+            }
+        }
+    },
+    data(){
+      return {
+          items : {}
+      }
+    },
+    methods: {
+      treeFlatten(node) {
+
+        this.$set(this.items, node[this.field.idKey], node);
+
+        let items = node[this.field.childrenKey];
+
+        if(Array.isArray(items) && items.length > 0 ) {
+            for( let item of items ) {
+                this.treeFlatten(item)
+            }
+        }
+      }
+    }
 }
 </script>

readme.md

@@ -55,41 +55,47 @@ export default {
     },
     setInitialValue()
     {
-
-      let baseUrl = '/nova-vendor/nova-nested-tree-attach-many/';
-
-      if( this.resourceId )
+      if(this.field.useAsField)
       {
-        const url = [
-            baseUrl + this.resourceName,
-            this.resourceId,
-            'attached',
-            this.field.attribute,
-            this.field.idKey
-        ];
-
-        Nova.request( url.join('/') )
-            .then( ( data ) => {
-
-                if(!this.field.multiple)
-                {
-                    this.selectedValues = data.data || undefined;
-                }
-                else
-                {
-                    this.selectedValues = data.data || [];
-                }
-            } );
+          this.selectedValues = this.field.value;
       }
       else
       {
-          if(!this.field.multiple)
+          let baseUrl = '/nova-vendor/nova-nested-tree-attach-many/';
+
+          if( this.resourceId )
           {
-              this.selectedValues = undefined;
+              const url = [
+                  baseUrl + this.resourceName,
+                  this.resourceId,
+                  'attached',
+                  this.field.attribute,
+                  this.field.idKey
+              ];
+
+              Nova.request( url.join('/') )
+                  .then( ( data ) => {
+
+                      if(!this.field.multiple)
+                      {
+                          this.selectedValues = data.data || undefined;
+                      }
+                      else
+                      {
+                          this.selectedValues = data.data || [];
+                      }
+                  } );
           }
           else
           {
-              this.selectedValues = [];
+              if(!this.field.multiple)
+              {
+                  this.selectedValues = undefined;
+              }
+              else
+              {
+                  this.selectedValues = [];
+              }
           }
       }
     },

resources/js/components/DetailField.vue

@@ -37,7 +37,13 @@ public function __construct($name, $attribute = null, $resource = null)
         $this->manyToManyRelationship = $this->attribute;
 
         $this->fillUsing(function($request, $model, $attribute, $requestAttribute) use($resource) {
-            if(is_subclass_of($model, 'Illuminate\Database\Eloquent\Model')) {
+
+            if($this->meta['useAsField'] === true)
+            {
+                $model->{$attribute} = json_decode($request->{$attribute}, true);
+            }
+            else if(is_subclass_of($model, 'Illuminate\Database\Eloquent\Model'))
+            {
                 $model::saved(function($model) use($attribute, $request) {
 
                     $factory = App::make(RelationHandlerFactory::class);
@@ -65,7 +71,8 @@ public function __construct($name, $attribute = null, $resource = null)
             'disabled'          => false,
             'rtl'               => false,
             'maxHeight'         => 500,
-            'isActiveFalse'     => false
+            'isActiveFalse'     => false,
+            'useAsField'        => false,
         ]);
 
         if(!App::make(NovaRequest::class)->isResourceIndexRequest()){
@@ -199,6 +206,15 @@ public function useSingleSelect(): NestedTreeAttachManyField
         return $this;
     }
 
+    public function useAsField(): NestedTreeAttachManyField
+    {
+        $this->withMeta([
+            'useAsField' => true,
+        ]);
+
+        return $this;
+    }
+
     public function authorize(Request $request)
     {
         if(! $this->resourceClass::authorizable()) {