Merge pull request #100 from Power-Components/1.4

1.4

composer.json

@@ -33,7 +33,7 @@
         }
     },
     "require": {
-        "php": "^7.4.1 | ^8",
+        "php": "^7.4.1 | ^8.0 | ^8.1",
         "livewire/livewire": "^2.4",
         "box/spout": "^3",
         "doctrine/dbal": "^3.1"

resources/config/livewire-powergrid.php

@@ -95,7 +95,7 @@
     | Define here the CDN source for imported JS Framework
     |
     */
-    
+
     'js_framework_cdn' => [
         'alpinejs' => 'https://unpkg.com/[email protected]/dist/cdn.min.js',
         //'alpinejs' => 'https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js' //Alpine 2.8

resources/lang/ca/datatable.php

@@ -42,4 +42,8 @@
         'starts_with'  => 'Comença per',
         'ends_with'    => 'Acaba en',
     ],
+    'export' => [
+        'exporting' => 'Espereu, si us plau!',
+        'completed' => 'S\'ha completat l\'exportació. Els vostres fitxers estan a punt per descarregar-se',
+    ],
 ];

resources/lang/de/datatable.php

@@ -42,4 +42,8 @@
         'starts_with'  => 'beginnt mit',
         'ends_with'    => 'endet with',
     ],
+    'export' => [
+        'exporting' => 'Warten Sie mal!',
+        'completed' => 'Export abgeschlossen! Ihre Dateien stehen zum Download bereit',
+    ],
 ];

resources/lang/en/datatable.php

@@ -42,4 +42,8 @@
         'starts_with'  => 'Starts with',
         'ends_with'    => 'Ends with',
     ],
+    'export' => [
+        'exporting' => 'Please wait!',
+        'completed' => 'Export completed! Your files are ready for download',
+    ],
 ];

resources/lang/es/datatable.php

@@ -42,4 +42,8 @@
         'starts_with'  => 'Comienza por',
         'ends_with'    => 'Termina en',
     ],
+    'export' => [
+        'exporting' => '¡Espere por favor!',
+        'completed' => '¡Exportación completada! Tus archivos están listos para descargar',
+    ],
 ];

resources/lang/fa/datatable.php

@@ -45,4 +45,8 @@
         'starts_with'  => 'شروع شود با',
         'ends_with'    => 'خاتمه یابد با',
     ],
+    'export' => [
+        'exporting' => 'لطفا صبر کنید!',
+        'completed' => 'صادرات به پایان رسید! فایل های شما آماده بارگیری هستند',
+    ],
 ];

resources/lang/it/datatable.php

@@ -42,4 +42,8 @@
         'starts_with'  => 'Inizia con',
         'ends_with'    => 'Termina con',
     ],
+    'export' => [
+        'exporting' => 'Attendere prego!',
+        'completed' => 'Esportazione completata! I tuoi file sono pronti per il download',
+    ],
 ];

resources/lang/pt_BR/datatable.php

@@ -42,4 +42,8 @@
         'starts_with'  => 'Começa com',
         'ends_with'    => 'Termina com',
     ],
+    'export' => [
+        'exporting' => 'Por favor, aguarde!',
+        'completed' => 'Exportação concluída! Seus arquivos estão prontos para download',
+    ],
 ];

resources/views/assets/scripts.blade.php

@@ -1,7 +1,7 @@
 <script src="{{ config('livewire-powergrid.plugins.flat_piker.js') }}"></script>
 <script src="{{ config('livewire-powergrid.plugins.flat_piker.translate') }}"></script>
 
