Flexible content compatibility

resources/js/components/FormField.vue

@@ -31,31 +31,39 @@ export default {
     },
 
     created() {
-        console.log()
         if (this.field.dependsOn) {
             this.field.dependsOn.forEach(function(item) {
-                Nova.$on("nova-dynamic-select-changed-" + item, this.onDependencyChanged);
+                Nova.$on("nova-dynamic-select-changed-" + this.addFlexibleContentPrefix(item, this.field), this.onDependencyChanged);
             }, this);
         }
     },
 
     beforeDestroy() {
         if (this.field.dependsOn) {
             this.field.dependsOn.forEach(function(item) {
-                Nova.$off("nova-dynamic-select-changed-" + item, this.onDependencyChanged);
+                Nova.$off("nova-dynamic-select-changed-" + this.addFlexibleContentPrefix(item, this.field), this.onDependencyChanged);
             }, this);
         }
     },
 
     methods: {
+        addFlexibleContentPrefix(item, field) {
+            var splitted = field.attribute.toLowerCase().split('__');
+            return (splitted.length === 2 ? splitted[0] + '__' : '') + item;
+        },
+
+        removeFlexibleContentPrefix(field) {
+            return field.split('__').length === 2 ? field.split('__')[field.split('__').length - 1] : field
+        },
+
         /*
          * Set the initial, internal value for the field.
          */
         setInitialValue() {
             this.options = this.field.options;
 
             if(this.field.value) {
-                this.value = this.options.find(item => item['value'] === this.field.value);
+                this.value = this.options.find(item => item['value'] == this.field.value);
             }
         },
 
@@ -76,7 +84,7 @@ export default {
         },
 
         getDependValues(value, field) {
-            this.field.dependValues[field] = value;
+            this.field.dependValues[this.removeFlexibleContentPrefix(field)] = value;
             return this.field.dependValues;
         },
 
@@ -92,14 +100,13 @@ export default {
                 value: this.value,
                 field: this.field
             });
-            this.options = (await Nova.request().post("/nova-vendor/dynamic-select/options", {
-                resource: this.resourceName,
-                attribute: this.field.attribute,
+            this.options = (await Nova.request().post("/nova-vendor/dynamic-select/options/"+this.resourceName, {
+                attribute: this.removeFlexibleContentPrefix(this.field.attribute),
                 depends: this.getDependValues(dependsOnValue.value, dependsOnValue.field.attribute.toLowerCase())
             })).data.options;
 
             if(this.value) {
-                this.value = this.options.find(item => item['value'] === this.value['value']);
+                this.value = this.options.find(item => item['value'] == this.value['value']);
             }
         }
     },

routes/api.php

@@ -14,4 +14,4 @@
 |
 */
 
-Route::post('/options', 'OptionsController@index');
+Route::post('/options/{resource}', 'OptionsController@index');

src/Http/Controllers/OptionsController.php

@@ -17,6 +17,22 @@ public function index(NovaRequest $request)
         $fields = $resource->updateFields($request);
         $field = $fields->findFieldByAttribute($attribute);
 
+        // Flexible content compatibility:
+        // https://github.com/whitecube/nova-flexible-content
+        if (!$field) {
+            foreach ($fields as $updateField) {
+                if ($updateField->component == 'nova-flexible-content') {
+                    foreach ($updateField->meta['layouts'] as $layout) {
+                        foreach ($layout->fields() as $layoutField) {
+                            if ($layoutField->attribute == $attribute) {
+                                $field = $layoutField;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
         /** @var DynamicSelect $field */
         $options = $field->getOptions($dependValues);