SOIX Comments - Answer Overflow

Topics

SOIX

•Created by SOIX on 10/7/2024 in #❓┊help

default value on dynamically added form fields

Well I predefined hidden fields for default values and then populated dynamic element like this:

$this->form($formFields)
  ->icon('heroicon-s-paint-brush')
  ->action(function (Set $set, $data) use ($prefix, $formFields) {
      foreach ($formFields as $field => $value) {
          $set($prefix . '.animation', $data[$field]);
      }
  })->mountUsing(function (Form $form, Forms\Get $get) use ($prefix, $formFields) {
      $existingData = [];
      
      foreach ($formFields as $field => $value) {
          $existingData[$field] = $get($prefix . '.' . $field) ?? '';
      }
  
      $form->fill($existingData);
  });

$this->form($formFields)
  ->icon('heroicon-s-paint-brush')
  ->action(function (Set $set, $data) use ($prefix, $formFields) {
      foreach ($formFields as $field => $value) {
          $set($prefix . '.animation', $data[$field]);
      }
  })->mountUsing(function (Form $form, Forms\Get $get) use ($prefix, $formFields) {
      $existingData = [];
      
      foreach ($formFields as $field => $value) {
          $existingData[$field] = $get($prefix . '.' . $field) ?? '';
      }
  
      $form->fill($existingData);
  });

So basically populate dynamic form with mountUsing. Now I guess i needed to hnave predefined keys in form, so thats why i haave hidden fields, but if u can find other way you can remove it.

5 replies

•Created by SOIX on 11/9/2024 in #❓┊help

Using infolist actions inside livewire component

Let me try doing it in fresh app

4 replies

•Created by SOIX on 11/9/2024 in #❓┊help

Using infolist actions inside livewire component

Hmm, doesnt work even if I use example from: https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#adding-the-action

4 replies

•Created by SOIX on 10/16/2024 in #❓┊help

Share state between nested modal

Yes, this works very well! Thanks madam!

5 replies

•Created by SOIX on 10/16/2024 in #❓┊help

Share state between nested modal

This would be one way of doing it, very hacky:

->default(fn ($livewire) => $livewire->mountedFormComponentActionsData[0]['heading']['color']),

->default(fn ($livewire) => $livewire->mountedFormComponentActionsData[0]['heading']['color']),

Anything else?

5 replies

•Created by SOIX on 10/7/2024 in #❓┊help

default value on dynamically added form fields

i've found an ugly workaround, but thanks 😄

5 replies

•Created by SOIX on 2/20/2024 in #❓┊help

Table interact with filtersForm

Seems like this only works when table is a widget

3 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

Anyone? 😄

11 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

No description

11 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

npm run build? yes several times

11 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

And this is my widget code:

protected function getData(): array
    {
        return $this->loadJsonData();
    }

    protected function getType(): string
    {
        return 'choropleth';
    }

    protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    projection: {
                        axis: 'x',
                        projection: 'albersUsa',
                    },
                    color: {
                        axis: 'x',
                        quantize: 5,
                        legend: {
                        position: 'bottom-right',
                        align: 'right',
                        },
                    },
                },
            }
        JS);
    }

    protected function loadJsonData()
    {
        $path = base_path('node_modules/world-atlas/countries-50m.json');
        $json = file_get_contents($path);
        $data = json_decode($json, true);
        $countries = collect($data['objects']['countries']['geometries']);
        return [
            'labels' => $countries->map(fn ($country) => $country['properties']['name'])->toArray(),
            'datasets' => [
                [
                    'label' => 'Geo data chart',
                    'data' => $countries->map(fn ($country) => [
                        'feature' => $country,
                        'value' => rand(1,1000)
                    ])->toArray(),
                    'backgroundColor' => '#36A2EB',
                    'borderColor' => '#9BD0F5',
                ],
            ],
        ];
    }

protected function getData(): array
    {
        return $this->loadJsonData();
    }

    protected function getType(): string
    {
        return 'choropleth';
    }

    protected function getOptions(): RawJs
    {
        return RawJs::make(<<<JS
            {
                scales: {
                    projection: {
                        axis: 'x',
                        projection: 'albersUsa',
                    },
                    color: {
                        axis: 'x',
                        quantize: 5,
                        legend: {
                        position: 'bottom-right',
                        align: 'right',
                        },
                    },
                },
            }
        JS);
    }

    protected function loadJsonData()
    {
        $path = base_path('node_modules/world-atlas/countries-50m.json');
        $json = file_get_contents($path);
        $data = json_decode($json, true);
        $countries = collect($data['objects']['countries']['geometries']);
        return [
            'labels' => $countries->map(fn ($country) => $country['properties']['name'])->toArray(),
            'datasets' => [
                [
                    'label' => 'Geo data chart',
                    'data' => $countries->map(fn ($country) => [
                        'feature' => $country,
                        'value' => rand(1,1000)
                    ])->toArray(),
                    'backgroundColor' => '#36A2EB',
                    'borderColor' => '#9BD0F5',
                ],
            ],
        ];
    }

11 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

In filament chart.js file custom chart function is exported, but when initing the chart itself it may doesnt come with registered plugin

11 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

I added this into app.js:

import { Chart } from 'chart.js';
import { ChoroplethController } from 'chartjs-chart-geo';

// Register the controller
Chart.register(ChoroplethController);

import { Chart } from 'chart.js';
import { ChoroplethController } from 'chartjs-chart-geo';

// Register the controller
Chart.register(ChoroplethController);

11 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

Alpine Expression Error: "choropleth" is not a registered controller.

11 replies

•Created by SOIX on 2/18/2024 in #❓┊help

Register chart controller

Well this doesnt work... It still says this one is not registered

11 replies