-@includeIf(powerGridThemeRoot()."scripts")
+@includeIf(powerGridThemeRoot().".scripts")
 
 <script>
     function copyToClipboard(button) {

resources/views/assets/styles.blade.php

@@ -7,6 +7,6 @@
     table{width:100%}.table .checkbox-column{width:50px!important;max-width:50px!important;text-align:center}.form-control:disabled,.form-control[readonly]{opacity:1;background-color:#f8f9fa;border-color:#f8f9fa}.accordion-button{padding:.7rem .7rem}.btn-light,.has-search .form-control{padding-left:2.375rem}.has-search .form-control-feedback{position:absolute;z-index:2;display:block;width:2.375rem;height:2.375rem;line-height:2.375rem;text-align:center;pointer-events:none;color:#aaa}.new-control{position:relative;display:-ms-inline-flexbox;display:inline-flex;padding-left:1.5rem;margin-right:1rem;font-weight:100;font-size:14px}.page-link{@apply block bg-white text-blue-800 border-r border-gray-200 outline-none py-2 w-12 text-sm text-center}.page-link:last-child{@apply border-0}.page-link:hover{@apply bg-blue-700 text-white border-blue-700}.page-item.active .page-link{@apply bg-blue-700 text-white border-blue-700}.page-item.disabled .page-link{@apply bg-white text-gray-300 border-gray-200}.livewire-powergrid{background-color:#e5e7eb;border-color:#f3f4f6;color:#374151;border-radius:4px}.page-link{color:gray!important}.page-item.active .page-link{color:#fff!important;background-color:gray;border-color:gray}.loader{border-top-color:#222;-webkit-animation:spinner 1.5s linear infinite;animation:spinner 1.5s linear infinite}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}table thead{padding-left:15px;text-transform:uppercase;font-size:.75rem;color:#6b6a6a;padding-top:8px;padding-bottom:8px}.dropdown-toggle{background:#fff!important;padding-left:10px!important;color:#7a7e82!important}select, .power_grid {opacity: 1 !important;font-size: 0.85rem !important;padding-left: 10px!important;}.badge{font-size: 0.77em;}
 </style>
 
-@includeIf(powerGridThemeRoot()."styles")
+@includeIf(powerGridThemeRoot().".styles")
 
 @stack('power_grid_styles')

resources/views/components/actions.blade.php

@@ -6,7 +6,7 @@
 <div class="w-full md:w-auto">
     @if(isset($actions) && count($actions) && $row !== '')
         @foreach($actions as $action)
-            <td class="{{ $theme->actions->tdBodyClass ?? $theme->table->tdBodyClass }}"
+            <td class="pg-actions {{ $theme->actions->tdBodyClass ?? $theme->table->tdBodyClass }}"
                 style="{{ $theme->actions->tdBodyStyle ?? $theme->table->tdBodyStyle }}">
                 @php
                     $parameters = [];

resources/views/components/cols.blade.php

@@ -4,10 +4,10 @@
     'sortField' => null,
     'sortDirection' => null,
     'enabledFilters' => null,
-    'actions' => null
+    'actions' => null,
+    'dataField' => null,
 ])
 <div>
-
     @if($column->hidden === false)
         <th class="{{ $theme->table->thClass .' '. $column->headerClass }}"
             style="width: max-content;@if($column->sortable)cursor:pointer; @endif{{ $theme->table->thStyle.' '. $column->headerStyle }}">
@@ -25,7 +25,7 @@
                 @endif
                 <span
                     @if($column->sortable === true)
-                    wire:click="sortBy('{{ $column->dataField ?? $column->field }}')"
+                    wire:click="sortBy('{{ $column->dataField !='' ? $column->dataField : $column->field }}')"
                     @endif
                 >
                     {{$column->title}}

resources/views/components/editable.blade.php

@@ -4,22 +4,33 @@
     'field' => null,
     'theme' => null
 ])
-<div x-data="{ value: '<span style=\'border-bottom: dotted 1px;\'>{{ addslashes($row->{$field}) }}</span>' }">
-    <button
-        style="width: 100%;{{ $theme->buttonClass }}"
-        x-on:click="value = editableInput({{ $row->{$primaryKey} }}, '{{ addslashes($row->{$field})  }}', '{{ $field }}');"
-        x-html="value"
-    ></button>
-</div>
-<script>
-
-    function editableInput(id, value, field) {
-        document.getElementsByClassName('message')[0].style.display = "none";
 
-        return '<input @keydown.enter=sendEventInputChanged($event,' + id + ',"' + field + '") value="' + value + '" ' +
-            'class="{{ $theme->inputClass }}">';
-    }
+<div x-data="{
+       editable: false,
+       id: '{{ $row->{$primaryKey} }}',
+       field: '{{ $field }}',
+       content: '{{ addslashes($row->{$field}) }}'
+    }">
+    <div x-text="content"
+         style="border-bottom: dotted 1px; cursor: pointer"
+         x-show="!editable"
+         x-on:dblclick="editable = true"
+    ></div>
+    <div x-cloak
+         x-show="editable">
+        <input
+            type="text"
+            x-on:dblclick="editable = true"
+            x-on:keydown.enter="sendEventInputChanged($event, id, field); editable = false; content = $event.target.value"
+            :class="{'cursor-pointer': !editable}"
+            class="{{ $theme->inputClass }} p-2"
+            x-ref="editable"
+            x-text="content"
+            :value="content">
+    </div>
+</div>
 
