Tag Manager Resusable Livewire Component using Spatie Tags Package

Documentation

This package is based on spatie/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. TagManagerModal

ShowTagsComponent 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.

To use this component you just have to pass on the model object to the show-tags-component

@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.

This is how I am using this component for the demo that you are interacting with on this 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>