main - wip

Power-Components · Nov 12, 2021 · 772636b · 772636b
1 parent 32d1cea
commit 772636b
Show file tree

Hide file tree

Showing 22 changed files with 101 additions and 77 deletions.
diff --git a/resources/config/livewire-powergrid.php b/resources/config/livewire-powergrid.php
@@ -57,6 +57,7 @@
     | PowerGrid supports inline and outside filters.
     | 'inline': Filters data inside the table.
     | 'outside': Filters data outside the table.
+    | 'null'
     |
     */
 

diff --git a/resources/views/components/actions.blade.php b/resources/views/components/actions.blade.php
@@ -33,7 +33,7 @@ class="{{ filled($action->class) ? $action->class : $theme->actions->headerBtnCl
                     @if(strtolower($action->method) !== ('get'))
                         <form target="{{ $action->target }}"
                               action="{{ route($action->route, $parameters) }}"
-                              method="post">
+                              method="{{ $action->target }}">
                             @method($action->method)
                             @csrf
                             <button type="submit"

diff --git a/resources/views/components/editable.blade.php b/resources/views/components/editable.blade.php
@@ -5,7 +5,8 @@
     'theme' => null
 ])
 
-<div x-data="{
+<div wire:ignore.self
+     x-data="{
        editable: false,
        id: '{{ $row->{$primaryKey} }}',
        field: '{{ $field }}',

diff --git a/resources/views/components/frameworks/bootstrap5/export.blade.php b/resources/views/components/frameworks/bootstrap5/export.blade.php
@@ -1,7 +1,9 @@
 <div>
     @if($exportOption)
         <div class="btn-group">
-            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
+            <button class="btn btn-secondary btn-sm dropdown-toggle"
+                    type="button"
+                    data-bs-toggle="dropdown"
                     aria-expanded="false">
                     <span>
                         <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"

diff --git a/resources/views/components/frameworks/bootstrap5/footer.blade.php b/resources/views/components/frameworks/bootstrap5/footer.blade.php
@@ -4,8 +4,10 @@
         @if($perPageInput)
             <div class="d-flex justify-content-center">
                 <div>
-                    <label class="col-12 col-sm-6 col-md-6" style="width: 120px;">
-                        <select wire:model="perPage" class="form-select" style="width: 110px;">
+                    <label class="col-12 col-sm-6 col-md-6"
+                           style="width: 120px;">
+                        <select wire:model="perPage" class="form-select"
+                                style="width: 110px;">
                             @foreach($perPageValues as $value)
                                 <option value="{{$value}}">
                                     @if($value == 0)
@@ -18,7 +20,9 @@
                     </label>
                 </div>
                 <span
-                    style="padding-top: 8px;padding-left: 6px;">{{ trans('livewire-powergrid::datatable.labels.results_per_page') }}</span>
+                    style="padding-top: 8px;padding-left: 6px;">
+                    {{ trans('livewire-powergrid::datatable.labels.results_per_page') }}
+                </span>
             </div>
         @endif
         <div>

diff --git a/resources/views/components/frameworks/bootstrap5/header.blade.php b/resources/views/components/frameworks/bootstrap5/header.blade.php
@@ -3,7 +3,7 @@
 
         <div class="col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center">
 
-            @includeIf($exportOption, powerGridThemeRoot().'.export')
+            @include(powerGridThemeRoot().'.export')
 
             @includeIf(powerGridThemeRoot().'.toggle-columns')
 

diff --git a/resources/views/components/frameworks/bootstrap5/multi-select.blade.php b/resources/views/components/frameworks/bootstrap5/multi-select.blade.php
@@ -8,7 +8,9 @@
     <div wire:ignore class="flex @if(!$inline) col-md-6 col-lg-3 @endif" style="max-width: 370px !important;">
 
         @if(!$inline)
-            <label for="input_{{ data_get($multiSelect, 'data_field') }}">{{ data_get($multiSelect, 'label') }}</label>
+            <label for="input_{{ data_get($multiSelect, 'data_field') }}">
+                {{ data_get($multiSelect, 'label') }}
+            </label>
         @endif
         <select data-none-selected-text="{{ trans('livewire-powergrid::datatable.multi_select.select') }}"
                 multiple
@@ -19,26 +21,12 @@ class="power_grid_select select_picker_{{ data_get($multiSelect, 'data_field') }
 
             <option value="">{{ trans('livewire-powergrid::datatable.multi_select.all') }}</option>
             @foreach(data_get($multiSelect, 'data_source') as $relation)
