What I have in my laravel project
- Livewire powergrid for displaying tables.
- Livewire-ui-modal (use to have the confirm dialog from the button of the table)
What I have succeeded
- I have displayed my table as accordingly to my requirement using the powergrid component.
- I have put a button on each row to delete the row. this button fires the modal to get the confirmation. It also works.Livewire Powergrid
- I can close the modal when confirm or cancel. I can also trigger another event in the powergrid component itself from my modal component.It is also fine and can refresh my table in the powergrid component.
What is the problem?
- After coming back from the modal(dialog box), other buttons on the powergrid component tables are unclickable.
Found a Solution here
I have found the solution in https://stackoverflow.com/a/72891828/19714908
It says that there's a conflict between the alpine.js from livewire and alpine.js from @powerGridScripts and he is using @livewireScripts only.
But I think there might be some other drawbacks or impact for not using the @powerGridScripts. My Question What are the drawbacks of this solution above? Is there any other solution when such conflicts occur?
my layout
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'MSICL') }}</title>
@livewire('ui.links')
@livewire('ui.js')
<!-- Styles -->
@livewireStyles
@livewireScripts
@powerGridStyles
</head>
<body class="hold-transition sidebar-mini sidebar-collapse">
<!-- Site wrapper -->
<div class="wrapper">
@livewire('ui.header')
@livewire('ui.sidebar')
{{ $slot }}
</div>
{{-- @powerGridScripts --}}
@livewire('livewire-ui-modal')
</body>
<?php
namespace App\Http\Livewire\Approvals;
use App\Models\Approval;
use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Approvals\MemApprovalController as memApproval;
use App\Http\Controllers\Approvals\MemApprovalController;
use App\Models\Member;
use App\Models\Parameter;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Carbon;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Rules\{Rule, RuleActions};
use PowerComponents\LivewirePowerGrid\Traits\ActionButton;
use PowerComponents\LivewirePowerGrid\Label as label;
use PowerComponents\LivewirePowerGrid\{Button, Column, Exportable, Footer, Header, PowerGrid, PowerGridComponent, PowerGridEloquent};
final class member_approval extends PowerGridComponent
{
use ActionButton;
public int $perPage = 10;
public array $perPageValues = [0,10,15, 20,25, 50,100];
public string $user_type;
public ?string $table_name='';
protected function getListeners(): array
{
return array_merge(
parent::getListeners(), [
'refreshMemApproval' => 'refreshTable',
]);
}
public function refreshTable()
{
$this->refresh();
// $this->initActions();
// $this->actions();
// $this->actionRules();
return;
}
public function setUp(): array
{
return [
// Exportable::make('MemberList_'.date('Ymdhhmm').'_by_'.Auth::user()->display_as)
// // ->striped()
// ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
Header::make()
//
// ->showSearchInput()
// ->showToggleColumns()
->includeViewOnTop('components.datatable.header-top')
,
Footer::make()
// ->showPerPage($this->perPage,$this->perPageValues)
->showRecordCount()
,
];
}
public function datasource(): Builder
{
if( MemApprovalController::UserMemberForwardRights())
{
return Approval::query()
->join('members as m','m.member_id','approvals.table_ids')
->join('share_infos as shareinfo','shareinfo.member_id','m.member_id')
->join('ins_infos as insinfo','insinfo.member_id','m.member_id')
->select('approvals.*','m.created_date as c_date','m.member_id as member_id','shareinfo.amount as share_amount','insinfo.amount as policy_amount','m.address as address', DB::raw(" CONCAT(
`first_name`,
if(trim(`middle_name`) = ''or isnull(`middle_name`), '', concat(' ', `middle_name`)),
if(trim(`last_name`) = '' or isnull(`last_name`), '', concat(' ', `last_name`))) as full_name"),)
->where('user_type','=',Auth::user()->user_type)
->where('approval_status','=',2)
->orderby('created_date')
->orderby('order')
;
}
elseif( MemApprovalController::UserMemberApproveRights()) {
return Approval::query()
->join('members as m','m.member_id','approvals.table_ids')
->join('share_infos as shareinfo','shareinfo.member_id','m.member_id')
->join('ins_infos as insinfo','insinfo.member_id','m.member_id')
->select('approvals.*','m.created_date as c_date','m.member_id as member_id','shareinfo.amount as share_amount','insinfo.amount as policy_amount','m.address as address', DB::raw(" CONCAT(
`first_name`,
if(trim(`middle_name`) = ''or isnull(`middle_name`), '', concat(' ', `middle_name`)),
if(trim(`last_name`) = '' or isnull(`last_name`), '', concat(' ', `last_name`))) as full_name"),
)
->where('user_type','=',Auth::user()->user_type)
->where('approval_status','=','2')
->where('m.status','=','F')
->orderby('created_date')
->orderby('order')
;
}
else {
return Approval::query()
->join('members as m','m.member_id','approvals.table_ids')
->join('share_infos as shareinfo','shareinfo.member_id','m.member_id')
->join('ins_infos as insinfo','insinfo.member_id','m.member_id')
->select('approvals.*','m.created_date as c_date','m.member_id as member_id','shareinfo.amount as share_amount','insinfo.amount as policy_amount','m.address as address', DB::raw(" CONCAT(
`first_name`,
if(trim(`middle_name`) = ''or isnull(`middle_name`), '', concat(' ', `middle_name`)),
if(trim(`last_name`) = '' or isnull(`last_name`), '', concat(' ', `last_name`))) as full_name"),)
->where('user_type','=',Auth::user()->user_type)
->where('approval_status','=',1)
->orderby('created_date')
->orderby('order')
;
}
}
public function relationSearch(): array
{
return [];
}
public function addColumns(): PowerGridEloquent
{
return PowerGrid::eloquent()
->addColumn('id')
->addColumn('table_name')
/** Example of custom column using a closure **/
->addColumn('table_name_lower', function (Approval $model) {
return strtolower(e($model->table_name));
})
->addColumn('table_ids')
->addColumn('full_name')
->addColumn('share_amount')
->addColumn('policy_amount')
->addColumn('address')
->addColumn('c_date')
->addColumn('c_date_formatted', fn (Approval $model) => Carbon::parse($model->created_date)->format('d/m/Y'))
->addColumn('user_type')
->addColumn('approval_mode')
->addColumn('member_id')
->addColumn('approval_status')
->addColumn('status')
->addColumn('approved_date_formatted', fn (Approval $model) => Carbon::parse($model->approved_date)->format('d/m/Y H:i:s'))
->addColumn('approved_by')
->addColumn('created_by')
->addColumn('created_date_formatted', fn (Approval $model) => Carbon::parse($model->created_date)->format('d/m/Y H:i:s'))
->addColumn('updated_by')
->addColumn('updated_date_formatted', fn (Approval $model) => Carbon::parse($model->updated_date)->format('d/m/Y H:i:s'));
}
public function columns(): array
{
return [
Column::make('date', 'c_date_formatted')
,
Column::make('Member ID', 'table_ids')
,
Column::make('Full NAME', 'full_name')
->bodyAttribute('any-class','min-width: 20 vw;max-width:20 vw')
->searchable()
,
Column::make('MEMBER ID', 'member_id')
->hidden(true,true),
Column::make('Share Amount', 'share_amount')
//->makeInputRange()
,
Column::make('Insurance Amount', 'policy_amount')
//->makeInputRange()
,
Column::make('Address', 'address')
//->makeInputRange()
,
]
;
}
public function actions(): array
{
$button_label='Approve';
if (memApproval::UserMemberForwardRights()) {
$button_label='Forward';
}
$button=[
Button::make('view', 'View')
->class('bg-info bg-gradient btn cursor-pointer text-white px-3 py-1 border border-white text-sm')
->route('members.member.show', ['member' => 'member_id'])
->target('_self')
->method('get'),
Button::make('approve', $button_label)
->class('bg-success bg-gradient btn cursor-pointer text-white px-3 py-1 border border-white text-sm')
->route('approvals.memapproval.action', ['approval' => 'id','action'=>strtolower($button_label)])
->target('_self')
->method('put'),
Button::make('reject', 'Reject')
->class('bg-danger bg-gradient btn cursor-pointer text-white px-3 py-1 border border-white text-sm')
// ->route('approvals.memapproval.action', ['approval' => 'id','action'=>'reject'])
// ->target('_self')
// ->method('put')
->openModal('approvals.member-action', [
'approval_id' => 'id',
'action' =>'reject',
'confirmationTitle' => 'Reject Member',
'confirmationDescription' => 'Are you sure you want to reject this member?'])
,
Button::make('status','waiting')
->class('bg-transparent border-0 text-red-500 text-sm p-0 cursor-pointer') ,
];
return $button;
}
public function actionRules(): array
{
return [
//Hide button edit for ID 1
Rule::button('approve')
->when(function ($approve) {
return !memApproval::UserMemberApproveOrder($approve->member_id) ;
})
->hide(),
Rule::button('reject')
->when(function ($approve) {
return !memApproval::UserMemberApproveOrder($approve->member_id) ;
})
->hide(),
Rule::button('view')
->when(function () {
return !memApproval::UserMemberViewRights() ;
})
->hide(),
Rule::button('status')
->when(function ($row) {
return memApproval::UserMemberApproveOrder($row->member_id) ;
})
->hide(),
];
}}
The modal component
<?php
namespace App\Http\Livewire\Approvals;
use App\Http\Controllers\Approvals\MemApprovalController;
use App\Http\Livewire\Approvals\member_approval;
use Livewire\Component;
use LivewireUI\Modal\ModalComponent;
class memberAction extends ModalComponent
{
public ?int $approval_id = null;
public array $approval_ids = [];
public string $action='';
public string $confirmationTitle = '';
public string $confirmationDescription = '';
public static function modalMaxWidth(): string
{
return 'md';
}
public static function closeModalOnEscape(): bool
{
return false;
}
public static function closeModalOnClickAway(): bool
{
return false;
}
public static function destroyOnClose(): bool
{
return true;
}
public function cancel()
{
$this->closeModal();
}
public function confirm()
{
if ($this->approval_id) {
$message=MemApprovalController::Action($this->approval_id,$this->action);
// return back()->with('success_message','Application rejected !');
// route('approvals.memapproval.action', ['approval' => $this->approval_id,'action'=>$this->action]);
//Dish::query()->find($this->dishId)->delete();
}
if ($this->approval_ids) {
//Dish::query()->whereIn('id', $this->dishIds)->delete();
}
//$this->emitTo(member_approval::class, 'pg:eventRefresh-default');
$this->closeModalWithEvents([
'refreshMemApproval',
]);
}
public function render()
{
return view('livewire.approvals.member-action');
}
}
