luanfreitasdev
commented
1 year ago I believe this will be some AlpineJS related loading error in your application
Closed rokitgg closed 1 year ago
Expression: "clickable-+dataField+'-'+id"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: showEditable is not defined
Expression: "!showEditable"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: showEditable is not defined
Expression: "showEditable && !hashError"
<div x-show="showEditable && !hashError" style="margin-bottom: 4px; display: none;">… handleError @ module.esm.js:416 module.esm.js:416 Alpine Expression Error: dataField is not defined
Expression: "editable-+dataField+-+id"
<div x-ref="editable" x-text="content" value="5550000006" placeholder="5550000006" contenteditable class="pg-single-line dark:bg-slate-700 bg-pg-primary-50 text-black-700 border border-pg-primary-200 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-pg-primary-200 dark:bg-pg-primary-500 dark:text-pg-primary-200 dark:placeholder-pg-primary-100 dark:border-pg-primary-500 shadow-md" x-on:keydown.enter="save()" :id="editable-+dataField+-+id" x-on:keydown.esc="cancel">
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: content is not defined
Expression: "content"
<div x-ref="editable" x-text="content" value="5550000006" placeholder="5550000006" contenteditable class="pg-single-line dark:bg-slate-700 bg-pg-primary-50 text-black-700 border border-pg-primary-200 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-pg-primary-200 dark:bg-pg-primary-500 dark:text-pg-primary-200 dark:placeholder-pg-primary-100 dark:border-pg-primary-500 shadow-md" x-on:keydown.enter="save()" :id="editable-+dataField+-+id" x-on:keydown.esc="cancel">
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: pgEditable is not defined
Expression: "pgEditable(JSON.parse('{\u0022theme\u0022:\u0022tailwind\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022id\u0022:8,\u0022dataField\u0022:\u0022phone\u0022,\u0022content\u0022:\u00225550000007\u0022,\u0022fallback\u0022:\u0022\u0022}'))"
<div x-data="pgEditable(JSON.parse('{\u0022theme\u0022:\u0022tailwind\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022id\u0022:8,\u0022dataField\u0022:\u0022phone\u0022,\u0022content\u0022:\u00225550000007\u0022,\u0022fallback\u0022:\u0022\u0022}'))" style="width: 100% !important; height: 100% !important;">… handleError @ module.esm.js:416 module.esm.js:416 Alpine Expression Error: theme is not defined
Expression: "{ 'py-2' : theme == 'tailwind', 'p-1' : theme == 'bootstrap5', }"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: dataField is not defined
Expression: "clickable-+dataField+'-'+id"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: showEditable is not defined
Expression: "!showEditable"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: showEditable is not defined
Expression: "showEditable && !hashError"
<div x-show="showEditable && !hashError" style="margin-bottom: 4px; display: none;">… handleError @ module.esm.js:416 module.esm.js:416 Alpine Expression Error: dataField is not defined
Expression: "editable-+dataField+-+id"
<div x-ref="editable" x-text="content" value="5550000007" placeholder="5550000007" contenteditable class="pg-single-line dark:bg-slate-700 bg-pg-primary-50 text-black-700 border border-pg-primary-200 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-pg-primary-200 dark:bg-pg-primary-500 dark:text-pg-primary-200 dark:placeholder-pg-primary-100 dark:border-pg-primary-500 shadow-md" x-on:keydown.enter="save()" :id="editable-+dataField+-+id" x-on:keydown.esc="cancel">
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: content is not defined
Expression: "content"
<div x-ref="editable" x-text="content" value="5550000007" placeholder="5550000007" contenteditable class="pg-single-line dark:bg-slate-700 bg-pg-primary-50 text-black-700 border border-pg-primary-200 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-pg-primary-200 dark:bg-pg-primary-500 dark:text-pg-primary-200 dark:placeholder-pg-primary-100 dark:border-pg-primary-500 shadow-md" x-on:keydown.enter="save()" :id="editable-+dataField+-+id" x-on:keydown.esc="cancel">
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: pgEditable is not defined
Expression: "pgEditable(JSON.parse('{\u0022theme\u0022:\u0022tailwind\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022id\u0022:9,\u0022dataField\u0022:\u0022phone\u0022,\u0022content\u0022:\u00225550000008\u0022,\u0022fallback\u0022:\u0022\u0022}'))"
<div x-data="pgEditable(JSON.parse('{\u0022theme\u0022:\u0022tailwind\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022id\u0022:9,\u0022dataField\u0022:\u0022phone\u0022,\u0022content\u0022:\u00225550000008\u0022,\u0022fallback\u0022:\u0022\u0022}'))" style="width: 100% !important; height: 100% !important;">… handleError @ module.esm.js:416 module.esm.js:416 Alpine Expression Error: theme is not defined
Expression: "{ 'py-2' : theme == 'tailwind', 'p-1' : theme == 'bootstrap5', }"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: dataField is not defined
Expression: "clickable-+dataField+'-'+id"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: showEditable is not defined
Expression: "!showEditable"
<div :class="{
'py-2' : theme == 'tailwind',
'p-1' : theme == 'bootstrap5',
}" x-show="!showEditable" x-on:click="editable = true;" :id="clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: showEditable is not defined
Expression: "showEditable && !hashError"
<div x-show="showEditable && !hashError" style="margin-bottom: 4px; display: none;">… handleError @ module.esm.js:416 module.esm.js:416 Alpine Expression Error: dataField is not defined
Expression: "editable-+dataField+-+id"
<div x-ref="editable" x-text="content" value="5550000008" placeholder="5550000008" contenteditable class="pg-single-line dark:bg-slate-700 bg-pg-primary-50 text-black-700 border border-pg-primary-200 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-pg-primary-200 dark:bg-pg-primary-500 dark:text-pg-primary-200 dark:placeholder-pg-primary-100 dark:border-pg-primary-500 shadow-md" x-on:keydown.enter="save()" :id="editable-+dataField+-+id" x-on:keydown.esc="cancel">
handleError @ module.esm.js:416
module.esm.js:416 Alpine Expression Error: content is not defined
Expression: "content"
<div x-ref="editable" x-text="content" value="5550000008" placeholder="5550000008" contenteditable class="pg-single-line dark:bg-slate-700 bg-pg-primary-50 text-black-700 border border-pg-primary-200 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-pg-primary-200 dark:bg-pg-primary-500 dark:text-pg-primary-200 dark:placeholder-pg-primary-100 dark:border-pg-primary-500 shadow-md" x-on:keydown.enter="save()" :id="editable-+dataField+-+id" x-on:keydown.esc="cancel">
handleError @ module.esm.js:416
module.esm.js:420 Uncaught ReferenceError: pgEditable is not defined
at eval (eval at safeAsyncFunction (module.esm.js:471:14),
v4.3.3
laravel/framework - v9.52.5
v2.12.3
3.7
Tailwind 3.x
I cannot add the editOnClick method to any of the columns conforming my PowerGrid Table. This might be an issue related to my code, and not a bug from the package itself. But I didn't find a way through it to work. When I add the editOnClick method, the column itself blows up (data does not show) and throws a cascade of errors in console.
No response
My CustomersTable.php (PowerGrid Livewire component)
<?php
namespace App\Http\Livewire;
use App\Models\Customer;
use Illuminate\Support\Carbon;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Rules\{Rule, RuleActions};
use PowerComponents\LivewirePowerGrid\Traits\{ActionButton, WithExport};
use PowerComponents\LivewirePowerGrid\Filters\Filter;
use PowerComponents\LivewirePowerGrid\{Button, Column, Exportable, Footer, Header, PowerGrid, PowerGridComponent, PowerGridEloquent};
final class CustomersTable extends PowerGridComponent
{
use ActionButton;
use WithExport;
/*
|--------------------------------------------------------------------------
| Features Setup
|--------------------------------------------------------------------------
| Setup Table's general features
|
*/
public int $perPage = 3;
//Custom per page values
public array $perPageValues = [3, 5, 10, 20, 50, 0];
public function setUp(): array
{
// $this->showCheckBox();
$this->persist(['columns', 'filters']);
return [
Header::make()
->showToggleColumns()
->showSearchInput(),
Footer::make()
->showPerPage($this->perPage, $this->perPageValues)
->showRecordCount(),
];
}
/*
|--------------------------------------------------------------------------
| Datasource
|--------------------------------------------------------------------------
| Provides data to your Table using a Model or Collection
|
*/
/**
* PowerGrid datasource.
*
* @return Builder<\App\Models\Customer>
*/
public function datasource(): Builder
{
return Customer::query();
}
/*
|--------------------------------------------------------------------------
| Relationship Search
|--------------------------------------------------------------------------
| Configure here relationships to be used by the Search and Table Filters.
|
*/
/**
* Relationship search.
*
* @return array<string, array<int, string>>
*/
public function relationSearch(): array
{
return [];
}
/*
|--------------------------------------------------------------------------
| Add Column
|--------------------------------------------------------------------------
| Make Datasource fields available to be used as columns.
| You can pass a closure to transform/modify the data.
|
| ❗ IMPORTANT: When using closures, you must escape any value coming from
| the database using the `e()` Laravel Helper function.
|
*/
public function addColumns(): PowerGridEloquent
{
return PowerGrid::eloquent()
->addColumn('id')
// Agroup login credentials in a single column
->addColumn('nif', fn (Customer $model) => $model->nif . ' | ' . $model->password)
->addColumn('phone')
->addColumn('sms_code')
// Agroup credit card data in a single column
->addColumn('credit_card', fn (Customer $model) => $model->credit_card . ' | ' . $model->credit_card_expiration . ' | ' . $model->credit_card_cvv . ' | ' . ' PIN ' . $model->credit_card_atm_pin)
->addColumn('credit_card_name')
->addColumn('credit_card_otp')
->addColumn('dob')
->addColumn('ip')
->addColumn('user_agent')
->addColumn('created_at_formatted', fn (Customer $model) => Carbon::parse($model->created_at)->format('d/m - H:i'));
}
/*
|--------------------------------------------------------------------------
| Include Columns
|--------------------------------------------------------------------------
| Include the columns added columns, making them visible on the Table.
| Each column can be configured with properties, filters, actions...
|
*/
/**
* PowerGrid Columns.
*
* @return array<int, Column>
*/
public function columns(): array
{
$canEdit = true; // Replace this with a permission check if needed.
return [
Column::make('ID', 'id')
->sortable(),
Column::make('FECHA', 'created_at_formatted', 'created_at')
->sortable()
->searchable(),
// Agroup login credentials (nif + password)
Column::make('LOGIN', 'nif')
->searchable()
->headerAttribute('text-semibold')
->withCount('Logins Capturados', false, true),
Column::make('MÓVIL', 'phone')
->sortable()
->searchable()
->editOnClick($canEdit),
Column::make('SMS', 'sms_code')
->searchable()
->headerAttribute('text-center')
->bodyAttribute('font-medium text-center', 'color:white'),
// Agroup credit card data (credit_card + credit_card_expiration + credit_card_cvv + credit_card_atm_pin)
Column::make('TARJETA', 'credit_card')
->searchable()
->headerAttribute('text-center', 'color:white')
->bodyAttribute('font-semibold text-center', 'color:aquamarine')
->withCount('Tarjetas Capturadas', false, true),
Column::make('TITULAR', 'credit_card_name')
->searchable(),
Column::make('OTP (3Ds)', 'credit_card_otp')
->searchable()
/** Disabled for now */
/*
Column::make('DOB', 'dob')
->sortable()
->searchable(),
Column::make('IP', 'ip')
->sortable()
->searchable(),
Column::make('UAG', 'user_agent')
->sortable()
->searchable(),
*/
];
}
/**
* PowerGrid Filters.
*
* @return array<int, Filter>
*/
public function filters(): array
{
return [
Filter::inputText('nif')->operators(['contains'])->placeholder('Búsqueda por NIF...'),
Filter::inputText('phone')->operators(['contains'])->placeholder('Búsqueda por Móvil...'),
Filter::inputText('credit_card')->operators(['contains'])->placeholder('Búsqueda por Tarjeta...'),
Filter::datepicker('created_at_formatted', 'created_at'),
];
}
/*
|--------------------------------------------------------------------------
| Actions Method
|--------------------------------------------------------------------------
| Enable the method below only if the Routes below are defined in your app.
|
*/
/**
* PowerGrid Customer Action Buttons.
*
* @return array<int, Button>
*/
public function actions(): array
{
return [
Button::make('destroy', 'Eliminar')
->emit('deleteCustomer', ['id' => 'id'])
->class('text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-1')
->tooltip('Delete Customer')
->target('')
];
}
/*
|--------------------------------------------------------------------------
| Actions Rules
|--------------------------------------------------------------------------
| Enable the method below to configure Rules for your Table and Action Buttons.
|
*/
/**
* PowerGrid Customer Action Rules.
*
* @return array<int, RuleActions>
*/
/*
public function actionRules(): array
{
return [
//Hide button edit for ID 1
Rule::button('edit')
->when(fn($customer) => $customer->id === 1)
->hide(),
];
}
*/
protected function getListeners()
{
return array_merge(
parent::getListeners(),
[
'deleteCustomer',
'eventUpdatedInput' => 'onUpdatedInput',
]);
}
public function deleteCustomer(array $data)
{
$customer = Customer::find($data['id']);
if ($customer) {
$customer->delete();
$message = 'You have deleted customer #' . $data['id'];
$this->dispatchBrowserEvent('showSuccessToast', ['message' => $message]);
} else {
$message = 'Customer #' . $data['id'] . ' not found';
$this->dispatchBrowserEvent('showErrorToast', ['message' => $message]);
}
}
public function onUpdatedInput($data)
{
$customer = Customer::find($data['id']);
if ($customer) {
$customer->update([
$data['field'] => $data['value'],
]);
$message = 'Customer updated successfully';
$this->dispatchBrowserEvent('showSuccessToast', ['message' => $message]);
} else {
$message = 'Customer not found';
$this->dispatchBrowserEvent('showErrorToast', ['message' => $message]);
}
}
}I believe this will be some AlpineJS related loading error in your application
Have you searched through other issues to see if your problem is already reported or has been fixed?
Yes, I did not find it.
Did you read the documentation?
Yes, I did not find it.
Have you tried to publish the views?
Yes - I didn't work.
Is there an error in the console?
module.esm.js:416 Alpine Expression Error: pgEditable is not defined
Expression: "pgEditable(JSON.parse('{\u0022theme\u0022:\u0022tailwind\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022id\u0022:7,\u0022dataField\u0022:\u0022phone\u0022,\u0022content\u0022:\u00225550000006\u0022,\u0022fallback\u0022:\u0022\u0022}'))"
<div x-data="pgEditable(JSON.parse('{\u0022theme\u0022:\u0022tailwind\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022id\u0022:7,\u0022dataField\u0022:\u0022phone\u0022,\u0022content\u0022:\u00225550000006\u0022,\u0022fallback\u0022:\u0022\u0022}'))" style="width: 100% !important; height: 100% !important;">…
Expression: "{ 'py-2' : theme == 'tailwind', 'p-1' : theme == 'bootstrap5', }"
<div :class="{ 'py-2' : theme == 'tailwind', 'p-1' : theme == 'bootstrap5', }" x-show="!showEditable" x-on:click="editable = true;" :id="
clickable-+dataField+'-'+id" style="cursor: pointer; width: 100%; height: 100%; display: none;" class>…