From 0ab854c00ef7634d66555b2c218b7f263b1d9921 Mon Sep 17 00:00:00 2001 From: Slakbal Date: Wed, 15 Nov 2023 02:17:14 +0200 Subject: [PATCH 1/7] Added missing tailwind background colour for hover in dark mode. (#1553) --- .../components/tools/toolbar/items/filter-popover.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/components/tools/toolbar/items/filter-popover.blade.php b/resources/views/components/tools/toolbar/items/filter-popover.blade.php index 150e00024..ab36f3f63 100644 --- a/resources/views/components/tools/toolbar/items/filter-popover.blade.php +++ b/resources/views/components/tools/toolbar/items/filter-popover.blade.php @@ -72,7 +72,7 @@ class="block px-4 py-2 text-sm text-gray-700 space-y-1" x-on:click="filterPopoverOpen = false" wire:click.prevent="setFilterDefaults" type="button" - class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500" + class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:border-gray-500 dark:hover:bg-gray-600" > @lang('Clear') From 155c6542d1be8b8c6cf9e0bc4a22c244093fc20b Mon Sep 17 00:00:00 2001 From: Joe <104938042+lrljoe@users.noreply.github.com> Date: Sat, 18 Nov 2023 16:13:41 +0000 Subject: [PATCH 2/7] V3 Custom Script Path - V2 (#1557) * Add Capability to set Custom Script Path for Scripts/Styles * Fix styling * Update CHANGELOG --------- Co-authored-by: lrljoe --- CHANGELOG.md | 5 +++++ config/livewire-tables.php | 5 +++++ docs/start/including-assets.md | 15 ++++++++++++++- src/Mechanisms/RappasoftFrontendAssets.php | 8 ++++---- 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5ebe7647..7ff8cb803 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ All notable changes to `laravel-livewire-tables` will be documented in this file +## UNRELEASED +- Add capability to set a custom script path for the scripts/styles by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1557 +- Added missing tailwind background colour class for when hovering over the clear button in dark mode by @slakbal in https://github.com/rappasoft/laravel-livewire-tables/pull/1553 + + ## [v3.1.3] - 2023-11-03 - Add additional Lifecycle Hook by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1534 - SettingColumns/ColumnsSet diff --git a/config/livewire-tables.php b/config/livewire-tables.php index 3dbdf1757..30908f118 100644 --- a/config/livewire-tables.php +++ b/config/livewire-tables.php @@ -30,6 +30,11 @@ */ 'enable_blade_directives ' => false, + /** + * Customise Script & Styles Paths + */ + 'script_base_path' => '/rappasoft/laravel-livewire-tables', + /** * Filter Default Configuration Options * diff --git a/docs/start/including-assets.md b/docs/start/including-assets.md index 7682c223d..179f5ed55 100644 --- a/docs/start/including-assets.md +++ b/docs/start/including-assets.md @@ -24,6 +24,18 @@ This is enabled by default, but to re-enable, enable the following options in th * Enable or Disable automatic injection of third-party assets */ 'inject_third_party_assets_enabled' => true, + +``` + +#### Changing Script Path + +You can change the path used by customising the script_base_path option in the configuration file: + +```php + /** + * Customise Script & Styles Paths + */ + 'script_base_path' => '/rappasoft/laravel-livewire-tables', ``` ### Bundler Including @@ -61,4 +73,5 @@ Update the following options in the livewire-tables configuration file, to disab */ 'enable_blade_directives ' => false, -``` \ No newline at end of file +``` + diff --git a/src/Mechanisms/RappasoftFrontendAssets.php b/src/Mechanisms/RappasoftFrontendAssets.php index 9a9eec1c3..62889d0ff 100644 --- a/src/Mechanisms/RappasoftFrontendAssets.php +++ b/src/Mechanisms/RappasoftFrontendAssets.php @@ -26,28 +26,28 @@ public function boot(): void { // Set the JS route for the core tables JS app($this::class)->setRappasoftTableScriptRoute(function ($handle) { - $scriptPath = '/rappasoft/laravel-livewire-tables/core.min.js'; + $scriptPath = rtrim(config('livewire-tables.script_base_path', '/rappasoft/laravel-livewire-tables'), '/').'/core.min.js'; return Route::get($scriptPath, $handle); }); // Set the CSS route for the core tables CSS app($this::class)->setRappasoftTableStylesRoute(function ($handle) { - $stylesPath = '/rappasoft/laravel-livewire-tables/core.min.css'; + $stylesPath = rtrim(config('livewire-tables.script_base_path', '/rappasoft/laravel-livewire-tables'), '/').'/core.min.css'; return Route::get($stylesPath, $handle); }); // Set the JS route for the third party JS app($this::class)->setRappasoftTableThirdPartyScriptRoute(function ($handle) { - $scriptPath = '/rappasoft/laravel-livewire-tables/thirdparty.min.js'; + $scriptPath = rtrim(config('livewire-tables.script_base_path', '/rappasoft/laravel-livewire-tables'), '/').'/thirdparty.min.js'; return Route::get($scriptPath, $handle); }); // Set the CSS route for the third party CSS app($this::class)->setRappasoftTableThirdPartyStylesRoute(function ($handle) { - $stylesPath = '/rappasoft/laravel-livewire-tables/thirdparty.css'; + $stylesPath = rtrim(config('livewire-tables.script_base_path', '/rappasoft/laravel-livewire-tables'), '/').'/thirdparty.css'; return Route::get($stylesPath, $handle); }); From 5107ce9bf6a8774dd63f2e45766e88dcd7e00325 Mon Sep 17 00:00:00 2001 From: CyberPunk <9557392+CyberPunkCodes@users.noreply.github.com> Date: Sat, 18 Nov 2023 11:15:30 -0500 Subject: [PATCH 3/7] Create anonymous_columns.md (#1556) First draft for the anonymous columns page --- docs/columns/anonymous_columns.md | 132 ++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 docs/columns/anonymous_columns.md diff --git a/docs/columns/anonymous_columns.md b/docs/columns/anonymous_columns.md new file mode 100644 index 000000000..21bde25dd --- /dev/null +++ b/docs/columns/anonymous_columns.md @@ -0,0 +1,132 @@ +--- +title: Anonymous Columns +weight: 9 +--- + +## Introduction + +Sometimes you may need an "anonymous column", or a column that isn't bound to any column in your database. A common +example of this would be an "actions" column at the end of every row with actions of "view", "edit", and/or "delete". +Though, it doesn't have to be an action column, it could be anything. + +By using an anonymous column, you take full control by using your own view component. So if you find the LinkColumn, +ImageColumn, or any of the other columns too restrictive for your needs, then an anonymous column may be what you need. + +To make an anonymous column, you create an anonymous function that returns a view into the `label()` method, which will +remove the requirement for a database column. Thus, making it "anonymous". You can also pass variables to the view by +chaining the `with()` method onto the `view()` method that gets returned by the anonymous function into the `label()`. +So you can either pass specific values, or the whole row itself. Lastly, chain the `html()` method to the column so it +can render your view component as html. + +## Example Action Column + +Here is an example of an action column using FontAwesome icons for the "view", "edit", and "delete" actions. + +In your `DataTableComponent`: + +```php +setPrimaryKey('id'); + $this->setDefaultSort('id', 'asc'); + } + + public function columns(): array + { + return [ + Column::make('id', 'id') + ->sortable() + ->searchable(), + Column::make('Name', 'name') + ->sortable() + ->searchable(), + Column::make('Email', 'email') + ->sortable() + ->searchable(), + Column::make('Registered', 'created_at') + ->sortable(), + Column::make('Updated', 'updated_at') + ->sortable(), + Column::make('Last Login', 'last_login_at') + ->sortable(), + + Column::make('Action') + ->label( + fn ($row, Column $column) => view('components.livewire.datatables.action-column')->with( + [ + 'viewLink' => route('users.view', $row), + 'editLink' => route('users.edit', $row), + 'deleteLink' => route('users.delete', $row), + ] + ) + )->html(), + ]; + } +} +``` + +NOTE: You don't have to pass individual properties like `viewLink` and so on. You could simply +pass the whole record to your view and handle it however you need within the view file. Example: + +```php +Column::make('Action') + ->label( + fn ($row, Column $column) => view('components.livewire.datatables.action-column')->with([ + 'user' => $row, + ]) + )->html(), +``` + +Now in your component's view file you can do something like this: + +```php +
+ @isset ( $viewLink ) + + @endif + + @isset ( $editLink ) + + @endif + + @isset ( $deleteLink ) +
+ @method('DELETE') + @csrf + +
+ @endif +
+``` + +Or, if you passed the whole record, you could use: + +```php + +``` + +## Screenshot + +The final result can look something like this: + +users-table-action-column From f6a69d6410444b9a204a13bf9ee3424d9bcf770e Mon Sep 17 00:00:00 2001 From: Joe <104938042+lrljoe@users.noreply.github.com> Date: Sat, 18 Nov 2023 16:33:31 +0000 Subject: [PATCH 4/7] v3 - Add option to hide Column Header (#1512) * Add option to hide Column Header --------- Co-authored-by: lrljoe --- CHANGELOG.md | 1 + docs/columns/available-methods.md | 17 ++++ resources/views/components/table/th.blade.php | 94 ++++++++++--------- src/Views/Column.php | 2 + .../Configuration/ColumnConfiguration.php | 19 ++++ src/Views/Traits/Helpers/ColumnHelpers.php | 5 + tests/Traits/Helpers/ColumnHelpersTest.php | 21 +++++ tests/Traits/Visuals/SortingVisualsTest.php | 7 +- 8 files changed, 118 insertions(+), 48 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ff8cb803..27cab87f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file ## UNRELEASED - Add capability to set a custom script path for the scripts/styles by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1557 - Added missing tailwind background colour class for when hovering over the clear button in dark mode by @slakbal in https://github.com/rappasoft/laravel-livewire-tables/pull/1553 +- Add capability to hide Column Label by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1512 ## [v3.1.3] - 2023-11-03 diff --git a/docs/columns/available-methods.md b/docs/columns/available-methods.md index 23797087d..d7158a04f 100644 --- a/docs/columns/available-methods.md +++ b/docs/columns/available-methods.md @@ -255,3 +255,20 @@ If you are using non-latin characters as the Column Title, you should set a lati Column::make('地址', 'address.address') ->setCustomSlug('Address') ``` + +### Hiding Column Label + +Labels are visible by default, but should you wish to hide the label from the table header, without impacting on wider table behaviour, you may implement the following method: +```php +Column::make('Name') + ->setColumnLabelStatusDisabled() +``` + +### Displaying Column Label + +Labels are visible by default, but should you wish to override a previous "hideColumnLabel()", you may implement the below method: + +```php +Column::make('Name') + ->setColumnLabelStatusEnabled() +``` diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php index a7ebcd836..ee6333ee6 100644 --- a/resources/views/components/table/th.blade.php +++ b/resources/views/components/table/th.blade.php @@ -18,32 +18,34 @@ ->except('default') }} > - @unless ($component->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback())) - {{ $column->getTitle() }} - @else - - @endunless + + @if ($direction === 'asc') + + + @elseif ($direction === 'desc') + + + @else + + @endif + + + @endunless + @endif @elseif ($component->isBootstrap()) except('default') }} > - @unless ($component->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback())) - {{ $column->getTitle() }} - @else -
- {{ $column->getTitle() }} + @if($column->getColumnLabelStatus()) + @unless ($component->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback())) + {{ $column->getTitle() }} + @else +
+ {{ $column->getTitle() }} - - @if ($direction === 'asc') - - @elseif ($direction === 'desc') - - @else - - @endif - -
- @endunless + + @if ($direction === 'asc') + + @elseif ($direction === 'desc') + + @else + + @endif + +
+ @endunless + @endif @endif diff --git a/src/Views/Column.php b/src/Views/Column.php index b81bc0422..0541f667b 100644 --- a/src/Views/Column.php +++ b/src/Views/Column.php @@ -9,6 +9,8 @@ class Column { use IsColumn; + protected bool $displayColumnLabel = true; + public function __construct(string $title, string $from = null) { $this->title = trim($title); diff --git a/src/Views/Traits/Configuration/ColumnConfiguration.php b/src/Views/Traits/Configuration/ColumnConfiguration.php index 54d233d36..35147c860 100644 --- a/src/Views/Traits/Configuration/ColumnConfiguration.php +++ b/src/Views/Traits/Configuration/ColumnConfiguration.php @@ -163,4 +163,23 @@ public function setCustomSlug(string $customSlug): self return $this; } + + public function setColumnLabelStatusDisabled(): self + { + $this->setColumnLabelStatus(false); + + return $this; + } + + public function setColumnLabelStatusEnabled(): self + { + $this->setColumnLabelStatus(true); + + return $this; + } + + public function setColumnLabelStatus(bool $status): void + { + $this->displayColumnLabel = $status; + } } diff --git a/src/Views/Traits/Helpers/ColumnHelpers.php b/src/Views/Traits/Helpers/ColumnHelpers.php index e610f7356..cf5e2527d 100644 --- a/src/Views/Traits/Helpers/ColumnHelpers.php +++ b/src/Views/Traits/Helpers/ColumnHelpers.php @@ -449,4 +449,9 @@ public function hasCustomSlug(): bool { return $this->customSlug !== null; } + + public function getColumnLabelStatus(): bool + { + return $this->displayColumnLabel ?? true; + } } diff --git a/tests/Traits/Helpers/ColumnHelpersTest.php b/tests/Traits/Helpers/ColumnHelpersTest.php index 610a60f37..16b3c7ab2 100644 --- a/tests/Traits/Helpers/ColumnHelpersTest.php +++ b/tests/Traits/Helpers/ColumnHelpersTest.php @@ -348,4 +348,25 @@ public function can_column_custom_slug_returns(): void $this->assertSame(\Illuminate\Support\Str::slug('test123'), $column->getSlug()); } + + /** @test */ + public function can_check_if_column_label_should_be_shown(): void + { + $column = Column::make('ID', 'id'); + + $this->assertTrue($column->getColumnLabelStatus()); + + $column2 = Column::make('ID', 'id') + ->setColumnLabelStatusDisabled() + ->footer(fn ($rows) => 'Hi'); + + $this->assertFalse($column2->getColumnLabelStatus()); + + $column3 = Column::make('ID', 'id') + ->setColumnLabelStatusEnabled() + ->footer(fn ($rows) => 'Hi'); + + $this->assertTrue($column3->getColumnLabelStatus()); + $this->assertFalse($column2->getColumnLabelStatus()); + } } diff --git a/tests/Traits/Visuals/SortingVisualsTest.php b/tests/Traits/Visuals/SortingVisualsTest.php index 9a726016c..94ed4f06f 100644 --- a/tests/Traits/Visuals/SortingVisualsTest.php +++ b/tests/Traits/Visuals/SortingVisualsTest.php @@ -33,9 +33,10 @@ public function testArraySetup(): array public function th_headers_are_buttons_with_sorting_enabled(): void { Livewire::test(PetsTable::class) - ->assertSeeHtml('