Skip to content

Commit f1acb49

Browse files
SimonBarrettACTSimonBarrettACT
committed
🐛 fix issue with query builder view
1 parent 8d8fd5c commit f1acb49

3 files changed

Lines changed: 224 additions & 4 deletions

File tree

‎resources/views/query-table.blade.php‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22

33
@includeIf($this->headerView())
44

5-
@if($this->availableColumns())
6-
@include('query-builder::report-editor')
7-
@endif
8-
95
@if($this->columns())
106

117
<div class="my-6">

‎resources/views/report-table.blade.php‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<div>
2+
3+
@includeIf($this->headerView())
4+
5+
@if($this->availableColumns())
6+
@include('query-builder::report-editor')
7+
@endif
8+
9+
@if($this->columns())
10+
11+
<div class="my-6">
12+
@if ($this->showQueryBuilder())
13+
<div class="m-4">
14+
@include('query-builder::editor')
15+
16+
@if(! $this->rows->count())
17+
<div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
18+
role="alert">
19+
<span class="font-bold">No records found have been found.</span> Try changing your query
20+
settings.
21+
</div>
22+
@endif
23+
</div>
24+
@endif
25+
26+
@if($this->isToolbarVisible())
27+
<div class="p-4 flex items-center gap-2 justify-between bg-gray-50">
28+
29+
<div class="p-4 flex items-center gap-2">
30+
@if($this->isSearchVisible())
31+
@include('query-builder::components.search')
32+
@endif
33+
</div>
34+
35+
<div class="p-4 flex items-center gap-2">
36+
37+
@if($this->areActionsVisible())
38+
@include('query-builder::components.actions')
39+
@endif
40+
41+
@if($this->isColumnSelectorVisible())
42+
@include('query-builder::components.columns-selector')
43+
@endif
44+
45+
@if($this->isRowSelectorVisible())
46+
@include('query-builder::components.rows-selector')
47+
@endif
48+
</div>
49+
</div>
50+
@endif
51+
52+
@if($this->rows->count())
53+
54+
<div id="{{ $this->identifier() }}" class="relative overflow-x-auto">
55+
<table class="w-full text-sm text-left text-gray-500">
56+
<thead class="text-xs text-gray-700 uppercase bg-gray-50">
57+
<tr class="border-y border-gray-200">
58+
59+
@if($selectable)
60+
<th class="p-0">
61+
<div class="pl-6 flex items-center">
62+
<input wire:model.live="selectPage" id="checkbox-select-page" type="checkbox"
63+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
64+
<label for="checkbox-select-page"
65+
class="sr-only ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"></label>
66+
</div>
67+
</th>
68+
@endif
69+
70+
@foreach ($this->columns() as $column)
71+
@if(in_array($column->key, $displayColumns))
72+
<th @if ($column->isSortable()) wire:click="sort('{{ $column->key }}')" @endif>
73+
@if ($column->showHeader)
74+
<div @class([
75+
'flex items-center gap-1 bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 ' . $column->justify,
76+
'cursor-pointer' => $column->isSortable(),
77+
])>
78+
{{ $column->label }}
79+
80+
@if ($sortBy === $column->key)
81+
@if ($sortDirection === 'asc')
82+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
83+
viewBox="0 0 20 20"
84+
fill="currentColor">
85+
<path fill-rule="evenodd"
86+
d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
87+
clip-rule="evenodd"/>
88+
</svg>
89+
@else
90+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
91+
viewBox="0 0 20 20"
92+
fill="currentColor">
93+
<path fill-rule="evenodd"
94+
d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
95+
clip-rule="evenodd"/>
96+
</svg>
97+
@endif
98+
@endif
99+
100+
@if($this->isSearchableIconVisible() && $column->isSearchable())
101+
<x-tabler-search class="w-4 h-4 text-gray-300"/>
102+
@endif
103+
104+
</div>
105+
@endif
106+
</th>
107+
@endif
108+
@endforeach
109+
</tr>
110+
</thead>
111+
<tbody @if($this->useLoadingIndicator()) wire:loading.class="{{ $this->loadingClass }}" @endif>
112+
@if($selectable && $selectPage && $this->rows->count() < $this->rows->total())
113+
<tr class="bg-gray-100" wire:key="row-message">
114+
<td colspan="{{ count($displayColumns) + 1 }}" class="px-6 py-4">
115+
@unless($selectAll)
116+
<div>
117+
<span>You have selected <span
118+
class="font-bold">{{ count($selectedRows) }} {{ Str::of('row')->plural(count($selectedRows)) }}</span>. Do you want to select all {{ $this->rows->total() }}?</span>
119+
<button wire:click="selectAll"
120+
class="ml-2 text-blue-500 hover:text-blue-600">
121+
Select all
122+
</button>
123+
</div>
124+
@else
125+
<span>You have selected all {{ $this->rows->total() }} {{ Str::of('row')->plural(count($selectedRows)) }}.</span>
126+
@endif
127+
</td>
128+
</tr>
129+
@endif
130+
@foreach ($this->rows as $row)
131+
132+
@if($this->rowPreview($row))
133+
{!! $this->injectRow($row) !!}
134+
@endif
135+
136+
<tr @if($this->isClickable())
137+
{!! $this->renderRowClick($row->id) !!}
138+
@endif
139+
wire:key="row-{{ $row->id }}"
140+
@class([
141+
'bg-white border-b',
142+
'hover:bg-gray-50 cursor-pointer' => $this->isClickable(),
143+
])>
144+
145+
@if($selectable)
146+
<td class="p-0">
147+
<div class="pl-6 flex items-center">
148+
<input wire:model.live="selectedRows" id="checkbox-{{ $row->id }}"
149+
type="checkbox"
150+
value="{{ $row->id }}"
151+
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
152+
<label for="checkbox-{{ $row->id }}"
153+
class="sr-only ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"></label>
154+
</div>
155+
</td>
156+
@endif
157+
158+
@foreach ($this->columns() as $column)
159+
@if(in_array($column->key, $displayColumns))
160+
<td>
161+
<div class="py-3 px-6 flex items-center">
162+
<x-dynamic-component
163+
:component="$column->component"
164+
:value="$column->getValue($row)"
165+
:column="$column"
166+
:row="$row"
167+
>
168+
</x-dynamic-component>
169+
</div>
170+
</td>
171+
@endif
172+
@endforeach
173+
</tr>
174+
@endforeach
175+
</tbody>
176+
</table>
177+
</div>
178+
179+
@if($this->isPaginated() && $this->rows->hasPages())
180+
<div class="border-b border-gray-200 shadow-sm">
181+
@if($this->scroll() === true)
182+
<div class="py-2 px-6">{{ $this->rows->links() }}</div>
183+
@else
184+
<div class="py-2 px-6">{{ $this->rows->links(data: ['scrollTo' => $this->scroll()]) }}</div>
185+
@endif
186+
</div>
187+
@endif
188+
@endif
189+
190+
@if($this->useLoadingIndicator())
191+
{{-- Table loading spinners... --}}
192+
<div
193+
wire:loading
194+
class="absolute inset-0 bg-white {{ $this->loadingClass() }}"
195+
>
196+
{{-- --}}
197+
</div>
198+
199+
<div
200+
wire:loading.flex
201+
class="flex justify-center items-center absolute inset-0"
202+
>
203+
<svg class="animate-spin h-10 w-10 {{ $this->spinnerColor() }}" xmlns="http://www.w3.org/2000/svg"
204+
fill="none" viewBox="0 0 24 24">
205+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
206+
stroke-width="4"></circle>
207+
<path class="opacity-75" fill="currentColor"
208+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
209+
</svg>
210+
</div>
211+
@endif
212+
213+
214+
</div>
215+
216+
@includeIf($this->footerView())
217+
@endif
218+
</div>

‎src/ReportBuilder.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,17 @@
55
namespace ACTTraining\QueryBuilder;
66

77
use ACTTraining\QueryBuilder\Support\Concerns\WithReportBuilder;
8+
use Illuminate\Contracts\View\Factory;
9+
use Illuminate\Contracts\View\View;
810

911
abstract class ReportBuilder extends QueryBuilder
1012
{
1113
use WithReportBuilder;
1214

1315
public bool $selectable = false;
1416

17+
public function render(): Factory|View
18+
{
19+
return view('query-builder::report-table');
20+
}
1521
}

0 commit comments

Comments
 (0)