Laravel Filamentで請求システム作る No3 顧客管理機能を作る
前回引き続きFilamentで請求システムを作っていきます。
今回はどこまで進めるか解らないですが、
一旦顧客管理機能の実装をしていきます。
マイグレーションファイルを作成する
vendor/bin/sail artisan make:migration create_customer_table
でdatabase\migrations\2023_11_18_051738_create_customer_table.phpができました。
このファイルにテーブルのカラムを書いていきます。
use Illuminate\Support\Facades\Schema;
+ use Illuminate\Database\Eloquent\SoftDeletes;
return new class extends Migration
{
public function up(): void
{
Schema::create('customers, function (Blueprint $table) {
$table->id();
+ $table->string('name');
+ $table->string('title')->comment('敬称 様 御中をテキストで入れる');
+ $table->softDeletes();
$table->timestamps();
});
}
こんな感じにしました。
マイグレーションを実行しましょう
vendor/bin/sail artisan migrate
できましたね。
顧客管理のCRUDを作る
filamentではCRUDの事をリソースというそうです。
と、いう事でカスタマーリソースを作るといいましょうか・・・
vendor/bin/sail artisan filament:resource Customer
を実行すると、以下のようになり、
app\Filament\Resources\CustomerResource.phpと
app\Filament\Resources\CustomerResourceができました。
ちなみに画面はこんな感じでサイドバーに[Customer」と表示されています。
このサイドバーに作られた「Customer」をクリックすると
Modelがねぇぞクソ野郎！と怒られるので、modelを作ります。
vendor/bin/sail artisan make:model Customer
できた。
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
+ use Illuminate\Database\Eloquent\SoftDeletes;
class Customer extends Model
{
use HasFactory;
+ use SoftDeletes;
+ protected $fillable = [
+ 'name',
+ 'title',
+ ];
}
でモデルが完成しましたので、もう一回サイドバーの「Customer」をクリックして画面遷移します。
OKとりあえず表示しました。
「customer」のままはイヤなので、日本語化します。
class CustomerResource extends Resource
{
+ protected static ?string $modelLabel = '顧客';
protected static ?string $model = Customer::class;
とすると、こんな感じで大体の部分が日本語になりました。
作成・編集画面を作成する
一旦、一覧画面を無視して、作成・編集画面の要素を作ります。
+ use Filament\Forms\Components;
public static function form(Form $form): Form
{
return $form
->schema([
+ Components\TextInput::make('name')->label('顧客名')->required(),
+ Components\Select::make('title')->label('敬称')->options([
+ '御中'=>'御中',
+ '様'=>'様',
+ ])->default('御中')->required(),
]);
}
この状態で顧客一覧画面の「新規顧客」ボタンをクリックします。
新規作成画面が完成しました。
とりあえずデータを保存します。
とでもして「作成」ボタンをクリックします。
できましたwww
保存ができたら、編集画面にリダイレクトします。
画面右上に「削除」ボタンができましたので、クリックしてみます。
削除確認ダイアログが表示しましたね。
確定をクリックしてみます。
削除できました。
神か！！！
一覧画面を作るためにデータが無いと、「顧客が見つかりません」となって、
テーブルが表示しないので再度データを作りましょう。
一覧画面を作成する
データを1件作って表示するとこんな感じです。
1件データが有る事はわかりますが、何も表示されていません。
表示します
+ use Filament\Tables\Columns;
public static function table(Table $table): Table
{
return $table
->columns([
+ Columns\TextColumn::make('name')->label('顧客名'),
+ Columns\TextColumn::make('title')->label('敬称')
])
->filters([
とすると、
データが表示されました。
検索も作っておきましょうか・・・
敬称で検索してもしかたないので、顧客名でテキストを入力する検索でですかね？
んで、Filamentの公式ドキュメントを調べるとテキストで検索する方法が書いて無い・・・
たぶんカスタムフィルターってやつをつかうんでしょうね。
+ use Filament\Tables\Filters;
public static function table(Table $table): Table
{
return $table
->columns([
Columns\TextColumn::make('name')->label('顧客名'),
Columns\TextColumn::make('title')->label('敬称')
])
->filters([
+ Filters\Filter::make('name')->label('顧客名')
+ ->form([
+ Components\TextInput::make('name')->label('顧客名'),
+ ])
+ ->query(function (Builder $query, $data) {
+ return $query
+ ->when(
+ $data['name'],
+ function(Builder $query, $searchWord){
+ return $query->where('name', 'like', "%{$searchWord}%");
+ }
+ );
+ }),
])
とすると、画面はこんな感じになりました。
テーブルの右上の赤色の線で囲った部分をクリックすると、
検索条件がでてきましたね。
これじゃちょっと使いにくいので、検索条件をテーブルの外に出したい！
ここにありました
->filters([
Filters\Filter::make('name')->label('顧客名')
->form([
Components\TextInput::make('name')->label('顧客名'),
])
->query(function (Builder $query, $data) {
return $query
->when(
$data['name'],
function(Builder $query, $searchWord){
return $query->where('name', 'like', "%{$searchWord}%");
}
);
}),
- ],)
+ ],layout: FiltersLayout::AboveContent)
こんな感じで表示します。
でけた！
でも1個しか検索条件がないに、顧客検索の幅が短くね？
1/2ぐらいの幅で表示して欲しい
->query(function (Builder $query, $data) {
return $query
->when(
$data['name'],
function(Builder $query, $searchWord){
return $query->where('name', 'like', "%{$searchWord}%");
}
);
}),
],layout: FiltersLayout::AboveContent)
+ ->filtersFormColumns(2)
->actions([
Tables\Actions\EditAction::make(),
])
良い感じです！
一旦、これで顧客管理のCRUDが完成としましょう。
次回
次は、「自社情報管理」だと思ってましたが、「ユーザー管理」を作ります。
Discussion