Anik
Anik
Explore posts from servers
NNuxtFFilament
PostsComments
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
the modalID is correctly extracted.
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
I have tried implementing your code but the modal doesn't yet close for some reason 
<div x-data="{
    modalId: null,
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
        $wire.scanResult(decodedText)
        $wire.dispatch('close-modal', {id: this.modalId});
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
        this.modalId = this.$refs.modalContainer.getAttribute('wire:key')
        this.modalId = this.modalId.substring(0,this.modalId.indexOf('.')) + '-action'
        if (window.Html5QrcodeScanner) {
           const { Html5QrcodeScanner } = window;
            let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 100, height: 100} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
        } else {
            console.error('Html5QrcodeScanner is not available.');
        }
    }
}">
    <div class="mx-auto">
        <div id="reader"></div>
    </div>
</div>
<div x-data="{
    modalId: null,
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
        $wire.scanResult(decodedText)
        $wire.dispatch('close-modal', {id: this.modalId});
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
        this.modalId = this.$refs.modalContainer.getAttribute('wire:key')
        this.modalId = this.modalId.substring(0,this.modalId.indexOf('.')) + '-action'
        if (window.Html5QrcodeScanner) {
           const { Html5QrcodeScanner } = window;
            let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 100, height: 100} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
        } else {
            console.error('Html5QrcodeScanner is not available.');
        }
    }
}">
    <div class="mx-auto">
        <div id="reader"></div>
    </div>
</div>
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
got this https://discord.com/channels/883083792112300104/1273718758812422215
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
hello, I am trying a few more things to complete the feature. I need to programatically close the modal on success. But I am unsure of how to set/get modal id? Can you give me an idea on how to accomplish this? 
<div x-data="{
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
        $wire.scanResult(decodedText)
        $wire.dispatch('close-modal', { id: 'scan-qr' });
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
        if (window.Html5QrcodeScanner) {
           const { Html5QrcodeScanner } = window;
            let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 100, height: 100} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
        } else {
            console.error('Html5QrcodeScanner is not available.');
        }
    }
}">
    <div class="mx-auto">
        <div id="reader"></div>
    </div>
</div>
<div x-data="{
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
        $wire.scanResult(decodedText)
        $wire.dispatch('close-modal', { id: 'scan-qr' });
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
        if (window.Html5QrcodeScanner) {
           const { Html5QrcodeScanner } = window;
            let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 100, height: 100} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
        } else {
            console.error('Html5QrcodeScanner is not available.');
        }
    }
}">
    <div class="mx-auto">
        <div id="reader"></div>
    </div>
</div>
protected function getHeaderActions(): array
    {
        return [
            Actions\Action::make('scan-qr')->label('Scan QR')
                ->modalContent(view('filament-custom.qr-scanner'))
                ->modalSubmitAction(false),

        ];
    }
    public function scanResult($decodedText)
    {
        $this->dispatch('close-modal', id: 'scan-qr');
    }
protected function getHeaderActions(): array
    {
        return [
            Actions\Action::make('scan-qr')->label('Scan QR')
                ->modalContent(view('filament-custom.qr-scanner'))
                ->modalSubmitAction(false),

        ];
    }
    public function scanResult($decodedText)
    {
        $this->dispatch('close-modal', id: 'scan-qr');
    }
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
this one did the job. Sorry I missed it earlier
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
<div x-data="{
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
     const { Html5QrcodeScanner } = window;
     console.log(Html5QrcodeScanner)
     let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 250, height: 250} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
    }
}">
    <div class="border border-primary-500 w-[300px] h-[300px] mx-auto">
        <div id="reader"></div>
    </div>
</div>
<div x-data="{
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
     const { Html5QrcodeScanner } = window;
     console.log(Html5QrcodeScanner)
     let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 250, height: 250} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
    }
}">
    <div class="border border-primary-500 w-[300px] h-[300px] mx-auto">
        <div id="reader"></div>
    </div>
</div>
https://filamentphp.com/docs/3.x/support/assets/#registering-javascript-files-from-a-url I will try this.
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
@Leandro Ferreira of course this is the version
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
just trying different approaches to figure out which one works
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
The script tag doesnt seem to run when used from Action modalContent. I have tried using a different event but the script simply doesnt execute 
 ->mountUsing(function () {
                    // Dispatch the custom event to initialize the QR scanner
                    $this->dispatch('initialize-qr-scanner');
                })
 ->mountUsing(function () {
                    // Dispatch the custom event to initialize the QR scanner
                    $this->dispatch('initialize-qr-scanner');
                })
  document.addEventListener('initialize-qr-scanner', function() {
        const { Html5QrcodeScanner } = window;
        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);
        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    });
  document.addEventListener('initialize-qr-scanner', function() {
        const { Html5QrcodeScanner } = window;
        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);
        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    });
