From c736e61f58fd5b3b596e928e9331b403fd0e9c5f Mon Sep 17 00:00:00 2001 From: Nafies Luthfi Date: Sun, 5 Jan 2025 22:35:28 +0800 Subject: [PATCH] feat: Add number separator on amount entry form --- public/js/plugins/number-format.js | 152 ++++++++++++++++++ .../partials/transaction-forms.blade.php | 20 +-- resources/views/categories/show.blade.php | 2 + resources/views/loans/create.blade.php | 9 +- resources/views/loans/edit.blade.php | 10 +- .../loans/partials/single_actions.blade.php | 7 +- resources/views/loans/show.blade.php | 2 + .../partials/transaction-forms.blade.php | 20 +-- resources/views/partners/show.blade.php | 2 + resources/views/transactions/create.blade.php | 20 ++- resources/views/transactions/forms.blade.php | 14 +- resources/views/transactions/index.blade.php | 2 + 12 files changed, 232 insertions(+), 28 deletions(-) create mode 100644 public/js/plugins/number-format.js diff --git a/public/js/plugins/number-format.js b/public/js/plugins/number-format.js new file mode 100644 index 0000000..6e39a5c --- /dev/null +++ b/public/js/plugins/number-format.js @@ -0,0 +1,152 @@ +(function(global) { + // Utility to escape special characters for RegExp + function escapeRegExp(string) { + return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + } + + // Utility function to format number with custom separators + function formatNumber(input, options = {}) { + const { + decimalSeparator = '.', + thousandSeparator = ',' + } = options; + + // If input is empty or just a decimal separator, return as is + if (!input || input === decimalSeparator) return input; + + // Determine the "other" decimal separator to remove + const otherSeparator = decimalSeparator === '.' ? ',' : '.'; + + // Replace the other separator with the preferred decimal separator if present + input = input.replace(new RegExp(escapeRegExp(otherSeparator), 'g'), decimalSeparator); + + // Split the input into integer and decimal parts + const [integerPart, decimalPart] = input.split(decimalSeparator); + + // Remove non-digit characters from integer part + const cleanedIntegerPart = integerPart.replace(/\D/g, ''); + + // Format the integer part with thousand separators + const formattedInteger = cleanedIntegerPart + .replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator) + .trim(); + + // If there's a decimal part, add it back with the custom separator + return decimalPart !== undefined + ? `${formattedInteger}${decimalSeparator}${decimalPart}` + : formattedInteger; + } + + // Main function to initialize number formatting on an input + function initNumberFormatter(selector, options = {}) { + const { + decimalSeparator = '.', + thousandSeparator = ',', + preventArrowKeys = true + } = options; + + // Support both jQuery and vanilla JavaScript selectors + const inputs = global.jQuery + ? global.jQuery(selector) + : document.querySelectorAll(selector); + + // Convert to array for consistent handling + const inputElements = global.jQuery + ? inputs.get() + : Array.from(inputs); + + inputElements.forEach(input => { + // Set attributes for mobile numeric keyboard + input.setAttribute('inputmode', 'decimal'); // For decimal numbers + + // Create a pattern that allows for the separators + const escapedDecimalSep = escapeRegExp(decimalSeparator); + const escapedThousandSep = escapeRegExp(thousandSeparator); + const pattern = `[0-9${escapedThousandSep}]*${escapedDecimalSep}?[0-9]*`; + input.setAttribute('pattern', pattern); + + // Override separators from data attributes if they exist + const selectorDecimalSep = input.dataset.decimalSeparator; + const selectorThousandSep = input.dataset.thousandSeparator; + + const formatterOptions = { + decimalSeparator: selectorDecimalSep || decimalSeparator, + thousandSeparator: selectorThousandSep || thousandSeparator, + }; + + // Update pattern if separators were provided via data attributes + if (selectorDecimalSep || selectorThousandSep) { + const newEscapedDecimalSep = escapeRegExp(formatterOptions.decimalSeparator); + const newEscapedThousandSep = escapeRegExp(formatterOptions.thousandSeparator); + const newPattern = `[0-9${newEscapedThousandSep}]*${newEscapedDecimalSep}?[0-9]*`; + input.setAttribute('pattern', newPattern); + } + + // Prevent cursor movement + input.addEventListener('click', (e) => { + e.target.setSelectionRange(e.target.value.length, e.target.value.length); + }); + + // Prevent arrow keys if option is enabled + if (preventArrowKeys) { + input.addEventListener('keydown', (e) => { + if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) { + e.preventDefault(); + } + }); + } + + // Input formatting + input.addEventListener('input', (e) => { + // Get the raw input value (remove existing spaces and thousand separators) + const rawValue = e.target.value + .replace(new RegExp(escapeRegExp(formatterOptions.thousandSeparator), 'g'), ''); + + // Format the raw value with the custom separators + const formattedValue = formatNumber(rawValue, formatterOptions); + + // Update input value + e.target.value = formattedValue; + + // Always move cursor to the end + e.target.setSelectionRange(e.target.value.length, e.target.value.length); + }); + + // Add form submit handler to clean up the value if needed + if (input.form) { + input.form.addEventListener('submit', (e) => { + // You might want to add a hidden input with the clean numeric value + const cleanValue = input.value + .replace(new RegExp(escapeRegExp(formatterOptions.thousandSeparator), 'g'), '') + .replace(formatterOptions.decimalSeparator, '.'); + + // Create or update hidden input + let hiddenInput = input.form.querySelector(`#${input.id}_clean`); + if (!hiddenInput) { + hiddenInput = document.createElement('input'); + hiddenInput.type = 'hidden'; + hiddenInput.id = `${input.id}_clean`; + hiddenInput.name = input.name; + input.removeAttribute('name'); // Remove name from formatted input + input.form.appendChild(hiddenInput); + } + hiddenInput.value = cleanValue; + }); + } + }); + + // Return the inputs for chaining + return inputs; + } + + // Expose functions globally + global.formatNumber = formatNumber; + global.initNumberFormatter = initNumberFormatter; + + // Auto-initialize if no jQuery (vanilla JS approach) + if (!global.jQuery) { + document.addEventListener('DOMContentLoaded', () => { + initNumberFormatter('[data-number-format]'); + }); + } +})(typeof window !== 'undefined' ? window : global); \ No newline at end of file diff --git a/resources/views/categories/partials/transaction-forms.blade.php b/resources/views/categories/partials/transaction-forms.blade.php index 63626cb..2f9464c 100644 --- a/resources/views/categories/partials/transaction-forms.blade.php +++ b/resources/views/categories/partials/transaction-forms.blade.php @@ -16,17 +16,17 @@ {!! FormField::textarea('description', ['required' => true, 'label' => __('transaction.description')]) !!}
-
-
- -
{{ auth()->user()->currency_code }} - -
- {!! $errors->first('amount', ':message') !!} -
+
+ {!! FormField::text('amount', [ + 'required' => true, + 'value' => old('amount', format_number($editableTransaction->amount)), + 'label' => __('transaction.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!}
-
{!! FormField::radios('in_out', [__('transaction.spending'), __('transaction.income')], ['required' => true, 'label' => __('transaction.transaction')]) !!}
-
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.empty')]) !!}
+
{!! FormField::radios('in_out', [__('transaction.spending'), __('transaction.income')], ['required' => true, 'label' => __('transaction.transaction')]) !!}
+
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.empty')]) !!}
diff --git a/resources/views/categories/show.blade.php b/resources/views/categories/show.blade.php index b6065e7..f82a8d9 100644 --- a/resources/views/categories/show.blade.php +++ b/resources/views/categories/show.blade.php @@ -98,6 +98,7 @@ @push('scripts') {{ Html::script(url('js/plugins/bootstrap-colorpicker.min.js')) }} {{ Html::script(url('js/plugins/jquery.datetimepicker.js')) }} + {{ Html::script(url('js/plugins/number-format.js')) }} @endpush diff --git a/resources/views/loans/create.blade.php b/resources/views/loans/create.blade.php index c911d51..6ca078c 100644 --- a/resources/views/loans/create.blade.php +++ b/resources/views/loans/create.blade.php @@ -13,7 +13,12 @@ {!! FormField::radios('type_id', $loanTypes, ['required' => true, 'label' => __('loan.type')]) !!}
- {!! FormField::text('amount', ['required' => true, 'type' => 'number', 'label' => __('loan.amount')]) !!} + {!! FormField::text('amount', [ + 'required' => true, + 'label' => __('loan.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!}
{!! FormField::text('planned_payment_count', ['required' => true, 'type' => 'number', 'value' => old('planned_payment_count', 1), 'label' => __('loan.planned_payment_count')]) !!} @@ -45,6 +50,7 @@ @push('scripts') {{ Html::script(url('js/plugins/jquery.datetimepicker.js')) }} + {{ Html::script(url('js/plugins/number-format.js')) }} @endpush diff --git a/resources/views/loans/edit.blade.php b/resources/views/loans/edit.blade.php index 0de19c0..a304393 100644 --- a/resources/views/loans/edit.blade.php +++ b/resources/views/loans/edit.blade.php @@ -46,7 +46,13 @@ {!! FormField::radios('type_id', $loanTypes, ['required' => true, 'label' => __('loan.type')]) !!}
- {!! FormField::text('amount', ['required' => true, 'type' => 'number', 'label' => __('loan.amount')]) !!} + {!! FormField::text('amount', [ + 'required' => true, + 'value' => old('amount', format_number($loan->amount)), + 'label' => __('loan.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!}
{!! FormField::text('planned_payment_count', ['required' => true, 'type' => 'number', 'value' => old('planned_payment_count', $loan->planned_payment_count), 'label' => __('loan.planned_payment_count')]) !!} @@ -82,6 +88,7 @@ @push('scripts') {{ Html::script(url('js/plugins/jquery.datetimepicker.js')) }} + {{ Html::script(url('js/plugins/number-format.js')) }} @endpush diff --git a/resources/views/loans/partials/single_actions.blade.php b/resources/views/loans/partials/single_actions.blade.php index 522dbb5..e8a0e6b 100644 --- a/resources/views/loans/partials/single_actions.blade.php +++ b/resources/views/loans/partials/single_actions.blade.php @@ -21,7 +21,12 @@ {!! FormField::textarea('description', ['required' => true, 'label' => __('app.description')]) !!}
- {!! FormField::text('amount', ['required' => true, 'type' => 'number', 'min' => '0', 'label' => __('transaction.amount'), 'class' => 'text-right']) !!} + {!! FormField::text('amount', [ + 'required' => true, + 'label' => __('transaction.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!}
{!! FormField::textDisplay('partner', $loan->partner->name) !!} diff --git a/resources/views/loans/show.blade.php b/resources/views/loans/show.blade.php index a305237..bbda1ca 100644 --- a/resources/views/loans/show.blade.php +++ b/resources/views/loans/show.blade.php @@ -96,6 +96,7 @@ @push('scripts') {{ Html::script(url('js/plugins/jquery.datetimepicker.js')) }} + {{ Html::script(url('js/plugins/number-format.js')) }} @endpush diff --git a/resources/views/partners/partials/transaction-forms.blade.php b/resources/views/partners/partials/transaction-forms.blade.php index 59423b2..2caa052 100644 --- a/resources/views/partners/partials/transaction-forms.blade.php +++ b/resources/views/partners/partials/transaction-forms.blade.php @@ -16,17 +16,17 @@
{!! FormField::textarea('description', ['required' => true, 'label' => __('transaction.description')]) !!}
-
-
- -
{{ auth()->user()->currency_code }} - -
- {!! $errors->first('amount', ':message') !!} -
+
+ {!! FormField::text('amount', [ + 'required' => true, + 'value' => old('amount', format_number($editableTransaction->amount)), + 'label' => __('transaction.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!}
-
{!! FormField::radios('in_out', [__('transaction.spending'), __('transaction.income')], ['required' => true, 'label' => __('transaction.transaction')]) !!}
-
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.empty')]) !!}
+
{!! FormField::radios('in_out', [__('transaction.spending'), __('transaction.income')], ['required' => true, 'label' => __('transaction.transaction')]) !!}
+
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.empty')]) !!}
diff --git a/resources/views/partners/show.blade.php b/resources/views/partners/show.blade.php index df631d5..dd5eca3 100644 --- a/resources/views/partners/show.blade.php +++ b/resources/views/partners/show.blade.php @@ -98,6 +98,7 @@ @push('scripts') {{ Html::script(url('js/plugins/bootstrap-colorpicker.min.js')) }} {{ Html::script(url('js/plugins/jquery.datetimepicker.js')) }} + {{ Html::script(url('js/plugins/number-format.js')) }} @endpush diff --git a/resources/views/transactions/create.blade.php b/resources/views/transactions/create.blade.php index 91ad427..e773f4f 100644 --- a/resources/views/transactions/create.blade.php +++ b/resources/views/transactions/create.blade.php @@ -24,7 +24,14 @@
{!! FormField::textarea('description', ['required' => true, 'label' => __('transaction.description')]) !!}
-
{!! FormField::price('amount', ['required' => true, 'label' => __('transaction.amount'), 'type' => 'number', 'currency' => config('money.currency_code'), 'step' => '0.01']) !!}
+
+ {!! FormField::text('amount', [ + 'required' => true, + 'label' => __('transaction.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!} +
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.no_partner')]) !!}
@@ -53,7 +60,14 @@
{!! FormField::textarea('description', ['required' => true, 'label' => __('transaction.description')]) !!}
-
{!! FormField::price('amount', ['required' => true, 'label' => __('transaction.amount'), 'type' => 'number', 'currency' => config('money.currency_code'), 'step' => '0.01']) !!}
+
+ {!! FormField::text('amount', [ + 'required' => true, + 'label' => __('transaction.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!} +
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.no_partner')]) !!}
@@ -75,6 +89,7 @@ @push('scripts') {{ Html::script(url('js/plugins/jquery.datetimepicker.js')) }} + {{ Html::script(url('js/plugins/number-format.js')) }} @endpush diff --git a/resources/views/transactions/forms.blade.php b/resources/views/transactions/forms.blade.php index 4000203..76bb153 100644 --- a/resources/views/transactions/forms.blade.php +++ b/resources/views/transactions/forms.blade.php @@ -16,9 +16,17 @@
{!! FormField::textarea('description', ['required' => true, 'label' => __('transaction.description')]) !!}
-
{!! FormField::price('amount', ['required' => true, 'label' => __('transaction.amount'), 'type' => 'number']) !!}
-
{!! FormField::radios('in_out', [__('transaction.spending'), __('transaction.income')], ['required' => true, 'label' => __('transaction.transaction')]) !!}
-
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.empty')]) !!}
+
+ {!! FormField::text('amount', [ + 'required' => true, + 'value' => old('amount', format_number($editableTransaction->amount)), + 'label' => __('transaction.amount'), + 'addon' => ['before' => auth()->user()->currency_code], + 'step' => '0.01', + ]) !!} +
+
{!! FormField::radios('in_out', [__('transaction.spending'), __('transaction.income')], ['required' => true, 'label' => __('transaction.transaction')]) !!}
+
{!! FormField::select('partner_id', $partners, ['label' => __('partner.partner'), 'placeholder' => __('partner.empty')]) !!}
diff --git a/resources/views/transactions/index.blade.php b/resources/views/transactions/index.blade.php index 3127d9c..891d6a8 100644 --- a/resources/views/transactions/index.blade.php +++ b/resources/views/transactions/index.blade.php @@ -187,6 +187,7 @@ @push('scripts') {{ Html::script(url('js/plugins/jquery.datetimepicker.js')) }} + {{ Html::script(url('js/plugins/number-format.js')) }} @endpush