Feature - Field translated text (#1505)

This PR fix definitely the TranslatedText component for the MVP. It's a same UX approach that legacy version. Let's get a simple solution working and consider a better solution later. The issue related to #1425 --------- Co-authored-by: Alec Ritson <[email protected]> Co-authored-by: Glenn Jacobs <[email protected]>
lunarphp · Feb 14, 2024 · e32d2cc · e32d2cc
1 parent 62af43e
commit e32d2cc
Show file tree

Hide file tree

Showing 23 changed files with 246 additions and 107 deletions.
diff --git a/packages/admin/resources/lang/en/fieldtypes.php b/packages/admin/resources/lang/en/fieldtypes.php
@@ -26,6 +26,7 @@
             'richtext' => [
                 'label' => 'Rich Text',
             ],
+            'locales' => 'Locales',
         ],
     ],
     'toggle' => [

diff --git a/packages/admin/resources/views/forms/components/translated-text.blade.php b/packages/admin/resources/views/forms/components/translated-text.blade.php
@@ -1,21 +1,54 @@
-<x-dynamic-component
-    :component="$getFieldWrapperView()"
-    :field="$field"
->
+<x-dynamic-component 
+    :component="$getFieldWrapperView()" 
+    :field="$field" 
+    x-data="{ showTranslations: {{ $getExpanded() ? 'true' : 'false' }} }"
+>   
 
-        <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }">
-            @foreach ($getLanguages() as $language)
-
-                <div class="mt-2">
-                    <x-filament::input.wrapper>
-                        <x-filament::input
-                            type="text"
-                            x-model="state.{{ $language->code }}"
-                        />
-                    </x-filament::input.wrapper>
-                </div>
+    <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }">
+        <div class="flex items-center gap-2">
+            @if ($getMoreLanguages()->count())
+                <span x-show="showTranslations"
+                    class="items-center w-8 place-content-center text-xs font-normal p-2 rounded shadow-sm bg-gray-200 text-gray-400 dark:bg-white/5 dark:text-white uppercase">
+                    {{ Str::upper($getDefaultLanguage()->code) }}
+                </span>
+            @endif
+            <x-filament::input.wrapper class="w-full">
+                {{ $getComponentByLanguage($getDefaultLanguage()) }}
+            </x-filament::input.wrapper>
+        </div>
 
+        @if ($getMoreLanguages()->count())
+            @foreach ($getMoreLanguages() as $language)
+                <div x-show="showTranslations" class="flex items-center gap-2 mt-4">
+                    <span x-show="showTranslations"
+                        class="w-8 text-xs font-normal p-2 rounded shadow-sm bg-gray-200 text-gray-400 dark:bg-white/5 dark:text-white uppercase">
+                        {{ Str::upper($language->code) }}
+                    </span>
+                    <x-filament::input.wrapper class="w-full">
+                        {{ $getComponentByLanguage($language) }}
+                    </x-filament::input.wrapper>    
+                </div>        
             @endforeach
+        @endif
+    </div>
+
+    @if ($getMoreLanguages()->count())
+        <div class="mt-2">
+            <x-filament::button 
+                x-on:click.prevent="showTranslations = !showTranslations" 
+                size="xs" 
+                color="gray"
+                >
+                <x-filament::icon 
+                    alias="lunar::languages" 
+                    @class(['w-3.5 h-3.5 inline-flex'])
+                />
+                <span class="ml-2">
+                    {{ __('lunarpanel::fieldtypes.translatedtext.form.locales') }}
+                </span>
+            </x-filament::button>
+            </button>
         </div>
+    @endif
 
