DRCIT/snipe-it
1
0
Fork 0
mirror of https://github.com/snipe/snipe-it.git synced 2024-12-25 05:34:06 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Finalizing the Livewire Importer! Just going to do some testing now

Browse source
This commit is contained in:
Brady Wetherington 2023-02-28 21:58:02 -08:00
parent 2f94bf96ff
commit 5cf66851f7
8 changed files with 190 additions and 310 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
FIXME.txt
View file

@ -1,17 +0,0 @@
X - remove Ziggy
X - and ziggy-js too
X - And what is /public/js/snipeit.js ? That looks like a generated file
The 'flash' (forced refresh/fake refresh) on uploads is dumb
X - the order on the uploaded files is wrong (backwards)
X - (fixed somehow?!) The Livewire.first() thing is still dumb (but Id o'nt know that we can fix it).
X - Deletes need to work (I got this working before using $.ajax; it's not even hard)
X - Then mapping and so on.
X - 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)
X - I suspect the Alert section is not yet wired up - but should be. Doesn't seem too hard?
???? translations on the main import screen seem donked for some inexplicable reason? PRobably we newly-tranlsated them?

44
app/Console/Commands/FlattenLanguages.php Normal file
View file

@ -0,0 +1,44 @@
<?php
namespace App\Console\Commands;
use Illuminate\Console\Command;
class FlattenLanguages extends Command
{
/**
* The name and signature of the console command.
*
* @var string
*/
protected $signature = 'lang:flatten';
/**
* The console command description.
*
* @var string
*/
protected $description = 'Command description';
/**
* Create a new command instance.
*
* @return void
*/
public function __construct()
{
parent::__construct();
}
/**
* Execute the console command.
*
* @return int
*/
public function handle()
{
$lang = \Lang::all();
print_r($lang);
return 0;
}
}

33
app/Http/Livewire/Importer.php
View file

@ -8,12 +8,15 @@ use App\Models\Import;
use Storage;
use Log;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
class Importer extends Component
{
use AuthorizesRequests;
public $files;
public $processDetails;
public $forcerefresh;
public $progress; //upload progress - '-1' means don't show
public $progress_message; //progress message
@ -30,13 +33,15 @@ class Importer extends Component
'files.*.filesize' => 'required|integer'
];
protected $listeners = ['hideDetails' => 'hideDetails', 'importError' => 'importError', 'alert' => 'alert'];
protected $listeners = [
'hideDetails' => 'hideDetails',
'importError' => 'importError',
'alert' => 'alert'
]; // TODO - try using the 'short' form of this?
public function mount()
{
//$this->authorize('import'); // FIXME - gotta do this somewhere!!!!!
//$this->files = Import::all(); // this *SHOULD* be how it works, but...it doesn't? (note orderBy/get, below)
//$this->forcerefresh = 0;
$this->authorize('import');
$this->progress = -1; // '-1' means 'don't show the progressbar'
$this->progress_bar_class = 'progress-bar-warning';
}
@ -48,27 +53,25 @@ class Importer extends Component
public function importError($errors)
{
\Log::info("Errors fired!!!!");
\Log::info(" Here they are...".print_r($errors,true));
\Log::debug("Errors fired!!!!");
\Log::debug(" Here they are...".print_r($errors,true));
$this->import_errors = $errors;
}
public function alert($obj)
{
\Log::info("Alert object received: ".print_r($obj,true));
\Log::debug("Alert object received: ".print_r($obj,true));
$this->message = $obj;
$this->message_type = "danger"; // FIXME - when does this get reset? Only when you click the 'x'?
}
public function toggleEvent($id)
{
Log::error("toggled on: ".$id);
$this->processDetails = Import::find($id);
}
public function hideDetails()
{
Log::error("hiding details!");
$this->processDetails = null;
}
@ -76,15 +79,13 @@ class Importer extends Component
{
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?
$this->message_type = 'success';
}
}
}
@ -94,10 +95,6 @@ class Importer extends Component
$this->files = Import::orderBy('id','desc')->get(); //HACK - slows down renders.
return view('livewire.importer')
->extends('layouts.default')
->section('content')
->layoutData(['title', trans('general.import')]); /* return view('livewire.show-posts')
4 ->layout('layouts.base', ['title' => 'Show Posts'])
->section('body') // or whatever?
5 */
->section('content');
}
}

