Skip to content

Set bulk action row button attributes #2117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 8, 2024
Merged

Set bulk action row button attributes #2117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b09c351
Add initial commit with basic tests
lrljoe Dec 3, 2024
c69c414
Fix styling
lrljoe Dec 3, 2024
0541611
Adjust for AttributeBag
lrljoe Dec 3, 2024
639d37a
Fix styling
lrljoe Dec 3, 2024
5ad3f49
Remove Computed from Set
lrljoe Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 83 additions & 123 deletions resources/views/components/table/tr/bulk-actions.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@aware([ 'tableName','isTailwind','isBootstrap'])
@aware([ 'tableName'])

@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
@php
Expand All @@ -7,134 +7,94 @@
$simplePagination = $this->isPaginationMethod('simple');
@endphp

@if ($isTailwind)
<x-livewire-tables::table.tr.plain
x-cloak x-show="selectedItems.length > 0 && !currentlyReorderingStatus"
wire:key="{{ $tableName }}-bulk-select-message"
class="bg-indigo-50 dark:bg-gray-900 dark:text-white"
>
<x-livewire-tables::table.td.plain :colspan="$colspan">
<template x-if="selectedItems.length == paginationTotalItemCount || selectAllStatus">
<div wire:key="{{ $tableName }}-all-selected">
<span>
{{ __($this->getLocalisationPath.'You are currently selecting all') }}
@if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
{{ __($this->getLocalisationPath.'rows') }}.
</span>

<button
x-on:click="clearSelected"
wire:loading.attr="disabled"
type="button"
class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
>
{{ __($this->getLocalisationPath.'Deselect All') }}
</button>
</div>
</template>

<template x-if="selectedItems.length !== paginationTotalItemCount && !selectAllStatus">
<div wire:key="{{ $tableName }}-some-selected">
<span>
{{ __($this->getLocalisationPath.'You have selected') }}
<strong><span x-text="selectedItems.length"></span></strong>
{{ __($this->getLocalisationPath.'rows, do you want to select all') }}
@if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
</span>

<button
x-on:click="selectAllOnPage()"
wire:loading.attr="disabled"
type="button"
class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
>{{ __($this->getLocalisationPath.'Select All On Page') }}
</button>&nbsp;

<button
x-on:click="setAllSelected()"
wire:loading.attr="disabled"
type="button"
class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
>
{{ __($this->getLocalisationPath.'Select All') }}
</button>

<button
x-on:click="clearSelected"
wire:loading.attr="disabled"
type="button"
class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out dark:text-white dark:hover:text-gray-400"
>
{{ __($this->getLocalisationPath.'Deselect All') }}
</button>
</div>
</template>
</x-livewire-tables::table.td.plain>
</x-livewire-tables::table.tr.plain>
@elseif ($isBootstrap)
<x-livewire-tables::table.tr.plain
x-cloak x-show="selectedItems.length > 0 && !currentlyReorderingStatus"
wire:key="{{ $tableName }}-bulk-select-message"
>
<x-livewire-tables::table.td.plain :colspan="$colspan">
<template x-if="selectedItems.length == paginationTotalItemCount || selectAllStatus">
<div wire:key="{{ $tableName }}-all-selected">
<span>
<x-livewire-tables::table.tr.plain
x-cloak x-show="selectedItems.length > 0 && !currentlyReorderingStatus"
wire:key="{{ $tableName }}-bulk-select-message"
@class([
'bg-indigo-50 dark:bg-gray-900 dark:text-white' => $this->isTailwind,
])
>
<x-livewire-tables::table.td.plain :colspan="$colspan">
<template x-if="selectedItems.length == paginationTotalItemCount || selectAllStatus">
<div wire:key="{{ $tableName }}-all-selected">
<span>
{{ __($this->getLocalisationPath.'You are currently selecting all') }}
@if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
{{ __($this->getLocalisationPath.'rows') }}.
{{ __($this->getLocalisationPath.'rows') }}.
</span>

</span>

<button
x-on:click="clearSelected"
wire:loading.attr="disabled"
type="button"
class="btn btn-primary btn-sm"
>
<button
x-on:click="clearSelected"
wire:loading.attr="disabled"
type="button"
{{
$this->getBulkActionsRowButtonAttributesBag->class([
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true),
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-colors'] ?? true),
'btn btn-primary btn-sm' => $this->isBootstrap && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true)
])
}}
>
{{ __($this->getLocalisationPath.'Deselect All') }}
</button>
</div>
</template>
</button>
</div>
</template>

<template x-if="selectedItems.length !== paginationTotalItemCount && !selectAllStatus">
<div wire:key="{{ $tableName }}-some-selected">
<span>
{{ __($this->getLocalisationPath.'You have selected') }}
<strong><span x-text="selectedItems.length"></span></strong>
{{ __($this->getLocalisationPath.'rows, do you want to select all') }}
@if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
</span>

