Merge pull request #111 from Gustavinho/release/2.3.0-pr

Gustavinho · web-flow · commit 6449522bf2fd · 2021-05-29T21:21:44.000-05:00
Release/2.3.0 pr
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "bladeFormatter.format.indentSize": 2,
+    "bladeFormatter.format.wrapAttributes": "force"
+}
diff --git a/doc/list-view.md b/doc/list-view.md
@@ -10,6 +10,7 @@ This view creates a dynamic list view with filters, pagination, search input, an
 - [Defining initial data](#defining-initial-data)
 - [Defining data for each list item](#defining-data-for-each-list-item)
 - [Customizing the list item component](#customizing-the-list-item-component)
+- [Sorting Data](#sorting-data)
 - [More features](#more-features)
   - [Searching data](./table-view.md#searching-data)
   - [Pagination](./table-view.md#pagination)
@@ -96,6 +97,21 @@ Don't forget to include the actions for each list item, there is a component out
 </div>
 ```
 
+## Sorting Data
+You can provide your list view with a sorting drop down by overriding the sortablyBy function on your list view. You may assign the $sortBy property to choose the column that the list view is sorted by when the page first loads.
+
+```php
+public $sortBy = 'name';
+
+public function sortableBy()
+    {
+        return [
+            'Name' => 'name',
+            'Email' => 'email'
+        ];
+    }
+```
+
 ## More features
 This list view is based on a table view, so you could use some of the table view features as:
 
diff --git a/resources/views/components/actions/actions.blade.php b/resources/views/components/actions/actions.blade.php
@@ -3,7 +3,7 @@
 <div>
   @if (count($actions))
     {{-- Mobile actions dropdown --}}
-    <div class="lg:hidden">
+    <div class="lg:hidden text-right relative">
       <x-lv-drop-down>
         <x-slot name="trigger">
           <x-lv-icon-button icon="more-horizontal" size="sm" />
diff --git a/resources/views/components/actions/drop-down.blade.php b/resources/views/components/actions/drop-down.blade.php
diff --git a/resources/views/components/buttons/select.blade.php b/resources/views/components/buttons/select.blade.php
@@ -0,0 +1,18 @@
+{{-- components.buttons.select
+
+Renders a button like a select dropdown. Most likely used in conjunction with the components.drop-down
+You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIRE DIRECTIVES,
+it is using the variant helper to get the styles for each variant
+it could be primary, primary-light
+
+You can customize the variants classes in config/laravel-views.php
+
+props
+ - icon --}}
+@props(['icon' => 'chevron-down'])
+<button
+  class="border border-transparent hover:border-gray-300 focus:border-gray-300 focus:outline-none flex items-center gap-1 text-xs px-3 py-2 rounded hover:shadow-sm font-medium"
+>
+  {{ $slot }}
+  <i data-feather="{{ $icon }}" class="w-4 h-4"></i>
+</button>
diff --git a/resources/views/components/drop-down.blade.php b/resources/views/components/drop-down.blade.php
@@ -3,16 +3,14 @@
 Renders the a dropdown button with its different variants
 You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIRE DIRECTIVES,
 
-props:
- - $title
- - $varian
- - $slot
+- slots:
+ - trigger
+--}}
 
-UI components used:
- - button --}}
+@props(['dropDownWidth' => 64])
 
 <div
-  class="text-right relative"
+  class="relative"
   x-data="{ open: false }"
 >
   @isset($trigger)
@@ -29,7 +27,7 @@ class="text-right relative"
   @endisset
 
   <div
-    class="bg-white shadow-lg rounded absolute top-8 right-0 w-64 border text-left z-10"
+    class="bg-white shadow-lg rounded absolute top-8 right-0 border text-left z-10 w-{{ isset($dropDownWidth) ? $dropDownWidth : 'full' }}"
     x-show.transition="open"
     @click.away="open = false"
     x-cloak
diff --git a/resources/views/components/filters/boolean-filter.blade.php b/resources/views/components/filters/boolean-filter.blade.php
@@ -1,5 +1,4 @@
-{{-- table-view.boolean.blade
-
+{{-- components.filters.boolean.blade
 Renders the input radius for the boolean filter
 You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIERE DIRECTIVES
 --}}
diff --git a/resources/views/components/filters/date-filter.blade.php b/resources/views/components/filters/date-filter.blade.php
@@ -1,4 +1,4 @@
-{{-- table-view.date.blade
+{{-- components.filters.date.blade
 
 Renders the datepicker for the date filter
 To customize it you should shange the UI component used, YOU SHOULD NOT CUSTOMIZE ANYHING HERE
diff --git a/resources/views/components/filters/select-filter.blade.php b/resources/views/components/filters/select-filter.blade.php
@@ -1,4 +1,4 @@
-{{-- table-view.select.blade
+{{-- components.filters.select.blade
 
 Renders the dropdown for the select filter
 To customize it you should shange the UI component used, YOU SHOULD NOT CUSTOMIZE ANYHING HERE
diff --git a/resources/views/components/form/input-group.blade.php b/resources/views/components/form/input-group.blade.php
@@ -1,4 +1,4 @@
-{{-- table-view.select.blade
+{{-- components.form.input-group.blade
 
 Renders a input group component
 You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIERE DIRECTIVES
diff --git a/resources/views/components/toolbar/filters.blade.php b/resources/views/components/toolbar/filters.blade.php
@@ -0,0 +1,35 @@
+{{-- Filters dropdown --}}
+@if (isset($filtersViews) && $filtersViews)
+  <x-lv-drop-down :dropDownWidth="64">
+    @slot('trigger')
+      <x-lv-select-button>
+        Filters
+      </x-lv-select-button>
+    @endslot
+    {{-- Each filter view --}}
+    @foreach ($filtersViews as $filter)
+      {{-- Filter title --}}
+      <div class="border-b border-t border-gray-200 bg-gray-100 text-xs font-semibold uppercase text-left px-4 py-2 mb-4">
+        {{ $filter->getTitle() }}
+      </div>
+      <div class="px-4">
+        {{-- Filter view --}}
+        @include('laravel-views::components.filters.' . $filter->view, [
+          'view' => $filter,
+          'filter' => $filter,
+        ])
+      </div>
+    @endforeach
+
+    @if (count($filters) > 0)
+      {{-- Clear filters button --}}
+      <div class="p-4 bg-gray-100 text-right flex justify-end">
+        <a wire:click="clearFilters" @click="open = false" href="#"
+          class="text-gray-600 flex items-center hover:text-gray-700">
+          <i data-feather="x-circle" class="mr-2 w-5 h-5"></i>
+          Clear filters
+        </a>
+      </div>
+    @endif
+    </x-lv-drop-down>
+@endif
diff --git a/resources/views/components/toolbar/search.blade.php b/resources/views/components/toolbar/search.blade.php
@@ -0,0 +1,9 @@
+@if ($searchBy)
+  @component('laravel-views::components.form.input-group', [
+    'placeholder' => 'Search',
+    'model' => 'search',
+    'onClick' => 'clearSearch',
+    'icon' => $search ? 'x-circle' : 'search',
+    ])
+  @endcomponent
+@endif
diff --git a/resources/views/components/toolbar/sorting.blade.php b/resources/views/components/toolbar/sorting.blade.php
@@ -0,0 +1,37 @@
+{{-- list-view.sorting.blade
+
+Renders the dropdown for the sorting select
+To customize it you should shange the UI component used, YOU SHOULD NOT CUSTOMIZE ANYHING HERE
+UI components used:
+  - form/select --}}
+<div class="leading-tight">
+  {{-- Sorting dropdown --}}
+  <x-lv-drop-down :dropDownWidth="64">
+    <x-slot name="trigger">
+      <x-lv-select-button>
+        {{ __('Sort By') }}@if ($sortableByName = $sortableBy->flip()->get($sortBy)):
+          {{-- <i data-feather="arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}" class="h-4 w-4"></i> --}}
+          {{ $sortableByName }}
+        @endif
+      </x-lv-select-button>
+    </x-slot>
+    {{-- Each sortable item --}}
+    <div class="border-b border-t border-gray-200 bg-gray-100 text-xs font-semibold uppercase text-left px-4 py-2">
+      {{ __('Sort By') }}
+    </div>
+    @foreach ($sortableBy as $title => $column)
+      <a href="#!"
+        wire:click.prevent="sort('{{ $column }}')"
+        title="{{ __('Sort by') }} {{ $title }} {{ __($sortOrder == 'asc' ? 'descending' : 'ascending') }}"
+        class="group flex items-center px-4 py-2 hover:bg-gray-100 hover:text-gray-900 text-sm gap-3">
+        @if ($sortBy === $column)
+          <i data-feather="arrow-{{ $sortOrder === 'asc' ? 'up' : 'down' }}"
+            class="text-gray-900 h-4 w-4"></i>
+        @else
+          <i class="text-gray-900 h-4 w-4"></i>
+        @endif
+        {{ $title }}
+      </a>
+    @endforeach
+  </x-lv-drop-down>
+</div>
diff --git a/resources/views/components/toolbar/toolbar.blade.php b/resources/views/components/toolbar/toolbar.blade.php
@@ -0,0 +1,29 @@
+{{-- list-view.filters.blade
+
+Renders the search input and the filters dropdown
+You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIERE DIRECTIVES
+UI components used:
+  - form/input-group
+  - dropdown --}}
+
+<div class="md:flex items-center">
+  {{-- Search input --}}
+  <div class="flex-1">
+    @include('laravel-views::components.toolbar.search')
+  </div>
+
+  {{-- Actions on the left --}}
+  <div class="flex gap-2 flex-1 justify-end items-center mb-4">
+    {{-- Sorting --}}
+    @if (isset($sortableBy) && $sortableBy->isNotEmpty())
+      <div>
+        @include('laravel-views::components.toolbar.sorting')
+      </div>
+    @endif
+
+    {{-- Filters --}}
+    <div>
+      @include('laravel-views::components.toolbar.filters')
+    </div>
+  </div>
+</div>
diff --git a/resources/views/grid-view/grid-view.blade.php b/resources/views/grid-view/grid-view.blade.php
@@ -10,7 +10,7 @@
 <x-lv-layout>
   {{-- Search input and filters --}}
   <div class="mb-2">
-    @include('laravel-views::table-view.filters')
+    @include('laravel-views::components.toolbar.toolbar')
   </div>
 
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-{{ $maxCols }} gap-8 md:gap-8">
diff --git a/resources/views/list-view/list-view.blade.php b/resources/views/list-view/list-view.blade.php
@@ -1,7 +1,7 @@
 <x-lv-layout>
   {{-- Search input and filters --}}
   <div class="px-4">
-    @include('laravel-views::table-view.filters')
+    @include('laravel-views::components.toolbar.toolbar')
   </div>
 
   <div>
diff --git a/resources/views/table-view/filters.blade.php b/resources/views/table-view/filters.blade.php
@@ -8,50 +8,10 @@
 
 <div class="flex justify-end">
   {{-- Search input --}}
-  @if ($searchBy)
-    <div class="flex-1">
-      @component('laravel-views::components.form.input-group', [
-        'placeholder' => 'Search',
-        'model' => 'search',
-        'onClick' => 'clearSearch',
-        'icon' => $search ? 'x-circle' : 'search'
-      ])
-      @endcomponent
-    </div>
-  @endif
+  @include('laravel-views::components.filters.search')
 
-  <div class="lg:flex-1 ml-4 lg:ml-0">
-    {{-- Filters dropdown --}}
-    @if (isset($filtersViews) && $filtersViews)
-    @component('laravel-views::components.drop-down')
-      @slot('trigger')
-        <x-lv-icon-button icon="filter" />
-      @endslot
-      {{-- Each filter view --}}
-      @foreach ($filtersViews as $filter)
-        {{-- Filter title --}}
-        <div class="border-b border-t border-gray-200 bg-gray-100 text-xs font-semibold uppercase text-left px-4 py-2 mb-4">
-          {{ $filter->getTitle() }}
-        </div>
-        <div class="px-4">
-          {{-- Filter view --}}
-          @include('laravel-views::table-view.' . $filter->view, [
-            'view' => $filter,
-            'filter' => $filter,
-          ])
-        </div>
-      @endforeach
-
-      @if (count($filters) > 0)
-        {{-- Clear filters button --}}
-        <div class="p-4 bg-gray-100 text-right flex justify-end">
-          <a wire:click="clearFilters" @click="open = false" href="#" class="text-gray-600 flex items-center hover:text-gray-700">
-            <i data-feather="x-circle" class="mr-2 w-5 h-5"></i>
-            Clear filters
-          </a>
-        </div>
-      @endif
-    @endcomponent
-    @endif
+  {{-- Filters --}}
+  <div class="lg:flex-1 ml-4 lg:ml-0 text-right">
+    @include('laravel-views::components.filters.filters')
   </div>
 </div>
diff --git a/resources/views/table-view/table-view.blade.php b/resources/views/table-view/table-view.blade.php
@@ -14,7 +14,7 @@
 <x-lv-layout>
   {{-- Search input and filters --}}
   <div class="py-4 px-3 pb-0">
-    @include('laravel-views::table-view.filters')
+    @include('laravel-views::components.toolbar.toolbar')
   </div>
 
   @if (count($items))
diff --git a/resources/views/view/layout.blade.php b/resources/views/view/layout.blade.php
@@ -1,5 +1,6 @@
-<div class="min-h-screen">
+<div class="">
   {{-- Success/Error feedback --}}
   <x-lv-alerts-handler />
+
   {{ $slot }}
 </div>
diff --git a/src/Filters/BaseFilter.php b/src/Filters/BaseFilter.php
@@ -8,6 +8,7 @@
 class BaseFilter
 {
     protected $title;
+    public $defaultValue;
     public $id;
 
     public function __construct()
diff --git a/src/LaravelViews.php b/src/LaravelViews.php
@@ -16,13 +16,15 @@ public function components()
         // path => name
         return [
             'buttons.icon' => 'icon-button',
+            'buttons.select' => 'select-button',
             'drop-down' => 'drop-down',
             'actions.actions' => 'actions',
             'actions.icon-and-title' => 'actions.icon-and-title',
             'actions.icon' => 'actions.icon',
             'attributes-list' => 'attributes-list',
             'alert' => 'alert',
             'alerts-handler' => 'alerts-handler',
+            'form.input-group' => 'form.input-group',
         ];
     }
 
diff --git a/src/Views/DataView.php b/src/Views/DataView.php
@@ -54,11 +54,27 @@ public function mount(QueryStringData $queryStringData)
     {
         $this->filtersViews = $this->filters();
         $this->search = $queryStringData->getSearchValue($this->search);
+
         $this->filters = $queryStringData->getFilterValues($this->filters);
+
+        $this->applyDefaultFilters();
+
         $this->sortBy = $queryStringData->getValue('sortBy', $this->sortBy);
         $this->sortOrder = $queryStringData->getValue('sortOrder', $this->sortOrder);
     }
 
+    /**
+     * Check if each of the filters has a default value and it's not already set
+     */
+    public function applyDefaultFilters()
+    {
+        foreach ($this->filters() as $filter) {
+            if (empty($this->filters[$filter->id]) && $filter->defaultValue) {
+                $this->filters[$filter->id] = $filter->defaultValue;
+            }
+        }
+    }
+
     /**
      * Collects all data to be passed to the view, this includes the items searched on the database
      * through the filters, this data will be passed to livewire render method
@@ -80,6 +96,7 @@ public function getItems(Searchable $searchable, Filterable $filterable, Sortabl
         $query = $this->repository();
 
         $query = $searchable->searchItems($query, $this->searchBy, $this->search);
+
         $query = $filterable->applyFilters($query, $this->filters(), $this->filters);
         $query = $sortable->sortItems($query, $this->sortBy, $this->sortOrder);
 
diff --git a/src/Views/GridView.php b/src/Views/GridView.php
diff --git a/src/Views/ListView.php b/src/Views/ListView.php
diff --git a/src/Views/Traits/WithSortableDropdown.php b/src/Views/Traits/WithSortableDropdown.php
diff --git a/tests/Feature/TableViewTest.php b/tests/Feature/TableViewTest.php
diff --git a/tests/Mock/MockTableViewWithDefaultFilterValue.php b/tests/Mock/MockTableViewWithDefaultFilterValue.php

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +    "bladeFormatter.format.indentSize": 2,
 +    "bladeFormatter.format.wrapAttributes": "force"
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-{{-- table-view.date.blade`
	`1`	`+{{-- components.filters.date.blade`
`2`	`2`
`3`	`3`	`Renders the datepicker for the date filter`
`4`	`4`	`To customize it you should shange the UI component used, YOU SHOULD NOT CUSTOMIZE ANYHING HERE`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-{{-- table-view.select.blade`
	`1`	`+{{-- components.filters.select.blade`
`2`	`2`
`3`	`3`	`Renders the dropdown for the select filter`
`4`	`4`	`To customize it you should shange the UI component used, YOU SHOULD NOT CUSTOMIZE ANYHING HERE`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-{{-- table-view.select.blade`
	`1`	`+{{-- components.form.input-group.blade`
`2`	`2`
`3`	`3`	`Renders a input group component`
`4`	`4`	`You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIERE DIRECTIVES`