sistemasjg Comments - Answer Overflow

sistemasjg

•Created by sistemasjg on 1/5/2025 in #❓┊help

Accessing Repeater field from JS code in view

Hi, I think finally get it working. Added wire:ignore and now qr-scanner is not dissapearing after $wire.dispatchFormEvent('addItem', $data);

<div class="mt-6" name="{{ $getName() }}" id="{{ $getId() }}"
    wire:ignore
    x-init= "
                html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220, });
                html5QrcodeScanner.render(onScanSuccess);
            "
    x-data="
              {
                    onScanSuccess($data) {
                        $wire.dispatchFormEvent('addItem', $data);
                    },
                }"
    >

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="md:container md:mx-auto">
            <div class="columns-3">
                <div id="qr-reader"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

<div class="mt-6" name="{{ $getName() }}" id="{{ $getId() }}"
    wire:ignore
    x-init= "
                html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220, });
                html5QrcodeScanner.render(onScanSuccess);
            "
    x-data="
              {
                    onScanSuccess($data) {
                        $wire.dispatchFormEvent('addItem', $data);
                    },
                }"
    >

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="md:container md:mx-auto">
            <div class="columns-3">
                <div id="qr-reader"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

14 replies

FFilament

•Created by sistemasjg on 1/5/2025 in #❓┊help

Accessing Repeater field from JS code in view

Just this, nothing more

14 replies

FFilament

•Created by sistemasjg on 1/5/2025 in #❓┊help

Accessing Repeater field from JS code in view

And addItem function is just:

    private static function addItem(Textarea $component, string $code)
    {

        $arr = explode(';', $code);

        if (count($arr) == 0) {
            Notification::make()
              ->title('Valor invalido ')
              ->body($code)
              ->warning()
              ->send();

            return;
        }

        $state = $component->getState();

        $data = [];
        $data['id'] = $arr[0];
        $data['ref'] = $arr[1];
        $data['sent_at'] = $arr[2];
        $data['sent_by'] = $arr[3];
        $data['received_by'] = $arr[8];
        $data['receiver_phone'] = $arr[9];

        $data['item'] = $data;

        // $state[(string) Str::uuid()] = $data;

        $state = $state . "|" . $data['id'];

        $component->state($state);
    }

    private static function addItem(Textarea $component, string $code)
    {

        $arr = explode(';', $code);

        if (count($arr) == 0) {
            Notification::make()
              ->title('Valor invalido ')
              ->body($code)
              ->warning()
              ->send();

            return;
        }

        $state = $component->getState();

        $data = [];
        $data['id'] = $arr[0];
        $data['ref'] = $arr[1];
        $data['sent_at'] = $arr[2];
        $data['sent_by'] = $arr[3];
        $data['received_by'] = $arr[8];
        $data['receiver_phone'] = $arr[9];

        $data['item'] = $data;

        // $state[(string) Str::uuid()] = $data;

        $state = $state . "|" . $data['id'];

        $component->state($state);
    }

