anonymouse703
Member Since 2 Years Ago
Experience
420 experience to go until the next level!
In case you were wondering, you earn Laracasts experience when you:
- Complete a lesson — 100pts
- Create a forum thread — 50pts
- Reply to a thread — 10pts
- Leave a reply that is liked — 50pts
- Receive a "Best Reply" award — 500pts
Completed
Awards
-
Start Your Engines
Earned once you have completed your first Laracasts lesson.
-
First Thousand
Earned once you have earned your first 1000 experience points.
-
One Year Member
Earned when you have been with Laracasts for 1 year.
-
Two Year Member
Earned when you have been with Laracasts for 2 years.
-
Three Year Member
Earned when you have been with Laracasts for 3 years.
-
Four Year Member
Earned when you have been with Laracasts for 4 years.
-
Five Year Member
Earned when you have been with Laracasts for 5 years.
-
School In Session
Earned when at least one Laracasts series has been fully completed.
-
Welcome To The Community
Earned after your first post on the Laracasts forum.
-
Full Time Learner
Earned once 100 Laracasts lessons have been completed.
-
Pay It Forward
Earned once you receive your first "Best Reply" award on the Laracasts forum.
-
Subscriber
Earned if you are a paying Laracasts subscriber.
-
Lifer
Earned if you have a lifetime subscription to Laracasts.
-
Laracasts Evangelist
Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.
-
Chatty Cathy
Earned once you have achieved 500 forum replies.
-
Laracasts Veteran
Earned once your experience points passes 100,000.
-
Ten Thousand Strong
Earned once your experience points hits 10,000.
-
Laracasts Master
Earned once 1000 Laracasts lessons have been completed.
-
Laracasts Tutor
Earned once your "Best Reply" award count is 100 or more.
-
Laracasts Sensei
Earned once your experience points passes 1 million.
-
Top 50
Earned once your experience points ranks in the top 50 of all Laracasts users.
-
Community Pillar
Earned once your experience points ranks in the top 10 of all Laracasts users.
Replied to How To Modify Spatie Role And Permission?
I want to use spatie for role and permission what I want is to create a form for permission and role so that the admin will be the one to encode their desired role and permission... but in the docs of spatie is hard to understand since when you check the table in the database there's a name and guard_name...
So if I will make a model for that what will be the guard_name in case?
Started a new Conversation How To Modify Spatie Role And Permission?
Hi I'm using Spatie to my role and permission..Is it possible to modify on how to create role and permission? if Yes then how?
Replied to Modal Is Not Scrollable
I have a long form... but the modal body is not scrollable... I already applied your suggestion but still I cannot click the arrow down... or scroll down
Started a new Conversation Modal Is Not Scrollable
Hi Guys, I had a component for modal... My other modal is scrollable but this one is not... I tried to check each line but I can't configured out.
This are the codes.
<!-- The Modal -->
<div wire.ignore.self class="modal fade" id="loanApplicationModal" tabindex="-1" role="dialog" aria-labelledby="loanApplicationModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl" role="document">
<livewire:loan-application-form />
</div>
</div>
and the other component
<div>
<div div class="modal-content">
<form wire:submit.prevent="store" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Loan Processing</h4>
<a type="button" class="close" data-dismiss="modal">×</a>
</div>
<!-- Modal body -->
<div class=" modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="column" style="text-align:right">
<p>CIS No.:</p>
<p>Client Name:</p>
<p>Loan Cycle:</p>
</div>
<div class="column ml-2">
<p><b>00300</b></p>
<p><b>Juan Dela Cruz</b></p>
<p><b>001</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row bg-info text-white">
<div class="column" style="text-align:right">
<p class="p-1 text-warning">Active Account</p>
<p class="p-1 text-warning">Details:</p>
</div>
<div class="column ml-2" style="text-align:right">
<p class="p-1">Loan Number:</p>
<p class="p-1">Granted Due Date:</p>
<p class="p-1">Amount Granted:</p>
<p class="p-1">Balance:</p>
</div>
<div class="column ml-2">
<p class="p-1"><b>0001</b></p>
<p class="p-1"><b>April 21, 2021</b></p>
<p class="p-1"><b>10,000.00</b></p>
<p class="p-1"><b>0.00</b></p>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="x_content">
<ul class="nav nav-tabs bar_tabs" id="loan_tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="loan-tab" data-toggle="tab" href="#loan_application" role="tab" aria-controls="loan_application" aria-selected="true">Loan Application Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="borrower-tab" data-toggle="tab" href="#borrower_ref" role="tab" aria-controls="borrower_ref" aria-selected="false">Borrowers References</a>
</li>
<li class="nav-item">
<a class="nav-link" id="other-tab" data-toggle="tab" href="#other_charges" role="tab" aria-controls="other_charges" aria-selected="false">Other Charges Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="loan_payroll-tab" data-toggle="tab" href="#loan_payroll" role="tab" aria-controls="loan_payroll" aria-selected="false">Loan Payroll Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="computation-tab" data-toggle="tab" href="#computation" role="tab" aria-controls="computation" aria-selected="false">Computation Details</a>
</li>
</ul>
<div class="tab-content" id="loanTabContent">
<div class="tab-pane fade show active" id="loan_application" role="tabpanel" aria-labelledby="loan-tab">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Type of Loan</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<br>
<div class="form-group">
<label>Amount Granted</label>
<input type="text" wire:model="province" name="province" class="form-control" required>
@if($errors->has('province'))
<p style="color:red">{{$errors->first('province')}}</p>
@endif
</div>
<div class="form-group">
<label>Date Granted</label>
<input type="date" wire:model="birth_date" name="birth_date" class="form-control" placeholder="mm/dd/yyyy" required>
@if($errors->has('birth_date'))
<p style="color:red">{{$errors->first('birth_date')}}</p>
@endif
</div>
<div class="form-group">
<label>Interest Rate Adjustment</label>
<input type="text" wire:model="province" name="province" class="form-control" required>
@if($errors->has('province'))
<p style="color:red">{{$errors->first('province')}}</p>
@endif
</div>
<br>
<div class="form-group">
<label>Loan Term</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Interest Payment Type</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Interval</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<br>
<div class="form-group">
<label>Account Officer</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Product</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Ledger</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Security</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
<div class="tab-pane fade" id="borrower_ref" role="tabpanel" aria-labelledby="borrower-tab">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk aliquip
</div>
<div class="tab-pane fade" id="other_charges" role="tabpanel" aria-labelledby="other-tab">
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk
</div>
<div class="tab-pane fade" id="loan_payroll" role="tabpanel" aria-labelledby="loan_payroll-tab">
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk
</div>
<div class="tab-pane fade" id="computation" role="tabpanel" aria-labelledby="computation-tab">
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</div>
</form>
</div>
</div>
Replied to What Is The Proper Way To Search Last_name, First_name, Middle_name In One Input Tag
Nope... This the component
class SearchCustomer extends Component
{
public $searchCustomer = '';
public $customerId;
public function updatingSearch()
{
$this->resetPage();
}
public function render()
{
$this->searchCustomer = $this->searchCustomer ?
Customer::where(DB::raw('concat(last_name," ",first_name," ",middle_name)'), 'like', '%' . $searchCustomer . '%' )
->get() : collect();
return view('livewire.search-customer');
}
public function applyLoan($customerId){
$this->customerId = $customerId;
$this->emit('customerId',$this->customerId);
}
}
Replied to What Is The Proper Way To Search Last_name, First_name, Middle_name In One Input Tag
I have this error Undefined variable: customers
Replied to What Is The Proper Way To Search Last_name, First_name, Middle_name In One Input Tag
Hi sir, I have this working code
$searchCustomer = '%'.$this->searchCustomer.'%';
$this->customers = Customer::where(DB::raw('concat(last_name," ",first_name," ",middle_name)'), 'like',$searchCustomer)->get();
return view('livewire.search-customer');
but the above code will display all the customers name...
What I want to achieve is if I don't have name to search then the table should be empty..
I tried this one
return view('livewire.search-customer',[
'customers' => Customer::where(DB::raw('concat(last_name,first_name,middle_name)'), '%'.$this->searchCustomer.'%')->paginate(10),
]);
But I got error Invalid argument supplied for foreach()
<tbody>
@forelse ($customers as $customer)
<tr>
<td>{{$customer->id}}</td>
<td>{{$customer->last_name}}, {{$customer->first_name}}, {{$customer->middle_name}}</td>
<td class="text-center align-middle">
<div class="btn-group">
<button wire:click="editTOL({{ $customer->id }})" class="btn btn-info delete-header m-1 btn-sm" title="Edit">Apply Loan   <i class="glyphicon glyphicon-file" small></i></button>
</div>
</td>
</tr>
@empty
<tr>
<td style="text-align:center" colspan="3">No Record Found</td>
</tr>
@endforelse
</tbody>
Started a new Conversation What Is The Proper Way To Search Last_name, First_name, Middle_name In One Input Tag
Hello guys, What is the proper way to search last_name, first_name, middle_name in one input tag?
I did like this but there's an error
public $searchCustomer, $customers;
public function render()
{
$searchCustomer = '%' . $this->searchCustomer . '%';
$this->customers = Customer::where(['last_name' , 'first_name' , 'middle_name'],'ilike', $searchCustomer)->get();
return view('livewire.loan-application-table');
}
Replied to Livewire: How To Get The Image Name?
still got this Undefined property: Livewire\TemporaryUploadedFile::$getClientOriginalExtension
Replied to Livewire: How To Get The Image Name?
Hello sir, But this is livewire and request is not recognize and it will throw Undefined variable: request
Started a new Conversation Livewire: How To Get The Image Name?
Hello guys, I upload a record with image but the filename of the image is something like this C:\Windows\Temp\php5C1D.tmp and the the file name.
this is my store function
public function store(){
$action = '';
$data = $this->validate([
'profile' => 'image|max:1024',
'last_name' => 'required',
'first_name' => 'required',
'middle_name' => 'required',
'street' => 'required',
'barangay' => 'required',
'city' => 'required',
'province' => 'required',
'sketch' => 'image|max:1024',
'birth_date' => 'required | date',
'gender_id' => 'required',
'civil_status_id' => 'required',
'spouse' => 'required',
'tel_no' => 'required',
'cell_no_1' => 'required',
'cell_no_2' => 'required',
'employer' => 'required',
'employer_address' => 'required',
'employer_contact_no' => 'required'
]);
if(!empty($this->profile)){
$this->profile->store('public/images');
}
if(!empty($this->sketch)){
$this->sketch->store('public/images');
}
if($this->customerId){
Customer::find($this->customerId)->update($data);
$action = 'edit';
}else{
Customer::create($data);
$action = 'store';
}
$this->emit('showEmitedFlashMessage', $action);
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeCustomerModal');
}
Replied to Error On Running Serve
Hi sir, this is the error on your second suggestion. error Command "rebuild" not found.
Started a new Conversation Error On Running Serve
Hello guys, I tried to clone a project from a repo. I already install the packages... when I try to yarn serve I got this error.
ERROR Failed to compile with 1 error
in ./src/App.vue?vue&type=style&index=0&lang=scss&
Syntax Error: Error: PostCSS received undefined instead of CSS string
this my App.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
// Import Main styles for this application
@import 'assets/scss/style';
</style>
Started a new Conversation View Doesn't Display After Using API
Hello guys, me and teammate used vue and api for this project... we tried to merged our code since he is the one who made the api and I made the front-end but when I tried to use his api routes and access through network there's no display on my view. I tried to look at the console but there's no error in there..
Is there something I missed?
Started a new Conversation Livewire:How To Store Image Url In Database?
Hi guys I have to image to upload (profile and sketch), What is the best way to upload it in database?
So far, this is what I did but it's definitely missing some code.
public function store(){
$action = '';
$data = $this->validate([
'gender' => 'required',
'profile' => 'image|max:1024',
'last_name' => 'required',
'first_name' => 'required',
'middle_name' => 'required',
'street' => 'required',
'barangay' => 'required',
'city' => 'required',
'province' => 'required',
'sketch' => 'image|max:1024',
'birth_date' => 'required | date',
'gender_id' => 'required',
'civil_status_id' => 'required',
'spouse' => 'required',
'tel_no' => 'required',
'cell_no1' => 'required | integer',
'cell_no2' => 'required | integer',
'employer' => 'required',
'employer_address' => 'required',
'employer_contact' => 'required'
]);
$this->profile->storage('images','public');
$this->sketch->storage('images','public');
if($this->customerId){
Customer::find($this->customerId)->update($data);
$action = 'edit';
}else{
Customer::create($data);
$action = 'store';
}
$this->emit('showEmitedFlashMessage', $action);
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeCustomerModal');
}
Replied to How To Pass Relationship Data Into Livewire Compnent?
Alright this is the scenario, I want do make a dropdown for gender and civil status in my form so, do I need to make a relationship between my customer to gender and customer to civil status? and what should be the proper way to do it?
Started a new Conversation How To Pass Relationship Data Into Livewire Compnent?
Hi guys I want to pass relationship data into the livewire component for the select but when I dd there's no data in my relation[]
This is how I did it.
in my Customer Model
public function gender(){
$this->hasOne(Gender::class,'gender_id','id');
}
public function civilStatus(){
$this->hasOne(civilStatus::class,'civil_status_id','id');
}
in my Gender Model
public function customer()
{
return $this->belongsTo(Gender::class);
}
in my Civil Status Model
public function customer()
{
return $this->belongsTo(Customer::class);
}
and in my component
public function render()
{
$data = [
Customer::with(['gender','civilStatus'])
];
return view('livewire.customer-information-form',compact('data'));
}
Is there any code I missed?
Replied to How To Pass Flash Notification In Parent Component?
Doesn't working
this is the notification component
class Notification extends Component
{
public $store = false;
protected $listeners = ['storeUpdated' => 'showStore'];
public function showStore()
{
$this->store = true;
}
public function render()
{
return view('livewire.notification');
}
}
this is the store
if($this->genderId){
Gender::find($this->genderId)->update($data);
$this->emit('storeUpdated', ['edit' => 'Contact Us Information Updated Successfully.']);
$this->emit('storeUpdated');
}else{
Gender::create($data);
$this->emit('storeUpdated', ['store' => 'Contact Us Information Created Successfully.']);
}
and this is the table (view)
<livewire:notification/>
Replied to How To Pass Flash Notification In Parent Component?
Well I will try it... hehehe Thanks bro....
Replied to How To Pass Flash Notification In Parent Component?
In this case you can't customize the message
Started a new Conversation How To Pass Flash Notification In Parent Component?
Good day guys, my last thread was misinterpreted and messy.. so here is the case, I have a parent component called table and child called form. Every time I store or update a data (in the form component) I want to pass flash notification in the parent component (table).
In my child component I have this.
public function store(){
// $this->editMode = false;
$data = $this->validate([
'loan_security' => 'required',
]);
// dd($lsId);
if($this->lsId){
// dd($this->lsId);
LoanSecurity::find($this->lsId)->update($data);
session()->flash('edit','Loan Interval Updated Successfully.');
}else{
LoanSecurity::create($data);
session()->flash('save','Loan Interval Created Successfully.');
}
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeLoanSecurityModal');
}
Now, those session flash is what I want to show in my table component which is my table
I only have this in my render
public function render()
{
return view('livewire.loan-security-table',[
'loansecurities' => LoanSecurity::paginate(10)
]);
}
and in my table blade (parent component)
@if (session()->has('store'))
<div class="alert alert-success">
{{ session('store') }}
</div>
@endif
@if (session()->has('edit'))
<div class="alert alert-success">
{{ session('edit') }}
</div>
@endif
Do I need to emit those session flash? or how to do it?
Replied to Flash Message Not Working.
Like what I said, I have two component the table and form... the store function is in the form component (child) where the I put the session()->flash() then I want to flash the message into the parent component which is the table component.
Replied to Flash Message Not Working.
Should I emit the flash message? since I have two component the table and the form... I tried to pop the the flash message into the table component but I trigger the session()->flash() in the form.
Started a new Conversation Flash Message Not Working.
Hi guys I tried to make a flash message using session flash on my store and update but the flash message is not working... I tried to search and we have the same approach but in side it's not working..
How I store with session flash
public function store(){
// $this->editMode = false;
$data = $this->validate([
'interest_rate' => 'required',
]);
// dd($iraId);
if($this->iraId){
// dd($this->iraId);
InterestRateAdjustment::find($this->iraId)->update($data);
session()->flash('edit','Type of Loan Updated Successfully.');
}else{
InterestRateAdjustment::create($data);
session()->flash('save','Type of Loan Created Successfully.');
}
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeIRAModal');
}
and in my blade
@if (session()->has('store'))
<div class="alert alert-success">
{{ session('store') }}
</div>
@endif
@if (session()->has('edit'))
<div class="alert alert-success">
{{ session('edit') }}
</div>
@endif
Started a new Conversation How To Solve Footer Is Inside The Slot?
Hi Guys I'm making the third component now... The first two component is okay but when I tried to make Third component the footer is showed up under the button inside the {{$slot}}.
This is my app.blade.php
<body class="nav-md">
<div class="container body">
<div class="main_container">
<!--sidebar-->
@include('layouts.shared.sidebar')
<!--/sidebar-->
<!-- top navigation -->
@include('layouts.shared.navbar')
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<main>
{{ $slot }}
</main>
</div>
<!-- /page content -->
<!-- footer content -->
@include('layouts.shared.footer')
<!-- /footer content -->
</div>
</div>
<!-- script -->
<script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
<script type="text/javascript" src="{{ mix('js/main.js') }}"></script>
@livewireScripts
@yield('custom_script')
</body>
and this is my table component
<div>
<!-- page content -->
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="dashboard_graph">
<div class="row x_title">
<div class="col-md-6">
<h3>Type of Loans</h3>
</div>
</div>
<div class="row">
@if (session()->has('store'))
<div class="alert alert-success">
{{ session('store') }}
</div>
@endif
<!-- Button trigger modal -->
<button type="button" wire:click="createTypeOfLoan" class="btn btn-primary ml-3" data-keyboard="false">
<i class="fa fa-add"></i>  Add Type of Loan
</button>
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<div class="display">
<div class="row">
<div class="col-sm-12">
//The footer shows here
@if($typeofloans->count())
<table id="typeOfLoanTable" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed" cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
<thead class="text-center align-middle uppercase">
<tr role="row">
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($typeofloans as $typeofloan)
<tr>
<td>{{$typeofloan->type_of_loan}}</td>
<td class="text-center align-middle">
<div class="btn-group">
<button wire:click="selectItem({{ $typeofloan->id }},'edit')" class="btn btn-info m-1 btn-sm" title="Edit"><i class="glyphicon glyphicon-pencil" small></i></button>
<button wire:click="deleteConfirm({{ $typeofloan->id }})" class="btn btn-danger delete-header m-1 btn-sm" title="Delete"><i class="glyphicon glyphicon-trash" small></i></button>
</div>
</td>
</tr>
@endforeach
</tbody>
@else
<tr>
<td colspan="2">No Record Found</td>
</tr>
</table>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--end of table row--->
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- The Modal -->
<div wire.ignore.self class="modal fade" id="typeofloanModal" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<livewire:contact-form />
</div>
</div>
</div>
@section('custom_script')
@include('layouts.shared.scripts.typeofloan_scripts');
@endsection
I put the footer location above.
Replied to How To Implement Bootstrap DataTable In Livewire?
Yeah already saw that.. the problem is I have 21 module (table components) and I don't want to code it in every table component so I decided to use bootstrap DataTable to lessen the code.
Replied to How To Implement Bootstrap DataTable In Livewire?
:) but I make my own script it will make my code long... that's why I need to use the bootstrap table to lessen my code because i have 21 modules (table components) to make.
Started a new Conversation How To Implement Bootstrap DataTable In Livewire?
Hi guys, I'm done in my modal CRUD. I want to use Bootstrap DataTable in projects since it's complete from pagination, search and sorting so I download the bootstrap data table and include in my resources.. I merge the css/js in webpack.mix.
When I tried to use it in app.blade.ph
$(document).ready(function() {
$('#contactTable').DataTable();
} );
I got this error
run_customtabs
contact:449 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (contact:449)
at i (main.js:2)
at Object.fireWith [as resolveWith] (main.js:2)
at Function.ready (main.js:2)
at HTMLDocument.J (main.js:2)
Replied to How To Avoid Data Populating Between Edit And Create Using One Modal?
So this are the two components
my table
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\ContactUs;
use Livewire\WithPagination;
class ContactTable extends Component
{
use WithPagination;
public $selectedItem, $action;
protected $listeners = [
'refreshParent' => '$refresh',
'deleteContact',
];
public function selectItem($contactId, $action){
$this->selectedItem = $contactId;
$this->action = $action;
if($action == 'edit'){
$this->emit('contactId',$this->selectedItem);
$this->emit('openContactModal');
}
}
public function render()
{
return view('livewire.contact-table', [
'contacts' => ContactUs::paginate(3),
]);
}
public function createContact(){
$this->emit('resetInputFields');
$this->emit('openContactModal');
}
public function deleteConfirm($contactId){
// $this->dispatchBrowserEvent(event('swal:confirmCotactDelete'));
$this->dispatchBrowserEvent('swal:confirmContactDelete', [
'title' => 'Are you sure?',
'text' => "You won't be able to revert this!",
'icon' => 'warning',
'showCancelButton' => true,
'confirmButtonColor' => '#3085d6',
'cancelButtonColor' => '#d33',
'confirmButtonText' => 'Yes, delete it!',
'id' => $contactId
]);
}
public function deleteContact($contactId){
ContactUs::destroy($contactId);
$this->resetPage();
}
}
and my form
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\ContactUs;
use Illuminate\Validation\Rule;
use Cviebrock\EloquentSluggable\Services\SlugService;
class ContactForm extends Component
{
public $slug, $contacts, $contactId, $email, $contact_no, $address;
protected $listeners = [
'contactId',
'resetInputFields'
];
private function resetInputFields(){
$this -> email = null;
$this -> contact_no = null;
$this -> address = null;
}
public function contactId($contactId){
$this->contactId = $contactId;
// dd($this->contactId);
$contact = ContactUs::find($contactId);
$this->email = $contact->email;
$this->contact_no = $contact->contact_no;
$this->address = $contact->address;
}
public function render()
{
return view('livewire.contact-form');
}
public function store(){
// $this->editMode = false;
$data = $this->validate([
'address' => 'required',
'contact_no' => 'required',
'email' => 'required',
]);
// dd($contactId);
if($this->contactId){
// dd($this->contactId);
ContactUs::find($this->contactId)->update($data);
session()->flash('edit','Contact Us Information Updated Successfully.');
}else{
// ContactUs::create($data);
session()->flash('save','Contact Us Information Created Successfully.');
}
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeContactModal');
}
}
When I use emit the $this->emit('resetInputFields'); I got this error Component method not found: [resetInputFields]
Replied to How To Avoid Data Populating Between Edit And Create Using One Modal?
Okay I figured out and that is my mistakes..... I have two components the table and form... when I click 'Add New Contact' button I should clear the input fields in my form component since edit data was still in modal.
Replied to How To Avoid Data Populating Between Edit And Create Using One Modal?
I forgot to delete that I don't use it anymore... I have updated code above... still nit working
Started a new Conversation How To Avoid Data Populating Between Edit And Create Using One Modal?
Hello guys, my one CRUD modal is working now but I noticed some bug... When I click the edit button the modal will populate the data based on the id I selected but when I closed the modal and click 'Add New Contacts' button the previous data was still there. I already tried to make a resetInputFields function but still not working..
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\ContactUs;
use Livewire\WithPagination;
class ContactTable extends Component
{
use WithPagination;
public $selectedItem, $action;
protected $listeners = [
'refreshParent' => '$refresh',
'deleteContact',
];
public function selectItem($contactId, $action){
$this->selectedItem = $contactId;
$this->action = $action;
if($action == 'edit'){
$this->emit('contactId',$this->selectedItem);
$this->emit('openContactModal');
}
}
private function resetInputFields(){
$this -> email = '';
$this -> contact_no = '';
$this -> address = '';
}
public function render()
{
return view('livewire.contact-table', [
'contacts' => ContactUs::paginate(3),
]);
}
public function create(){
$this->emit('openContactModal');
$this->resetInputFields();
}
public function deleteConfirm($contactId){
// $this->dispatchBrowserEvent(event('swal:confirmCotactDelete'));
$this->dispatchBrowserEvent('swal:confirmContactDelete', [
'title' => 'Are you sure?',
'text' => "You won't be able to revert this!",
'icon' => 'warning',
'showCancelButton' => true,
'confirmButtonColor' => '#3085d6',
'cancelButtonColor' => '#d33',
'confirmButtonText' => 'Yes, delete it!',
'id' => $contactId
]);
}
public function deleteContact($contactId){
ContactUs::destroy($contactId);
$this->resetPage();
}
}
Replied to What The Proper Way To Pass Variable Id Into Another Function?
I have another problem.. I will post in another thread.... since I use one modal, If I click edit the data will populate but when I close the modal and click the add new the data from edit was still populated in the modal.
Replied to What The Proper Way To Pass Variable Id Into Another Function?
God... hahah Thanks man... I spent whole afternoon on that typo error
Started a new Conversation What The Proper Way To Pass Variable Id Into Another Function?
Hi guys, I used one modal CRUD, in my edit I got the proper id but when I tried to used if-else condition in my store the id is null. What I missed in my code?
This is the whole code
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\ContactUs;
use Illuminate\Validation\Rule;
use Cviebrock\EloquentSluggable\Services\SlugService;
class ContactForm extends Component
{
public $slug, $contacts, $contactId, $email, $contact_no, $address;
protected $listeners = [
'contactId'
];
private function resetInputFields(){
$this -> email = null;
$this -> contact_no = null;
$this -> address = null;
}
public function contactId($contactId){
$this->$contactId = $contactId;
// dd($this->$contactId); Id is right.. this id is what I want to pass in store function
$contact = ContactUs::find($contactId);
$this->email = $contact->email;
$this->contact_no = $contact->contact_no;
$this->address = $contact->address;
}
public function render()
{
return view('livewire.contact-form');
}
public function store(){
// $this->editMode = false;
$data = $this->validate([
'address' => 'required',
'contact_no' => 'required',
'email' => 'required',
]);
if($this->contactId){ //Not working Id doesn't find
// dd($this->contactId); -> this is nulll
ContactUs::find($this->contactId)->update($data);
session()->flash('edit','Contact Us Information Updated Successfully.');
}else{
// ContactUs::create($data);
session()->flash('save','Contact Us Information Created Successfully.');
}
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeContactModal');
}
}
more explanation is in my comment code.. Thank you
Replied to What Is The Proper Way Fire Swal On Delete?
There's nothing wrong with that sir and the swal is okay now..
Replied to What Is The Proper Way Fire Swal On Delete?
I pass the id here window.livewire.emit('deleteContact',event.detail.id) by the way I got another error where I register this one?
// ES6 Modules or TypeScript
import Swal from 'sweetalert2'
// CommonJS
const Swal = require('sweetalert2')
after I install swal2 I forgot to register that but since I used laravel-livewire I don't know where to put that code.
Started a new Conversation What Is The Proper Way Fire Swal On Delete?
Hi guys, I add SWAL 2 on my project and I want to use it in my delete function but the swal doesn't working...
in my table view component I have this..
<button wire:click="deleteConfirm({{ $contact->id }})" class="btn btn-danger delete-header m-1" title="Delete"><i class="glyphicon glyphicon-trash" small></i></button>
and in my ContactTable.php
public function deleteConfirm($id){
// $this->dispatchBrowserEvent(event('swal:confirmCotactDelete'));
$this->dispatchBrowserEvent('swal:confirmContactDelete', [
'title' => 'Are you sure?',
'text' => "You won't be able to revert this!",
'icon' => 'warning',
'showCancelButton' => true,
'confirmButtonColor' => '#3085d6',
'cancelButtonColor' => '#d33',
'confirmButtonText' => 'Yes, delete it!'
]);
}
public function deleteContact($id){
ContactUs::destroy($id);
$this->resetPage();
}
and in my app.blade.php
//delete contact
window.addEventListener('swal:confirmContactDelete', event => {
Swal.fire({
title: event.detail.title,
text: event.detail.text,
icon: event.detail.icon,
showCancelButton: event.detail.showCancelButton,
confirmButtonColor: event.detail.confirmButtonColor,
cancelButtonColor: event.detail.cancelButtonColor,
confirmButtonText: event.detail.confirmButtonText,
}).then((result) => {
if (result.isConfirmed) {
window.livewire.emit('deleteContact',event.detail.id)
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
There is no error but what I missed?
Replied to How To Display Data On Edit Livewire One Modal CRUD
Okay this is the scenario.. I have a component called contact-table where I display the list then I had this component contact form which a modal body where the forms are.
This is the contactTable.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\ContactUs;
class ContactTable extends Component
{
public $contact_id, $email, $contact_no, $address;
public $editMode = false;
public $editData;
public function mount(){
$this->contact_id = $contact_id;
$this->email = $email;
$this->$contact_no = $contact_no;
$this->address = $address;
}
public function render()
{
$contacts = ContactUs::get()->all();
return view('livewire.contact-table',['contacts'=>$contacts]);
}
public function edit($id){
$this->editData = ContactUs::where('id',$id)->first();
// return $contacts;
$this->emit('openContactModal');
// dd($contacts);
}
}
and this is the view for contact table list
<div>
<!-- page content -->
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="dashboard_graph">
<div class="row x_title">
<div class="col-md-6">
<h3>Contact Us</h3>
</div>
</div>
<div class="row">
<!-- @if(session()->has('save'))
<div class="row" id="save">
<div class="alert alert-success col-md-12 col-sm-12 ">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Notification:</strong>{{ session('save') }}
</div>
</div>
@endif -->
@if (session()->has('save'))
<div class="alert alert-success">
{{ session('save') }}
</div>
@endif
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary ml-3" data-toggle="modal" data-target="#contactModal" data-backdrop="static" data-keyboard="false">
<i class="fa fa-add"></i>  Add Contact Us Information
</button>
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<div id="contact_table" class="display">
<div class="row">
<div class="col-sm-12">
<table id="about" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed" cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
<thead class="text-center align-middle uppercase">
<tr role="row">
<th>Email</th>
<th>Contact Number</th>
<th>Address</th>
<th>Post</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($contacts as $contact)
<tr>
<td>{{$contact->email}}</td>
<td>{{$contact->contact_no}}</td>
<td>{{$contact->address}}</td>
<td class="text-center align-middle">
<button class="btn btn-info m-1 " title="Post"><i class="glyphicon glyphicon-upload" small></i></button>
<button class="btn btn-info m-1 " title="Unpost" ><i class="glyphicon glyphicon-download" small></i></button>
</td>
<td class="text-center align-middle">
<div class="btn-group">
<button wire:click="edit({{ $contact->id }})" class="btn btn-info m-1" title="Edit"><i class="glyphicon glyphicon-pencil" small></i></button>
<button wire:click="delete({{ $contact->id }})" class="btn btn-danger delete-header m-1" title="Delete"><i class="glyphicon glyphicon-trash" small></i></button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--end sa table row--->
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- The Modal -->
<div wire.ignore.self class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<livewire:contact-form />
</div>
</div>
<!-- <script>
document.addEventListener('livewire:load', function () {
$('#contact_table').DataTable();
})
</script> -->
and this is the contact for ContactForm.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\ContactUs;
use Illuminate\Validation\Rule;
use Cviebrock\EloquentSluggable\Services\SlugService;
class ContactForm extends Component
{
public $slug, $contacts, $contact_id, $email, $contact_no, $address;
public $editMode = false;
public $modal_open = false;
protected $listeners = ['edit'];
public function resetInputFields(){
$this -> email = '';
$this -> contact_no = '';
$this -> address = '';
}
public function render()
{
return view('livewire.contact-form');
}
public function store(){
$this->editMode = false;
$data = $this->validate([
'address' => 'required',
'contact_no' => 'required',
'email' => 'required',
]);
ContactUs::create($data);
session()->flash('save','Contact Us Information Created Successfully.');
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeContactModal');
}
public function edit(){
}
public function update(){
}
public function delete(){
}
}
and this is the view (which is a modal body/content)
<div>
<div class="modal-content">
<form wire:submit.prevent="store" enctype="multipart/form-data">
<form wire:submit.prevent="{{$editMode ? 'edit' : 'store' }}" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Add Contact Us Information</h4>
<a type="button" class="close" data-dismiss="modal">×</a>
</div>
<!-- Modal body -->
<div class=" modal-body">
<div class="form-group">
<input type="hidden" wire:model="contact_id">
<label>Email <Address></Address></label>
<input type="text" wire:model="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" wire:model="contact_no" name="contact_no" class="form-control" required>
</div>
<div class="form-group">
<label>Address</label>
<input type="text" wire:model="address" name="address" class="form-control" required>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="form-group pb-xl-5">
<button type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</div>
</form>
</div>
</div>
I already stored a data in the database and implement edit click and when I dd that there's a data the only problem now is since I use one modal how can I display the data from my edit function (where located in contact-table) into my modal (which my form view)?
Replied to How To Display Data On Edit Livewire One Modal CRUD
Which component should I put that two public property sir and the edit function in the contact table component? or in contact form component?
Started a new Conversation How To Display Data On Edit Livewire One Modal CRUD
Hello guys, I like to use one modal CRUD in my livewire project like in vue js but the data is not displaying on edit function.. my question is How can I pass data from my table component to my modal component?
this is my livewire table.
Note: There are data on my dd
public function edit($id){
$contacts = ContactUs::where('id',$id)->first();
$this->emit('openContactModal'); //this is where I open my modal form component
// dd($contacts);
}
so in my livewire form I add this protected $listeners = ['edit']; but don't know what should be next code for this
public function edit(){
}
Replied to Slug Error On Storing Data
Yeah that's why I add this
public function sluggableEvent(): string
{
/**
* Default behaviour -- generate slug before model is saved.
*/
return SluggableObserver::SAVING;
/**
* Optional behaviour -- generate slug after model is saved.
* This will likely become the new default in the next major release.
*/
return SluggableObserver::SAVED;
}
}
Replied to Slug Error On Storing Data
This is my whole model I tried to add SluggableObserver based on there documents
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Cviebrock\EloquentSluggable\Sluggable;
use Cviebrock\EloquentSluggable\SluggableObserver;
class ContactUs extends Model
{
use HasFactory;
use Sluggable;
protected $table = 'contact';
protected $fillable = ['slug','email','contact_no','address'];
public function sluggable()
{
return [
'slug' => [
'source' => 'id'
]
];
}
public function sluggableEvent(): string
{
/**
* Default behaviour -- generate slug before model is saved.
*/
return SluggableObserver::SAVING;
/**
* Optional behaviour -- generate slug after model is saved.
* This will likely become the new default in the next major release.
*/
return SluggableObserver::SAVED;
}
}