-</x-dynamic-component>
+</x-dynamic-component>
diff --git a/packages/admin/src/Filament/Resources/AttributeGroupResource.php b/packages/admin/src/Filament/Resources/AttributeGroupResource.php
@@ -72,7 +72,7 @@ protected static function getAttributableTypeFormComponent(): Component
 
     protected static function getNameFormComponent(): Component
     {
-        return \Lunar\Admin\Support\Forms\Components\TranslatedText::make('name') // TODO: we need a custom field type for this
+        return \Lunar\Admin\Support\Forms\Components\TranslatedText::make('name')
             ->label(__('lunarpanel::attributegroup.form.name.label'))
             ->required()
             ->maxLength(255)

diff --git a/.../Filament/Resources/AttributeGroupResource/RelationManagers/AttributesRelationManager.php b/.../Filament/Resources/AttributeGroupResource/RelationManagers/AttributesRelationManager.php
@@ -11,6 +11,8 @@
 use Illuminate\Support\Str;
 use Illuminate\Validation\Rules\Unique;
 use Lunar\Admin\Support\Facades\AttributeData;
+use Lunar\Admin\Support\Forms\Components\TranslatedText;
+use Lunar\Models\Language;
 
 class AttributesRelationManager extends RelationManager
 {
@@ -27,7 +29,7 @@ public function form(Form $form): Form
     {
         return $form
             ->schema([
-                Forms\Components\TextInput::make('name.en') // TODO: localise
+                TranslatedText::make('name')
                     ->label(
                         __('lunarpanel::attribute.form.name.label')
                     )
@@ -38,7 +40,7 @@ public function form(Form $form): Form
                         if ($operation !== 'create') {
                             return;
                         }
-                        $set('handle', Str::slug($state));
+                        $set('handle', Str::slug($state[Language::getDefault()->code])); // TODO : create new global variable on LunarPanelManager with default language ?
                     }),
                 Forms\Components\TextInput::make('description.en') // TODO: localise
                     ->label(

diff --git a/packages/admin/src/Filament/Resources/ProductOptionResource.php b/packages/admin/src/Filament/Resources/ProductOptionResource.php
@@ -9,6 +9,7 @@
 use Filament\Tables\Table;
 use Lunar\Admin\Filament\Resources\ProductOptionResource\Pages;
 use Lunar\Admin\Filament\Resources\ProductOptionResource\RelationManagers;
+use Lunar\Admin\Support\Forms\Components\TranslatedText;
 use Lunar\Admin\Support\Resources\BaseResource;
 use Lunar\Models\ProductOption;
 
@@ -51,7 +52,7 @@ protected static function getMainFormComponents(): array
 
     protected static function getNameFormComponent(): Component
     {
-        return \Lunar\Admin\Support\Forms\Components\TranslatedText::make('name') // TODO: we need a custom field type for this
+        return TranslatedText::make('name')
             ->label(__('lunarpanel::productoption.form.name.label'))
             ->required()
             ->maxLength(255)
@@ -60,7 +61,7 @@ protected static function getNameFormComponent(): Component
 
     protected static function getLabelFormComponent(): Component
     {
-        return \Lunar\Admin\Support\Forms\Components\TranslatedText::make('label') // TODO: we need a custom field type for this
+        return TranslatedText::make('label')
             ->label(__('lunarpanel::productoption.form.label.label'))
             ->required()
             ->maxLength(255)

diff --git a/...n/src/Filament/Resources/ProductOptionResource/RelationManagers/ValuesRelationManager.php b/...n/src/Filament/Resources/ProductOptionResource/RelationManagers/ValuesRelationManager.php
@@ -2,12 +2,12 @@
 
 namespace Lunar\Admin\Filament\Resources\ProductOptionResource\RelationManagers;
 
-use Filament\Forms;
 use Filament\Forms\Form;
 use Filament\Resources\RelationManagers\RelationManager;
 use Filament\Tables;
 use Filament\Tables\Table;
 use Illuminate\Database\Eloquent\Model;
+use Lunar\Admin\Support\Forms\Components\TranslatedText;
 use Lunar\Models\ProductOptionValue;
 
 class ValuesRelationManager extends RelationManager
@@ -23,7 +23,7 @@ public function form(Form $form): Form
     {
         return $form
             ->schema([
-                Forms\Components\TextInput::make('name.en')
+                TranslatedText::make('name')
                     ->required()
                     ->maxLength(255),
             ]);

diff --git a/packages/admin/src/Filament/Resources/ProductResource.php b/packages/admin/src/Filament/Resources/ProductResource.php
@@ -22,6 +22,7 @@
 use Lunar\Admin\Filament\Widgets\Products\VariantSwitcherTable;
 use Lunar\Admin\Support\Forms\Components\Attributes;
 use Lunar\Admin\Support\Forms\Components\Tags as TagsComponent;
+use Lunar\Admin\Support\Forms\Components\TranslatedText;
 use Lunar\Admin\Support\RelationManagers\ChannelRelationManager;
 use Lunar\Admin\Support\RelationManagers\MediaRelationManager;
 use Lunar\Admin\Support\RelationManagers\PriceRelationManager;
@@ -169,7 +170,7 @@ public static function getBasePriceFormComponent(): Component
 
     public static function getBaseNameFormComponent(): Component
     {
-        return Forms\Components\TextInput::make('name')
+        return TranslatedText::make('name')
             ->label(__('lunarpanel::product.form.name.label'))->required();
     }
 

diff --git a/packages/admin/src/Filament/Resources/ProductResource/Pages/ListProducts.php b/packages/admin/src/Filament/Resources/ProductResource/Pages/ListProducts.php
@@ -12,10 +12,8 @@
 use Lunar\Admin\Filament\Resources\ProductResource;
 use Lunar\Admin\Support\Pages\BaseListRecords;
 use Lunar\Facades\DB;
-use Lunar\FieldTypes\TranslatedText;
 use Lunar\Models\Attribute;
 use Lunar\Models\Currency;
-use Lunar\Models\Language;
 use Lunar\Models\Product;
 use Lunar\Models\TaxClass;
 
@@ -52,25 +50,19 @@ public static function createActionFormInputs(): array
 
     public static function createRecord(array $data, string $model): Model
     {
-        $language = Language::getDefault();
         $currency = Currency::getDefault();
 
         $nameAttribute = Attribute::whereAttributeType($model)
             ->whereHandle('name')
-            ->first();
-
-        $name = $data['name'];
-
-        if ($nameAttribute->type == TranslatedText::class) {
-            $name = [$language->code => $name];
-        }
+            ->first()
+            ->type;
 
         DB::beginTransaction();
         $product = $model::create([
             'status' => 'draft',
             'product_type_id' => $data['product_type_id'],
             'attribute_data' => [
-                'name' => new $nameAttribute->type($name),
+                'name' => new $nameAttribute($data['name']),
             ],
         ]);
         $variant = $product->variants()->create([

diff --git a/packages/admin/src/Support/Actions/Collections/CreateChildCollection.php b/packages/admin/src/Support/Actions/Collections/CreateChildCollection.php
@@ -3,9 +3,9 @@
 namespace Lunar\Admin\Support\Actions\Collections;
 
 use Filament\Actions\CreateAction;
-use Filament\Forms\Components\TextInput;
 use Illuminate\Database\Eloquent\Model;
 use Lunar\Admin\Support\Actions\Traits\CreatesChildCollections;
+use Lunar\Admin\Support\Forms\Components\TranslatedText;
 use Lunar\Models\Collection;
 
 class CreateChildCollection extends CreateAction
@@ -25,7 +25,7 @@ public function setUp(): void
         });
 
         $this->form([
-            TextInput::make('name')->required(),
+            TranslatedText::make('name')->required(),
         ]);
 
         $this->label(

diff --git a/packages/admin/src/Support/Actions/Collections/CreateRootCollection.php b/packages/admin/src/Support/Actions/Collections/CreateRootCollection.php
@@ -3,13 +3,11 @@
 namespace Lunar\Admin\Support\Actions\Collections;
 
 use Filament\Actions\CreateAction;
-use Filament\Forms\Components\TextInput;
 use Filament\Forms\Form;
+use Lunar\Admin\Support\Forms\Components\TranslatedText;
 use Lunar\Facades\DB;
-use Lunar\FieldTypes\TranslatedText;
 use Lunar\Models\Attribute;
 use Lunar\Models\Collection;
-use Lunar\Models\Language;
 
 class CreateRootCollection extends CreateAction
 {
@@ -23,22 +21,12 @@ public function setUp(): void
             DB::beginTransaction();
 
             $record = $this->process(function (array $data) {
-                $attribute = Attribute::whereHandle('name')->whereAttributeType(Collection::class)->first();
-                $nameValue = $data['name'];
-
-                $fieldType = $attribute->type;
-
-                if ($fieldType == TranslatedText::class) {
-                    $language = Language::getDefault();
-                    $nameValue = collect([
-                        $language->code => $data['name'],
-                    ]);
-                }
+                $attribute = Attribute::whereHandle('name')->whereAttributeType(Collection::class)->first()->type;
 
                 return Collection::create([
                     'collection_group_id' => $data['collection_group_id'],
                     'attribute_data' => [
-                        'name' => new $fieldType($nameValue),
+                        'name' => new $attribute($data['name']),
                     ],
                 ]);
             });
@@ -68,7 +56,7 @@ public function setUp(): void
         });
 
         $this->form([
-            TextInput::make('name')->required(),
+            TranslatedText::make('name')->required(),
         ]);
 
         $this->label(

diff --git a/packages/admin/src/Support/Actions/Traits/CreatesChildCollections.php b/packages/admin/src/Support/Actions/Traits/CreatesChildCollections.php
@@ -3,33 +3,21 @@
 namespace Lunar\Admin\Support\Actions\Traits;
 
 use Lunar\Facades\DB;
-use Lunar\FieldTypes\TranslatedText;
 use Lunar\Models\Attribute;
 use Lunar\Models\Collection;
-use Lunar\Models\Language;
 
 trait CreatesChildCollections
 {
-    public function createChildCollection(Collection $parent, string $name)
+    public function createChildCollection(Collection $parent, array $name)
     {
         DB::beginTransaction();
 
-        $attribute = Attribute::whereHandle('name')->whereAttributeType(Collection::class)->first();
-
-        $nameValue = $name;
-        $fieldType = $attribute->type;
-
-        if ($fieldType == TranslatedText::class) {
-            $language = Language::getDefault();
-            $nameValue = collect([
-                $language->code => $name,
-            ]);
-        }
+        $attribute = Attribute::whereHandle('name')->whereAttributeType(Collection::class)->first()->type;
 
         $parent->appendNode(Collection::create([
             'collection_group_id' => $parent->collection_group_id,
             'attribute_data' => [
-                'name' => new $fieldType($nameValue),
+                'name' => new $attribute($name),
             ],
         ]));
 

diff --git a/packages/admin/src/Support/FieldTypes/TranslatedText.php b/packages/admin/src/Support/FieldTypes/TranslatedText.php
@@ -3,7 +3,7 @@
 namespace Lunar\Admin\Support\FieldTypes;
 
 use Filament\Forms\Components\Component;
-use Lunar\Admin\Support\Forms\Components\TranslatedText as TranslatedTextInput;
+use Lunar\Admin\Support\Forms\Components\TranslatedText as TranslatedTextComponent;
 use Lunar\Admin\Support\Synthesizers\TranslatedTextSynth;
 use Lunar\Models\Attribute;
 
@@ -18,7 +18,9 @@ public static function getConfigurationFields(): array
 
     public static function getFilamentComponent(Attribute $attribute): Component
     {
-        return TranslatedTextInput::make($attribute->handle)
+        return TranslatedTextComponent::make($attribute->handle)
+            ->optionRichtext((bool) $attribute->configuration->get('richtext'))
+            ->required((bool) $attribute->configuration->get('required'))
             ->helperText($attribute->translate('description'));
     }
 }
diff --git a/packages/admin/src/Support/Forms/Components/TranslatedRichEditor.php b/packages/admin/src/Support/Forms/Components/TranslatedRichEditor.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace Lunar\Admin\Support\Forms\Components;
+
+use Filament\Forms\Components\RichEditor;
+
+class TranslatedRichEditor extends RichEditor
+{
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        $this->hiddenLabel();
+    }
+}