Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save DRN88/4194e8d9a6a592e58989852f974bb588 to your computer and use it in GitHub Desktop.
Save DRN88/4194e8d9a6a592e58989852f974bb588 to your computer and use it in GitHub Desktop.
Laravel AlpineJS Blade template show/hide table row on click event.
//
// This is a blade component which contains 2 <tr> rows. In the first row you click on the product name, the second row should show/hide. (toggle)
// x-cloak will hide <tr> during page load, so it won't "blink".
//
//
@props([
'sku' => null,
'name' => null,
'mpn' => null,
'gtin' => null,
'manufacturer' => null,
'category' => null,
'progress' => null,
'updatedAt' => null,
])
<tr class="border-b hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700">
<th scope="row" class="flex items-center whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
@if (is_null($sku))
<x-flowbite.mini-spinner />
@else
{{ $sku }}
@endif
</th>
<td class="px-4 py-2">
@if (is_null($name))
<x-flowbite.mini-spinner />
@else
<span class="bg-primary-100 text-primary-800 dark:bg-primary-900 rounded px-2 py-0.5 font-medium dark:text-white">
<button x-data="{ open{{ $sku }}: false }" x-on:click="open{{ $sku }} = ! open{{ $sku }}; if (open{{ $sku }}) { $refs.itemDetails{{ $sku }}.style.display='block'; } else { $refs.itemDetails{{ $sku }}.style.display='none'; }">
{{ $name }}
</button>
</span>
@endif
</td>
<td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
@if (is_null($mpn))
<x-flowbite.mini-spinner />
@else
<div class="flex items-center">
{{ $mpn }}
</div>
@endif
</td>
<td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
@if (is_null($gtin))
<x-flowbite.mini-spinner />
@else
{{ $gtin }}
@endif
</td>
<td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
@if (is_null($manufacturer))
<x-flowbite.mini-spinner />
@else
{{ $manufacturer }}
@endif
</td>
<td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
@if (is_null($category))
<x-flowbite.mini-spinner />
@else
{{ $category }}
@endif
</td>
<td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
@if (is_null($progress))
<x-flowbite.mini-spinner />
@else
<div class="mb-1 flex h-5 w-40 flex-col justify-center rounded-full bg-gray-200 dark:bg-gray-700">
<div class="relative flex h-6 w-40 items-center justify-center">
<div class="absolute top-0 bottom-0 left-0 rounded-lg bg-blue-600" style="width: 45%"></div>
<div class="relative text-sm font-medium text-gray-50">45%</div>
</div>
</div>
@endif
</td>
<td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
@if (is_null($sku))
<div class="flex space-x-2">
<button disabled type="button" class="cursor-not-allowed rounded-lg bg-gray-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">K</button>
<button disabled type="button" class="cursor-not-allowed rounded-lg bg-gray-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">A</button>
<button disabled type="button" class="cursor-not-allowed rounded-lg bg-gray-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">L</button>
</div>
@else
<div class="flex space-x-2">
<button type="button" x-data x-on:click="window.open('{{ route('image-manager') }}?sku={{ $sku }}', '_self')" class="rounded-lg bg-blue-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">K</button>
<button type="button" x-data x-on:click="window.open('{{ route('attribute-editor') }}?sku={{ $sku }}', '_self')" class="rounded-lg bg-blue-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">A</button>
<button type="button" class="rounded-lg bg-blue-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">L</button>
</div>
@endif
</td>
</tr>
<tr class="hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700" colspan="8">
<td>
<div x-cloak x-ref="itemDetails{{ $sku }}" x-show="false">
WORKS WORKS WORKS WORKS WORKS WORKS
You put your product details here. Like images, attributes, descriptions, etc.
WORKS WORKS WORKS WORKS WORKS WORKS
</div>
</td>
</tr>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment