Most of the basics are working, but not done and lots of debug messages are about

I picked up the change that picked a point-release difference on the AWS library since that usually
works out for us (x.y.1 vs. x.y.2 - usually a good call)

app/Http/Livewire/CustomFieldSetDefaultValuesForModel.php

@@ -19,6 +19,7 @@ class CustomFieldSetDefaultValuesForModel extends Component
     public function __construct()
     {
         \Log::info("INSTANTIATING A THING!!!"); // WORKS!
+        \Log::info("MY COMPONENT ID IS: ".$this->id);
     }
 
     public function foo()
@@ -28,14 +29,29 @@ class CustomFieldSetDefaultValuesForModel extends Component
 
     public function mount()
     {
-        $this->fieldset_id = AssetModel::find($this->model_id)->fieldset_id;
+        $this->model = AssetModel::find($this->model_id); // It's possible to do some clever route-model binding here, but let's keep it simple, shall we?
+        $this->fieldset_id = $this->model->fieldset_id;
+        $this->fields = CustomFieldset::find($this->fieldset_id)->fields;
+        $this->add_default_values = ( $this->model->defaultValues->count() > 0);
+        \Log::error("Model ID is: ".$this->model_id." And its fieldset is: ".$this->fieldset_id);
         \Log::error("Mount at least fired, that's got to count for something, yeah?"); //WORKS! YAY!
 
     }
 
+    public function updatingFielsetId()
+    {
+        \Log::error("ABOUT TO UPDATE FIELDSET ID!!!");
+    }
+
+    public function updatedFieldsetId()
+    {
+        \Log::error("UPDATED FIELDSET ID!!!!!!");
+        $this->fields = CustomFieldset::find($this->fieldset_id)->fields;
+    }
+
     public function render()
     {
-        // return 'fart<div>Hi: {{ $this->add_default_values }} yeah?</div>';
+        //return '<div>Hi: {{ $this->add_default_values ? "TRUTH" : "FALSEHOOD" }} yeah?</div>';
         return view('livewire.custom-field-set-default-values-for-model');
     }
 }

app/Http/Livewire/CustomFieldsForFieldset.php

@@ -1,21 +0,0 @@
-<?php
-
-namespace App\Http\Livewire;
-
-use Livewire\Component;
-
-use App\Models\CustomFieldset;
-
-class CustomFieldsForFieldset extends Component
-{
-    public $fieldset_id;
-    public $fields;
-
-    public function render()
-    {
-        if($this->fieldset_id) {
-            $this->fields = CustomFieldset::find($this->fieldset_id)->fields()->get();
-        }
-        return view('livewire.custom-fields-for-fieldset');
-    }
-}

composer.lock

