Wiring up more bits to Livewire

app/Http/Livewire/Importer.php

@@ -28,6 +28,8 @@ class Importer extends Component
         'files.*.filesize' => 'required|integer'
     ];
 
+    protected $listeners = ['hideDetails' => 'hideDetails'];
+
     public function mount()
     {
         //$this->files = Import::all(); // this *SHOULD* be how it works, but...it doesn't? (note orderBy/get, below)
@@ -47,6 +49,12 @@ class Importer extends Component
         $this->processDetails = Import::find($id);
     }
 
+    public function hideDetails()
+    {
+        Log::error("hiding details!");
+        $this->processDetails = null;
+    }
+
     public function destroy($id)
     {
         foreach($this->files as $file) {

app/Http/Livewire/ImporterFile.php

@@ -80,15 +80,27 @@ $users = [
 
 class ImporterFile extends Component
 {
-    public $activeFile; //should this get auto-filled?
+    public $activeFile; //this gets automatically populated on instantiation
     public $customFields;
     public $importTypes;
     public $columnOptions;
-    public $importType; // too similar to 'TypeS'?
+    public $increment; // just used to force refreshes
+    public $statusType;
+    public $statusText;
+    public $update;
+    public $send_welcome;
+    public $run_backup;
+
+    protected $rules = [
+        'activeFile.import_type' => 'string',
+        'activeFile.field_map' => 'array', //this doesn't work because I think we would have to list all the keys?
+    ];
+
+//    protected $listeners = ['refreshComponent' => '$refresh'];
 
     private function getColumns($type)
     {
-        global $general, $accessories, $assets, $consumables, $licenses, $users;
+        global $general, $accessories, $assets, $consumables, $licenses, $users; // TODO - why is this global?
 
         $customFields = [];
         foreach($this->customFields AS $field) {
@@ -130,22 +142,36 @@ class ImporterFile extends Component
             'license' =>    'Licenses',
             'user' =>       'Users'
         ];
-        Log::error("import types: ".print_r($this->importTypes,true));
+//        Log::error("import types: ".print_r($this->importTypes,true));
 
-        $columnOptions = [];
+        $columnOptions = []; // FIXME - should this be $this->>columnOptions?
         $this->columnOptions[''] = $this->getColumns(''); //blank mode? I don't know what this is supposed to mean
         foreach($this->importTypes AS $type => $name) {
             $this->columnOptions[$type] = $this->getColumns($type);
         }
+        $this->increment = 0;
     }
 
-    public function changeTypes()
+    public function postSave()
+    {
+        Log::error("Saving import!");
+        if (!$this->activeFile->import_type) {
+            $this->statusType='error';
+            $this->statusText= "An import type is required... "; // TODO - translate me!
+            return false;
+        }
+        $this->statusType = 'pending';
+        $this->statusText = "Processing...";
+    }
+
+    public function changeTypes() // UNUSED?
     {
         Log::error("type changed!");
     }
 
     public function render()
     {
+        //\Log::error("Rendering! And here's the value for mappings: ".print_r($this->mappings,true));
         return view('livewire.importer-file');
     }
 }

resources/views/livewire/importer-file.blade.php

@@ -11,7 +11,7 @@
 
                     <div class="col-md-7 col-xs-12">
                         <span wire:ignore>
-                            {{ Form::select('importType', $importTypes, 0 /* FIXME whats' the old value? */, ['class' => 'livewire-select2', 'placeholder' => '', 'data-livewire-model' => 'importType']) }}
+                            {{ Form::select('import_type', $importTypes, $activeFile->import_type, ['id' => 'import_type', 'class' => 'livewire-select2', 'placeholder' => '', 'data-livewire-model' => 'activeFile.import_type']) }}
                         </span>
                         {{-- <select2 :options="options.importTypes" v-model="options.importType" required> --}}
                             {{-- <option disabled value="0"></option> --}}
@@ -24,33 +24,34 @@
                         <label for="import-update">Update Existing Values?:</label>
                     </div>
                     <div class="col-md-7 col-xs-12">
-                        <input type="checkbox" class="iCheck minimal" name="import-update" v-model="options.update">
+                        <input type="checkbox" class="iCheck minimal" name="import-update" wire:model="update">
                     </div>
                 </div><!-- /dynamic-form-row -->
 
                 <div class="dynamic-form-row">
                     <div class="col-md-5 col-xs-12">
-                        <label for="send-welcome">Send Welcome Email for new Users?</label>
+                        <label for="send_welcome">Send Welcome Email for new Users?</label>
                     </div>
                     <div class="col-md-7 col-xs-12">
-                        <input type="checkbox" class="minimal" name="send-welcome" v-model="options.send_welcome">
+                        <input type="checkbox" class="minimal" name="send_welcome" wire:model="send_welcome">
                     </div>
                 </div><!-- /dynamic-form-row -->
 
                 <div class="dynamic-form-row">
                     <div class="col-md-5 col-xs-12">
-                        <label for="run-backup">Backup before importing?</label>
+                        <label for="run_backup">Backup before importing?</label>
                     </div>
                     <div class="col-md-7 col-xs-12">
-                        <input type="checkbox" class="minimal" name="run-backup" v-model="options.run_backup">
+                        <input type="checkbox" class="minimal" name="run_backup" wire:model="run_backup">
                     </div>
                 </div><!-- /dynamic-form-row -->
 
-                <div class="alert col-md-8 col-md-offset-2" style="text-align:left"
+                @if($statusText)
-                     :class="alertClass"
+                <div class="alert col-md-8 col-md-offset-2 {{ $statusType == 'success' ? 'alert-success' : ($statusType == 'error' ? 'alert-danger' : 'alert-info') }}" style="text-align:left"
-                     v-if="statusText">
+                     >
-                    {{-- this.statusText --}}
+                    {{ $statusText }}
                 </div><!-- /alert -->
+                @endif
         </div> <!-- /div row -->
 
         <div class="row">
@@ -64,17 +65,20 @@
         {{-- <template v-for="(header, index) in file.header_row"> --}}
         @if($activeFile->header_row)
             @foreach($activeFile->header_row AS $index => $header)
-                <div class="row">
+                <div class="row" wire:key="fake_key-{{ base64_encode($header) }}-{{ $increment }}">
                     <div class="col-md-12">
                         <div class="col-md-4 text-right">
+                            <!-- FIXME - no :for -->
                             <label :for="header" class="control-label">{{ $header }}</label>
                         </div>
                         <div class="col-md-4 form-group">
-                            <div required>
+                            <div required data-force-refresh="{{ $increment }}">
                                 {{-- <select2 :options="columns" v-model="columnMappings[header]">
                                     <option value="0">Do Not Import</option>
                                 </select2> --}}
-                                {{ Form::select('something', $columnOptions[$importType], null /* FIXME whats' the old value? */,['placeholder' => 'Do Not Import']) }}
+                                <span wire:ignore>
+                                    {{ Form::select('mapping[]', $columnOptions[$activeFile->import_type], @$activeFile->field_map[$header], [/*'class' => 'livewire-select2 mappings', */'data-livewire-mapping' => $header, 'placeholder' => 'Do Not Import']) }}
+                                </span>
                             </div>
                         </div>
                         <div class="col-md-4">
@@ -90,17 +94,19 @@
 
         <div class="row">
             <div class="col-md-6 col-md-offset-2 text-right" style="padding-top: 20px;">
-                <button type="button" class="btn btn-sm btn-default" @click="processDetail = false">Cancel</button>
+                <button type="button" class="btn btn-sm btn-default" wire:click="$emit('hideDetails')">Cancel</button>
-                <button type="submit" class="btn btn-sm btn-primary" @click="postSave">Import</button>
+                <button type="submit" class="btn btn-sm btn-primary" wire:click="postSave">Import</button>
                 <br><br>
             </div>
         </div><!-- /div row -->
         <div class="row">
-            <div class="alert col-md-8 col-md-offset-2" style="padding-top: 20px;"
+            @if($statusText)
-                 :class="alertClass"
+            <div class="alert col-md-8 col-md-offset-2 {{ $statusType == 'success' ? 'alert-success' : ($statusType == 'error' ? 'alert-danger' : 'alert-info') }}"
-                 v-if="statusText">
+                 style="padding-top: 20px;"
-                {{-- this.statusText --}}
+                 >
+                {{ $statusText }}
             </div>
+            @endif
         </div><!-- /div row -->
 
     </div><!-- /div v-show -->
@@ -108,36 +114,10 @@
     </td>
 
     <script>
-        unused_var_thing = {
+        var unused_var_thing = {
-            data() {
-                return {
-                    activeFile: this.file,
-                    processDetail: false,
-                    statusText: null,
-                    statusType: null,
-                    options: {
-                        importType: this.file.import_type,
-                        update: false,
-                        statusText: null,
-                    },
-
-                    activeColumn: null,
-                }
-            },
             created() {
                 this.populateSelect2ActiveItems();
             },
-            computed: {
-                alertClass() {
-                    if(this.statusType=='success') {
-                        return 'alert-success';
-                    }
-                    if(this.statusType=='error') {
-                        return 'alert-danger';
-                    }
-                    return 'alert-info';
-                },
-            },
             watch: {
                 columns() {
                     this.populateSelect2ActiveItems();
@@ -145,15 +125,7 @@
             },
             methods: {
                 postSave() {
-                    console.log('saving');
+                    /* started cutting here ... */
-                    console.log(this.options.importType);
-                    if(!this.options.importType) {
-                        this.statusType='error';
-                        this.statusText= "An import type is required... ";
-                        return;
-                    }
-                    this.statusType='pending';
-                    this.statusText = "Processing...";
                     this.$http.post(route('api.imports.importFile', this.file.id), {
                         'import-update': this.options.update,
                         'send-welcome': this.options.send_welcome,
@@ -208,14 +180,56 @@
   </tr>
 {{-- </template> --}}
 <script>
-console.warn("Doodie doodie butt farts")
+$(function () {
-$('.livewire-select2').select2();
+    console.warn("Setting iCheck callbacks!")
-console.warn("Select2 has been activated within the livewire context (maybe?)")
+    $('.iCheck').on('ifToggled', function (event) {
-$('.livewire-select2').on('select2:select', function (event) {
+        console.warn("iCheck checked!")
-    console.log("select2 selected!!!!!!!!!!!")
+        console.dir(event.target)
+        @this.set(event.target.name, event.target.checked)
+    })
 })
-$('.livewire-select2').on('change',function (event) {
+
-    console.warn("Original target is: "+event.target)
+    $('.livewire-select2').select2();
-    // find the data-livewire-model thing?
+$('#import_type').on('select2:select', function (event) {
+    console.log("import_type select2 selected!!!!!!!!!!!")
+    //console.dir(event.params.data)
+    //console.dir(event)
+    var livewire_model = $(event.target).data('livewire-model')
+    console.log("Okay, so I think it's: "+livewire_model)
+    if ( livewire_model ) {
+        @this[livewire_model] = event.params.data.id
+    }
+    @this.emit('refreshComponent')
+    @this.increment = @this.increment + 1 //forces refresh (no, apparently it doesn't)
+    console.warn("new increment is: "+@this.increment)
+    //@this.mappings = 'dingus';
 })
+$('.mappings').on('select2:select', function (event) {
+    console.warn("Mapping-type select2 selected")
+    var mapping = $(event.target).data('livewire-mapping')
+    @this.field_map[mapping] = event.params.data.id
+    @this.emit('refreshComponent')
+})
+console.warn("Doing the livewire:load callback...")
+/* on livewire load, set a callback that, right before re-render, re-runs livewire2? */
+$(function () {
+    document.addEventListener('component.initialized', function () {
+        console.warn("Livewire has loaded; adding element.updated hook!")
+        return false; // FIXME
+        Livewire.hook('element.updated', function (element, component) {
+            console.warn("Re-select-2'ing all select2's!")
+            $('.livewire-select2').select2('destroy').select2(); // TODO - this repeats in the script block above.
+
+        })
+    })
+})
+window.setTimeout(  function () {
+    console.warn("Livewire has loaded; adding element.updated hook! (via DELAY!)")
+    return false; // FIXME TOO
+    Livewire.hook('element.updated', function (element, component) {
+        console.warn("Re-select-2'ing all select2's!")
+        $('.livewire-select2').select2('destroy').select2(); // TODO - this repeats in the script block above.
+
+    })
+},3000) // FIXME - this is stupid.
 </script>

resources/views/livewire/importer.blade.php

@@ -147,10 +147,10 @@
 @push('js')
     <script>
         document.addEventListener('livewire:load', function () {
-            console.log("OKAY - we are gonna dump us out some files here!")
+            // console.log("OKAY - we are gonna dump us out some files here!")
-            console.dir(@this.files)
+            // console.dir(@this.files)
-            console.log("after livewire load, we're going to try the this thing")
+            // console.log("after livewire load, we're going to try the this thing")
-            console.dir(@this)
+            // console.dir(@this)
         })
 
         $('#fileupload').fileupload({
@@ -201,9 +201,9 @@
             }
         })
 
-        setTimeout(function () {
+        // setTimeout(function () {
-            console.log("Test @"+"this:")
+        //     console.log("Test @"+"this:")
-            console.dir(@this)
+        //     console.dir(@this)
-        },5000)
+        // },5000)
     </script>
 @endpush