I just want to add default 'Please select' with selectMonth(), selectRange() and selectYear() function
my code
<div class="col-md-1"> {!! Form::selectRange('day', 1, 31) !!}</div>
<div class="col-md-1"> {!! Form::selectMonth('month') !!}</div>
<div class="col-md-1">{!! Form::selectYear('year', 1950, 2015) !!}</div>
No way.
Just do by yourself.
Form::select('day', ['' => 'Select day'] + array_combine(range(1, 31), range(1, 31)))
Form::select('month', array_merge(['' => 'Select month'], range(1, 12)))
Form::select('year', ['' => 'Select year'] + array_combine(range(1950, 2015), range(1950, 2015)))
But I think that's ugly. Why don't you use any datepicker plugin?https://jqueryui.com/datepicker/
Update:
$months = array();
foreach (range(1, 12) as $month) {
$months[$month] = strftime($format, mktime(0, 0, 0, $month, 1));
}
Form::select('month', array_merge(['' => 'Select month'], $months))
Related
I'm trying to make a dependent select with Livewire.
My problem is that when I load the second select, it loads it without problems, but when I select an option from the second select, it throws me this error.
Attempt to read property "nombre" on array
select template
<div class="container">
<div class="row mb-3">
<div class="col-4">
<label class="form-label">Tipo de Inscripcion</label>
<select wire:model="selectedTipoInscripcion" class="form-select">
<option selected>Seleccionar ...</option>
#foreach($tipoInscripcion as $tipo)
<option value="{{ $tipo -> id }}">{{ $tipo -> nombre}}</option>
#endforeach()
</select>
</div>
#if(!is_null($tipoPrograma))
<div class="col-4">
<label class="form-label">Tipo de Programa</label>
<select wire:model="selectedTipoPrograma" class="form-select">
<option selected>Seleccionar ...</option>
#foreach($tipoPrograma as $tipo)
<option value="{{ $tipo -> id}}">{{ $tipo -> nombre}}</option>
#endforeach()
</select>
</div>
#endif
</div>
</div>
The problem is in
<option value="{{ $tipo -> id}}">{{ $tipo -> nombre}}</option>
My Component
<?php
namespace App\Http\Livewire;
use App\Models\Curso;
use App\Models\Programa;
use Livewire\Component;
class SelectAnidado extends Component
{
public $selectedTipoInscripcion = null, $selectedTipoPrograma = null, $SelectedProgrCur = null;
public $tipoPrograma = null, $progrCur = null, $sw = null;
public function render()
{
$programa = (object) ['id' => 1, 'nombre' => 'Programa'];
$curso = (object) ['id' => 2, 'nombre' => 'Curso'];
$ti = collect([$programa, $curso]);
return view('livewire.select-anidado', [
'tipoInscripcion' => $ti
]);
}
public function updatedselectedTipoInscripcion($id)
{
if ($id == 1) {
$doctorado = (object) ['id' => 1, 'nombre' => 'doctorado'];
$maestria = (object) ['id' => 2, 'nombre' => 'maestria'];
$especialidad = (object) ['id' => 3, 'nombre' => 'especialidad'];
$diplomado = (object) ['id' => 4, 'nombre' => 'diplomado'];
$this->tipoPrograma = collect([$doctorado, $maestria, $especialidad, $diplomado]);
}
}
}
It tells me that I am trying to access an array as if it were an object.
But then the error should also appear when the is loaded.
Why does it only appear when I make the selection?
I think problem is here :
$this->tipoPrograma = collect([$doctorado, $maestria, $especialidad, $diplomado]);
you're passing array in tipoPrograma, and each variables is array too.
I am getting an initial data is null error. This has been talked about github forum, however, the answer was that the component was not wrapped in a single div. My components are. So I am still getting:
Uncaught (in promise) TypeError: initialData is null
I have a simple button that runs a function when clicked
which is produced by this code:
<div class="mx-0 col-span-1 block font-medium text-sm text-gray-700 mb-0">
<x-green-button-sm class="px-0 mx-0" title="Add a New person to the family." wire:click="createChild">
<h3 class="my-0 text-xss">Add Child</h3>
</x-green-button-sm>
#livewire('admin.shared.edit-add-child', ['showEditAddChildModal' => $showEditAddChildModal,
'editadd' => 'add', 'userid' => $user->id, 'registrantOrAdmin' => $registrantOrAdmin])
</div>
Which calls this function in the component
public function createChild(){
$this->showEditAddChildModal = true;
}
And notice that the livewire component above is passed the value of $showEditAddChildModal
The beginning of the admin.shared.edit-add-child blade component is:
<div>
<form wire:submit.prevent="save">
<x-modal.dialog wire:model="showEditAddChildModal">
......
.....
</div> // the blade component is contained in a single div as required
so the effort is to make the model visible obviously. The admin.shared.edit-add-child blade blade makes reference to models (public properties) like this
wire:model.debounce.500ms="editChild.firstname"
the EditAddChild.php component is set up like this:
<?php
namespace App\Http\Livewire\Admin\Shared;
use App\Models\Person;
use Livewire\Component;
class EditAddChild extends Component
{
public $showEditAddChildModal = false;
//(if i set the above true, the modal does show up.)
public $userid;
public $txtmsgp;
public $fullname;
public $registrantOrAdmin;
public $editadd;
public $editChild;
// (I started with public Person $editChild but the system balked at //initializing a typed variable in the mount() function)
public $dateOfBirth;
Below, note that the $this->editadd variable is passed in the #livewire call seen above. The mount() function in the EditAddChild.php component is:
public function mount(){
if($this->editadd == 'add')
$this->editChild = $this->addNewChild();
}
addNewChild() is:
public function addNewChild()
{
return Person::make(['added_by' => auth()->user()->id,
'updated_by' => null,
'family_type' => 'child',
'firstname' => '',
'lastname' => '',
'pronouns' => 'u',
'sex' => 'u',
'dob' => now(),
'age_today' => 0,
'mobile_phone' => null,
'receive_texts' => 'u',
'email' => '',
'allow_emails' => 'u',
'member' => 'u',
'allow_photos' => 'u',
'show' => 0,
]);
}
when i click on the add child button to change the x-show variable to true, the modal does not show and the console reports this:
My apologies, but I thought I would list the entire modal coponent as well. There are two parts [dialog.blade.php] :
#props(['id' => null, 'maxWidth' => null])
<x-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
<div class="px-6 py-4">
<div class="text-lg">
{{ $title }}
</div>
<div class="mt-4">
{{ $content }}
</div>
</div>
<div class="px-6 py-4 bg-gray-100 text-right">
{{ $footer }}
</div>
</x-modal>
the second part being [modal.bade.php]:
#props(['id', 'maxWidth'])
#php
$id = $id ?? md5($attributes->wire('model'));
$maxWidth = [
'sm' => 'sm:max-w-sm',
'md' => 'sm:max-w-md',
'lg' => 'sm:max-w-lg',
'xl' => 'sm:max-w-xl',
'2xl' => 'sm:max-w-2xl',
'3xl' => 'sm:max-w-3xl',
'4xl' => 'sm:max-w-4xl',
'5xl' => 'sm:max-w-5xl',
'6xl' => 'sm:max-w-6xl',
'7xl' => 'sm:max-w-7xl',
][$maxWidth ?? '3xl'];
#endphp
<div
x-data="{
show: #entangle($attributes->wire('model')).defer,
focusables() {
// All focusable element types...
let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
return [...$el.querySelectorAll(selector)]
// All non-disabled elements...
.filter(el => ! el.hasAttribute('disabled'))
},
firstFocusable() { return this.focusables()[0] },
lastFocusable() { return this.focusables().slice(-1)[0] },
nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
}"
x-init="$watch('show', value => {
if (value) {
document.body.classList.add('overflow-y-hidden');
} else {
document.body.classList.remove('overflow-y-hidden');
}
})"
x-on:close.stop="show = false"
x-on:keydown.escape.window="show = false"
x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
x-show="show"
id="{{ $id }}"
class="overflow-auto jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
style="display: none;"
>
<div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false"
x-transition:enter="ease-out duration-3000"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-3000"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
{{ $slot }}
</div>
</div>
Please check in here
#livewire('admin.shared.edit-add-child', ['showEditChildModal' => $showEditAddChildModal,
'editadd' => 'add', 'userid' => $user->id, 'registrantOrAdmin' => $registrantOrAdmin])
precisely at "'showEditChildModal' => $showEditAddChildModal" part. You're binding the parent property ($showEditAddChildModal) to the child ('showEditChildModal'), but in the child component that property doesn't exist, instead you have declared the property as next:
public $showEditAddChildModal = false;
It's a typo of you should fix it???
I have implemented a drop down using Laravel collectives. I need to call function setMaterialValue(let x){ console.log(x)} on each time I select a material. This should be specific to each material as cotton-10, wetlook-20, crocodile-30 etc. Without Laravel collective this can be performed as
<option onclick="setMaterialValue(10);">Cotton</option>
How to perform this using Laravel collectives?
My code is as follows:
<div class="card">
<div class="card-header"><h2 class="card-title m-0">Feature Selector</h2></div>
<div class="card-body">
<h5 class="card-title"><b>Material Selector</b></h5>
<div class="row">
<div class="col-md-6">
Textile Material
</div>
<div class="col-md-6">
{{Form::select('material_selector', [
'10' => 'Cotton',
'20' => 'Wet Look',
'30' => 'Crocodile',
], null, ['placeholder' => 'Select Material'],['class'=>'form-control'])
}}
</div>
</div>
<hr>
</div>
</div>
FYI - Where your class declaration is add it and any other html attributes there as well:
{{ Form::select('material_selector',
[
'1' => 'Cotton',
'2' => 'Wet Look',
'3' => 'Crocodile',
],
null,
['placeholder' => 'Select Material'],
[
'class'=>'form-control',
'onclick'=>'setMaterialValue(10)' // <== ADD IT HERE
])
}}
You should probably use jQuery. Then you can address your select element as follows
$(document).ready(function() {
$('.form-control[name="material_selector"]').on('change', showSelectedValue);
function showSelectedValue(event) {
var target = $(event.target);
console.log(target.val() + " = " + target.find('option:selected').text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="material_selector" class="form-control">
<option value="10">Cotton</option>
<option value="20">Wet Look</option>
<option value="30">Crocodile</option>
</select>
Another option
If you really do not want to use jQuery, then try to use the onChange attribute for the select tag like the example below
{{Form::select(
'material_selector', // name attribute of the select
['10' => 'Cotton', '20' => 'Wet Look', '30' => 'Crocodile'], // option values
null, // selected value, for example '20'
['placeholder' => 'Select Material', 'class' => 'form-control', 'onChange' => 'showSelectedValue(this)'], // attributes for <select>
)}}
function showSelectedValue(element) {
console.log(element.value + " = " + element.options[element.selectedIndex].text);
}
<select name="material_selector" class="form-control" onChange="showSelectedValue(this)">
<option value="10">Cotton</option>
<option value="20">Wet Look</option>
<option value="30">Crocodile</option>
</select>
Need use chartjs plugin datalabels in laravel 5.8 and consoletvs/chartsjs ver 6.*
This line generate a error in laravel.
$chart->plugins(['datalabels'=>['color'=>'#223388']]);
$chart = new Chart;
$chart->labels($arrHora);
$chart->dataset('Propostas Por Hora','bar', $arrQtdHora)
->backgroundColor('#64b5f6');
$chart->options([
'responsive' => true,
//'aspectRatio' => 1,
'tooltips' => ['enabled'=>false],
'legend' => ['display' => false],
'scales' => [
'yAxes'=> [[
'display'=>false,
'ticks'=> ['beginAtZero'=> true],
'gridLines'=> ['display'=> false],
]],
'xAxes'=> [[
'categoryPercentage'=> 0.55,
//'barThickness' => 100,
'barPercentage' => 0.5,
'ticks' => ['beginAtZero' => true],
'gridLines' => ['display' => false],
]],
],
]);
$chart->plugins(['datalabels'=>['color'=>'#223388']]);
//dd($chart);
//->backgroundColor('#64b5f6');
return view('dashboard', ['chart' => $chart]);
Two things I have to clarify, after playing around with the library, I came up with the following results:
First: The function $chart->plugins is used to create inline plugins only, under chartjs/script.blade.php the file begins with:
So for each plugin array that you define it will load a view from the pluginsView array that have the same name, but I think this is not full developed yet, and since this is not what the question is about lets move on.
Second: You can perfectly a nested option use options -> plugin like I have suggested before, but there's one thing that you will have to be careful whit, is that 'plugins' can't be an array like the others, and here is why:
The function expects a string to be printed raw, so with that you can use something like:
$chart->options([
//...
'plugins' => '{datalabels: {color: \'red\'}}',
//...
]);
Which will work as expected:
I share here the complete solution of my code and if you have any comments or suggestions, you will be welcome.
/* Controller */
<?php
namespace App\Http\Controllers\dashboard;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
use DB;
class DashBoardController extends Controller
{
public function index() {
$result = DB::select('select
convert(varchar(10),data_da_solicitacao,121) data,
convert(varchar(2),data_da_solicitacao,114) hora,
COUNT(id_controle_proposta_pac) qtdHora
from contact_std_parceiros_propostas (nolock) p
where convert(varchar(10),data_da_solicitacao,121) between convert(varchar(10),getdate(),121) and convert(varchar(10),getdate(),121)
and not exists (select * from contact_std_parceiros_propostas_fora (nolock) f where f.id_controle_proposta_pac = p.id_controle_proposta_pac)
Group by convert(varchar(10),data_da_solicitacao,121), convert(varchar(2),data_da_solicitacao,114)
Order by 1');
$arrHora = array();
$arrQtdHora = array();
$i = 0;
foreach ( $result as $r )
{
$arrHora[$i] = $r->hora;
$arrQtdHora[$i] = $r->qtdHora;
$i++;
}
$chart = new Chart;
$chart->labels($arrHora);
$chart->dataset('Propostas Por Hora no dia de hoje','bar', $arrQtdHora)->backgroundColor('#64b5f6');
$chart->options([
'responsive' => true,
'legend' => ['display' => true],
'tooltips' => ['enabled'=>true],
//'aspectRatio' => 1,
'scales' => [
'yAxes'=> [[
'display'=>false,
'ticks'=> ['beginAtZero'=> true],
'gridLines'=> ['display'=> false],
]],
'xAxes'=> [[
'categoryPercentage'=> 0.8,
//'barThickness' => 100,
'barPercentage' => 1,
'ticks' => ['beginAtZero' => true],
'gridLines' => ['display' => false],
]],
],
'plugins' => '{datalabels: {color: \'red\'}}',
]);
return view('dashboard',compact('chart'));
}
}
/* view */
#extends('layout.main')
#section('titulo','Pac - DashBoard')
#section('conteudo')
<div class="row">
<div class="col s6 col m12 l12">
<div class="x_panel">
<div class="x_title">
<div class="col s6 m6 l6"><h2>Propostas do dia</h2></div>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content" style="display: block;">
<div class="row">
<div class="row top_tiles" id="card-0"></div>
<div class="row">
<div class="col s4 m7 l7">
<div id="graph-0" class="x_panel" style="height: 250px">
<!--<canvas id="bar-0" style="width: 70% !important;height: auto !important;">-->
{!! $chart->container() !!}
#foreach($chart->plugins as $plugins)
#include($chart->pluginsViews[$plugins])
#endforeach
<!--</canvas>-->
</div>
</div>
<div class="col s3 m5 l5">
<div id="graph-1" class="x_panel">
<canvas id="pie-1" style="width: 100% !important;height: auto !important;"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{!! $chart->script() !!}
#endsection
I am working on a medical lab application in laravel where I have the following tables:
1. Test table: This is a table which stores all the information related to medical tests:
2: Checkup: This is a page which contains all the patient information along with the tests he/she takes.
This is the test page:
This is the Checkup page where the tests and their results are selected:
Here can be many tests and user can check any number of them and will write the result of the test in the textfield below the checkbox.
I get this data in the controller like below code and save it to the database:
$this->validate($request,
[
'patient_name' => 'required|max:50',
'patient_age' => 'required',
'gender' => 'required',
'patient_type' => 'required',
'technition_id' => 'required',
'result' => 'required',
'test' => 'required',
'amount' => 'required'
]);
if( ($request->patient_type == 2) && ($request->doctor_id==0) )
{
return redirect()->back()->withInput(Input::all())->withErrors(['message' => 'Please select a valid Doctor.']);
}
$checkup = new Checkup;
$checkup->patient_name = $request->patient_name;
$checkup->patient_age = $request->patient_age;
$checkup->gender = $request->gender;
$checkup->patienttype_id = $request->patient_type;
$checkup->technition_id = $request->technition_id;
if(isset($request->doctor_id))
{
$checkup->doctor_id = $request->doctor_id;
}
$checkup->amount = $request->amount;
// $checkup->result = $request->result;
$checkup->save();
$tests =[];
$tests = $request->test;
$results =[];
$results = $request->result;
//$checkup->tests()->attach($tests->id, ['result' => $result]);
$sync_data = [];
for($i = 0; $i < count($tests); $i++)
$sync_data[$tests[$i]] = ['result' => $results[$i]];
$checkup->tests()->sync($sync_data);
Session::flash('success', 'The record was successfully saved.');
return redirect()->route('checkups.index');
Now the problem is that when I check all the checkboxes and write the result of all the tests then it is fine but when I select some and leave some of them then it gives error and the error comes because the result textbox for the unchecked test is empty.
This is the case when I select one test and leave the others:
When I check on test and write the result of it and then var_dump both test and result arrays i get the below output:
In the above image we can see that the test array contains one item because only one checkbox was checked but the result array contains two items and the first one is NULL which belongs to the unchecked checkbox.
This is the view file of the checkboxes and the textfields:
{{ Form::label('tests', 'Tests Taken') }}
#foreach(App\Test::all() as $test)
<div class="checkbox checkbox-switchery">
{{ Form::label('test', $test->name) }}
<input name="test[]" value="{{ $test->id }}" type="checkbox" class="switchery-primary">
</div>
<div>
{{ Form::label('result', "Result") }}
<input name="result[]" type="text" class="form-control">
</div>
#endforeach
<div class="form-group">
{{ Form::label('amount', 'Amount') }}
{{ Form::text('amount', null, ['class' => 'form-control']) }}
</div>
<div class="form-group">
{{Form::button('<i class="fa fa-save"> Save</i>', ['type' => 'submit', 'class' => 'btn btn-success'])}}
</div>
{!! Form::close() !!}
Please help me on this and show me how to insert the pivot table data properly to the system.
Thanks in advance for any help.
Try this..
In your blade file :
#foreach(App\Test::all() as $index => $test)
<div class="checkbox checkbox-switchery">
{{ Form::label('test', $test->name) }}
<input name="test[{{ $index }}]" value="{{ $test->id }}" type="checkbox" class="switchery-primary">
</div>
<div>
{{ Form::label('result', "Result") }}
<input name="result[{{ $index }}]" type="text" class="form-control">
</div>
#endforeach
Instead of the for loop you can use foreach lopp.
$sync_data = [];
foreach($tests as $index => $value) {
if(!empty($results[$index]) {
$sync_data[$value] = ['result' => $results[$index]]
}
}
$checkup->tests()->sync($sync_data);