Wiring up more bits to Livewire

This commit is contained in:
Brady Wetherington 2022-11-22 12:41:25 -08:00
parent 5c97e45d00
commit e1c8f155bb
4 changed files with 125 additions and 77 deletions

View file

@ -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) {

View file

@ -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');
}
}

View file

@ -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"
:class="alertClass"
v-if="statusText">
{{-- this.statusText --}}
@if($statusText)
<div class="alert col-md-8 col-md-offset-2 {{ $statusType == 'success' ? 'alert-success' : ($statusType == 'error' ? 'alert-danger' : 'alert-info') }}" style="text-align:left"
>
{{ $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="submit" class="btn btn-sm btn-primary" @click="postSave">Import</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" 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;"
:class="alertClass"
v-if="statusText">
{{-- this.statusText --}}
@if($statusText)
<div class="alert col-md-8 col-md-offset-2 {{ $statusType == 'success' ? 'alert-success' : ($statusType == 'error' ? 'alert-danger' : 'alert-info') }}"
style="padding-top: 20px;"
>
{{ $statusText }}
</div>
@endif
</div><!-- /div row -->
</div><!-- /div v-show -->
@ -108,36 +114,10 @@
</td>
<script>
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,
}
},
var unused_var_thing = {
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');
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...";
/* started cutting here ... */
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")
$('.livewire-select2').select2();
console.warn("Select2 has been activated within the livewire context (maybe?)")
$('.livewire-select2').on('select2:select', function (event) {
console.log("select2 selected!!!!!!!!!!!")
$(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)
})
})
$('.livewire-select2').on('change',function (event) {
console.warn("Original target is: "+event.target)
// find the data-livewire-model thing?
$('.livewire-select2').select2();
$('#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>

View file

@ -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.dir(@this.files)
console.log("after livewire load, we're going to try the this thing")
console.dir(@this)
// 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)
})
$('#fileupload').fileupload({
@ -201,9 +201,9 @@
}
})
setTimeout(function () {
console.log("Test @"+"this:")
console.dir(@this)
},5000)
// setTimeout(function () {
// console.log("Test @"+"this:")
// console.dir(@this)
// },5000)
</script>
@endpush