Laravel Options Creator Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require michalkortas/laravel-options-creator
   php artisan vendor:publish --tag=optionscreator --force
   

   This publishes the Blade component and assets to resources/views/vendor/optionscreator/.

2. Include in Layout: Add @stack('optionscreator') before </body> in your main layout file (e.g., resources/views/layouts/app.blade.php).

3. First Use Case: Wrap a <select> element with the <x-optionscreator-select> component:

   <x-optionscreator-select
       url="{{ route('store.api.route') }}"
       component="components.subEditForm"
   >
       <select name="mySelect">
           <option>Select value</option>
       </select>
   </x-optionscreator-select>
   

   • Ensure store.api.route returns JSON data with id and name keys (or adjust successValueKey/successTextKey).
   • The component attribute points to a Blade view (e.g., resources/views/components/subEditForm.blade.php) that renders the modal form.

Implementation Patterns

Core Workflow

1. Modal Integration: The package uses Bootstrap Modal for dynamic option creation. Ensure your project includes Bootstrap CSS/JS (or override the modal styles via @stack('optionscreator')).

2. API Response Handling: The component expects API responses in this format:

   { "id": 1, "name": "Option Name" }
   

   Customize successValueKey (default: id) and successTextKey (default: name) to match your API structure.

3. Dynamic Form Rendering:

   • The component attribute loads a Blade view (e.g., subEditForm) as the modal content.
   • Pass data to the modal via @inject or session:

     @inject('formData', 'App\Services\OptionService')
     <x-optionscreator-select
         url="{{ route('store.api.route') }}"
         component="components.subEditForm"
         :formData="$formData->getDefaultValues()"
     >
     

4. Success/Failure Feedback:

   • Use successText and errorText to customize user feedback (supports HTML).
   • Log errors to the console with errorText (e.g., <strong>Error occurred</strong>. Check console log.).

5. Auto-Select New Option: Set setNewValue="1" to auto-select the newly created option after submission.

Advanced Patterns

1. Reusable Modal Forms: Create a dedicated Blade component for the modal (e.g., resources/views/components/optionCreatorForm.blade.php):

   <form id="optionCreatorForm" method="POST" action="{{ $url }}">
       @csrf
       <input type="text" name="name" placeholder="Option name">
       <button type="submit">Save</button>
   </form>
   

   Reference it in <x-optionscreator-select>:

   <x-optionscreator-select
       url="{{ route('store.api.route') }}"
       component="components.optionCreatorForm"
   >
   

2. Dynamic URL Routing: Use route parameters for dynamic endpoints:

   <x-optionscreator-select
       url="{{ route('store.api.route', ['category' => $categoryId]) }}"
       component="components.subEditForm"
   >
   

3. Conditional Loading: Disable the component via disabled attribute or hide it with CSS:

   <x-optionscreator-select
       url="{{ route('store.api.route') }}"
       component="components.subEditForm"
       disabled="{{ $isReadonly }}"
   >
   

4. Event Listeners: Extend functionality by listening to modal events (e.g., show.bs.modal):

   document.addEventListener('DOMContentLoaded', function() {
       const modal = document.querySelector('[data-bs-target="#optionsCreatorModal"]');
       modal.addEventListener('click', function() {
           console.log('Modal triggered!');
       });
   });
   

Gotchas and Tips

Pitfalls

1. Bootstrap Dependency:

   • The package requires Bootstrap Modal. If missing, the modal will fail silently.
   • Fix: Include Bootstrap JS/CSS or override the modal via @stack('optionscreator').

2. API Response Mismatch:

   • If successValueKey/successTextKey don’t match your API response, the new option won’t appear in the <select>.
   • Debug: Check the network tab in DevTools to verify the API response structure.

3. CSRF Token:

   • The modal form must include a CSRF token if using Laravel’s built-in protection.
   • Fix: Ensure your component Blade view includes @csrf:

     <form method="POST" action="{{ $url }}">
         @csrf
         <!-- form fields -->
     </form>
     

4. Stack Order:

   • @stack('optionscreator') must be placed before </body> in your layout. Otherwise, the modal JS won’t load.
   • Fix: Verify the stack is included in app.blade.php or your main layout.

5. Component Caching:

   • Published Blade components (resources/views/vendor/optionscreator/) may not update after changes.
   • Fix: Clear cached views:

     php artisan view:clear
     

Debugging Tips

1. Console Logs:

   • Use errorText to log errors to the console (e.g., Check console log.).
   • Example:

     errorText="<strong>Error!</strong> <script>console.log('API failed:', JSON.stringify({{ json_encode($error) }}))</script>"
     

2. Network Tab:

   • Inspect the API request/response in DevTools (F12 > Network) to verify data flow.

3. Modal Visibility:

   • If the modal doesn’t appear, check:
     • Bootstrap JS is loaded.
     • The <x-optionscreator-select> wrapper is properly closed.
     • No JavaScript errors in the console.

Extension Points

1. Custom Modal Templates: Override the default modal by publishing and modifying the Blade template:

   php artisan vendor:publish --tag=optionscreator --force
   

   Edit resources/views/vendor/optionscreator/modal.blade.php.

2. Event Hooks: Extend functionality by listening to modal events (e.g., shown.bs.modal):

   document.addEventListener('shown.bs.modal', function(e) {
       if (e.target.id === 'optionsCreatorModal') {
           console.log('Modal shown!');
       }
   });
   

3. Dynamic Attributes: Pass additional data via data-* attributes on the <select>:

   <x-optionscreator-select
       url="{{ route('store.api.route') }}"
       component="components.subEditForm"
   >
       <select name="mySelect" data-category-id="{{ $categoryId }}">
           <option>Select value</option>
       </select>
   </x-optionscreator-select>
   

   Access these in your modal component via JavaScript:

   const categoryId = document.querySelector('select').dataset.categoryId;
   

4. Localization: Customize text for different languages by overriding the title, saveButtonTitle, etc., attributes dynamically:

   <x-optionscreator-select
       :title="__('Create new option')"
       :saveButtonTitle="__('Save Option')"
       url="{{ route('store.api.route') }}"
       component="components.subEditForm"
   >