<template x-if="selectedItems.length !== paginationTotalItemCount && !selectAllStatus">
<div wire:key="{{ $tableName }}-some-selected">
<span>
{{ __($this->getLocalisationPath.'You have selected') }}
<strong><span x-text="selectedItems.length"></span></strong>
{{ __($this->getLocalisationPath.'rows, do you want to select all') }}
@if(!$simplePagination) <strong><span x-text="paginationTotalItemCount"></span></strong> @endif
</span>
<button
x-on:click="selectAllOnPage()"
wire:loading.attr="disabled"
type="button"
{{
$this->getBulkActionsRowButtonAttributesBag->class([
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true),
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-colors'] ?? true),
'btn btn-primary btn-sm' => $this->isBootstrap && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true)
])
}}

<button
x-on:click="selectAllOnPage"
wire:loading.attr="disabled"
type="button"
class="btn btn-primary btn-sm"
>
{{ __($this->getLocalisationPath.'Select All On Page') }}
</button>&nbsp;
>{{ __($this->getLocalisationPath.'Select All On Page') }}
</button>&nbsp;

<button
x-on:click="setAllSelected()"
wire:loading.attr="disabled"
type="button"
class="btn btn-primary btn-sm"
>
{{ __($this->getLocalisationPath.'Select All') }}
</button>
<button
x-on:click="setAllSelected()"
wire:loading.attr="disabled"
type="button"
{{
$this->getBulkActionsRowButtonAttributesBag->class([
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true),
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-colors'] ?? true),
'btn btn-primary btn-sm' => $this->isBootstrap && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true)
])
}}
>
{{ __($this->getLocalisationPath.'Select All') }}
</button>

<button
x-on:click="clearSelected"
wire:loading.attr="disabled"
type="button"
class="btn btn-primary btn-sm"
>
{{ __($this->getLocalisationPath.'Deselect All') }}
</button>
</div>
</template>
</x-livewire-tables::table.td.plain>
</x-livewire-tables::table.tr.plain>
@endif
<button
x-on:click="clearSelected"
wire:loading.attr="disabled"
type="button"
{{
$this->getBulkActionsRowButtonAttributesBag->class([
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true),
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => $this->isTailwind && ($this->getBulkActionsRowButtonAttributes['default-colors'] ?? true),
'btn btn-primary btn-sm' => $this->isBootstrap && ($this->getBulkActionsRowButtonAttributes['default-styling'] ?? true)
])
}}
>
{{ __($this->getLocalisationPath.'Deselect All') }}
</button>
</div>
</template>
</x-livewire-tables::table.td.plain>
</x-livewire-tables::table.tr.plain>
@endif
10 changes: 10 additions & 0 deletions src/Traits/Styling/Configuration/BulkActionStylingConfiguration.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,14 @@ public function setBulkActionsThCheckboxAttributes(array $bulkActionsThCheckboxA

return $this;
}

/**
* Used to set attributes for the Bulk Actions Row Buttons
*/
public function setBulkActionsRowButtonAttributes(array $bulkActionsRowButtonAttributes): self
{
$this->setCustomAttributes('bulkActionsRowButtonAttributes', $bulkActionsRowButtonAttributes);

return $this;
}
}
2 changes: 2 additions & 0 deletions src/Traits/Styling/HasBulkActionsStyling.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,6 @@ trait HasBulkActionsStyling
protected array $bulkActionsMenuAttributes = ['default-colors' => true, 'default-styling' => true];

protected array $bulkActionsMenuItemAttributes = ['default-colors' => true, 'default-styling' => true];

protected array $bulkActionsRowButtonAttributes = ['default-colors' => true, 'default-styling' => true];
}
19 changes: 19 additions & 0 deletions src/Traits/Styling/Helpers/BulkActionStylingHelpers.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

namespace Rappasoft\LaravelLivewireTables\Traits\Styling\Helpers;

use Illuminate\View\ComponentAttributeBag;
use Livewire\Attributes\Computed;

trait BulkActionStylingHelpers
Expand Down Expand Up @@ -93,4 +94,22 @@ public function getBulkActionsTdCheckboxAttributes(): array
return $this->getCustomAttributes('bulkActionsTdCheckboxAttributes');

}

/**
* Used to get attributes for the Bulk Actions Row Buttons
*
* @return array<mixed>
*/
#[Computed]
public function getBulkActionsRowButtonAttributes(): array
{
return $this->getCustomAttributes('bulkActionsRowButtonAttributes', true);

}

#[Computed]
public function getBulkActionsRowButtonAttributesBag(): ComponentAttributeBag
{
return $this->getCustomAttributesBagFromArray($this->getBulkActionsRowButtonAttributes());
}
}
1 change: 1 addition & 0 deletions tests/Unit/Traits/Configuration/BulkActionsStylingConfigurationTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ public static function providesBulkActionMethodsToTest(): array
'BulkActionsThCheckboxAttributes',
'BulkActionsTdAttributes',
'BulkActionsTdCheckboxAttributes',
'BulkActionsRowButtonAttributes',
];
}

Expand Down
Loading