[Improve] - Disable the "selected" button in export (#1457)

* Improve actions - export and toggle columns * Improve actions - export and toggle columns * Improve actions - export and toggle columns
Power-Components · Mar 10, 2024 · 4fe7267 · 4fe7267
1 parent add131a
commit 4fe7267
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 37 deletions.
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
@@ -40,11 +40,7 @@
 }
 
 .pg-enabled-filters-span-clear-all {
-    @apply outline-none inline-flex justify-center items-center rounded gap-x-1 text-xs font-semibold px-2.5 py-0.5 text-pg-primary-100 bg-pg-primary-500 dark:bg-pg-primary-700
-}
-
-.pg-enabled-filters-span {
-    @apply outline-none inline-flex justify-center items-center rounded gap-x-1 text-xs font-semibold px-2.5 py-0.5 text-pg-primary-600 dark:text-pg-primary-200 bg-pg-primary-100 dark:bg-pg-primary-600
+    @apply outline-none inline-flex justify-center items-center rounded gap-x-1 text-xs font-semibold px-2.5 py-0.5
 }
 
 #power-grid-table-container select {

diff --git a/resources/views/components/frameworks/bootstrap5/header/export.blade.php b/resources/views/components/frameworks/bootstrap5/header/export.blade.php
@@ -20,17 +20,18 @@ class="btn btn-light dropdown-toggle"
             />
         </svg>
     </button>
-    <ul class="dropdown-menu">
+    <ul x-data="{countChecked: @entangle('checkboxValues').live}" class="dropdown-menu">
         @if (in_array('xlsx', data_get($setUp, 'exportable.type')))
             <li class="d-flex">
                 <div class="dropdown-item">
                     <span style="min-width: 25px;">@lang('XLSX')</span>
+
                     <a
                         class="text-black-50"
                         wire:click.prevent="exportToXLS"
                         href="#"
                     >
-
+                        <span class="export-count">({{ $total }})</span>
                         @if (count($enabledFilters) === 0)
                             @lang('livewire-powergrid::datatable.labels.all')
                         @else
@@ -44,7 +45,7 @@ class="text-black-50"
                             wire:click.prevent="exportToXLS(true)"
                             href="#"
                         >
-                            @lang('livewire-powergrid::datatable.labels.selected')
+                            (<span x-text="countChecked.length"></span>) @lang('livewire-powergrid::datatable.labels.selected')
                         </a>
                     @endif
                 </div>
@@ -59,6 +60,7 @@ class="text-black-50"
                         wire:click.prevent="exportToCsv"
                         href="#"
                     >
+                        <span class="export-count">({{ $total }})</span>
                         @if (count($enabledFilters) === 0)
                             @lang('livewire-powergrid::datatable.labels.all')
                         @else
@@ -70,9 +72,10 @@ class="text-black-50"
                         <a
                             class="text-black-50"
                             wire:click.prevent="exportToCsv(true)"
+                            x-bind:disabled="countChecked.length === 0"
                             href="#"
                         >
-                            @lang('livewire-powergrid::datatable.labels.selected')
+                            (<span x-text="countChecked.length"></span>) @lang('livewire-powergrid::datatable.labels.selected')
                         </a>
                     @endif
                 </div>

diff --git a/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php b/resources/views/components/frameworks/tailwind/header/enabled-filters.blade.php
@@ -1,7 +1,7 @@
 @if (count($enabledFilters))
     <div data-cy="enabled-filters" class="pg-enabled-filters-base">
         @if (count($enabledFilters) > 1)
-            <span class="group pg-enabled-filters-span">
+            <span class="group pg-enabled-filters-span-clear-all text-pg-primary-100 bg-pg-primary-500 dark:bg-pg-primary-700">
                 {{ trans('livewire-powergrid::datatable.buttons.clear_all_filters') }}
                 <div class="relative flex items-center w-2 h-2">
                     <button
@@ -17,7 +17,7 @@
             @isset($filter['label'])
                 <span
                     wire:key="enabled-filters-{{ $filter['field'] }}"
-                    class="group pg-enabled-filters-span"
+                    class="group pg-enabled-filters-span text-pg-primary-600 dark:text-pg-primary-200 bg-pg-primary-100 dark:bg-pg-primary-600"
                 >
                     {{ $filter['label'] }}
                     <div class="relative flex items-center w-2 h-2">

diff --git a/resources/views/components/frameworks/tailwind/header/export.blade.php b/resources/views/components/frameworks/tailwind/header/export.blade.php
@@ -1,9 +1,10 @@
 <div
-    x-data="{ open: false }"
-    @click.outside="open = false"
+    x-data="{ open: false, countChecked: @entangle('checkboxValues').live }"
+    x-on:keydown.esc="open = false"
+    x-on:click.outside="open = false;"
 >
     <button
-        @click.prevent="open = ! open"
+        @click.prevent="open = true"
         class="pg-btn-white dark:ring-pg-primary-600 dark:border-pg-primary-600 dark:hover:bg-pg-primary-700
     dark:ring-offset-pg-primary-800 dark:text-pg-primary-400 dark:bg-pg-primary-700"
     >
