Tag Manager Resusable Livewire Component using Spatie Tags Package
Tech Stack: tailwindcss
Demo
Please login to check demo of Livewire Tag Mangager
Manage Tags
Code
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Documentation
This package is based onspatie/laravel-tags
package.
Make sure that the Model you want to manage tags on has been configured to use the Spatie Tags package.
In my case I am managing tags on the DummyProduct model.
class DummyProduct extends Model
{
use HasTags;
...
}
The Tag Manager component is made up with two components
1. ShowTagsComponent 2. TagManagerModalShowTagsComponent
shows the current associated tags on a Model, when you click on the tag icon it dispatches a event to the TagManagerModal component which opens up a Modal window to add / remove the tags from the Laravel Model.
You can have multiple items on your page for which the tags needs to be managed and they will all use the single instance of TagManagerModal
.
@livewire('pro.tags.show-tags-component', ['model' => $product])
And include the @livewire('pro.tags.tag-manager-modal')
component once anywhere in your layout or page.
<div>
<div class="tw-px-4 sm:tw-px-6 lg:tw-px-8">
<div class="sm:tw-flex sm:tw-items-center">
<div class="sm:tw-flex-auto">
<h1 class="tw-text-base tw-font-semibold tw-leading-6 tw-text-gray-900">Products</h1>
<p class="tw-mt-2 tw-text-sm tw-text-gray-700">A list of products along with their prices and the option to manage tags.</p>
</div>
</div>
<div class="tw-mt-8 tw-flow-root">
<div class="tw--mx-4 tw--my-2 tw-overflow-x-auto sm:tw--mx-6 lg:tw--mx-8">
<div class="tw-inline-block tw-min-w-full tw-py-2 tw-align-middle sm:tw-px-6 lg:tw-px-8">
<table class="tw-min-w-full tw-divide-y tw-divide-gray-300">
<thead>
<tr>
<th scope="col" class="tw-py-3.5 tw-pl-4 tw-pr-3 tw-text-left tw-text-sm tw-font-semibold tw-text-gray-900 sm:tw-pl-0">Product Name</th>
<th scope="col" class="tw-px-3 tw-py-3.5 tw-text-left tw-text-sm tw-font-semibold tw-text-gray-900">Price</th>
<th scope="col" class="tw-px-3 tw-py-3.5 tw-text-left tw-text-sm tw-font-semibold tw-text-gray-900">Tags</th>
<th scope="col" class="tw-relative tw-py-3.5 tw-pl-3 tw-pr-4 sm:tw-pr-0">
<span class="tw-sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="tw-divide-y tw-divide-gray-200">
@foreach($products as $product)
<tr>
<td class="tw-whitespace-nowrap tw-py-4 tw-pl-4 tw-pr-3 tw-text-sm tw-font-medium tw-text-gray-900 sm:tw-pl-0">{{$product->title}}</td>
<td class="tw-whitespace-nowrap tw-px-3 tw-py-4 tw-text-sm tw-text-gray-500">{{$product->price}}</td>
<td class="tw-whitespace-nowrap tw-px-3 tw-py-4 tw-text-sm tw-text-gray-500">@livewire('pro.tags.show-tags-component', ['model' => $product])</td>
</tr>
@endforeach
<!-- More people... -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>