23
app/Http/Livewire/ImporterFile.php
View file

@ -11,10 +11,8 @@ use Log;
class ImporterFile extends Component
{
public $activeFile; //this gets automatically populated on instantiation
public $customFields;
public $importTypes;
public $columnOptions;
public $increment; // just used to force refreshes - and doesn't really work anyways
public $statusType;
public $statusText;
public $update;
@ -24,18 +22,15 @@ class ImporterFile extends Component
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?
// 'activeFile.field_map.*' => 'string', // FIXME - can we do this?
'activeFile.field_map' => 'array',
'activeFile.header_row' => 'array',
'field_map' => 'array'
];
// protected $listeners = ['refreshComponent' => '$refresh'];
public function getDinglefartsProperty() // FIXME (and probably not even used at this point :(((
public function generate_field_map()
{
$tmp = array_combine($this->activeFile->header_row, $this->field_map);
\Log::error("tmp is: ".print_r($tmp,true));
return json_encode($tmp);
}
@ -107,7 +102,7 @@ class ImporterFile extends Component
'country' => 'Country',
];
private function getColumns($type) //maybe static?
private function getColumns($type)
{
$customFields = [];
foreach($this->customFields AS $field) {
@ -149,21 +144,19 @@ class ImporterFile extends Component
'license' => 'Licenses',
'user' => 'Users'
];
// Log::error("import types: ".print_r($this->importTypes,true));
$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;
$this->field_map = array_values($this->activeFile->field_map);
$this->field_map = $this->activeFile->field_map ? array_values($this->activeFile->field_map): [];
}
public function postSave()
{
if (!$this->activeFile->import_type) {
Log::info("didn't find an import type :(");
Log::error("didn't find an import type :(");
$this->statusType ='error';
$this->statusText = "An import type is required... "; // TODO - translate me!
return false;
@ -173,14 +166,8 @@ class ImporterFile extends Component
}
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');
}
}

51
resources/assets/js/snipeit.js
View file

@ -601,3 +601,54 @@ function htmlEntities(str) {
};
})(jQuery);
/**
* Universal Livewire Select2 and iCheck integration
*
* How to use:
*
* 1. Set the class of your select2 elements to 'livewire-select2' and your icheck elements to 'livewire-icheck' (as appropriate).
* (For iCheck, you may still need to apply the other iCheck classes like 'minimal' or 'iCheck')
* 2. Name your element to match a property in your Livewire component
* 3. Add an attribute called 'data-livewire-component' that points to $_instance->id (via `{{ }}` if you're in a blade,
* or just $_instance->id if not).
* 4. For iCheck, you need to wrap the 'checkbox' element with wire:ignore - perhaps in the <label> if it wraps the
* <input> element, or just put a <span wire:ignore></span> around just the input element.
* 5. If you have dynamically shown/hidden checkboxes, you might need to initialize iCheck on them on component page-load.
* Just use $('.livewire-icheck').iCheck(), or for the minimal-style, use:
*
* $('input[type="checkbox"].minimal.livewire-icheck, input[type="radio"].minimal.livewire-icheck').iCheck({
* checkboxClass: 'icheckbox_minimal-blue',
* radioClass: 'iradio_minimal-blue'
* });
*
* (which is stolen from above here in this JS file)
*/
$(function () {
$('.livewire-select2').select2()
$(document).on('select2:select', '.livewire-select2', function (event) {
var target = $(event.target)
if(!event.target.name || !target.data('livewire-component')) {
console.error("You need to set both name (which should match a Livewire property) and data-livewire-component on your Livewire-ed select2 elements!")
console.error("For data-livewire-component, you probably want to use $_instance->id or {{ $_instance->id }}, as appropriate")
return false
}
window.livewire.find(target.data('livewire-component')).set(event.target.name, this.options[this.selectedIndex].value)
})
window.livewire.hook('message.processed', function (el,component) {
$('.livewire-select2').select2();
//$('.livewire-icheck').iCheck(); //this seems to blow up pretty badly.
});
$(document).on('ifToggled', '.livewire-icheck', function (event) {
if(!event.target.name || !$(event.target).data('livewire-component')) {
console.error("You need to set both name (which should match a Livewire property) and data-livewire-component on your iCheck elements!")
console.error("For data-livewire-component, you probably want to use $_instance->id or {{ $_instance->id }}, as appropriate")
return false
}
window.livewire.find($(event.target).data('livewire-component')).set(event.target.name, event.target.checked)
})
})

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

