BelongsTo: Dropdown for Voucher Product

BelongsTo: Dropdown for Voucher Product

2024-10-16 وقت القراءه : 3 دقائق

في هذا الدرس سنقوم بإنشاء Filable Resource جديد، بإسم Voucher يكون وظيفه هذا الجدول ، أن نقوم بعمل خصومات على منتج معين، بالتالي نحتاج الحقول التالية (code, discount_percent, product_id)

بداية نحتاج لإنشاء Voucher Model  وكذلك Migration :

php artisan make:model Voucher -m


public function up(): void
{
    Schema::create('vouchers', function (Blueprint $table) {
        $table->id();
        $table->string('code');
        $table->integer('discount_percent');
        $table->foreignId('product_id')->nullable()->constrained();
        $table->timestamps();
    });
}

كما نلاحظ بملف migration أن product_id هو عباره عن forignId من جدول products، بالتالي نحتاج لإنشاء العلاقة في Voucher Model وفي حالتنا هي BelongsTo

class Voucher extends Model
{
    use HasFactory;


    public function product() : BelongsTo
    {
        return $this->belongsTo(Product::class);
    }
}



ومن ثم إنشاء VoucherResource

php artisan make:filament-resource Voucher

كما نعلم أنه وبمجرد إنشاء filment-resource سيتم إضافة الإيقونة والإسم في الـ side الجانبي من الـ Admin Panel

الأن لتحديد الحقول التي نحتاجها نذهب إلى VoucherResource وفي الدالة table بداخل columns نحدد الحقول التي نحتاجها

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('code'),
            Tables\Columns\TextColumn::make('discount_percentage'),
            Tables\Columns\TextColumn::make('product.name'),
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}

كما نلاحظ أن TextColumn الذي سيتعامل مع الحقل product_id يتم تحديد اسمه ( اسم العلاقه أولا ومن ثم اسم الحقل وهنا سنقوم بالتعامل مع name لأنه يجب أن يظهر لنا إسم المنتج)

الأن تحديد حقول الإضافه وهي code, name, كـ TextField أما product_id فهي selectBox تظهر بها المنتجات، وفي هذه الحالة يمكن لنا إستخدام النوع Select مع تحديد forignId وهو product_id وتحديد إسم العلاقه من Vocher Model وهي product ومن ثم تحديد الإسم الذي سيتم عرضه وهو name

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\TextInput::make('code'),
            Forms\Components\TextInput::make('discount_percentage'),
            Forms\Components\Select::make('product_id')->relationship('product', 'name')
        ]);
}


تعديل Label في Filament

كما نلاحظ أن label الذي فوق الحقل أو في عرض المنتجات يكون حسب أسماء الحقول أو إسم العلاقه، لكن ماذا لو كنا نريد التحكم بذلك.

تتيح لنا Filament التحكم بذلك من خلال إضافة label

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('code')->label('Voucher Code'),
                Forms\Components\TextInput::make('discount_percentage')->label('Discount (%)'),
                Forms\Components\Select::make('product_id')->relationship('product', 'name')->label('Choose Product'),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('code')->label('Voucher Code'),
                Tables\Columns\TextColumn::make('discount_percentage')->label('Discount (%)'),
                Tables\Columns\TextColumn::make('product.name')->label('Name Of Product'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }



التحقق من المدخلات في Filament

الأن كما رأينا في  أنه يوجد لدينا حقل لإدخال نسبه الخصم ( رقم )، لكن يمكن للمستخدم إدخال نص، وهنا يجب أن يتاح للمستخدم فقط إدخال أرقام، وللقيام بذلك وإضافة عمليات التحقق.

بداية ماذا نحتاج من عمليات التحقق

  • حقل code يجب ان يكون إجباري، و unique.
  • جقل discount_percentage يجب ان يكون required, numeric ,default (10)، min, max, تحديد steps

وللقيام بذلك نذهب للدالة form->schema ونضيف validation للحقول

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\TextInput::make('code')
                ->label('Voucher Code')
                ->required()
                ->unique(),
            Forms\Components\TextInput::make('discount_percent')
                ->label('Discount (%)')
                ->required()
                ->numeric()
                ->default(10)
                ->extraAttributes(['min'=>1,'max'=>100, 'step'=>1]),
            Forms\Components\Select::make('product_id')
                ->relationship('product', 'name')
                ->label('Choose Product')
                ->required(),
        ]);
}


إضافة تعليق
Loading...