@@ -28,57 +29,58 @@ class="absolute z-10 mt-2 rounded-md dark:bg-pg-primary-700 bg-white shadow-lg r
         @keyup.space.prevent="open = false;"
     >
         @if (in_array('xlsx', data_get($setUp, 'exportable.type')))
-            <div class="flex px-4 py-2 text-pg-primary-400 dark:text-pg-primary-300">
+            <div class="flex items-center px-4 py-1 text-pg-primary-400 dark:text-pg-primary-300 border-b border-pg-primary-100 dark:border-pg-primary-600">
                 <span class="w-12">@lang('XLSX')</span>
-                <a
+                <button
                     wire:click.prevent="exportToXLS"
                     x-on:click="open = false"
                     href="#"
-                    class="px-2 block text-pg-primary-800 hover:bg-pg-primary-50 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-700 rounded"
+                    class="px-2 py-1 block text-pg-primary-800 hover:bg-pg-primary-100 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-800 rounded"
                 >
+                    <span class="export-count text-xs">({{ $total }})</span>
                     @if (count($enabledFilters) === 0)
                         @lang('livewire-powergrid::datatable.labels.all')
                     @else
                         @lang('livewire-powergrid::datatable.labels.filtered')
                     @endif
 
-                </a>
+                </button>
                 @if ($checkbox)
-                    <a
-                        wire:click.prevent="exportToXLS(true)"
-                        x-on:click="open = false"
-                        href="#"
-                        class="px-2 block text-pg-primary-800 hover:bg-pg-primary-50 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-700 rounded"
+                    <button wire:click.prevent="exportToXLS(true)"
+                       x-on:click="open = false"
+                       x-bind:disabled="countChecked.length === 0"
+                       :class="{'cursor-not-allowed' : countChecked.length === 0}"
+                       class="px-2 py-1 block text-pg-primary-800 hover:bg-pg-primary-100 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-800 rounded"
                     >
-                        @lang('livewire-powergrid::datatable.labels.selected')
-                    </a>
+                        <span class="export-count text-xs" x-text="`(${countChecked.length})`"></span> @lang('livewire-powergrid::datatable.labels.selected')
+                    </button>
                 @endif
             </div>
         @endif
         @if (in_array('csv', data_get($setUp, 'exportable.type')))
-            <div class="flex px-4 py-2 text-pg-primary-400 dark:text-pg-primary-300">
+            <div class="flex items-center px-4 py-1 text-pg-primary-400 dark:text-pg-primary-300">
                 <span class="w-12">@lang('Csv')</span>
-                <a
+                <button
                     wire:click.prevent="exportToCsv"
                     x-on:click="open = false"
-                    href="#"
-                    class="px-2 block text-pg-primary-800 hover:bg-pg-primary-50 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-700 rounded"
+                    class="px-2 py-1 block text-pg-primary-800 hover:bg-pg-primary-100 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-800 rounded"
                 >
+                    <span class="export-count text-xs">({{ $total }})</span>
                     @if (count($enabledFilters) === 0)
                         @lang('livewire-powergrid::datatable.labels.all')
                     @else
                         @lang('livewire-powergrid::datatable.labels.filtered')
                     @endif
-                </a>
+                </button>
                 @if ($checkbox)
-                    <a
+                    <button
                         wire:click.prevent="exportToCsv(true)"
                         x-on:click="open = false"
-                        href="#"
-                        class="px-2 block text-pg-primary-800 hover:bg-pg-primary-50 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-700 rounded"
+                        :class="{'cursor-not-allowed' : countChecked.length === 0}"
+                        class="px-2 py-1 block text-pg-primary-800 hover:bg-pg-primary-100 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-800 rounded"
                     >
-                        @lang('livewire-powergrid::datatable.labels.selected')
-                    </a>
+                        <span class="export-count text-xs" x-text="`(${countChecked.length})`"></span> @lang('livewire-powergrid::datatable.labels.selected')
+                    </button>
                 @endif
             </div>
         @endif

diff --git a/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php b/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php
@@ -30,14 +30,17 @@ class="absolute z-10 mt-2 w-56 rounded-md dark:bg-pg-primary-700 bg-white shadow
             @keyup.space.prevent="open = false;"
         >
             <div
-                class="py-1"
                 role="none"
             >
                 @foreach ($this->visibleColumns as $column)
                     <div
                         wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ data_get($column, 'field') }}'})"
                         wire:key="toggle-column-{{ data_get($column, 'field') }}"
-                        class="@if (data_get($column, 'hidden')) font-semibold bg-pg-primary-100 dark:bg-pg-primary-800 @endif cursor-pointer text-sm flex justify-start block px-4 py-2 text-pg-primary-500 dark:hover:text-pg-primary-200 dark:text-pg-primary-200"
+                        @class([
+                            'font-semibold bg-pg-primary-100 dark:bg-pg-primary-800 ' => data_get($column, 'hidden'),
+                            'py-1' => $loop->first || $loop->last,
+                            ' cursor-pointer text-sm flex justify-start block px-4 py-2 text-pg-primary-800 hover:bg-pg-primary-100 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-800'
+                        ])
                     >
                         @if (!data_get($column, 'hidden'))
                             <x-livewire-powergrid::icons.eye class="text-pg-primary-500 dark:text-pg-primary-300" />