@ -1,15 +1,13 @@
<span> {{-- This <span> doesn't seem to fix it, neither does a 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', $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 --}}
{{ Form::select('fieldset_id', Helper::customFieldsetList(), old('fieldset_id', $fieldset_id), array('class'=>'select2 js-fieldset-field livewire-select2', 'style'=>'width:350px', 'aria-label'=>'custom_fieldset', 'data-livewire-component' => $_instance->id)) }}
{!! $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', $add_default_values), ['class' => 'minimal', 'wire:model' => "add_default_values", 'id' => 'add_default_values']) }}
<label class="m-l-xs" wire:ignore>
{{ Form::checkbox('add_default_values', 1, Request::old('add_default_values', $add_default_values), ['class' => 'minimal livewire-icheck', 'data-livewire-component' => $_instance->id, 'id' => 'add_default_values']) }}
{{ 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' --}}
@ -63,34 +61,4 @@
</div>
</div>
@endif
<script>
// *still* haven't figured out why this doesn't seem to work at all...
// And even if it did, I hate having $(function () {}) as my DOM-ready checker in some places, and
// DOMContentLoaded in another...
/* document.addEventListener("DOMContentLoaded", function () {
Livewire.hook('component.initialized', function (component) {
$('#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?
})
})
}) */
</script>
@push('js')
<script>
$(function () {
$('#glooobits').on('select2:select',function (event) { //'change' seems to be the jquery-compatible version but I think the select2 versions might be nicer.
{{-- @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) {
Livewire.first().set('add_default_values',event.target.checked)
})
})
</script>
@endpush
</span>

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

@ -1,5 +1,3 @@
{{-- <template> --}}
<tr>
<td colspan="5">
<div class="col-md-12">
@ -11,9 +9,7 @@
</div>
<div class="col-md-7 col-xs-12">
<span wire:ignore>
{{ Form::select('import_type', $importTypes, $activeFile->import_type, ['id' => 'import_type', 'class' => 'livewire-select2', 'placeholder' => '', 'data-livewire-model' => 'activeFile.import_type']) }}
</span>
{{ Form::select('activeFile.import_type', $importTypes, $activeFile->import_type, ['id' => 'import_type', 'class' => 'livewire-select2', 'placeholder' => '', 'data-livewire-component' => $_instance->id]) }}
</div>
</div><!-- /dynamic-form-row -->
@ -21,8 +17,8 @@
<div class="col-md-5 col-xs-12">
<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" wire:model="update">
<div class="col-md-7 col-xs-12" wire:ignore>
<input type="checkbox" class="minimal livewire-icheck" name="update" data-livewire-component="{{ $_instance->id }}">
</div>
</div><!-- /dynamic-form-row -->
@ -30,8 +26,8 @@
<div class="col-md-5 col-xs-12">
<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" wire:model="send_welcome">
<div class="col-md-7 col-xs-12" wire:ignore>
<input type="checkbox" class="minimal livewire-icheck" name="send_welcome" data-livewire-component="{{ $_instance->id }}">
</div>
</div><!-- /dynamic-form-row -->
@ -39,8 +35,8 @@
<div class="col-md-5 col-xs-12">
<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" wire:model="run_backup">
<div class="col-md-7 col-xs-12" wire:ignore>
<input type="checkbox" class="minimal livewire-icheck" name="run_backup" data-livewire-component="{{ $_instance->id }}">
</div>
</div><!-- /dynamic-form-row -->
@ -59,22 +55,21 @@
</div>
</div><!-- /div row -->
{{-- <template v-for="(header, index) in file.header_row"> --}}
@if($activeFile->header_row)
@foreach($activeFile->header_row AS $index => $header)
<div class="row" wire:key="header-row-{{ $increment }}">
<div class="row" wire:key="header-row-{{ $index }}">
<div class="col-md-12">
<div class="col-md-4 text-right">
<label for="field_map.{{ $index }}" class="control-label">{{ $header }}</label>
</div>
<div class="col-md-4 form-group">
<div required data-force-refresh="{{ $increment }}">
<div required>
{{-- this, along with the JS glue below, is quite possibly near to the new Universal LW2 stuff? --}}
{{ Form::select('field_map.'.$index, $columnOptions[$activeFile->import_type], @$activeFile->field_map[$header],
{{ Form::select('field_map.'.$index, $columnOptions[$activeFile->import_type], @$field_map[$index],
[
'class' => 'mappings livewire-select2',
'data-livewire-model' => 'field_map.'.$index, // start of a 'universal' way to do this?
'placeholder' => 'Do Not Import'
'placeholder' => 'Do Not Import',
'data-livewire-component' => $_instance->id
])
}}
@ -89,7 +84,6 @@
@else
No Columns Found!
@endif
{{-- </template> --}}
<div class="row">
<div class="col-md-6 col-md-offset-2 text-right" style="padding-top: 20px;">
@ -112,160 +106,58 @@
</td>
</tr>
{{-- </template> --}}
<script>
$('#import').on('click', function () {
console.log('saving');
console.log(@this.activeFile.import_type);
if(!@this.activeFile.import_type) {
@this.statusType='error';
@this.statusText= "An import type is required... ";
return;
}
@this.statusType='pending';
@this.statusText = "Processing...";
@this.getDinglefartsProperty().then(function (mappings_raw) {
var mappings = JSON.parse(mappings_raw)
console.warn("Here is the mappings:")
console.dir(mappings)
$.post({
url: "{{ route('api.imports.importFile', $activeFile->id) }}",
data: {
'import-update': !!@this.update,
'send-welcome': !!@this.send_welcome,
'import-type': @this.activeFile.import_type,
'run-backup': !!@this.run_backup,
'column-mappings': mappings // THE HARD PART.
},
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
}
}).done( function (body) {
// Success
@this.statusType="success";
@this.statusText = "Success... Redirecting.";
console.dir(body)
window.location.href = body.messages.redirect_url;
}).fail( function (jqXHR, textStatus, error) {
// Failure
var body = jqXHR.responseJSON
if(body.status == 'import-errors') {
@this.emit('importError', body.messages);
@this.statusType='error';
@this.statusText = "Error";
} else {
console.warn("Not import-errors, just regular errors")
console.dir(body)
@this.emit('alert', body.error)
}
@this.emit('hideDetails') // emit something ?
});
})
return false;
});
$(function () {
console.warn("Setting iCheck callbacks!")
$('.iCheck').on('ifToggled', function (event) {
console.warn("iCheck checked!")
console.dir(event.target)
@this.set(event.target.name, event.target.checked)
$(function () {
// initialize iCheck for use with livewire
$('.minimal.livewire-icheck').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
})
})
$('.livewire-select2').select2(); // TODO/FIXME (pick one) possibly embedded into the Universal Livewire Implementation
$('#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
$('#import').on('click', function () {
if(!@this.activeFile.import_type) {
@this.statusType='error';
@this.statusText= "An import type is required... "; //TODO: translate?
return;
}
@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('change', function (event) { // or 'select2:select'
@this.set($(event.target).data('livewire-model'), this.options[this.selectedIndex].value)
return; // FIXME - or delete.
// I mean, it's kinda crazy, but I think we don't even *have* to do this?
// we can just get the state in the javascript that does the POST (Axios, but soon to be plain-ole' jquery)
// so I think we can just not do this at all and do it there instead?
console.warn("Mapping-type select2 selected")
// console.dir(event);
console.dir(this); // hrm?
console.warn("Selected Index is: "+this.selectedIndex);
var mapping = $(event.target).data('livewire-mapping')
var field_map = @this.activeFile.field_map
console.log("Field map before: ")
console.dir(field_map)
field_map[mapping] = this.options[this.selectedIndex].value
console.log("field map after: ")
console.dir(field_map)
@this.set('activeFile.field_map',field_map)
//@this.set('activeFile.field_map.'+mapping, this.options[this.selectedIndex].value) // doesn't work?
// @this.field_map[mapping] = event.params.data.id // seems to be a select2-ism?
@this.emit('refreshComponent')
})
//console.warn("Doing the livewire:load callback...")
/* on livewire load, set a callback that, right before re-render, re-runs select2? */
/* $(function () {
// document.addEventListener("DOMContentLoaded", function () {
// THIS DOESN'T EVER FIRE!
console.warn("Livewire has loaded; adding element.updated hook!")
// return false; // FIXME
Livewire.hook('element.updated', function (element, component) { //weird. doesn't seem to be firing?
console.warn("Re-select-2'ing all select2's!")
//$('.livewire-select2').select2('destroy').select2(); // TODO - this repeats in the script block above.
})
@this.statusType='pending';
@this.statusText = "Processing...";
@this.generate_field_map().then(function (mappings_raw) {
var mappings = JSON.parse(mappings_raw)
console.warn("Here is the mappings:")
console.dir(mappings)
$.post({
url: "{{ route('api.imports.importFile', $activeFile->id) }}",
data: {
'import-update': !!@this.update,
'send-welcome': !!@this.send_welcome,
'import-type': @this.activeFile.import_type,
'run-backup': !!@this.run_backup,
'column-mappings': mappings
},
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
}
}).done( function (body) {
// Success
@this.statusType="success";
@this.statusText = "Success... Redirecting.";
console.dir(body)
window.location.href = body.messages.redirect_url;
}).fail( function (jqXHR, textStatus, error) {
// Failure
var body = jqXHR.responseJSON
if(body.status == 'import-errors') {
@this.emit('importError', body.messages);
@this.statusType='error';
@this.statusText = "Error";
} else {
console.warn("Not import-errors, just regular errors")
console.dir(body)
@this.emit('alert', body.error)
}
@this.emit('hideDetails')
});
})
*/
//I don't think this fires either
document.addEventListener("livewire:load", () => {
console.warn("livewire loaded!!!")
Livewire.hook('message.processed', (message, component) => {
console.warn("livewire message processed!")
// $('.form-select').select2()
}); });
//document.addEventListener("livewire:load", function (event) {
// OMG THIS ACTUALLY WORKS! (Kinda?)
window.livewire.hook('message.processed', /*'element.updated',*/ (el,component) => {
console.warn("hook fired!!!!!!!!!!!! on: "+el)
$('.livewire-select2').select2();
});
//});
// console.dir(Livewire)
// Livewire().hook('element.updated', function (element, component) { //weird. doesn't seem to be firing?
// console.warn("Re-select-2'ing all select2's! (native embeded version?")
// //$('.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.
return false;
});
</script>

64
resources/views/livewire/importer.blade.php
View file

@ -2,10 +2,9 @@
{{ trans('general.import') }}
@parent
@stop
<div id="not-app">
{{-- <importer inline-template v-cloak> --}} {{-- like, this, here, that's a literal Vue directive --}}
<div>
{{-- Livewire requires a 'master' <div>, above --}}
<div class="row">
{{-- <alert v-show="alert.visible" :alert-type="alert.type" v-on:hide="alert.visible = false">@{{ alert.message }}</alert> --}}
{{-- alert --}}
@if($message != '')
@ -21,7 +20,6 @@
</div>
@endif
{{-- errors thing that's built-in maybe? No. It's importer-error.vue --}}
@if($import_errors)
<div class="box">
<div class="box-body">
@ -74,7 +72,7 @@
<!-- The fileinput-button span is used to style the file input field as button -->
@if (!config('app.lock_passwords'))
<span class="btn btn-primary fileinput-button">
<span>{{ trans('admin/importer/general.select_import_file') }}</span>
<span>{{ trans('button.select_file') }}</span>
<!-- The file input field used as target for the file upload widget -->
<label for="files[]"><span class="sr-only">{{ trans('admin/importer/general.select_file') }}</span></label>
<input id="fileupload" type="file" name="files[]" data-url="{{ route('api.imports.index') }}" accept="text/csv" aria-label="files[]">
@ -98,14 +96,12 @@
class="col-md-12 table table-striped snipe-table">
<tr>
<th class="col-md-6">{{ trans('admin/importer/table.file') }}</th>
<th class="col-md-3">{{ trans('admin/importer/table.created') }}</th>
<th class="col-md-1">{{ trans('admin/importer/table.size') }}</th>
<th class="col-md-1 text-right"><span class="sr-only">{{ trans('admin/importer/table.process') }}</span></th>
<th class="col-md-1 text-right"><span class="sr-only">{{ trans('admin/importer/table.delete') }}</span></th>
<th class="col-md-6">{{ trans('general.file_name') }}</th>
<th class="col-md-3">{{ trans('general.created_at') }}</th>
<th class="col-md-1">{{ trans('general.filesize') }}</th>
<th class="col-md-1 text-right"><span class="sr-only">{{ trans('general.actions') }}</span></th>
</tr>
{{-- <template v-for="currentFile in files"> --}}
@foreach($files as $currentFile)
<tr>
<td class="col-md-6">{{ $currentFile->file_path }}</td>
@ -113,25 +109,16 @@
<td class="col-md-1">{{ $currentFile->filesize }}</td>
<td class="col-md-1 text-right">
<button class="btn btn-sm btn-info" wire:click="toggleEvent({{ $currentFile->id }})">
{{ trans('admin/importer/button.process') }}
{{ trans('general.import') }}
</button>
</td>
<td class="col-md-1 text-right">
<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>
@if( $currentFile && $processDetails && ($currentFile->id == $processDetails->id))
@livewire('importer-file', ['activeFile' => $currentFile])
{{-- <import-file
:key="currentFile.id"
:file="currentFile"
:custom-fields="customFields"
@alert="updateAlert(alert)">
</import-file> --}}
@endif
@endforeach
{{-- </template> --}}
</table>
</div>
</div>
@ -144,39 +131,17 @@
</div>
</div>
{{-- </importer> --}}
</div>
@push('js')
<script>
document.addEventListener('livewire:load', function () {
// console.log("OKAY - we are gonna dump us out some files here!")
// console.dir(@this.files)
// console.log("after livewire load, we're going to try the this thing")
// console.dir(@this)
})
{{-- FIXME: Maybe change this to the file upload thing that's baked-in to Livewire? --}}
{{-- TODO: Maybe change this to the file upload thing that's baked-in to Livewire? --}}
$('#fileupload').fileupload({
dataType: 'json',
done: function(e, data) {
//$('#progress-bar').attr("class", "progress-bar-success");
@this.progress_bar_class = 'progress-bar-success';
//$('#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_message = 'Success!'; // TODO - we're already round-tripping to the server here - I'd love it if we could get internationalized text here
@this.progress = 100;
console.log("Dumping livewire files!!!!!!!!!")
console.dir(@this.files)
console.log("And now dumping data.result.files!!!!!")
console.dir(data.result.files)
//@this.files = data.result.files.concat(@this.files); // FIXME - how to get in and out of the @this.something.... (this doesn't work either)
// @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?
// 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()
},
add: function(e, data) {
data.headers = {
@ -184,23 +149,16 @@
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
};
data.process().done( function () {data.submit();});
// $('#progress-container').show();
@this.progress = 0;
},
progress: function(e, data) {
@this.progress = parseInt((data.loaded / data.total * 100, 10));
//$('#progress-bar').attr('style', 'width: '+progress+'%');
@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) {
@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%');
@this.progress = 100;
//$('#progress-text').text(data.jqXHR.responseJSON.messages);
console.dir(data.jqXHR.responseJSON.messages);
var error_message = ''
for(var i in data.jqXHR.responseJSON.messages) {
error_message += i+": "+data.jqXHR.responseJSON.messages[i].join(", ")