However the same code works pretty well when routed directly from web.php. the script works fine and the components are loaded
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
thanks for the reply. I have tried it this way. The script runs but I have not been able to get the html5Qrcodescanner object. Heres my code 
<div x-data="{
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
// undefined
     const { Html5QrcodeScanner } = window;
     console.log(Html5QrcodeScanner)
     let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 250, height: 250} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
    }
}">
    <div class="border border-primary-500 w-[300px] h-[300px] mx-auto">
        <div id="reader"></div>
    </div>
</div>
<div x-data="{
    onScanSuccess(decodedText, decodedResult) {
        console.log(`Code matched = ${decodedText}`, decodedResult);
    },
    onScanFailure(error) {
        console.warn(`Code scan error = ${error}`);
    },

    init() {
// undefined
     const { Html5QrcodeScanner } = window;
     console.log(Html5QrcodeScanner)
     let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: {width: 250, height: 250} });
            html5QrcodeScanner.render(this.onScanSuccess, this.onScanFailure);
    }
}">
    <div class="border border-primary-500 w-[300px] h-[300px] mx-auto">
        <div id="reader"></div>
    </div>
</div>
import Alpine from "alpinejs";
import AlpineFloatingUI from "@awcodes/alpine-floating-ui";
import { Html5QrcodeScanner, Html5Qrcode } from "html5-qrcode"; // Import Html5Qrcode and Html5QrcodeScanner

Alpine.plugin(AlpineFloatingUI);

window.Alpine = Alpine;
window.Html5QrcodeScanner = Html5QrcodeScanner; // Make Html5QrcodeScanner available globally
window.Html5Qrcode = Html5Qrcode; // Make Html5Qrcode available globally'

Alpine.start();
import Alpine from "alpinejs";
import AlpineFloatingUI from "@awcodes/alpine-floating-ui";
import { Html5QrcodeScanner, Html5Qrcode } from "html5-qrcode"; // Import Html5Qrcode and Html5QrcodeScanner

Alpine.plugin(AlpineFloatingUI);

window.Alpine = Alpine;
window.Html5QrcodeScanner = Html5QrcodeScanner; // Make Html5QrcodeScanner available globally
window.Html5Qrcode = Html5Qrcode; // Make Html5Qrcode available globally'

Alpine.start();
I have been trying to figure out how to get Html5Qrcode objects inside init function
24 replies
FFilament
Created by Anik on 9/30/2024 in #❓┊help
script in modalContent(view('qr-scanner.php')) not working
bump
24 replies
FFilament
Created by Anik on 5/21/2024 in #❓┊help
resource in multiple panels
bump
3 replies
FFilament
Created by AgonK on 5/22/2024 in #❓┊help
how to send request and get response inside action button
try 
action($this->anyThing())

public function anything() {
// logic here
}
action($this->anyThing())

public function anything() {
// logic here
}
26 replies
FFilament
Created by AgonK on 5/22/2024 in #❓┊help
how to send request and get response inside action button
are you using it inside forms?
26 replies
FFilament
Created by AgonK on 5/22/2024 in #❓┊help
how to send request and get response inside action button
provide code
26 replies
FFilament
Created by Peet X on 10/6/2023 in #❓┊help
Reuse the same Resources in multiple panels
have you tried displaying different pages in the resource according to user?
10 replies
FFilament
Created by JJSanders on 5/21/2024 in #❓┊help
Small documentation page
use tailwind classes
9 replies
FFilament
Created by Mark Chaney on 1/31/2024 in #❓┊help
Tips for testing Wizard Steps?
I am talking about this scenerio as well
12 replies
FFilament
Created by Mark Chaney on 1/31/2024 in #❓┊help
Tips for testing Wizard Steps?
have tried it. call('next') tries to find the method in the page itself.
12 replies
FFilament
Created by Mark Chaney on 1/31/2024 in #❓┊help
Tips for testing Wizard Steps?
have you been able to find any solution for this?
12 replies