-                <option value="{{ data_get($relation, 'id') }}">{{ $relation[data_get($multiSelect, 'display_field')] }}</option>
+                <option value="{{ data_get($relation, 'id') }}">
+                    {{ $relation[data_get($multiSelect, 'display_field')] }}
+                </option>
             @endforeach
         </select>
     </div>
-    <style>
-        .dropdown-toggle, .dropdown-item {
-            padding-left: 15px;
-            font-size: 0.85rem;
-            color: #454444;
-            padding-top: 8px;
-            padding-bottom: 8px;
-            display: inline-block;
-            vertical-align: middle;
-            line-height: normal;
-        }
-        .bootstrap-select {
-            padding-left: 0 !important;
-        }
-    </style>
-
     @push('power_grid_scripts')
         <script>
             $(function () {

diff --git a/resources/views/components/frameworks/bootstrap5/styles.blade.php b/resources/views/components/frameworks/bootstrap5/styles.blade.php
@@ -1 +1,16 @@
 <link rel="stylesheet" href="{{ config('livewire-powergrid.plugins.bootstrap-select.css') }}" crossorigin="anonymous"/>
+<style>
+    .dropdown-toggle, .dropdown-item {
+        padding-left: 15px;
+        font-size: 0.85rem;
+        color: #454444;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        display: inline-block;
+        vertical-align: middle;
+        line-height: normal;
+    }
+    .bootstrap-select {
+        padding-left: 0 !important;
+    }
+</style>
diff --git a/resources/views/components/frameworks/bootstrap5/toggle-columns.blade.php b/resources/views/components/frameworks/bootstrap5/toggle-columns.blade.php
@@ -1,15 +1,18 @@
 <div>
     @if($toggleColumns)
         <div class="btn-group ps-2">
-            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
+            <button class="btn btn-secondary btn-sm dropdown-toggle"
+                    type="button"
+                    data-bs-toggle="dropdown"
                     aria-expanded="false">
                     <span>
                    <x-livewire-powergrid::icons.eye-off width="20"/>
                 </span>
             </button>
             <ul class="dropdown-menu">
                 @foreach($columns as $column)
-                    <li @click="window.livewire.emit('eventToggleColumn', '{{ $column->field }}')">
+                    <li wire:click="$emit('eventToggleColumn', '{{ $column->field }}')"
+                        wire:key="toggle-column-{{ $column->field }}">
                         <a class="dropdown-item" href="#">
                             @if($column->hidden === false)
                                 <x-livewire-powergrid::icons.eye width="20"/>

diff --git a/resources/views/components/frameworks/bootstrap5/toggleable.blade.php b/resources/views/components/frameworks/bootstrap5/toggleable.blade.php
@@ -1,17 +1,23 @@
-@if($column->toggleable['enabled'] === true)
+@if(data_get($column->toggleable, 'enabled'))
     <div class="form-check form-switch">
         <label>
-            <input onclick="toggle(event)" data-id="{{ $row->id }}" data-field="{{ $field }}" class="form-check-input" type="checkbox" @if($row->$field === 1) checked @endif>
+            <input onclick="toggle(event)"
+                   data-id="{{ $row->id }}"
+                   data-field="{{ $field }}"
+                   class="form-check-input"
+                   type="checkbox" @if($row->$field === 1) checked @endif>
         </label>
     </div>
 @else
     <div class="text-center">
-        @if($row->$field === 0)
-            <div style="padding-top: 0.1em; padding-bottom: 0.1rem" class="badge bg-danger">
+        @if($row->{$field} === 0)
+            <div style="padding-top: 0.1em; padding-bottom: 0.1rem"
+                 class="badge bg-danger">
                 {{ $column->toggleable['default'][1] }}
             </div>
         @else
-            <div style="padding-top: 0.1em; padding-bottom: 0.1rem" class="badge bg-success">
+            <div style="padding-top: 0.1em; padding-bottom: 0.1rem" c
+                 lass="badge bg-success">
                 {{ $column->toggleable['default'][0] }}
             </div>
         @endif

diff --git a/resources/views/components/frameworks/tailwind/header.blade.php b/resources/views/components/frameworks/tailwind/header.blade.php
@@ -12,7 +12,7 @@
 
             @if($exportOption)
                 <div class="mr-2 mt-2 sm:mt-0">
-                    @includeIf(powerGridThemeRoot().'.export')
+                    @include(powerGridThemeRoot().'.export')
                 </div>
             @endif
 

diff --git a/resources/views/components/frameworks/tailwind/toggle-columns.blade.php b/resources/views/components/frameworks/tailwind/toggle-columns.blade.php
@@ -1,5 +1,10 @@
 @if($toggleColumns)
-    <div x-data="toggleColumns()"
+    <div x-data="{
+                open: false,
+                toggleColumn(key) {
+                    window.livewire.emit('eventToggleColumn', key);
+                }
+            }"
          class="mr-0 sm:mr-2 mt-2 sm:mt-0"
          @click.away="open = false">
         <button @click.prevent="open = ! open"
@@ -20,27 +25,19 @@ class="block bg-white-200 text-gray-700 border border-gray-300 rounded py-1.5 px
              class="mt-2 py-2 w-48 bg-white shadow-xl absolute z-10 dark:bg-gray-500">
 
             @foreach($columns as $column)
-                <div @click="window.livewire.emit('eventToggleColumn', '{{ $column->field }}')"
+                <div wire:click="$emit('eventToggleColumn', '{{ $column->field }}')"
+                     wire:key="toggle-column-{{ $column->field }}"
                      class="@if($column->hidden) opacity-40 @endif cursor-pointer flex justify-start block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-black-200 dark:text-gray-200 dark:hover:bg-gray-700">
                     @if(!$column->hidden)
                         <x-livewire-powergrid::icons.eye class="text-gray-500 dark:text-gray-300"/>
                     @else
                         <x-livewire-powergrid::icons.eye-off class="text-gray-500 dark:text-gray-300"/>
                     @endif
-
-                    <div class="ml-2"> {{ $column->title }}</div>
+                    <div class="ml-2">
+                        {{ $column->title }}
+                    </div>
                 </div>
             @endforeach
         </div>
     </div>
-    <script>
-        function toggleColumns() {
-            return {
-                open: false,
-                toggleColumn(key) {
-                    window.livewire.emit('eventToggleColumn', key);
-                }
-            }
-        }
-    </script>
 @endif
diff --git a/resources/views/components/frameworks/tailwind/toggleable.blade.php b/resources/views/components/frameworks/tailwind/toggleable.blade.php
@@ -1,19 +1,19 @@
 <div>
     @if(data_get($column->toggleable, 'enabled'))
         <div class="flex justify-center"
-             x-data="{ toggle: {{ $row->{$field} }} }">
+             x-data="{ toggle: {{ $row->{$column->field} }} }">
             <div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
                  :class="[toggle === 1 ? 'bg-green-400' : 'bg-gray-400']">
                 <label
                     class="absolute left-0 bg-white border-2 mb-2 w-6 h-6 rounded-full transition transform duration-100 ease-linear cursor-pointer"
                     :class="[toggle === 1 ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400']"></label>
                 <input type="checkbox"
                        class="appearance-none w-full h-full active:outline-none focus:outline-none"
-                       @click="saveToggleableInput((toggle === 0 ? toggle = 1 : toggle = 0), {{ $row->{$primaryKey} }}, '{{ $field }}')">
+                       @click="saveToggleableInput((toggle === 0 ? toggle = 1 : toggle = 0), {{ $row->{$primaryKey} }}, '{{ $column->field }}')">
             </div>
             @else
                 <div class="flex flex-row justify-center">
-                    @if($row->{$field} === 0)
+                    @if($row->{$column->field} === 0)
                         <div class="text-xs px-4 w-auto py-1 text-center bg-blue-200 text-blue-800 rounded-md">
                             {{ $column->toggleable['default'][1] }}
                         </div>

diff --git a/resources/views/components/row.blade.php b/resources/views/components/row.blade.php
@@ -6,9 +6,6 @@
 ])
 <div>
     @foreach($columns as $column)
