Use masked input for Backpex.Fields.Currency

Dockerfile

@@ -41,6 +41,10 @@ ENV PATH=/opt/scripts/:/opt/app/_build/prod/rel/demo/bin:$PATH
 ARG MIX_ENV=prod
 ENV MIX_ENV=$MIX_ENV
 
+# Install root-level (Backpex) dependencies
+COPY package.json yarn.lock ./
+RUN yarn install --pure-lockfile
+
 RUN mkdir demo
 WORKDIR $APP_HOME/demo
 

assets/js/hooks/_currency_input.js

@@ -0,0 +1,49 @@
+import IMask from 'imask'
+
+export default {
+  mounted () {
+    this.maskedInput = this.el.querySelector('[data-masked-input]')
+    this.hiddenInput = this.el.querySelector('[data-hidden-input]')
+
+    this.initializeMask()
+  },
+  initializeMask () {
+    const maskPattern = this.el.dataset.maskPattern
+
+    if (!maskPattern) {
+      console.error('You must provide a mask pattern in the data-masked-pattern attribute.')
+      return
+    }
+
+    this.maskOptions = {
+      mask: maskPattern,
+      lazy: false,
+      blocks: {
+        num: {
+          mask: Number,
+          thousandsSeparator: this.el.dataset.thousandsSeparator,
+          radix: this.el.dataset.radix
+        }
+      }
+    }
+
+    this.mask = IMask(this.maskedInput, this.maskOptions)
+    this.mask.unmaskedValue = this.rawValue(this.hiddenInput.value)
+    this.mask.on('accept', this.handleMaskChange.bind(this))
+  },
+  updated () {
+    this.handleMaskChange()
+  },
+  handleMaskChange () {
+    this.hiddenInput.value = this.rawValue(this.mask.value)
+  },
+  destroyed () {
+    this.mask.destroy()
+  },
+  rawValue (value) {
+    return value
+      .replace(this.el.dataset.unit || '', '')
+      .trim()
+      .replace(new RegExp(`\\${this.el.dataset.thousandsSeparator}`, 'g'), '')
+  }
+}

assets/js/hooks/index.js

@@ -4,3 +4,4 @@ export { default as BackpexSidebarSections } from './_sidebar_sections'
 export { default as BackpexStickyActions } from './_sticky_actions'
 export { default as BackpexThemeSelector } from './_theme_selector'
 export { default as BackpexTooltip } from './_tooltip'
+export { default as BackpexCurrencyInput } from './_currency_input'

compose.yml

@@ -11,6 +11,7 @@ services:
       - STARTUP_COMMAND_2=yarn install --pure-lockfile
       - STARTUP_COMMAND_3=yarn playwright install chromium --with-deps
       - STARTUP_COMMAND_4=mix assets.setup
+      - STARTUP_COMMAND_5=cd .. && mix deps.get && yarn install --pure-lockfile && cd demo
     volumes:
       - .:/opt/app
     ports:

demo/config/config.exs

@@ -37,14 +37,20 @@ config :esbuild,
   ],
   backpex: [
     args: ~w(../assets/js/backpex.js --bundle --format=esm --sourcemap --outfile=priv/static/js/backpex.esm.js),
-    cd: Path.expand("..", __DIR__),
-    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+    cd: Path.expand("..", __DIR__)
   ]
 
 config :logger, :default_formatter,
   format: "$time $metadata[$level] $message\n",
   metadata: [:request_id]
 
+config :money,
+  default_currency: :USD,
+  separator: ",",
+  delimiter: ".",
+  symbol_on_right: false,
+  symbol_space: true
+
 config :phoenix, :json_library, Jason
 
 config :sentry,

demo/lib/demo/invoice.ex

@@ -8,9 +8,7 @@ defmodule Demo.Invoice do
   schema "invoices" do
     field :company, :string
 
-    field :amount, Backpex.Ecto.Amount.Type,
-      currency: :EUR,
-      opts: [separator: ".", delimiter: ",", symbol_on_right: true, symbol_space: true]
+    field :amount, Money.Ecto.Amount.Type
 
     timestamps()
   end

demo/lib/demo/product.ex

@@ -15,9 +15,7 @@ defmodule Demo.Product do
     field :manufacturer, :string
     field :images, {:array, :string}
 
-    field :price, Backpex.Ecto.Amount.Type,
-      currency: :EUR,
-      opts: [separator: ".", delimiter: ",", symbol_on_right: true, symbol_space: true]
+    field :price, Money.Ecto.Amount.Type
 
     has_many :suppliers, Supplier, on_replace: :delete, on_delete: :delete_all
     has_many :short_links, ShortLink, on_replace: :delete, on_delete: :delete_all, foreign_key: :product_id

demo/mix.exs

@@ -79,6 +79,7 @@ defmodule Demo.MixProject do
       {:jason, ">= 1.0.0"},
       {:ash, "~> 3.0"},
       {:ash_postgres, "~> 2.6.0"},
+      {:money, "~> 1.14"},
 
       # assets
       {:esbuild, "~> 0.9", runtime: Mix.env() == :dev},

guides/upgrading/v0.16.md

@@ -0,0 +1,74 @@
+# Upgrading to v0.16
+
+## Bump Your Deps
+
+Update Backpex to the latest version:
+
+```elixir
+defp deps do
+  [
+    {:backpex, "~> 0.16.0"}
+  ]
+end
+```
+
+## `Backpex.Fields.Currency` has been updated
+
+The appearance of the currency field has changed completely. We now use a custom masked input instead of a number input which improves UX a lot.
+In addition we've removed the `money` dependency from Backpex so you can use whatever library you want to use for currencies in your app.
+The removal of `money` includes our custom [`Backpex.Ecto.AmountType`]() ecto type.
+
+If you used the `money` library before, these are the changes you have to make:
+
+1. Configure `unit`, `unit_position`, `radix` and `thousands_separator` for `Backpex.Fields.Currency`
+
+```elixir
+def fields do
+  [
+    price: %{
+      module: Backpex.Fields.Currency,
+      label: "Price",
+      unit: "€",
+      unit_position: :after,
+      radix: ",",
+      thousands_separator: "."
+    },
+    ...
+  ]
+end
+```
+
+See [field-specific options](`Backpex.Fields.Currency`) for default values.
+
+2. Configure defaults for `money` in your `config/config.exs`
+
+```elixir
+config :money,
+  default_currency: :EUR,
+  separator: ".",
+  delimiter: ",",
+  symbol_on_right: true,
+  symbol_space: true
+```
+
+The default values should ideally match the field options from step 1.
+
+3. Replace [`Backpex.Ecto.AmountType`]() with [`Backpex.Ecto.AmountType`]()
+
+```elixir
+schema "products" do
+  field :price, Money.Ecto.Amount.Type
+  ...
+end
+```
+
+4. Add money dependency to your app
+
+```elixir
+def deps do
+  [
+    {:money, "~> 1.14"},
+    ...
+  ]
+end
+```