Giter Club home page Giter Club logo

filament-translatable-field's Introduction

A filament field that handles translations

translatableFieldHeader

This package enables you to implement the following:

  1. Render a language selector to change the localized field
  2. You can save your localized fields data in one click
  3. You can use it in your relationship manager to show the localized fields

translatableField

This package depends on spatie/laravel-translatable, Please check it first to set up your translation logic in your project.

Installation

You can install the package via composer:

composer require 34ml/filament-translatable-field

You can publish the config file with:

php artisan vendor:publish --tag="filament-translatable-field-config"

This is the content of the published config file where fields are created for each language listed here

return [
    'locales' => [
        'en' => 'English',
        'ar' => 'Arabic',
    ],
    'select_translation_field_name' => 'select_language',
];

Translatable Field Usage

Basic Usage

  • Just add the field in your resource, view, create,or edit pages inside the form function
 ..._34ML\FilamentTranslatableField::make(
     'your_translatable_field_name',
     \Filament\Forms\Components\TextInput::class, // The field type class 
)
  • If you want to customize the label of the field
 ..._34ML\FilamentTranslatableField::make(
     'your_translatable_field_name',
     \Filament\Forms\Components\TextInput::class, // The field type class
     'your_field_displayed_name', // Optional
)
  • If you want to add filament field functions
  ..._34ML\FilamentTranslatableField::make(
     'your_translatable_field_name',
     \Filament\Forms\Components\TextInput::class, // The field type class 
    // add your filament field functions as a callback, you can add it as one function
    callbacks: function (){
        $this->required();
        $this->numeric();
        return $this; // You have to return the field or the callbacks won't work
    }
)

Language Selector

If you want to add a language selector that shows only the selected language's fields instead of showing all fields you can simply add this field in your resource, view, create,or edit pages inside the form function

use _34ML\FilamentTranslatableField\Forms\Components\LanguageSelector;

return $form
           ->schema([
               LanguageSelector::make(),
                ]);

Relationship Manager

you need to add this code to your relationship manager

    public static function getRecordTitle(?Model $record): ?string
    {
        return $record->getTranslation('your_title_column', config('filament-translatable-field.locales')[0]);
    }

Credits

License

The MIT License (MIT). Please see License File for more information.

filament-translatable-field's People

Contributors

mostafahassan1 avatar samir34ml avatar aessam13 avatar dependabot[bot] avatar github-actions[bot] avatar rehammourad avatar

Stargazers

Ahmed Wahba avatar Vit avatar SAID LOUHAM avatar Mohamed Nasser avatar Taha Cankurt avatar Mohamed (Mo) Kawsara avatar Jèfferson Gonçalves avatar  avatar Karam Nassar avatar  avatar AbdulQader avatar  avatar  avatar Mai Hesham avatar  avatar Karim Fekry avatar  avatar

Watchers

 avatar  avatar  avatar

filament-translatable-field's Issues

Plugin does not work

Hello, been trying to setup this plugin

use _34ML\FilamentTranslatableField\FilamentTranslatableField;
use Filament\Forms\Components\TextInput;

public static function form(Form $form): Form
{
        return $form
            ->schema([
                FilamentTranslatableField::make(
                    'name',
                    TextInput::class
                ),
            ]);
}

But I get this error:

Filament\Forms\ComponentContainer::Filament\Forms\Concerns\{closure}(): Argument #1 ($component) must be of type Filament\Forms\Components\Component, array given

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.