` Hope you can have a general overview now, will be here in case you need something else from my side. Really appreciate it

14 replies

FFilament

•Created by sistemasjg on 1/5/2025 in #❓┊help

Accessing Repeater field from JS code in view

Cool, thanks a lot for you help. Code is simple. On field view I just have this:

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

<div class="mt-6"
    name="{{ $getName() }}"
    id="{{ $getId() }}"
    x-init="
        html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220,});
        html5QrcodeScanner.render(onScanSuccess);
    "
    x-data="{
        onScanSuccess($data) {
            $wire.dispatchFormEvent('addItem', $data);
        },
    }"
    wire:key="item-{{ $getId() }}">

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="grid gap-y-2">
            <div wire:key="item-{{ $getId() }}-xxxxx" id="qr-reader" style="width:95%;height:95%;"></div>

        </div>
    </div>
</div>

<script src="https://unpkg.com/[email protected]/html5-qrcode.min.js" type="text/javascript"></script>

<div class="mt-6"
    name="{{ $getName() }}"
    id="{{ $getId() }}"
    x-init="
        html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 220,});
        html5QrcodeScanner.render(onScanSuccess);
    "
    x-data="{
        onScanSuccess($data) {
            $wire.dispatchFormEvent('addItem', $data);
        },
    }"
    wire:key="item-{{ $getId() }}">

    <div xmlns:x-filament="http://www.w3.org/1999/html">
        <div class="grid gap-y-2">
            <div wire:key="item-{{ $getId() }}-xxxxx" id="qr-reader" style="width:95%;height:95%;"></div>

        </div>
    </div>
</div>

I was just testing if that wire:key attr could do the trick, but no. Form definition like:

                Section::make('Scanner Códigos QR')
                    ->schema([
                        ViewField::make('qr-codes')
                            ->dehydrated(false)
                            ->view('filament.forms.components.qr-code-reader'),
                    ]),

                Grid::make(columns: 1)
                    ->schema([
                        Select::make('template_id')
                            ->label('Plantilla')
                            ->relationship('template', 'name')
                            ->required()
                            ->columnSpan(1),
                        Textarea::make('items')
                            ->label('Items')
                            ->registerListeners([
                                'addItem' => [
                                    function (Textarea $component, string $code) {
                                        self::addItem($component, $code);
                                        return;
                                    },
                                ]]),

                Section::make('Scanner Códigos QR')
                    ->schema([
                        ViewField::make('qr-codes')
                            ->dehydrated(false)
                            ->view('filament.forms.components.qr-code-reader'),
                    ]),

                Grid::make(columns: 1)
                    ->schema([
                        Select::make('template_id')
                            ->label('Plantilla')
                            ->relationship('template', 'name')
                            ->required()
                            ->columnSpan(1),
                        Textarea::make('items')
                            ->label('Items')
                            ->registerListeners([
                                'addItem' => [
                                    function (Textarea $component, string $code) {
                                        self::addItem($component, $code);
                                        return;
                                    },
                                ]]),

14 replies

FFilament

•Created by sistemasjg on 1/5/2025 in #❓┊help

Accessing Repeater field from JS code in view

Yep, I think something like that as well. DOM is modified on JS side when creating the qr-view and maybe this modification is not tracked by livewire internals, so when updating it just set DOM like it was before plus modifications made. is ther any workaround? Maybe soe kind of notification to Livewire fro the JS side about the DOM was changed?

14 replies

FFilament

•Created by sistemasjg on 1/5/2025 in #❓┊help

Accessing Repeater field from JS code in view

Hi, update for this issue. I've trying differents approachs, but everything fails. I just changed repeater control for a simple texarea using registerListeners mechanism to add scaned line to texarea. Behaviour is the same, after first scan, line is added to textarea but qr-code field just dissapears. Is like it is reloading form/section and js component just dissapears. Any workaround could try? Thanks in advance

14 replies

FFilament

•Created by sistemasjg on 1/5/2025 in #❓┊help

Accessing Repeater field from JS code in view

14 replies

FFilament

•Created by sistemasjg on 7/12/2023 in #❓┊help

How to get Model property from recordSelectOptionsQuery

Never mind, searched a little bit on this discord server and found a solution. Managed to do it this way: RelationManager:

                    ->recordSelectOptionsQuery(
                        function (Builder $query, $livewire)
                        { 
                             //  added $livewire parameter to access ownerRecord
                            if ($livewire->ownerRecord->allowedRelatedAttachTypes){
                              return $query->whereIn('trading_partners.type_id', $livewire->ownerRecord->allowedRelatedAttachTypes);
                            }
                            return $query;
                        }
                    )

Model:

 
class Student extends _TradingPartner
{
    use HasFactory;

    protected static $partnerType = 'S';
    public $allowedRelatedAttachTypes = ['R'];

}

2 replies

Gaming

Programming