blade系package(3-4) laravel-form-components radioボタン

最後にradioボタン。

% ./vendor/bin/sail artisan make:model PostStatus -ms

   INFO  Model [app/Models/PostStatus.php] created successfully.

   INFO  Migration [database/migrations/2023_08_29_183801_create_post_statuses_table.php] created successfully.

   INFO  Seeder [database/seeders/PostStatusSeeder.php] created successfully.

これもまたmigrateのorderを変更したりしているが、ともあれ

        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->boolean('is_important');
            $table->foreignId('post_category_id')->constrained();
            $table->foreignId('post_status_id')->constrained();
            $table->timestamps();
        });

こんな感じでpost_status_idをつけてseedも作る

    public function up(): void
    {
        Schema::create('post_statuses', function (Blueprint $table) {
            $table->id();
            $table->string('label')->unique();
            $table->timestamps();
        });
    }

こんな感じでlabelを追加して

class PostStatusSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        $statuses = [
            'published',
            'draft',
            'archived',
        ];

        foreach ($statuses as $label) {
            \App\Models\PostStatus::create(['label' => $label]);
        }
    }
}

seed作って

    public function run(): void
    {
        // \App\Models\User::factory(10)->create();

        // \App\Models\User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);

        $this->call([
            PostCategorySeeder::class,
            PostStatusSeeder::class,
        ]);
    }

seeding

% ./vendor/bin/sail artisan migrate:fresh --seed

  Dropping all tables ........................................................................... 114ms DONE

   INFO  Preparing database.

  Creating migration table ....................................................................... 26ms DONE

   INFO  Running migrations.

  2014_10_12_000000_create_users_table ........................................................... 46ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ........................................... 67ms DONE
  2019_08_19_000000_create_failed_jobs_table ..................................................... 47ms DONE
  2019_12_14_000001_create_personal_access_tokens_table .......................................... 69ms DONE
  2023_08_28_104907_create_post_categories_table ................................................. 28ms DONE
  2023_08_28_183801_create_post_statuses_table ................................................... 46ms DONE
  2023_08_28_204738_create_posts_table .......................................................... 153ms DONE


   INFO  Seeding database.

  Database\Seeders\PostCategorySeeder .............................................................. RUNNING
  Database\Seeders\PostCategorySeeder ........................................................ 28.04 ms DONE

  Database\Seeders\PostStatusSeeder ................................................................ RUNNING
  Database\Seede

準備はok

Controllerから取る

まあselectとそんなに変わらない

namespace App\Http\Controllers;

use App\Models\Post;
use App\Models\PostCategory;
use App\Models\PostStatus; // 追加
// ... 
    public function index(): View
    {
        $posts = Post::latest()->get();
        $postCategories = PostCategory::pluck('name', 'id');
        $postStatuses = PostStatus::pluck('label', 'id');
        return view('posts.index', [
            'posts' => $posts,
            'postCategories' => $postCategories,
            'postStatuses' => $postStatuses,
        ]);
    }

これだけでもなかなか重たいコード量になってきてはいますが

    <x-form action="{{ route('posts.store') }}" class="mb-3">
        <x-form-input name="title" label="{{ __('Title') }}" />

        <x-form-textarea name="body" label="{{ __('Body') }}" />

        <x-form-select name="post_category_id" :options="$postCategories" label="Category" />

        <!-- Inline radio inputs -->
        <x-form-group name="newsletter_frequency" label="Newsletter frequency" inline>
            @foreach($postStatuses as $postStatusId => $postStatusLabel)
                <x-form-radio name="post_status_id" value="{{ $postStatusId }}" label="{{ $postStatusLabel }}" />
            @endforeach
        </x-form-group>


        <div class="mt-3">
            <input type="hidden" name="is_important" value="0">
            <x-form-checkbox name="is_important" label="Important" />
        </div>

        <div class="flex items-center justify-end mt-4">
            <x-form-submit class="ml-3">
                {{ __('Post') }}
            </x-form-submit>
        </div>
    </x-form>

とまあ、諸々調整するとこんな感じのフォームになる。最初の要素だけcheckedにしてみよう。てかコピペしすぎて Newsletterなんとかになってたな…$loop->firstの値をそのままいれたらいい

        <!-- Inline radio inputs -->
        <x-form-group name="post_status" label="Post status" inline>
            @foreach($postStatuses as $postStatusId => $postStatusLabel)
                <x-form-radio name="post_status_id" value="{{ $postStatusId }}" label="{{ $postStatusLabel }}" :checked="$loop->first" />
            @endforeach
        </x-form-group>

しれっと修正

編集画面もとりあえずコピペで対応する

しかしまあゴチャついちゃったので、これも後で修正しないと使いものにゃなりませんな(デモとはいえ)