Offline indicator

Updated readme

Author: rappasoft

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
-## [1.0.0] - 2021-04-15
+## [1.0.0] - 2021-04-16
 
 - Ground up rebuild, see documentation for usage.
 

README.md

@@ -366,6 +366,7 @@ There are some class level properties you can set:
 | $showSorting | true | Show the sorting pills |
 | $showFilters | true | Show the filter pills |
 | $refresh | false | Whether or not to refresh the table at a certain interval. false = off, int = ms, string = functionCall |
+| $offlineIndicator | true | Shows a red banner when there is no internet connection. |
 
 #### Using more than one table on a page
 

resources/views/bootstrap-4/datatable.blade.php

@@ -2,6 +2,7 @@
     @if (is_numeric($refresh)) wire:poll.{{ $refresh }}ms @elseif(is_string($refresh)) wire:poll="{{ $refresh }}" @endif
     class="container-fluid"
 >
+    @include('livewire-tables::bootstrap-4.includes.offline')
     @include('livewire-tables::bootstrap-4.includes.sorting-pills')
     @include('livewire-tables::bootstrap-4.includes.filter-pills')
 

resources/views/bootstrap-4/includes/offline.blade.php

@@ -0,0 +1,9 @@
+@if ($offlineIndicator)
+    <div wire:offline.class="d-flex align-items-center" wire:offline.class.remove="d-none" class="alert alert-danger d-none">
+        <svg xmlns="http://www.w3.org/2000/svg" style="width:1.3em;height:1.3em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+
+        <span class="d-inline-block ml-2">@lang('You are not connected to the internet.')</span>
+    </div>
+@endif

resources/views/tailwind/datatable.blade.php

@@ -2,6 +2,7 @@
     @if (is_numeric($refresh)) wire:poll.{{ $refresh }}ms @elseif(is_string($refresh)) wire:poll="{{ $refresh }}" @endif
     class="flex-col space-y-4"
 >
+    @include('livewire-tables::tailwind.includes.offline')
     @include('livewire-tables::tailwind.includes.sorting-pills')
     @include('livewire-tables::tailwind.includes.filter-pills')
 

resources/views/tailwind/includes/offline.blade.php

@@ -0,0 +1,16 @@
+@if ($offlineIndicator)
+    <div wire:offline.class="block mb-3" wire:offline.class.remove="hidden">
+        <div class="flex">
+            <div class="flex-shrink-0">
+                <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+                </svg>
+            </div>
+            <div class="ml-3">
+                <h3 class="text-sm font-medium text-red-800">
+                    @lang('You are not connected to the internet.')
+                </h3>
+            </div>
+        </div>
+    </div>
+@endif

src/DataTableComponent.php

@@ -74,6 +74,13 @@ abstract class DataTableComponent extends Component
      */
     public $refresh = false;
 
+    /**
+     * Whether or not to display an offline message when there is no connection.
+     *
+     * @var bool
+     */
+    public $offlineIndicator = true;
+
     /**
      * Name of the page parameter for pagination
      * Good to change the default if you have more than one datatable on a page.