+<script>
     function sendEventInputChanged(event, id, field) {
         document.getElementsByClassName('message')[0].style.display = "none";
         window.livewire.emit('eventInputChanged', {

resources/views/components/frameworks/bootstrap5/batch-exporting.blade.php

@@ -0,0 +1,41 @@
+@if($queues && $showExporting)
+
+    @if($batchExporting && !$batchFinished)
+        <div wire:poll="updateExportProgress"
+             class="my-3 px-4 rounded-md py-3 shadow-sm text-center">
+            <div>{{ $batchProgress }}%</div>
+            <div>{{ trans('livewire-powergrid::datatable.export.exporting') }}</div>
+        </div>
+    @endif
+
+    @if($batchFinished)
+        <div class="my-3">
+            <p>
+                <button class="btn btn-primary"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseCompleted"
+                        aria-expanded="false"
+                        aria-controls="collapseCompleted">
+                    ⚡ {{ trans('livewire-powergrid::datatable.export.completed') }}
+                </button>
+            </p>
+            <div class="collapse" id="collapseCompleted">
+                <div class="card card-body">
+                    @foreach($exportedFiles as $file)
+                        <div class="d-flex w-full p-2" style="cursor:pointer">
+                            <x-livewire-powergrid::icons.download
+                                style="width: 1.5rem;
+                                           margin-right: 6px;
+                                           color: #2d3034;"/>
+                            <a
+                                wire:click="downloadExport('{{ $file }}')">
+                                {{ $file }}
+                            </a>
+                        </div>
+                    @endforeach
+                </div>
+            </div>
+        </div>
+    @endif
+@endif

resources/views/components/frameworks/bootstrap5/enabled-filters.blade.php

@@ -0,0 +1,14 @@
+@if(count($enabledFilters))
+    <div class="col-md-12 d-flex" style="margin-top: 5px">
+        @foreach($enabledFilters as $field => $filter)
+            <div wire:click.prevent="clearFilter('{{ $field }}')"
+                 style="cursor: pointer; padding-right: 4px">
+            <span class="badge rounded-pill bg-light text-dark">{{ $filter['label'] }}
+                 <svg width="10" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+                    <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7"/>
+                </svg>
+            </span>
+            </div>
+        @endforeach
+    </div>
+@endif

resources/views/components/frameworks/bootstrap5/footer.blade.php

@@ -22,7 +22,7 @@
             </div>
         @endif
         <div>
-            {!! $data->links($theme->base. ''.$theme->name.'.pagination') !!}
+            {!! $data->links(powerGridThemeRoot().'.pagination') !!}
         </div>
     </div>
 @endif

resources/views/components/frameworks/bootstrap5/header.blade.php

@@ -3,32 +3,26 @@
 
         <div class="col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center">
 
-            @if($exportOption)
-                @include($theme->base. ''.$theme->name.'.export')
-            @endif
+            @includeIf($exportOption, powerGridThemeRoot().'.export')
 
-            @includeIf($theme->base. ''.$theme->name.'.toggle-columns')
+            @includeIf(powerGridThemeRoot().'.toggle-columns')
 
-            @include('livewire-powergrid::components.frameworks.bootstrap5.loading')
+            @include(powerGridThemeRoot().'.loading')
 
         </div>
         <div class="col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3">
 
-            @include($theme->base. ''.$theme->name.'.filter')
+            @include(powerGridThemeRoot().'.filter')
 
         </div>
 
     </div>
 </div>
 
-<div class="col-md-12 d-flex" style="margin-top: 5px">
-@foreach($enabledFilters as $field => $filter)
-    <div wire:click.prevent="clearFilter('{{ $field }}')" style="cursor: pointer; padding-right: 4px">
-        <span class="badge rounded-pill bg-light text-dark">{{ $filter['label'] }}
-         <svg width="10" stroke="currentColor" fill="none" viewBox="0 0 8 8">
-            <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7"/>
-        </svg>
-        </span>
-    </div>
-@endforeach
-</div>
+@include(powerGridThemeRoot().'.batch-exporting')
+
+@include(powerGridThemeRoot().'.enabled-filters')
+
+
+
+

resources/views/components/frameworks/bootstrap5/table-base.blade.php

@@ -4,17 +4,6 @@
                 'enabledFilters' => $enabledFilters
         ])
 
-        @if(config('livewire-powergrid.filter') === 'outside')
-            @if(count($makeFilters) > 0)
-                <div>
-                    <x-livewire-powergrid::frameworks.bootstrap5.filter
-                        :makeFilters="$makeFilters"
-                        :theme="$theme"
-                    />
-                </div>
-            @endif
-        @endif
-
         @include($theme->layout->message)
 
     </div>