Relation refactor

.gitignore

@@ -5,3 +5,4 @@ vendor
 coverage
 .DS_Store
 .vscode/
+.idea/

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to `livewire-datatables` will be documented in this file
 
-## 1.0.0 - 201X-XX-XX
+## 1.0.0 - 201X-XX-XX ( to be released in the future... )
 
 - initial release
+
+## 0.9.0 ( 2022-03-22 )
+
+- Breaking Change: 'unsortable' has been renamed to 'sortable', which is more intuitive. Please adjust your overwritten views, if any (thyseus).
+

composer.json

@@ -1,9 +1,10 @@
 {
     "name": "mediconesystems/livewire-datatables",
-    "description": "",
+    "description": "Advanced datatables using Laravel, Livewire, Tailwind CSS and Alpine JS",
     "keywords": [
-        "mediconesystems",
-        "livewire-datatables"
+        "php",
+        "laravel",
+        "livewire"
     ],
     "homepage": "https://github.com/mediconesystems/livewire-datatables",
     "license": "MIT",
@@ -13,18 +14,29 @@
             "name": "Mark Salmon",
             "email": "[email protected]",
             "role": "Developer"
+        },
+        {
+            "name": "Shane Burrell",
+            "email": "[email protected]",
+            "role": "Developer"
+        },
+        {
+            "name": "Herbert Maschke",
+            "email": "[email protected]",
+            "role": "Developer"
         }
     ],
     "require": {
-        "php": "^7.2.5|^8.0",
-        "illuminate/support": "^7.0|^8.0",
+        "php": "^8.0",
+        "illuminate/support": "^7.0|^8.0|^9.0",
         "livewire/livewire": "^2.4.4",
-        "maatwebsite/excel": "^3.1"
+        "maatwebsite/excel": "^3.1",
+        "reedware/laravel-relation-joins": "^2.4|^3.0"
     },
     "require-dev": {
         "laravel/legacy-factories": "^1.0.4",
-        "orchestra/testbench": "^4.0|5.0|6.0",
-        "phpunit/phpunit": "^8.0|9.0"
+        "orchestra/testbench": "^4.0|5.0|6.0|^7.0",
+        "phpunit/phpunit": "^8.0|9.0|^9.5.10"
     },
     "autoload": {
         "psr-4": {
@@ -39,7 +51,6 @@
     "scripts": {
         "test": "vendor/bin/phpunit",
         "test-coverage": "vendor/bin/phpunit --coverage-html coverage"
-
     },
     "config": {
         "sort-packages": true

config/livewire-datatables.php

@@ -14,6 +14,23 @@
     'default_time_format' => 'H:i',
     'default_date_format' => 'd/m/Y',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Default Carbon Formats
+    |--------------------------------------------------------------------------
+    | The default formats that are used for TimeColumn & DateColumn.
+    | You can use the formatting characters from the PHP DateTime class.
+    | More info: https://www.php.net/manual/en/datetime.format.php
+    |
+    */
+
+    'default_time_start' => '0000-00-00',
+    'default_time_end' => '9999-12-31',
+
+    // Defaults that work with smalldatetime in SQL Server
+    //  'default_time_start' => '1900-01-01',
+    //  'default_time_end' => '2079-06-06',
+
     /*
     |--------------------------------------------------------------------------
     | Surpress Search Highlights
@@ -56,6 +73,16 @@
 
     'model_namespace' => 'App',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Default Sortable
+    |--------------------------------------------------------------------------
+    | Should a column of a datatable be sortable by default ?
+    |
+    */
+
+    'default_sortable' => true,
+
     /*
     |--------------------------------------------------------------------------
     | Default CSS classes
@@ -72,6 +99,6 @@
             'odd' => 'divide-x divide-gray-100 text-sm text-gray-900 bg-gray-50',
             'selected' => 'divide-x divide-gray-100 text-sm text-gray-900 bg-yellow-100',
         ],
-        'cell' => 'text-sm text-gray-900',
+        'cell' => 'whitespace-no-wrap text-sm text-gray-900 px-6 py-2',
     ],
 ];

resources/views/livewire/datatables/checkbox.blade.php

@@ -1,3 +1,9 @@
 <div class="flex justify-center">
-    <input type="checkbox" wire:model="selected" value="{{ $value }}" class="form-checkbox mt-1 h-4 w-4 text-blue-600 transition duration-150 ease-in-out" />
+    <input
+        type="checkbox"
+        wire:model="selected"
+        value="{{ $value }}"
+        @if (property_exists($this, 'pinnedRecords') && in_array($value, $this->pinnedRecords)) checked @endif
+        class="w-4 h-4 mt-1 text-blue-600 form-checkbox transition duration-150 ease-in-out"
+    />
 </div>

resources/views/livewire/datatables/complex-query.blade.php

@@ -16,58 +16,64 @@
         @endif</span>
     </div>
 
-    @if(count($this->rules[0]['content']))
-        <div class="my-4 px-4 py-2 bg-gray-500 whitespace-pre-wrap @if($errors->any())text-red-200 @else text-green-100 @endif rounded">{{ $this->rulesString }}@if($errors->any()) Invalid rules @endif</div>
-    @endif
+    <div>
+        @if(count($this->rules[0]['content']))
+            <div class="my-4 px-4 py-2 bg-gray-500 whitespace-pre-wrap @if($errors->any())text-red-200 @else text-green-100 @endif rounded">{{ $this->rulesString }}@if($errors->any()) Invalid rules @endif</div>
+        @endif
+    </div>
 
     <div>@include('datatables::complex-query-group', ['rules' => $rules, 'parentIndex' => null])</div>
 
-    @if(count($this->rules[0]['content']))
-        @unless($errors->any())
-            <div class="pt-2 sm:flex w-full justify-between">
-                <div>
-                    {{-- <button class="bg-blue-500 px-3 py-2 rounded text-white" wire:click="runQuery">Apply Query</button> --}}
+    <div>
+        @if(count($this->rules[0]['content']))
+            @unless($errors->any())
+                <div class="pt-2 sm:flex w-full justify-between">
+                    <div>
+                        {{-- <button class="bg-blue-500 px-3 py-2 rounded text-white" wire:click="runQuery">Apply Query</button> --}}
+                    </div>
+                    <div class="mt-2 sm:mt-0 sm:flex sm:space-x-2">
+                        @isset($savedQueries)
+                            <div class="flex items-center space-x-2" x-data="{
+                                name: null,
+                                saveQuery() {
+                                    $wire.call('saveQuery', this.name)
+                                    this.name = null
+                                }
+                            }">
+                                <input x-model="name" wire:loading.attr="disabled" x-on:keydown.enter="saveQuery" placeholder="save as..." class="flex-grow px-3 py-3 border text-sm text-gray-900 leading-4 block rounded-md border-gray-300 shadow-sm focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
+                                <button x-bind:disabled="! name" x-show="rules" x-on:click="saveQuery" class="flex items-center space-x-2 px-3 py-0.5 border border-green-400 disabled:border-gray-300 rounded-md bg-white text-green-500 disabled:text-gray-300 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 disabled:hover:bg-white focus:outline-none disabled:pointer-events-none">
+                                    <span>{{ __('Save') }}</span>
+                                    <span wire:loading.remove><x-icons.check-circle class="m-2" /></span>
+                                    <span wire:loading><x-icons.cog class="animate-spin m-2" /></span>
+                                </button>
+                            </div>
+                        @endisset
+                        <button x-show="rules" wire:click="resetQuery" class="flex items-center space-x-2 px-3 border border-red-400 rounded-md bg-white text-red-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-red-200 focus:outline-none">
+                            <span>{{ __('Reset') }}</span>
+                            <x-icons.x-circle class="m-2" />
+                        </button>
+                    </div>
                 </div>
-                <div class="mt-2 sm:mt-0 sm:flex sm:space-x-2">
-                    @isset($savedQueries)
-                        <div class="flex items-center space-x-2" x-data="{
-                            name: null,
-                            saveQuery() {
-                                $wire.call('saveQuery', this.name)
-                                this.name = null
-                            }
-                        }">
-                            <input x-model="name" wire:loading.attr="disabled" x-on:keydown.enter="saveQuery" placeholder="save as..." class="flex-grow px-3 py-3 border text-sm text-gray-900 leading-4 block rounded-md border-gray-300 shadow-sm focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
-                            <button x-bind:disabled="! name" x-show="rules" x-on:click="saveQuery" class="flex items-center space-x-2 px-3 py-0.5 border border-green-400 disabled:border-gray-300 rounded-md bg-white text-green-500 disabled:text-gray-300 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 disabled:hover:bg-white focus:outline-none disabled:pointer-events-none">
-                                <span>{{ __('Save') }}</span>
-                                <span wire:loading.remove><x-icons.check-circle class="m-2" /></span>
-                                <span wire:loading><x-icons.cog class="animate-spin m-2" /></span>
+            @endif
+        @endif
+    </div>
+
+    <div>
+        @if(count($savedQueries ?? []))
+            <div>
+                <div class="mt-8 my-4 text-xl uppercase tracking-wide font-medium leading-none">Saved Queries</div>
+                <div class="grid md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-2">
+                    @foreach($savedQueries as $saved)
+                        <div class="flex" wire:key="{{ $saved['id'] }}">
+                            <button wire:click="loadRules({{ json_encode($saved['rules']) }})" wire:loading.attr="disabled" class="p-2 flex-grow flex items-center space-x-2 px-3 border border-r-0 border-blue-400 rounded-md rounded-r-none bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">{{ $saved['name'] }}</button>
+                            <button wire:click="deleteRules({{ $saved['id'] }})" wire:loading.attr="disabled" class="p-2 flex items-center space-x-2 px-3 border border-red-400 rounded-md rounded-l-none bg-white text-red-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-red-200 focus:outline-none">
+                                <x-icons.x-circle wire:loading.remove />
+                                <x-icons.cog wire:loading class="h-6 w-6 animate-spin" />
                             </button>
                         </div>
-                    @endisset
-                    <button x-show="rules" wire:click="resetQuery" class="flex items-center space-x-2 px-3 border border-red-400 rounded-md bg-white text-red-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-red-200 focus:outline-none">
-                        <span>{{ __('Reset') }}</span>
-                        <x-icons.x-circle class="m-2" />
-                    </button>
+                    @endforeach
                 </div>
             </div>
         @endif
-
-    @endif
-    @if(count($savedQueries ?? []))
-        <div>
-            <div class="mt-8 my-4 text-xl uppercase tracking-wide font-medium leading-none">Saved Queries</div>
-            <div class="grid md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-2">
-                @foreach($savedQueries as $saved)
-                    <div class="flex" wire:key="{{ $saved['id'] }}">
-                        <button wire:click="loadRules({{ json_encode($saved['rules']) }})" wire:loading.attr="disabled" class="p-2 flex-grow flex items-center space-x-2 px-3 border border-r-0 border-blue-400 rounded-md rounded-r-none bg-white text-blue-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-blue-200 focus:outline-none">{{ $saved['name'] }}</button>
-                        <button wire:click="deleteRules({{ $saved['id'] }})" wire:loading.attr="disabled" class="p-2 flex items-center space-x-2 px-3 border border-red-400 rounded-md rounded-l-none bg-white text-red-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-red-200 focus:outline-none">
-                            <x-icons.x-circle wire:loading.remove />
-                            <x-icons.cog wire:loading class="h-6 w-6 animate-spin" />
-                        </button>
-                    </div>
-                @endforeach
-            </div>
-        </div>
-    @endif
+    </div>
 </div>