I think I have, now, full parity on the base Importer level

Meaning that you can upload new files, delete old files, have error
messages, have status updates - and all of them seem to work.

FIXME.txt

@@ -1,11 +1,15 @@
-remove Ziggy
+X - remove Ziggy
-and ziggy-js too
+X - and ziggy-js too
-And what is /public/js/snipeit.js ? That looks like a generated file
+X - And what is /public/js/snipeit.js ? That looks like a generated file
 
 The 'flash' (forced refresh/fake refresh) on uploads is dumb
-I'm not sure if the order on the uploaded files is right?
+X - the order on the uploaded files is wrong (backwards)
-The Livewire.first() thing is still dumb (but Id o'nt know that we can fix it).
+X - (fixed somehow?!) The Livewire.first() thing is still dumb (but Id o'nt know that we can fix it).
 
-Deletes need to work (I got this working before using $.ajax; it's not even hard)
+X - Deletes need to work (I got this working before using $.ajax; it's not even hard)
 
 Then mapping and so on.
+
+Can we potentially delete whatever that this.$http thing? Or is that some side-effect of Vue.js that we don't get for free? (yes, it was that)
+
+I suspect the Alert section is not yet wired up - but should be. Doesn't seem too hard?

app/Http/Livewire/Importer.php

@@ -5,6 +5,7 @@ namespace App\Http\Livewire;
 use Livewire\Component;
 
 use App\Models\Import;
+use Storage;
 
 use Log;
 
@@ -14,6 +15,13 @@ class Importer extends Component
     public $processDetails;
     public $forcerefresh;
 
+    public $progress; //upload progress - '-1' means don't show
+    public $progress_message; //progress message
+    public $progress_bar_class;
+
+    public $message; //status/error message?
+    public $message_type; //success/error?
+
     protected $rules = [
         'files.*.file_path' => 'required|string',
         'files.*.created_at' => 'required|string',
@@ -22,13 +30,15 @@ class Importer extends Component
 
     public function mount()
     {
-        //$this->files = Import::all(); // this *SHOULD* be how it works, but...it doesn't?
+        //$this->files = Import::all(); // this *SHOULD* be how it works, but...it doesn't? (note orderBy/get, below)
-        $this->forcerefresh = 0;
+        //$this->forcerefresh = 0;
+        $this->progress = -1; // '-1' means 'don't show the progressbar'
+        $this->progress_bar_class = 'progress-bar-warning';
     }
 
-    public function test()
+    public function hideMessages()
     {
-        Log::error("Test Button Clicked!!!!");
+        $this->message='';
     }
 
     public function toggleEvent($id)
@@ -37,9 +47,26 @@ class Importer extends Component
         $this->processDetails = Import::find($id);
     }
 
+    public function destroy($id)
+    {
+        foreach($this->files as $file) {
+            \Log::debug("File id is: ".$file->id);
+            //\Log::debug("File is: ".print_r($file,true));
+            if($id == $file->id) {
+                // FIXME - should I do a try/catch on this and use the file_delete_failure or whatever, if needed?
+                \Log::debug("I FOUND IT!!!!");
+                Storage::delete('imports/'.$file->file_path); // FIXME - last time I ran this, it *didn't* delete the file?!
+                $file->delete();
+
+                $this->message = trans('admin/hardware/message.import.file_delete_success');
+                $this->message_type = 'success'; // uhm, I mean, I guess?
+            }
+        }
+    }
+
     public function render()
     {
-        $this->files = Import::all(); //HACK - slows down renders.
+        $this->files = Import::orderBy('id','desc')->get(); //HACK - slows down renders.
         return view('livewire.importer');
     }
 }

resources/views/livewire/importer.blade.php

@@ -32,16 +32,18 @@
 </template>
 
 {{-- alert --}}
-<template>
+@if($message != '')
-        <div class="col-md-12" :class="alertType">
+    <div class="col-md-12" class="{{ $message_type }}">
-            <div class="alert" :class="alertClassName">
+        <div class="alert alert-{{ $this->message_type }} ">
-                <button type="button" class="close" @click="hideEvent">&times;</button>
+            <button type="button" class="close" wire:click="hideMessages">&times;</button>
-                <i class="fas fa-check faa-pulse animated" aria-hidden="true" v-show="alertType == 'success'"></i>
+            @if($message_type == 'success')
+                <i class="fas fa-check faa-pulse animated" aria-hidden="true"></i>
+            @endif
             <strong>{{-- title --}} </strong>
-                <slot></slot>
+            {{ $message }}
         </div>
     </div>
-</template>
+@endif
 
 <script>
     fixme = {
@@ -73,14 +75,15 @@
                         <div class="row">
 
                             <div class="col-md-12">
-
+                                @if($progress != -1)
-                                <div class="col-md-9" style="padding-bottom:20px; display:none" id='progress-container'>
+                                    <div class="col-md-9" style="padding-bottom:20px" id='progress-container'>
                                         <div class="progress progress-striped-active" style="margin-top: 8px"> {{-- so someof these values are in importer.vue! --}}
-                                        <div id='progress-bar' class="progress-bar" class="progress-bar-warning" role="progressbar" style="width: 0%">
+                                            <div id='progress-bar' class="progress-bar {{ $progress_bar_class }}" role="progressbar" style="width: {{ $progress }}%">
-                                            <span id='progress-text'></span>
+                                                <span id='progress-text'>{{ $progress_message }}</span>
                                             </div>
                                         </div>
                                     </div>
+                                @endif
 
                                 <div class="col-md-3 text-right pull-right">
 
@@ -103,7 +106,6 @@
                         </div>
                         <div class="row">
                             <div class="col-md-12 table-responsive" style="padding-top: 30px;">
-                                <button wire:click="test">Test!</button><br />
                                 <table data-pagination="true"
                                         data-id-table="upload-table"
                                         data-search="true"
@@ -134,7 +136,7 @@
                                                     </button>
                                                 </td>
                                                 <td class="col-md-1 text-right">
-                                                    <button class="btn btn-sm btn-danger" @click="deleteFile(currentFile)">
+                                                    <button class="btn btn-sm btn-danger" wire:click="destroy({{ $currentFile->id }})">
                                                         <i class="fas fa-trash icon-white" aria-hidden="true"></i><span class="sr-only"></span></button>
                                     			</td>
                                     		</tr>
@@ -167,23 +169,30 @@
     <script>
         document.addEventListener('livewire:load', function () {
             console.log("OKAY - we are gonna dump us out some files here!")
-             console.dir(Livewire.first().files)
+            console.dir(@this.files)
+            console.log("after livewire load, we're going to try the this thing")
+            console.dir(@this)
         })
 
         $('#fileupload').fileupload({
             dataType: 'json',
             done: function(e, data) {
-                $('#progress-bar').attr("class", "progress-bar-success");
+                //$('#progress-bar').attr("class", "progress-bar-success");
-                $('#progress-text').text("Success!"); // same here? TODO - internationalize!
+                @this.progress_bar_class = 'progress-bar-success';
-                $('#progress-bar').attr('style', 'width: 100%'); // weird, wasn't needed before....
+                //$('#progress-text').text("Success!"); // same here? TODO - internationalize!
+                @this.progress_message = 'Success!'; // FIXME - we're already round-tripping to the server here - I'd love it if we could get internationalized text here
+                //$('#progress-bar').attr('style', 'width: 100%'); // weird, wasn't needed before....
+                @this.progress = 100;
                 console.log("Dumping livewire files!!!!!!!!!")
-                console.dir(Livewire.first().files)
+                console.dir(@this.files)
                 console.log("And now dumping data.result.files!!!!!")
                 console.dir(data.result.files)
-                //Livewire.first().files = data.result.files.concat(Livewire.first().files); // FIXME - how to get in and out of the Livewire.first().something.... (this doesn't work either)
+                //@this.files = data.result.files.concat(@this.files); // FIXME - how to get in and out of the @this.something.... (this doesn't work either)
-                // Livewire.first().files = Livewire.first().files.concat(data.result.files) //I don't quite see why this should be like this, but, well, whatever.
+                // @this.files = @this.files.concat(data.result.files) //I don't quite see why this should be like this, but, well, whatever.
                 //fuckit, let's just force a refresh?
-                Livewire.first().forcerefresh = Livewire.first().forcerefresh+1 // this is a horrible hack; please forgive me :(
+                // NB - even if that *did* work, I suspect it would re-flash the progressbar, which we would not like.
+                // perhaps a better angle would be to  have a 'progress' PHP attribute, and update that dynamically, and let Livewire re-render it as appropriate?
+                @this.forcerefresh = @this.forcerefresh+1 // this is a horrible hack; please forgive me :(
                 console.log(data.result.header_row);
                 console.dir()
             },
@@ -193,20 +202,29 @@
                     "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                 };
                 data.process().done( function () {data.submit();});
-                $('#progress-container').show();
+                // $('#progress-container').show();
+                @this.progress = 0;
             },
             progress: function(e, data) {
-                var progress = parseInt((data.loaded / data.total * 100, 10));
+                @this.progress = parseInt((data.loaded / data.total * 100, 10));
-                $('#progress-bar').attr('style', 'width: '+progress+'%');
+                //$('#progress-bar').attr('style', 'width: '+progress+'%');
-                $('#progress-text').text(progress+'% Complete');
+                @this.progress_message = @this.progress+'% Complete'; // FIXME - this should come from server (so it can be internationalized)
+                //$('#progress-text').text(progress+'% Complete');
             },
             fail: function(e, data) {
-                $('#progress-bar').attr("class", "progress-bar-danger");
+                @this.progress_bar_class = "progress-bar-danger";
                 // Display any errors returned from the $.ajax()
                 console.dir(data.jqXHR.responseJSON.messages) // FIXME don't dupm to console
-                $('#progress-bar').attr('style', 'width: 100%');
+                //$('#progress-bar').attr('style', 'width: 100%');
-                $('#progress-text').text(data.jqXHR.responseJSON.messages);
+                @this.progress = 100;
+                //$('#progress-text').text(data.jqXHR.responseJSON.messages);
+                @this.progress_message = data.jqXHR.responseJSON.messages;
             }
         })
+
+        setTimeout(function () {
+            console.log("Test @"+"this:")
+            console.dir(@this)
+        },5000)
     </script>
 @endpush