-        @php
-            $field = $column->field;
-        @endphp
         @if($column->hidden === false)
             <td class="{{ $theme->table->tdBodyClass . ' '.$column->bodyClass ?? '' }}"
                 style=" {{ $theme->table->tdBodyStyle . ' '.$column->bodyStyle ?? '' }}"
@@ -19,11 +16,11 @@
                             :primaryKey="$primaryKey"
                             :row="$row"
                             :theme="$theme->editable"
-                            :field="$field"/>
+                            :field="$column->dataField != '' ? $column->dataField : $column->field"/>
 
                         <x-livewire-powergrid::click-to-copy
                             :row="$row"
-                            :field="$row->{$field}"
+                            :field="$row->{$column->field}"
                             :label="$column->click_to_copy['label'] ?? null"
                             :enabled="$column->click_to_copy['enabled'] ?? false"/>
                     </span>
@@ -33,11 +30,11 @@
                 @else
                     <span class="flex justify-between">
                     <div>
-                        {!! $row->{$field} !!}
+                        {!! $row->{$column->field} !!}
                     </div>
                     <x-livewire-powergrid::click-to-copy
                         :row="$row"
-                        :field="$row->{$field}"
+                        :field="$row->{$column->field}"
                         :label="data_get($column->clickToCopy, 'label') ?? null"
                         :enabled="data_get($column->clickToCopy, 'enabled') ?? false"/>
                 </span>