@@ -246,16 +246,16 @@
         },
         {
             "name": "aws/aws-sdk-php",
-            "version": "3.195.1",
+            "version": "3.195.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "7df429b9cae05b52991ae266e0f7f6756a9e7b4d"
+                "reference": "7e0cdfe30ee3cfa2a1494f8e3b4fa5277f118102"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/7df429b9cae05b52991ae266e0f7f6756a9e7b4d",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/7e0cdfe30ee3cfa2a1494f8e3b4fa5277f118102",
-                "reference": "7df429b9cae05b52991ae266e0f7f6756a9e7b4d",
+                "reference": "7e0cdfe30ee3cfa2a1494f8e3b4fa5277f118102",
                 "shasum": ""
             },
             "require": {
@@ -331,9 +331,9 @@
             "support": {
                 "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                 "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.195.1"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.195.2"
             },
-            "time": "2021-09-28T18:16:45+00:00"
+            "time": "2021-09-29T18:17:19+00:00"
         },
         {
             "name": "bacon/bacon-qr-code",

public/vendor/livewire/manifest.json

@@ -1 +1 @@
-{"/livewire.js":"/livewire.js?id=83b555bb3e243bc25f35"}
+{"/livewire.js":"/livewire.js?id=21fa1dd78491a49255cd"}

resources/assets/js/components/forms/asset-models/fieldset-default-values.vue

@@ -1,220 +0,0 @@
-<style scoped>
-    legend {
-        font-size: 13px;
-        font-weight: bold;
-        border: 0;
-    }
-
-
-    fieldset > div {
-        background: #f4f4f4;
-        border: 1px solid #d3d6de;
-        margin: 0 15px 15px;
-        padding: 20px 20px 10px;
-    }
-
-    @media (max-width: 992px) {
-        legend {
-            text-align: left !important;
-        }
-    }
-
-    @media (min-width: 992px) {
-        fieldset > div {
-            width: 55%;
-        }
-    }
-
-
-</style>
-
-<template>
-    <div>
-        <div v-if="show && fields.length">
-            <div class="form-group">
-                <fieldset>
-                    <legend class="col-md-3 control-label">Default Values</legend>
-                    <div class="col-sm-8 col-xl-7">
-                        <p v-if="error">
-                            There was a problem retrieving the fields for this fieldset.
-                        </p>
-                        <div class="row" v-for="field in fields">
-                            <div class="col-sm-12 col-lg-6">
-                                <label class="control-label" :for="'default-value' + field.id">{{ field.name }}</label>
-                            </div>
-                            <div class="col-sm-12 col-lg-6">
-                                <input v-if="field.type == 'text'" class="form-control m-b-xs" type="text" :value="getValue(field)" :id="'default-value' + field.id" :name="'default_values[' + field.id + ']'">
-                                <textarea v-if="field.type == 'textarea'" class="form-control" :value="getValue(field)" :id="'default-value' + field.id" :name="'default_values[' + field.id + ']'"></textarea><br>
-
-                                <select v-if="field.type == 'listbox'" class="form-control m-b-xs" :name="'default_values[' + field.id + ']'">
-                                    <option value=""></option>
-                                    <option v-for="field_value in field.field_values_array" :value="field_value" :selected="getValue(field) == field_value">{{ field_value }}</option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                </fieldset>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        props: [
-            'fieldsetId',
-            'modelId',
-            'previousInput',
-        ],
-
-        data() {
-            return {
-                identifiers: {
-                    fieldset: null,
-                    model: null,
-                },
-                elements: {
-                    fieldset: null,
-                    field: null,
-                },
-                fields: null,
-                show: false,
-                error: false,
-            }
-        },
-
-        /**
-         * Initialise the component (Vue 1.x).
-         */
-        ready() {
-            this.init()
-        },
-
-        /**
-         * Initialise the component (Vue 2.x).
-         */
-        mounted() {
-            this.init()
-        },
-
-        methods: {
-            /**
-             * Grabs the toggle field and connected fieldset and if present,
-             * set up the rest of the component. Scope lookups to the component
-             * only so we're not traversing and/or manipulating the whole DOM
-             */
-            init() {
-                this.defaultValues = JSON.parse(this.previousInput);
-                this.identifiers.fieldset = this.fieldsetId
-                this.identifiers.model = this.modelId
-
-                // This has to be jQuery because a lot of native functions/events
-                // do not work with select2
-                this.elements.fieldset = $('.js-fieldset-field')
-
-                this.elements.field = document.querySelector('.js-default-values-toggler')
-
-                if (this.elements.fieldset && this.elements.field) {
-                    this.addListeners()
-                    this.getFields()
-
-                }
-            },
-
-            /**
-             * Adds event listeners for:
-             *     - Toggle field changing
-             *     - Fieldset field changing
-             *
-             * Using jQuery event hooks for the select2 fieldset field as
-             * select2 does not emit DOM events...
-             */
-            addListeners() {
-                this.elements.field.addEventListener('change', e => this.updateShow())
-                this.elements.fieldset.on('change', e => this.updateFields())
-            },
-
-            /**
-             * Call the CustomFieldsetsController::fields() endpoint to grab
-             * the fields we can set default values for
-             */
-            getFields() {
-                if (!this.identifiers.fieldset) {
-                    return this.fields = [];
-                }
-
-                this.$http.get(this.getUrl())
-                    .then(response => response.json())
-                    .then(data => this.checkResponseForError(data))
-                    .then(data => this.fields = data.rows)
-                    .then(() => this.determineIfShouldShow())
-            },
-
-            getValue(field) {
-                if (field.default_value) {
-                    return field.default_value
-                }
-
-                return this.defaultValues != null ? this.defaultValues[field.id.toString()] : ''
-            },
-
-            /**
-             * Generates the API URL depending on what information is available
-             *
-             * @return Router
-             */
-            getUrl() {
-                if (this.identifiers.model) {
-                    return route('api.fieldsets.fields-with-default-value', {
-                        fieldset: this.identifiers.fieldset,
-                        model: this.identifiers.model,
-                    })
-                }
-
-                return route('api.fieldsets.fields', {
-                    fieldset: this.identifiers.fieldset,
-                })
-            },
-
-            /**
-             * Sets error state and shows error if request was not marked
-             * successful
-             */
-            checkResponseForError(data) {
-                this.error = data.status == 'error'
-
-                return data
-            },
-
-            /**
-             * Checks whether the toggler is checked and shows the default
-             * values field dependent on that
-             */
-            updateShow() {
-                if (this.identifiers.fieldset && this.elements.field) {
-                    this.show = this.elements.field.checked
-                }
-            },
-
-            /**
-             * checks the 'add default values' checkbox if it is already checked
-             * OR this.show is already set to true OR if any fields already have
-             * a default value.
-             */
-            determineIfShouldShow() {
-                this.elements.field.checked = this.elements.field.checked
-                    || this.show
-                    || this.fields.reduce((accumulator, currentValue) => {
-                        return accumulator || currentValue.default_value
-                    }, false)
-
-                this.updateShow()
-            },
-
-            updateFields() {
-                this.identifiers.fieldset = this.elements.fieldset[0].value ? parseInt(this.elements.fieldset[0].value) : false
-                this.getFields()
-            },
-        }
-    }
-</script>

