Skip to content

Instantly share code, notes, and snippets.

@ajaxray

ajaxray/ToasterController.php

Created August 1, 2025 19:30
Show Gist options
  • Save ajaxray/aec7abf5e76387b38a498435dd403b19 to your computer and use it in GitHub Desktop.
Save ajaxray/aec7abf5e76387b38a498435dd403b19 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ajaxray created this gist Aug 1, 2025.
    64 changes: 64 additions & 0 deletions ToasterController.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    <?php

    namespace Company\Utils\Http\Controllers\Admin;

    use Illuminate\Routing\Controller;
    use Illuminate\Foundation\Bus\DispatchesJobs;
    use Illuminate\Foundation\Validation\ValidatesRequests;
    use Illuminate\Foundation\Auth\Access\AuthorizesRequests;

    class ToasterController extends Controller
    {
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;

    /**
    * Display the toaster test page.
    *
    * @return \Illuminate\View\View
    */
    public function toasterTest()
    {
    return view('utils::admin.tests.toaster');
    }

    /**
    * Test session flash notification.
    *
    * @return \Illuminate\Http\RedirectResponse
    */
    public function testSessionFlash()
    {
    session()->flash('success', 'This is a session flash success notification!');

    return redirect()->back();
    }

    /**
    * Test AJAX success notification.
    *
    * @return \Illuminate\Http\JsonResponse
    */
    public function testAjaxSuccess()
    {
    return response()->json([
    'success' => true,
    'message' => 'This is an AJAX success notification!'
    ]);
    }

    /**
    * Test AJAX error notification.
    *
    * @return \Illuminate\Http\JsonResponse
    */
    public function testAjaxError()
    {
    return response()->json([
    'success' => false,
    'flash' => [
    'type' => 'error',
    'message' => 'This is an AJAX error notification!'
    ]
    ], 422);
    }
    }
    188 changes: 188 additions & 0 deletions toaster.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,188 @@
    <x-admin::layouts>

    <!-- Title of the page -->
    <x-slot:title>
    Toaster Test
    </x-slot>

    <!-- Page Content -->
    <div class="page-content">
    <div class="container-fluid">
    <div class="row">
    <div class="col-12">
    <div class="card">
    <div class="card-header">
    <h3 class="card-title text-2xl">Toaster Notification Test</h3>
    </div>
    <div class="card-body">
    <p class="mb-4">This is a test page for toaster notifications. Use this page to test different types of notifications and toaster functionalities.</p>

    <!-- Vue Component for Toaster Testing -->
    <toaster-test-component></toaster-test-component>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    @pushOnce('scripts')
    <script type="text/x-template" id="toaster-test-component-template">
    <div>
    <div class="flex flex-row gap-4">
    <div style="width: 30%;">
    <h4 class="text-lg font-bold">Test Frontend Actions</h4>
    <div class="grid grid-4 gap-2" role="group">
    <button type="button" class="primary-button" style="background-color: #009900;" @click="showSuccessToast">
    Success Notification
    </button>
    <button type="button" class="primary-button" style="background-color: #ff9900;" @click="showWarningToast">
    Warning Notification
    </button>
    <button type="button" class="primary-button" style="background-color: #ff0000;" @click="showErrorToast">
    Error Notification
    </button>
    <button type="button" class="primary-button" @click="showInfoToast">
    Info Notification
    </button>
    </div>
    </div>
    <div style="width: 70%;">
    <h4 class="text-lg font-bold">Test Results</h4>
    <p class="text-muted">Click the buttons to test different toaster notifications. The results will appear as toast messages.</p>
    <div v-if="lastMessage" class="mt-3">
    <p class="text-info"><strong>Last triggered:</strong> @{{ lastMessage }}</p>
    </div>
    </div>
    </div>

    <hr class="my-4">

    <div class="flex flex-row gap-4">
    <div style="width: 30%;">
    <h4 class="text-lg font-bold">Test Backend Actions</h4>
    <div class="grid grid-4 gap-2" role="group">
    <button type="button" class="primary-button" style="background-color: #009900;" @click="testSessionFlash">
    Session Flash Notification
    </button>
    <button type="button" class="primary-button" style="background-color: #ff9900;" @click="testAjaxSuccess">
    Ajax Success Notification
    </button>
    <button type="button" class="primary-button" style="background-color: #ff0000;" @click="testAjaxError">
    Error Response Notification
    </button>
    </div>
    </div>
    <div style="width: 70%;">
    <h4 class="text-lg font-bold">Test Results</h4>
    <p class="text-muted">Click the buttons to test different toaster notifications. The results will appear as toast messages.</p>
    <div v-if="lastMessage" class="mt-3">
    <p class="text-info"><strong>Last triggered:</strong> @{{ lastMessage }}</p>
    </div>
    </div>
    </div>
    </div>
    </script>

    <script type="module">
    app.component('toaster-test-component', {
    template: '#toaster-test-component-template',
    data() {
    return {
    lastMessage: ''
    };
    },
    methods: {
    // Frontend toast methods
    showSuccessToast() {
    this.$emitter.emit('add-flash', { type: 'success', message: 'This is a success notification!' });
    this.lastMessage = 'Frontend Success notification';
    },
    showWarningToast() {
    this.$emitter.emit('add-flash', { type: 'warning', message: 'This is a warning notification!' });
    this.lastMessage = 'Frontend Warning notification';
    },
    showErrorToast() {
    this.$emitter.emit('add-flash', { type: 'error', message: 'This is an error notification!' });
    this.lastMessage = 'Frontend Error notification';
    },
    showInfoToast() {
    this.$emitter.emit('add-flash', { type: 'info', message: 'This is an info notification!' });
    this.lastMessage = 'Frontend Info notification';
    },
    // Backend toast methods
    testSessionFlash() {
    this.lastMessage = 'Testing Session Flash...';
    // Create a form and submit it for session flash
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = "{{ route('admin.utils.tests.toaster.session-flash') }}";
    // Add CSRF token
    const csrfToken = document.createElement('input');
    csrfToken.type = 'hidden';
    csrfToken.name = '_token';
    csrfToken.value = "{{ csrf_token() }}";
    form.appendChild(csrfToken);
    document.body.appendChild(form);
    form.submit();
    },
    async testAjaxSuccess() {
    this.lastMessage = 'Testing AJAX Success...';
    const response = await this.$axios.post("{{ route('admin.utils.tests.toaster.ajax-success') }}");
    try {
    const response = await this.$axios.post("{{ route('admin.utils.tests.toaster.ajax-success') }}");
    if (response.data.success) {
    this.$emitter.emit('add-flash', {
    type: 'success',
    message: response.data.message
    });
    this.lastMessage = 'AJAX Success notification';
    }
    } catch (error) {
    this.$emitter.emit('add-flash', {
    type: 'error',
    message: 'Failed to test AJAX success'
    });
    this.lastMessage = 'AJAX Success test failed';
    }
    },
    async testAjaxError() {
    this.lastMessage = 'Testing AJAX Error...';
    try {
    await this.$axios.post("{{ route('admin.utils.tests.toaster.ajax-error') }}");
    } catch (error) {
    if (error.response && error.response.data && error.response.data.flash) {
    this.$emitter.emit('add-flash', {
    type: error.response.data.flash.type,
    message: error.response.data.flash.message
    });
    this.lastMessage = 'AJAX Error notification';
    } else {
    this.$emitter.emit('add-flash', {
    type: 'error',
    message: 'Unknown error occurred'
    });
    this.lastMessage = 'AJAX Error test failed';
    }
    }
    }
    }
    });
    </script>
    @endpushOnce

    </x-admin::layouts>