diff --git a/src/Column.php b/src/Column.php
@@ -214,11 +214,13 @@ public function makeInputDatePicker(string $dataField, array $settings = [], str
      * Adds Edit on click to a column
      *
      * @param bool $hasPermission
+     * @param string $dataField
      * @return Column
      */
-    public function editOnClick(bool $hasPermission = true): Column
+    public function editOnClick(bool $hasPermission = true, string $dataField = ''): Column
     {
-        $this->editable = $hasPermission;
+        $this->editable  = $hasPermission;
+        $this->dataField = $dataField;
 
         return $this;
     }

diff --git a/src/Jobs/ExportJob.php b/src/Jobs/ExportJob.php
@@ -35,7 +35,7 @@ public function __construct(
         $this->offset   = data_get($params, 'offset');
         $this->limit    = data_get($params, 'limit');
 
-        /** @var PowerGridComponent componentTable */
+        /** @var PowerGridComponent $componentTable */
         $this->componentTable = new $componentTable();
     }
 
@@ -49,6 +49,8 @@ public function handle()
             ->limit($this->limit)
             ->get();
 
+        dd($query);
+
         return (new $this->type())
             ->fileName($this->getFilename())
             ->setData($this->columns, $this->transform($query))

diff --git a/src/PowerGridComponent.php b/src/PowerGridComponent.php
@@ -340,8 +340,13 @@ public function fillData()
                     ->setFilters($this->filters)
                     ->filterContains()
                     ->filter();
-            })->orderByRaw("$this->sortField+0 $this->sortDirection")
-            ->orderBy($this->sortField, $this->sortDirection);
+            });
+
+        if ($this->withSortStringNumber) {
+            $results->orderByRaw("$this->sortField+0 $this->sortDirection");
+        }
+
+        $results = $results->orderBy($this->sortField, $this->sortDirection);
 
         if ($this->perPage > 0) {
             $results = $results->paginate($this->perPage);
@@ -366,7 +371,7 @@ private function instanceOfCollection($datasource): void
         }
     }
 
-    private function transform($results)
+    private function transform($results): \Illuminate\Database\Eloquent\Collection
     {
         if (is_a($this->addColumns(), PowerGridCollection::class)
             || is_a($this->addColumns(), PowerGridEloquent::class)
@@ -385,19 +390,24 @@ private function transform($results)
         return $results;
     }
 
-    public function updatedPage()
+    public function updatedPage(): void
     {
         $this->checkboxAll = false;
     }
 
+    /**
+     * @throws InvalidArgumentException
+     */
     public function toggleColumn($field): void
     {
         $this->columns = collect($this->columns)->map(function ($column) use ($field) {
             if (data_get($column, 'field') === $field) {
-                $column['hidden'] = !data_get($column, 'hidden');
+                data_set($column, 'hidden', !data_get($column, 'hidden'));
             }
 
             return (object) $column;
         })->toArray();
+
+        $this->fillData();
     }
 }
diff --git a/src/Services/Spout/ExportToXLS.php b/src/Services/Spout/ExportToXLS.php
@@ -7,10 +7,11 @@
 use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
 use PowerComponents\LivewirePowerGrid\Services\Contracts\ExportInterface;
 use PowerComponents\LivewirePowerGrid\Services\Export;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
 
 class ExportToXLS extends Export implements ExportInterface
 {
-    public function download()
+    public function download(): BinaryFileResponse
     {
         $this->build();