resources/assets/js/vue.js

@@ -31,10 +31,11 @@ Vue.component(
     require('./components/importer/importer.vue').default
 );
 
-Vue.component(
+// This component has been removed and replaced with a Livewire implementation
-    'fieldset-default-values',
+// Vue.component(
-    require('./components/forms/asset-models/fieldset-default-values.vue').default
+//     'fieldset-default-values',
-);
+//     require('./components/forms/asset-models/fieldset-default-values.vue').default
+// );
 
 // Commented out currently to avoid trying to load vue everywhere.
 // const app = new Vue({

resources/views/livewire/custom-field-set-default-values-for-model.blade.php

@@ -1,22 +1,98 @@
 <div>
     <div class="form-group{{ $errors->has('custom_fieldset') ? ' has-error' : '' }}">
         <label for="custom_fieldset" class="col-md-3 control-label">{{ trans('admin/models/general.fieldset') }}</label>
+        <span wire:ignore> {{-- wire:ignore is because Select 2 mangles the dom in many awful ways, and so does iCheckbox --}}
             <div class="col-md-9">
-            {{ Form::select('custom_fieldset', Helper::customFieldsetList(),old('custom_fieldset', 0000 /*$item->fieldset_id*/), array('class'=>'select2 js-fieldset-field', 'style'=>'width:350px', 'aria-label'=>'custom_fieldset', 'wire:model' => 'fieldset_id')) }}
+                {{ Form::select('custom_fieldset', Helper::customFieldsetList(),old('custom_fieldset', 0000 /*$item->fieldset_id*/), array('class'=>'select2 js-fieldset-field', 'style'=>'width:350px', 'aria-label'=>'custom_fieldset', 'wire:model' => 'fieldset_id','id' => 'glooobits')) }} {{-- when we have this wrapped in 'ignore', the wire:model won't work --}}
                 {!! $errors->first('custom_fieldset', '<span class="alert-msg" aria-hidden="true"><br><i class="fas fa-times"></i> :message</span>') !!}
                 <label class="m-l-xs">
                     {{-- {{ Form::checkbox('add_default_values', 1, Request::old('add_default_values'), ['class' => 'js-default-values-toggler']) }} --}}
                     {{-- I'm not sure  that *this* checkboxy thing will render right, because of things. It's not *in* its own view, right? So that's a problem --}}
-                <input wire:click="foo" wire:model="add_default_values" type='checkbox' name='add_default_values' value='1' class='js-default-values-toggler'{{ Request::old('add_default_values')? " checked='checked'" : "" }} />
+                    {{-- DELETE this and references to it: js-default-values-toggler --}}
+                    <input id="add_default_values" {{-- wire:click="foo"--}} wire:model="add_default_values" type='checkbox' name='add_default_values' value='1' class='minimal'{{ Request::old('add_default_values',$add_default_values)? " checked='checked'" : "" }} />
                     {{ trans('admin/models/general.add_default_values') }}
                 </label>
+                </span>
             </div>
     </div>
     @if($this->add_default_values) {{-- 'if the checkbox is enabled *AND* there are more than 0 fields in the fieldsset' --}}
     <div>
         <div class="form-group">
-                @livewire('custom-fields-for-fieldset',['fieldset_id' => $fieldset_id])
+                <?php
+                \Log::error("Fieldset ID is: ".$fieldset_id);
+                ?>
+                {{-- GET READY TO ADD ME SOME CRAAAAAAZY DEFAULT VALUES MOTHER FLIPPER! For, of course, fieldset: {{ $fieldset_id }} --}}
+                {{-- @livewire('custom-fields-for-fieldset',['fieldset_id' => $fieldset_id]) --}}
+                        
+                {{-- NOTE: This stuff could work well also for the 'view this asset and do its custom fields' thing --}}
+                {{-- I don't know if we break *here* or if we break per field element? --}}
+                @foreach ($fields as $field)
+                    <div class="form-group">
+                    
+                            <label class="col-md-3 control-label{{ $errors->has($field->name) ? ' has-error' : '' }}" for="default-value{{ $field->id }}">{{ $field->name }}</label>
+
+                            <div class="col-md-7">
+
+                                @if ($field->element == "text")
+                                    <input class="form-control m-b-xs" type="text" value="{{ $field->defaultValue($model_id) }}" id="default-value{{ $field->id }}" name="default_values[{{ $field->id }}]">
+                                @elseif($field->element == "textarea")
+                                    <textarea x-if="field.type == 'textarea'" class="form-control" :value="getValue(field)" :id="'default-value' + field.id" :name="'default_values[' + field.id + ']'"></textarea><br>
+                                @elseif($field->element == "listbox")
+
+                                    <select Z-if="field.element == 'listbox'" class="form-control m-b-xs" :name="'default_values[' + field.id + ']'">
+                                        <option value=""></option>
+                                        @foreach($field->field_values as $field_value)
+                                            <option Q-for="field_value in field.field_values_array" :value="field_value" :selected="getValue(field) == field_value">{{ $field_value }}</option>
+                                        @endforeach
+                                    </select>
+                                @elseif($field->element == "checkbox")
+                                    <input type='checkbox' />
+                                @else
+                                    <span class="help-block form-error">
+                                        Unknown field element: {{ $field->element }}
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                @endforeach
+
         </div>
     </div>
     @endif
+    <script>
+    /* FIXME - see if we ccan do this and get @this.set() support?
+       Though I don't like having $() sometimes, and document.addEventListener other times?
+        document.addEventListener("DOMContentLoaded", () => {
+ 3        Livewire.hook('component.initialized', (component) => {})
+ 4 
+    */
+    </script>
+    @push('js')
+    <script>
+    // HEADS UP - this doesn't work at all right now. So you can ignore it.
+    console.log("pushed JS is ready")
+    $(function () {
+        console.log(" - DUMPING ALL LIVEWIRE COMPOPNENTS!")
+        console.dir(Livewire.all());
+        console.log("DOMReady is fired, about to add event listener")
+        //console.log("Well, can we even reference the damned thing: ".$('#gloobits'))
+        //var that = @this; //see if this even works?! FIXME PLS! - this is the right way to do it
+        $('#glooobits').on('select2:select',function (event) { //'change' seems to be the jquery-compatible version but I think the select2 versions might be nicer.
+            console.log("Select2 has changed!!!!!")
+            console.dir(event)
+            {{-- @this.set('fieldset_id',event.params.data.id) --}}
+            Livewire.first().set('fieldset_id',event.params.data.id) // I still don't know why @this does'nt work here?
+        })
+        $('#add_default_values').on('ifToggled',function (event) {
+            console.log("toggled!")
+            console.dir(event.target)
+            Livewire.first().set('add_default_values',event.target.checked)
+        })
+    })
+    function whatever(something) {
+        console.log("Whatever fired")
+    }
+    </script>
+    @endpush
 </div>

resources/views/livewire/custom-fields-for-fieldset.blade.php

@@ -1,43 +0,0 @@
-
-    
-    @empty($fields) {{-- There was an error? --}}
-    
-    <div class="row">
-        <div class="col-md-7 col-md-offset-3 has-error">
-            <span class="help-block form-error">There was a problem retrieving the fields for this fieldset.</span>
-        </div>
-    </div>
-    
-    @else
-        {{-- NOTE: This stuff could work well also for the 'view this asset and do its custom fields' thing --}}
-        {{-- I don't know if we break *here* or if we break per field element? --}}
-        @foreach ($fields as $field)
-            <div class="form-group">
-            
-                    <label class="col-md-3 control-label{{ $errors->has($field->name) ? ' has-error' : '' }}" for="default-value{{ $field->id }}">{{ $field->name }}</label>
-
-                    <div class="col-md-7">
-
-                        @if ($field->element == "text")
-                            <input b-if="field.type == 'text'" class="form-control m-b-xs" type="text" :value="getValue(field)" :id="'default-value' + field.id" :name="'default_values[' + field.id + ']'">
-                        @elseif($field->element == "textarea")
-                            <textarea x-if="field.type == 'textarea'" class="form-control" :value="getValue(field)" :id="'default-value' + field.id" :name="'default_values[' + field.id + ']'"></textarea><br>
-                        @elseif($field->element == "listbox")
-
-                            <select Z-if="field.element == 'listbox'" class="form-control m-b-xs" :name="'default_values[' + field.id + ']'">
-                                <option value=""></option>
-                                @foreach($field->field_values as $field_value)
-                                    <option Q-for="field_value in field.field_values_array" :value="field_value" :selected="getValue(field) == field_value">{{ $field_value }}</option>
-                                @endforeach
-                            </select>
-                        @else
-                            <span class="help-block form-error">
-                                Unknown field element: {{ $field->element }}
-                            </span>
-                        @endif
-                    </div>
-                </div>
-
-        @endforeach
-    @endif
-

resources/views/models/edit.blade.php

@@ -81,7 +81,9 @@
 @include ('partials.forms.edit.image-upload')
 
 @stop
-
+@push('js')
+console.log("hi there")
+@endpush
 {{-- @section('moar_scripts')
 <script nonce="{{ csrf_token() }}">
     new Vue({

routes/web/fields.php

@@ -34,13 +34,13 @@ Route::group(['prefix' => 'fields', 'middleware' => ['auth']], function () {
         ]
     )->name('fields.disassociate');
 
-    Route::get(
+    Route::post(
         'fieldsets/{id}/associate',
         [
             CustomFieldsetsController::class, 
             'associate'
         ]
-    )->name('fields.associate');
+    )->name('fieldsets.associate');
 
     Route::resource('fieldsets', CustomFieldsetsController::class, [
         'parameters' => ['fieldset' => 'field_id', 'field' => 'field_id'],