How about adding a phone number, for instance, to the Breezy plugin's Personal Info section?
Step 1: Create a new migration
In order to include our new field, we must first create a migration file.
php artisan make:migration add_column_telephone_to_users_table --table=users
Make adjustments similar to the code below:
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('telephone')->nullable()->after('password');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('telephone');
});
}
Remember to execute the migration command in order to apply the modifications to our table.
php artisan migrate
Step 2: Create a new Livewire component
Create a new Livewire component by using the command below. The Breezy Personal Info component will be overridden by this component.
php artisan make:livewire MyPersonalInfo
Change the class to make sure it extends the Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo component instead.
use Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo;
class MyPersonalInfo extends PersonalInfo
{
...
...
}
Next, we must specify the array of fields that will be utilised. If the fields are not declared, the database will not store our phone number.
public array $only = [
'name', 'email', 'telephone',
];
To render the telephone field, we must then write a new function.
protected function getTelephoneComponent(): Forms\Components\TextInput
{
return Forms\Components\TextInput::make('telephone')
->tel()
->label(__('filament-breezy::default.fields.telephone'));
}
Finally, to add our new field, override the getProfileFormSchema().
protected function getProfileFormSchema(): array
{
$groupFields = Forms\Components\Group::make([
$this->getNameComponent(),
$this->getEmailComponent(),
$this->getTelephoneComponent(),
])->columnSpan(2);
return ($this->hasAvatars)
? [filament('filament-breezy')->getAvatarUploadComponent(), $groupFields]
: [$groupFields];
}
This is our MyPersonalInfo component's complete code.
<?php
namespace App\Livewire;
use Jeffgreco13\FilamentBreezy\Livewire\PersonalInfo;
use Filament\Forms;
class MyPersonalInfo extends PersonalInfo
{
public array $only = [
'name', 'email', 'telephone',
];
protected function getTelephoneComponent(): Forms\Components\TextInput
{
return Forms\Components\TextInput::make('telephone')
->tel()
->label(__('filament-breezy::default.fields.telephone'));
}
protected function getProfileFormSchema(): array
{
$groupFields = Forms\Components\Group::make([
$this->getNameComponent(),
$this->getEmailComponent(),
$this->getTelephoneComponent(),
])->columnSpan(2);
return ($this->hasAvatars)
? [filament('filament-breezy')->getAvatarUploadComponent(), $groupFields]
: [$groupFields];
}
}
Step 3: Add new translation
To add our telephone field to the newly created field, we must publish Breezy translation files.
php artisan vendor:publish --tag=filament-breezy-translations
Add telephone to the fields array in /lang/vendor/filament-breezy/en/default.php.
'fields' => [
...
'email' => 'Email',
'telephone' => 'Telephone',
'login' => 'Login',
...
As you see fit, you can include translation into another language.
Step 4: Set the new Profile Info component
Last but not least, we must configure our new Personal Info component in our panel service provider, which for me is /app/Providers/Filament/AdminServiceProvider.
->plugins([
BreezyCore::make()
->myProfileComponents([
'personal_info' => MyPersonalInfo::class,
])
]);
It should do the trick. A telephone field has been added to our Personal Info section.
You can add other fields as well by modifying the codes above.
Top comments (0)