Nuxnux Posts - Answer Overflow

Nuxnux

•Created by Nuxnux on 10/21/2024 in #❓┊help

Laravel Echo cannot be found on custom page in filament

Hey folks, First of all echo is working outside filament properly for all type of channel and event are send properly but inside my filament custom page it give those error

echo.js?v=3.2.116.0:2 Uncaught You must pass your app key when you instantiate Pusher.
fi @ echo.js?v=3.2.116.0:2
e @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ echo.js?v=3.2.116.0:2
a @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ chat:1054
supportLaravelEcho.js:16 Laravel Echo cannot be found

echo.js?v=3.2.116.0:2 Uncaught You must pass your app key when you instantiate Pusher.
fi @ echo.js?v=3.2.116.0:2
e @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ echo.js?v=3.2.116.0:2
a @ echo.js?v=3.2.116.0:2
value @ echo.js?v=3.2.116.0:2
l @ echo.js?v=3.2.116.0:2
(anonymous) @ chat:1054
supportLaravelEcho.js:16 Laravel Echo cannot be found

which is because it doesnt inject the parameter to echo

                window.Echo = new window.EchoFactory(JSON.parse('{\u0022broadcaster\u0022:\u0022reverb\u0022,\u0022key\u0022:null,\u0022cluster\u0022:null,\u0022wsHost\u0022:null,\u0022wsPort\u0022:null,\u0022wssPort\u0022:null,\u0022authEndpoint\u0022:\u0022\\\/broadcasting\\\/auth\u0022,\u0022disableStats\u0022:true,\u0022encrypted\u0022:true,\u0022forceTLS\u0022:false}'))

                window.dispatchEvent(new CustomEvent('EchoLoaded'))

                window.Echo = new window.EchoFactory(JSON.parse('{\u0022broadcaster\u0022:\u0022reverb\u0022,\u0022key\u0022:null,\u0022cluster\u0022:null,\u0022wsHost\u0022:null,\u0022wsPort\u0022:null,\u0022wssPort\u0022:null,\u0022authEndpoint\u0022:\u0022\\\/broadcasting\\\/auth\u0022,\u0022disableStats\u0022:true,\u0022encrypted\u0022:true,\u0022forceTLS\u0022:false}'))

                window.dispatchEvent(new CustomEvent('EchoLoaded'))

Here you can see that every parameters are null. all my .env are setup properly and the link with vite also (not my production env here)

REVERB_APP_ID=743618
REVERB_APP_KEY=ymirrcrys9crhiwm7cmy
REVERB_APP_SECRET=tzrvf9dqwg9iqld62s3c
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

REVERB_APP_ID=743618
REVERB_APP_KEY=ymirrcrys9crhiwm7cmy
REVERB_APP_SECRET=tzrvf9dqwg9iqld62s3c
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Anyone have a idea :0 ?

15 replies

FFilament

•Created by Nuxnux on 10/8/2024 in #❓┊help

Notification not being send by reverb`

Hey so i have do it as follow composer require filament/notifications:"^3.2" -W php artisan filament:install --notifications To send my notification i do it like this

                Notification::make()
                    ->title('Two days before the reservation ' . $reservation->id)
                    ->actions([
                        Action::make('Link')
                            ->button()
                            ->url(ReservationResource::getUrl('view', ['record' => $reservation])),
                        Action::make('view')
                            ->button()
                    ])
                    ->sendToDatabase($user, isEventDispatched: true);

                Notification::make()
                    ->title('Two days before the reservation ' . $reservation->id)
                    ->actions([
                        Action::make('Link')
                            ->button()
                            ->url(ReservationResource::getUrl('view', ['record' => $reservation])),
                        Action::make('view')
                            ->button()
                    ])
                    ->sendToDatabase($user, isEventDispatched: true);

i have already check the user is a good one php artisan make:notifications-table to create the table i use the same code as the doc to create and send a notification

$recipient = auth()->user();
 
Notification::make()
    ->title('Saved successfully')
    ->sendToDatabase($recipient, isEventDispatched: true);

$recipient = auth()->user();
 
Notification::make()
    ->title('Saved successfully')
    ->sendToDatabase($recipient, isEventDispatched: true);

and then i also started the reverb like this php artisan reverb:start --debub but i still need to reload to see the notification do you know why did i do something bad ?

2 replies

FFilament

•Created by Nuxnux on 10/3/2024 in #❓┊help

use js in the relation manager

hey i create a custom column whick look like this

<div wire:ignore class="h-46 w-64">
    @if($getState() !== null)
        <div class="swiper">
            <div class="swiper-wrapper">
        @foreach($getState() as $image)
            @php
                $extension = pathinfo($image, PATHINFO_EXTENSION);
                $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            @endphp

            @if(in_array(strtolower($extension), $allowedExtensions))
                <div class="swiper-slide w-full h-full">
                    <img src="{{ Storage::disk('public')->url($image) }}" class="h-full w-full object-cover" alt="{{ $image }}">
                </div>
            @endif
        @endforeach
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    @endif
</div>

@script
<script>
        new Swiper('.swiper', {
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                type: "fraction",
            },
        });
</script>
@endscript

<div wire:ignore class="h-46 w-64">
    @if($getState() !== null)
        <div class="swiper">
            <div class="swiper-wrapper">
        @foreach($getState() as $image)
            @php
                $extension = pathinfo($image, PATHINFO_EXTENSION);
                $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            @endphp

            @if(in_array(strtolower($extension), $allowedExtensions))
                <div class="swiper-slide w-full h-full">
                    <img src="{{ Storage::disk('public')->url($image) }}" class="h-full w-full object-cover" alt="{{ $image }}">
                </div>
            @endif
        @endforeach
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    @endif
</div>

@script
<script>
        new Swiper('.swiper', {
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                type: "fraction",
            },
        });
</script>
@endscript

the swiper works on the custom livewire page but not relation manager page no error in javascript/php log

6 replies

FFilament

•Created by Nuxnux on 10/2/2024 in #❓┊help

how to use swiperjs in filament

hey do i make filament be know that i install swiperjs in filament

4 replies

FFilament

•Created by Nuxnux on 10/2/2024 in #❓┊help

Integrate swiperjs in a custom column

Hey, the goal is to create a custom column like on this https://www.immoscout24.ch/fr/immobilier/louer/lieu-geneve i have some problem with the integration of swiperjs https://swiperjs.com/swiper-api from what i have understand and what i have done npm install swiper and in app.js i add

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
window.Swiper = Swiper;

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
window.Swiper = Swiper;

but in my custom column impossible to create a new instance i always have Swiper not defined

@script
<script>
const swiper = new Swiper('.swiper');
</script>
@script

@script
<script>
const swiper = new Swiper('.swiper');
</script>
@script

1 replies

Gaming

Programming