Merge pull request #2 from ariaieboy/add-form-currency-mask

Add form currency mask
ariaieboy · Sep 9, 2023 · f8871b1 · f8871b1
2 parents 627f17b + d1aedae
commit f8871b1
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,18 @@
-# This is my package filament-currency
+# Enhanced Currency Related stuff for Filament
 ![filament currency](https://banners.beyondco.de/Filament%20Currency.jpeg?theme=dark&packageManager=composer+require&packageName=ariaieboy%2Ffilament-currency&pattern=texture&style=style_2&description=Filament+laravel-money+formatter&md=1&showWatermark=1&fontSize=150px&images=currency-dollar&widths=500&heights=500)
 [![Latest Version on Packagist](https://img.shields.io/packagist/v/ariaieboy/filament-currency.svg?style=flat-square)](https://packagist.org/packages/ariaieboy/filament-currency)
 [![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/ariaieboy/filament-currency/fix-php-code-styling.yml?label=code%20style&style=flat-square)](https://github.com/ariaieboy/filament-currency/actions?query=workflow%3A"Fix+PHP+Code+Styling"+branch%3Amain)
 [![Total Downloads](https://img.shields.io/packagist/dt/ariaieboy/filament-currency.svg?style=flat-square)](https://packagist.org/packages/ariaieboy/filament-currency)
 
-Filament V3 unlike V2 uses [laravel-money](https://github.com/akaunting/laravel-money) package for formatting money TextColumns uses PHP native [NumberFormatter](https://www.php.net/manual/en/class.numberformatter.php) class.
+Filament V3 unlike V2 that uses [laravel-money](https://github.com/akaunting/laravel-money) package for formatting money TextColumns uses PHP native [NumberFormatter](https://www.php.net/manual/en/class.numberformatter.php) class.
 
 This package will add a new `currency(string | Closure $currency = null, bool $shouldConvert = false)` method to the `TextColumn` that uses the Filament V2 money formatter.
 
 By using this package you can configure the formatter using [laravel-money config](https://github.com/akaunting/laravel-money/blob/master/config/money.php).
 
 For example, you can customize the `symbol`, `symbol_first`, `decimal_mark`, and `thousands_separator` for each currency. Or if you want you can add your custom currency to the config and use it in the `currency()` method instead of standard money.
 
+We also have a `currencyMask()` method for `TextInput` that lets you mask your numbers in front-end and return the plain number to back-end.
 ## Installation
 
 You can install the package via Composer:
@@ -31,6 +32,9 @@ php artisan vendor:publish --tag=money
 ```php
 \Filament\Tables\Columns\TextColumn::make('money')
     ->currency('USD');
+
+\Filament\Forms\Components\TextInput::make('money')
+    ->currencyMask(thousandSeparator: ',',decimalSeparator: '.',precision: 2)
 ```
 
 ## Changelog

diff --git a/ide-helper.stubs.php b/ide-helper.stubs.php
@@ -12,3 +12,12 @@ public function currency(string | Closure $currency = null, bool $shouldConvert
         }
     }
 }
+namespace Filament\Forms\Components {
+    class TextInput
+    {
+        public function currencyMask($thousandSeparator = ',', $decimalSeparator = '.', $precision = 2): self
+        {
+            return $this;
+        }
+    }
+}
diff --git a/resources/views/currency-mask.blade.php b/resources/views/currency-mask.blade.php
@@ -0,0 +1,89 @@
+@php
+    $datalistOptions = $getDatalistOptions();
+    $extraAlpineAttributes = $getExtraAlpineAttributes();
+    $id = $getId();
+    $isConcealed = $isConcealed();
+    $isDisabled = $isDisabled();
+    $isPrefixInline = $isPrefixInline();
+    $isSuffixInline = $isSuffixInline();
+    $mask = $getMask();
+    $prefixActions = $getPrefixActions();
+    $prefixIcon = $getPrefixIcon();
+    $prefixLabel = $getPrefixLabel();
+    $suffixActions = $getSuffixActions();
+    $suffixIcon = $getSuffixIcon();
+    $suffixLabel = $getSuffixLabel();
+    $statePath = $getStatePath();
+    $xmask = "\$money(\$input,'$decimalSeparator','$thousandSeparator',$precision)";
+    $xdata = <<<JS
+    {
+        input:\$wire.{$applyStateBindingModifiers("\$entangle('{$statePath}')")},
+        masked:'',
+        init(){
+        this.masked = this.input;
+        \$watch('masked',()=>this.updateInput());
+        },
+        updateInput(){
+            this.input = this.masked.replaceAll('$thousandSeparator','').replaceAll('$decimalSeparator','.');
+        }
+    }
+JS;
+@endphp
+
+<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
+    <x-filament::input.wrapper
+            :disabled="$isDisabled"
+            :inline-prefix="$isPrefixInline"
+            :inline-suffix="$isSuffixInline"
+            :prefix="$prefixLabel"
+            :prefix-actions="$prefixActions"
+            :prefix-icon="$prefixIcon"
+            :suffix="$suffixLabel"
+            :suffix-actions="$suffixActions"
+            :suffix-icon="$suffixIcon"
+            :valid="! $errors->has($statePath)"
+            class="fi-fo-text-input"
+            :attributes="
+            \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
+                ->class(['overflow-hidden'])
+        "
+    >
+        <x-filament::input
+                :attributes="
+                \Filament\Support\prepare_inherited_attributes($getExtraInputAttributeBag())
+                    ->merge($extraAlpineAttributes, escape: false)
+                    ->merge([
+                        'autocapitalize' => $getAutocapitalize(),
+                        'autocomplete' => $getAutocomplete(),
+                        'autofocus' => $isAutofocused(),
+                        'disabled' => $isDisabled,
+                        'id' => $id,
+                        'inlinePrefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
+                        'inlineSuffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
+                        'inputmode' => $getInputMode(),
+                        'list' => $datalistOptions ? $id . '-list' : null,
+                        'max' => (! $isConcealed) ? $getMaxValue() : null,
+                        'maxlength' => (! $isConcealed) ? $getMaxLength() : null,
+                        'min' => (! $isConcealed) ? $getMinValue() : null,
+                        'minlength' => (! $isConcealed) ? $getMinLength() : null,
+                        'placeholder' => $getPlaceholder(),
+                        'readonly' => $isReadOnly(),
+                        'required' => $isRequired() && (! $isConcealed),
+                        'step' => $getStep(),
+                       'x-model' => 'masked',
+                        'type' => 'text',
+                        'x-data' => $xdata,
+                        'x-mask:dynamic' => $xmask
+                    ], escape: false)
+            "
+        />
+    </x-filament::input.wrapper>
+
+    @if ($datalistOptions)
+        <datalist id="{{ $id }}-list">
+            @foreach ($datalistOptions as $option)
+                <option value="{{ $option }}"/>
+            @endforeach
+        </datalist>
+    @endif
+</x-dynamic-component>
diff --git a/src/FilamentCurrencyServiceProvider.php b/src/FilamentCurrencyServiceProvider.php
@@ -4,6 +4,7 @@
 
 use Akaunting\Money;
 use Closure;
+use Filament\Forms\Components\TextInput;
 use Filament\Tables\Columns\Column;
 use Filament\Tables\Columns\TextColumn;
 use Spatie\LaravelPackageTools\Package;
@@ -17,12 +18,13 @@ class FilamentCurrencyServiceProvider extends PackageServiceProvider
 
     public function configurePackage(Package $package): void
     {
-        $package->name(static::$name);
+        $package->name(static::$name)
+            ->hasViews();
     }
 
     public function bootingPackage(): void
     {
-        TextColumn::macro('currency', function (string | Closure $currency = null, bool $shouldConvert = false): TextColumn {
+        TextColumn::macro('currency', function (string|Closure $currency = null, bool $shouldConvert = false): TextColumn {
             /**
              * @var TextColumn $this
              */
@@ -44,5 +46,10 @@ public function bootingPackage(): void
 
             return $this;
         });
+        TextInput::macro('currencyMask', function ($thousandSeparator = ',', $decimalSeparator = '.', $precision = 2): TextInput {
+            $this->view = "filament-currency::currency-mask";
+            $this->viewData(compact('thousandSeparator','decimalSeparator','precision'));
+            return $this;
+        });
     }
 }