Fix: use dependson mixin on form (#57)

ziffmedia · Apr 5, 2023 · 9855458 · 9855458
1 parent 8acbbdd
commit 9855458
Show file tree

Hide file tree

Showing 8 changed files with 395 additions and 265 deletions.
diff --git a/demo/app/Nova/Person.php b/demo/app/Nova/Person.php
@@ -3,9 +3,6 @@
 namespace App\Nova;
 
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Http\Request;
-use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\DB;
 use Laravel\Nova\Fields\ID;
 use Laravel\Nova\Fields\Text;
 use Laravel\Nova\Http\Requests\NovaRequest;
@@ -54,16 +51,6 @@ public function fields(NovaRequest $request)
                 ->rules('required', 'max:255')
                 ->help('The name is required'),
 
-            SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
-                ->optionsQuery(function (Builder $query) {
-                    $query->where('name', 'NOT LIKE', 'C%');
-                })
-                // ->label(fn ($state) => $state->id . ' - ' . $state->name)
-                // ->ajaxSearchable(true)
-                // ->ajaxSearchable(fn ($query, $search) => $query->where('name', 'LIKE', "%{$search}%")->limit(2))
-                ->placeholder('Type to search')
-                ->help('This is a belongsToMany() relationship in the model'),
-
             SelectPlus::make('States Visited', 'statesVisited', State::class)
                 ->usingIndexLabel(function ($models) {
                     $value = $models->take(1)->pluck('name');
@@ -98,6 +85,17 @@ public function fields(NovaRequest $request)
                 ->label(fn ($state) => $state->name." <span class=\"text-xs\">({$state->code})</span>")
                 ->reorderable('order')
                 ->help('This is a belongsToMany() relationship with a pivot attribute for tracking order, and is ajax searchable.'),
+
+            SelectPlus::make('States Lived In', 'statesLivedIn', State::class)
+                ->optionsQuery(function (Builder $query) {
+                    $query->where('name', 'NOT LIKE', 'C%');
+                })
+                // ->label(fn ($state) => $state->id . ' - ' . $state->name)
+                // ->ajaxSearchable(true)
+                // ->ajaxSearchable(fn ($query, $search) => $query->where('name', 'LIKE', "%{$search}%")->limit(2))
+                ->placeholder('Type to search')
+                ->help('This is a belongsToMany() relationship in the model'),
+
         ];
     }
 

diff --git a/demo/composer.json b/demo/composer.json
@@ -10,14 +10,11 @@
     "repositories": [
         {
             "type": "composer",
-            "url": "https://repo.packagist.com/ziffdavis/"
-        },
-        {
-            "packagist.org": false
+            "url": "https://nova.laravel.com"
         }
     ],
     "require": {
-        "php": "^8.0.2",
+        "php": "^8.1",
         "guzzlehttp/guzzle": "^7.2",
         "laravel/framework": "^9.2",
         "laravel/nova": "^4.0",

diff --git a/demo/database/migrations/2020_03_27_143837_create_app_tables.php b/demo/database/migrations/2020_03_27_143837_create_app_tables.php
@@ -19,6 +19,13 @@ public function up()
             $table->timestamps();
         });
 
+        Schema::create('states', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('code');
+            $table->timestamps();
+        });
+
         Schema::create('state_user_lived_in', function (Blueprint $table) {
             $table->bigInteger('state_id');
             $table->bigInteger('person_id');
@@ -31,12 +38,5 @@ public function up()
             $table->integer('order');
             $table->timestamps();
         });
-
-        Schema::create('states', function (Blueprint $table) {
-            $table->id();
-            $table->string('name');
-            $table->string('code');
-            $table->timestamps();
-        });
     }
 };
diff --git a/dist/css/field.css b/dist/css/field.css
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -8,7 +8,7 @@
           :options="options"
           :placeholder="placeholder"
           :loading="isLoading"
-          :disabled="field.readonly"
+          :disabled="currentField.readonly"
           :multiple="true"
           :selectable="selectable"
           :filterable="filterable"
@@ -32,7 +32,7 @@
             </svg>
           </template>
           <template #no-options>
-            <span v-if="field.isAjaxSearchable">
+            <span v-if="currentField.isAjaxSearchable">
               Type to search...
               <span v-if="ajaxSearchNoResults">Nothing found.</span>
             </span>
@@ -69,7 +69,7 @@
       </template>
 
       <span
-        v-if="field.isReorderable"
+        v-if="currentField.isReorderable"
         class="float-right text-sm ml-3 border-1 mt-2 mr-4"
       >
         <a
@@ -94,7 +94,7 @@
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
 import vSelect from 'vue-select'
 import { debounce } from 'lodash'
 import { VueDraggableNext as vDraggable } from 'vue-draggable-next'
@@ -105,7 +105,7 @@ export default {
     vDraggable
   },
 
-  mixins: [FormField, HandlesValidationErrors],
+  mixins: [DependentFormField, HandlesValidationErrors],
 
   props: ['resourceName', 'resourceId', 'field'],
 
@@ -124,11 +124,11 @@ export default {
 
   methods: {
     setInitialValue () {
-      this.selected = this.field.value || []
+      this.selected = this.currentField.value || []
     },
 
     fill (formData) {
-      formData.append(this.field.attribute, JSON.stringify(this.selected))
+      this.fillIfVisible(formData, this.field.attribute, JSON.stringify(this.selected))
     },
 
     selectable () {

diff --git a/src/SelectPlus.php b/src/SelectPlus.php
@@ -234,7 +234,6 @@ public function mapToSelectionValue(EloquentCollection $models)
 
     public function jsonSerialize(): array
     {
-        // @todo in next version, rename these to camel case
         return array_merge(parent::jsonSerialize(), [
             'isAjaxSearchable' => $this->ajaxSearchable !== null,
             'isAjaxSearchableEmptySearch' => (bool) $this->ajaxSearchableEmptySearch,