Skip to content

Commit

Permalink
Merge pull request #4 from starfolksoftware/feat/overridable-filter-l…
Browse files Browse the repository at this point in the history 
…ogic

chore: enhanced table view
  • Loading branch information
@frknasir
frknasir authored May 2, 2022
2 parents 8980e54 + 4810ed7 commit a2e5a3f
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 20 deletions.
63 changes: 44 additions & 19 deletions resources/views/tile.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,20 @@
<div class="relative col-start-1 row-start-1 py-4">
<div class="max-w-7xl mx-auto flex space-x-6 divide-x divide-gray-200 text-sm px-4 sm:px-6 lg:px-8">
<div>
<button @click="open = ! open" type="button" class="group text-gray-700 font-medium flex items-center" aria-controls="disclosure-1" aria-expanded="false">
<button @click="open = ! open; $refs.disclosure.classList.remove('hidden')" type="button" class="group text-gray-700 font-medium flex items-center" aria-controls="disclosure-1" aria-expanded="false">
<!-- Heroicon name: solid/filter -->
<svg class="flex-none w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
</svg>
{{ $this->filter_count }} Filters
</button>
</div>
<!-- <div class="pl-6">
<a class="text-gray-500">Clear all</a>
</div> -->
<div wire:loading.inline wire:target="state" class="pl-6">
Loading...
</div>
</div>
</div>
<div x-show="open" x-transition class="h-56 overflow-y-auto border-t border-gray-200 py-10" id="disclosure-1">
<div x-show="open" x-transition x-ref="disclosure" class="hidden h-56 overflow-y-auto border-t border-gray-200 py-10" id="disclosure-1">
<div class="relative max-w-7xl mx-auto gap-x-4 px-4 text-sm sm:px-6 md:gap-x-6 lg:px-8">
<div class="flex justify-evenly">
@foreach ($table->availableFilters as $filterKey => $filter)
Expand Down Expand Up @@ -66,20 +66,21 @@
</div>
</section>
<div class="px-4 h-full overflow-auto">
<div class="flex flex-col mb-16">
<div class="flex flex-col mb-40">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle">
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5">
<table class="min-w-full divide-y divide-gray-300">
<div class="">
<table wire:loading.remove wire:target="state" class="min-w-full divide-y divide-gray-300">
<thead class="bg-gray-50">
<tr>
@foreach($table->columns as $column)
@if ($loop->first)
<th scope="col" class="py-4 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
{{ $column['label'] }}
</th>
@else
<th scope="col" class="px-3 py-4 text-left text-sm font-semibold text-gray-900">
@endif
@if ($loop->last)
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
{{ $column['label'] }}
</th>
@endif
Expand All @@ -89,17 +90,20 @@
<tbody class="divide-y divide-gray-200 bg-white">
@foreach($table->rows as $row)
<tr class="odd:bg-white even:bg-gray-100">
@foreach($table->columns as $columnKey => $columnValue)
@if ($loop->first)
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
{{ $row[$columnKey] }}
<td class="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
{{ collect($row)->first() }}
<dl class="font-normal">
@foreach($table->columns as $columnKey => $columnValue)
@if (!$loop->last)
<dt class="sr-only">{{ $columnValue['label'] }}</dt>
<dd class="mt-1 truncate text-gray-700">{{ $row[$columnKey] }}</dd>
@endif
@endforeach
</dl>
</td>
@else
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
{{ $row[$columnKey] }}
<td class="px-3 py-4 text-sm text-gray-500">
{{ collect($row)->last() }}
</td>
@endif
@endforeach
</tr>
@endforeach
</tbody>
Expand All @@ -108,6 +112,27 @@
</div>
</div>
</div>
<div wire:loading wire:target="state" class="relative w-full flex flex-col justify-center text-center">
<svg class="w-16 h-16 ml-auto mr-auto" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
<style>
@keyframes loader9 {
0% {
transform: translateY(0)
}
to {
transform: translateY(-6px);
fill: #0a0a30
}
}
</style>
<path stroke="#0A0A30" stroke-linecap="round" stroke-width="1.5" d="M10 15.749h4" />
<path fill="#265BFF" d="M10.5 12h3v3h-3z" style="animation:loader9 1s cubic-bezier(.72,.08,.38,.87) alternate infinite both" />
</svg>
<span class="text-base text-gray-400 italic">
Updating data...
</span>
</div>
</div>
</div>
</x-dashboard-tile>
2 changes: 1 addition & 1 deletion src/DefaultTable.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ protected function getRows()
{
$faker = \Faker\Factory::create();

return collect(range(1, 100))->map(function ($i) use ($faker) {
return collect(range(1, 1000))->map(function ($i) use ($faker) {
return [
'name' => $faker->name,
'email' => $faker->email,
Expand Down
39 changes: 39 additions & 0 deletions src/TableTileComponent.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,21 @@ class TableTileComponent extends Component
*/
public int $refreshIntervalInSeconds;

/**
* The table instance.
*
* @var mixed
*/
protected $table;

/**
* Mounts the component
*
* @param string $position
* @param string $tableClass
* @param int $refreshIntervalInSeconds
* @return void
*/
public function mount(
string $position,
string $tableClass = null,
Expand All @@ -54,14 +68,39 @@ public function mount(
$this->state['filters'] = collect($table->availableFilters)->mapWithKeys(function ($filter, $key) {
return [$key => []];
})->toArray();

$this->table = new $this->tableClass(
$this->state['filters'],
$this->state['query'],
);
}

/**
* Calculates current filters count.
*
* @return int
*/
public function getFilterCountProperty()
{
return collect($this->state['filters'])->map(function ($filter) {
return count($filter);
})->sum();
}

/**
* Runs when the filters are updated.
*
* @param mixed $value
* @param mixed $key
* @return void
*/
public function updatedState($value, $key)
{
$this->table = new $this->tableClass(
$this->state['filters'],
$this->state['query'],
);
}

public function render()
{
Expand Down

0 comments on commit a2e5a3f

Please sign in to comment.