refactor content grid group header

filamentphp · Oct 14, 2024 · ca0d977 · ca0d977
1 parent 09a40f6
commit ca0d977
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 74 deletions.
diff --git a/docs-assets/app/public/css/filament/filament/app.css b/docs-assets/app/public/css/filament/filament/app.css
diff --git a/docs-assets/app/public/css/filament/support/support.css b/docs-assets/app/public/css/filament/support/support.css
diff --git a/packages/panels/dist/theme.css b/packages/panels/dist/theme.css
diff --git a/packages/support/dist/index.css b/packages/support/dist/index.css
diff --git a/packages/support/resources/css/components/tables/content.css b/packages/support/resources/css/components/tables/content.css
@@ -24,12 +24,44 @@
  &.fi-ta-content-grouped {
  @apply pt-0;
  }
+
+ & .fi-ta-group-header {
+ @apply -mx-4 w-[calc(100%+2rem)] border-y border-gray-200 first:border-t-0 dark:border-white/5 sm:-mx-6 sm:w-[calc(100%+3rem)];
+ }
  }
 
  &:not(.fi-ta-content-grid) {
  @apply gap-y-px bg-gray-200 dark:bg-white/5;
  }
 
+ & .fi-ta-group-header {
+ @apply col-span-full flex w-full items-center gap-x-3 bg-gray-50 px-3 py-2 dark:bg-white/5;
+
+ &.fi-collapsible {
+ @apply cursor-pointer;
+
+ &.fi-collapsed {
+ @apply -mb-4 border-b-0;
+
+ & .fi-icon-btn {
+ @apply -rotate-180;
+ }
+ }
+ }
+
+ & .fi-ta-group-heading {
+ @apply text-sm font-medium text-gray-950 dark:text-white;
+ }
+
+ & .fi-ta-group-description {
+ @apply text-sm text-gray-500 dark:text-gray-400;
+ }
+
+ & .fi-ta-group-checkbox {
+ @apply px-3;
+ }
+ }
+
  & .fi-ta-table {
  @apply col-span-full;
  }

diff --git a/packages/tables/resources/views/components/group/header.blade.php b/packages/tables/resources/views/components/group/header.blade.php
diff --git a/packages/tables/resources/views/index.blade.php b/packages/tables/resources/views/index.blade.php
@@ -588,9 +588,7 @@ class="fi-ta-content-ctn"
  @endphp
 
  @if ($isSelectionEnabled || count($sortableColumns))
- <div
- class="fi-ta-content-header"
- >
+ <div class="fi-ta-content-header">
  @if ($isSelectionEnabled && (! $isReordering))
  <input
  aria-label="{{ __('filament-tables::table.fields.bulk_select_page.label') }}"
@@ -720,6 +718,7 @@ class="fi-ta-sorting-settings"
  $openRecordUrlInNewTab = $shouldOpenRecordUrlInNewTab($record);
  $recordGroupKey = $group?->getStringKey($record);
  $recordGroupTitle = $group?->getTitle($record);
+ $isRecordGroupCollapsible = $group?->isCollapsible();
 
  $collapsibleColumnsLayout?->record($record);
  $hasCollapsibleColumnsLayout = (bool) $collapsibleColumnsLayout?->isVisible();
@@ -751,29 +750,70 @@ class="fi-ta-sorting-settings"
  </table>
  @endif
 
- <x-filament-tables::group.header
- :collapsible="$group->isCollapsible()"
- :description="$group->getDescription($record, $recordGroupTitle)"
- :label="$group->isTitlePrefixedWithLabel() ? $group->getLabel() : null"
- :title="$recordGroupTitle"
+ <div
+ @if ($isRecordGroupCollapsible = $group->isCollapsible())
+ x-on:click="toggleCollapseGroup(@js($recordGroupTitle))"
+ @if (! $hasSummary)
+ x-bind:class="{ 'fi-collapsed': isGroupCollapsed(@js($recordGroupTitle)) }"
+ @endif
+ @endif
  @class([
- 'col-span-full',
- '-mx-4 w-[calc(100%+2rem)] border-y border-gray-200 first:border-t-0 dark:border-white/5 sm:-mx-6 sm:w-[calc(100%+3rem)]' => $contentGrid,
+ 'fi-ta-group-header',
+ 'fi-collapsible' => $isRecordGroupCollapsible,
  ])
- :x-bind:class="$hasSummary ? null : '{ \'-mb-4 border-b-0\': isGroupCollapsed(' . \Illuminate\Support\Js::from($recordGroupTitle) . ') }'"
  >
  @if ($isSelectionEnabled)
- <x-slot name="start">
- <div class="px-3">
- <x-filament-tables::selection.group-checkbox
- :page="$page"
- :key="$recordGroupKey"
- :title="$recordGroupTitle"
- />
- </div>
- </x-slot>
+ <input
+ aria-label="{{ __('filament-tables::table.fields.bulk_select_group.label', ['title' => $recordGroupTitle]) }}"
+ type="checkbox"
+ x-bind:checked="
+ const recordsInGroup = getRecordsInGroupOnPage(@js($recordGroupKey))
+
+ if (recordsInGroup.length && areRecordsSelected(recordsInGroup)) {
+ $el.checked = true
+
+ return 'checked'
+ }
+
+ $el.checked = false
+
+ return null
+ "
+ x-on:click="toggleSelectRecordsInGroup(@js($recordGroupKey))"
+ wire:key="{{ $this->getId() }}.table.bulk_select_group.checkbox.{{ $page }}"
+ wire:loading.attr="disabled"
+ wire:target="{{ implode(',', \Filament\Tables\Table::LOADING_TARGETS) }}"
+ class="fi-ta-record-checkbox fi-ta-group-checkbox fi-checkbox-input"
+ />
+ @endif
+
+ <div>
+ <h4 class="fi-ta-group-heading">
+ @if (filled($recordGroupLabel = ($group->isTitlePrefixedWithLabel() ? $group->getLabel() : null)))
+ {{ $recordGroupLabel }}:
+ @endif
+
+ {{ $recordGroupTitle }}
+ </h4>
+
+ @if (filled($recordGroupDescription = $group->getDescription($record, $recordGroupTitle)))
+ <p class="fi-ta-group-description">
+ {{ $recordGroupDescription }}
+ </p>
+ @endif
+ </div>
+
+ @if ($isRecordGroupCollapsible)
+ <button
+ aria-label="{{ filled($recordGroupLabel) ? ($recordGroupLabel . ': ' . $recordGroupTitle) : $recordGroupTitle }}"
+ x-bind:aria-expanded="! isGroupCollapsed(@js($recordGroupTitle))"
+ type="button"
+ class="fi-icon-btn fi-size-sm"
+ >
+ {{ \Filament\Support\generate_icon_html('heroicon-m-chevron-up', alias: 'tables::grouping.collapse-button') }}
+ </button>
  @endif
- </x-filament-tables::group.header>
+ </div>
  @endif
 
  <div