vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(ux): add currency symbol handling in editable grid rows (#36818)

Browse source
This commit is contained in:
Prathamesh Kurunkar 2026-02-08 11:04:15 +05:30 • committed by GitHub
parent 78396c4334
commit 92c62754e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 96 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frappe/public/js/frappe/form/grid_row.js
View file

@ -1239,6 +1239,12 @@ export default class GridRow {
} else if (this.columns_list && this.columns_list.slice(0)[0] === column) {
field.$input.attr("data-first-input", 1);
}
if (df.fieldtype === "Currency") {
this.update_currency_symbol_in_grid_input(field, df);
field.$input.off("input.grid-currency").on("input.grid-currency", () => {
this.update_currency_symbol_in_grid_input(field, df);
});
}
}
this.set_arrow_keys(field);
@ -1565,6 +1571,9 @@ export default class GridRow {
// - after row removals via customize_form.js on links, actions and states child-tables
if (this.doc) field.docname = this.doc.name;
field.refresh();
if (df && df.fieldtype === "Currency") {
this.update_currency_symbol_in_grid_input(field, df);
}
}
// in form
@ -1572,6 +1581,49 @@ export default class GridRow {
this.grid_form.refresh_field(fieldname);
}
}
update_currency_symbol_in_grid_input(field, df) {
if (!field?.$input || !this.grid?.is_editable?.()) return;
const currency = frappe.meta.get_field_currency(df, this.doc);
const symbol = window.get_currency_symbol(currency);
const show_on_right =
cint(frappe.model.get_value(":Currency", currency, "symbol_on_right")) === 1;
let $wrapper = field.$input.parent();
if (!$wrapper.hasClass("grid-currency-input")) {
field.$input.wrap('<div class="grid-currency-input"></div>');
}
$wrapper.toggleClass("grid-currency-symbol-right", show_on_right);
let $prefix = $wrapper.find(".grid-currency-prefix");
let $suffix = $wrapper.find(".grid-currency-suffix");
if (!symbol) {
$prefix.remove();
$suffix.remove();
$wrapper.removeClass("grid-currency-has-value");
return;
}
if (show_on_right) {
if (!$suffix.length) {
$suffix = $('<span class="grid-currency-suffix"></span>').appendTo($wrapper);
}
$suffix.text(symbol);
$prefix.remove();
} else {
if (!$prefix.length) {
$prefix = $('<span class="grid-currency-prefix"></span>').prependTo($wrapper);
}
$prefix.text(symbol);
$suffix.remove();
}
const has_value = /\d/.test(field.$input.val() || "");
$wrapper.toggleClass("grid-currency-has-value", has_value);
}
get_field(fieldname) {
let field = this.on_grid_fields_dict[fieldname];
if (field) {

44
frappe/public/scss/common/grid.scss
View file

@ -449,6 +449,50 @@
z-index: 1;
}
}
.grid-currency-input {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.grid-currency-prefix,
.grid-currency-suffix {
position: absolute;
color: var(--text-muted);
pointer-events: none;
z-index: 2;
display: none;
}
.grid-currency-prefix {
left: 8px;
}
.grid-currency-suffix {
right: 8px;
}
// for left aligned currency symbol
.grid-currency-input.grid-currency-has-value:not(.grid-currency-symbol-right) .form-control {
padding-left: calc(4px + 1em);
position: relative;
z-index: 1;
text-align: left;
}
// for right aligned currency symbol
.grid-currency-input.grid-currency-has-value.grid-currency-symbol-right .form-control {
padding-right: calc(4px + 1em);
position: relative;
z-index: 1;
}
.grid-currency-input.grid-currency-has-value .grid-currency-prefix,
.grid-currency-input.grid-currency-has-value .grid-currency-suffix {
display: block;
}
}
@mixin base-grid() {