fix: grid button labels and visibility

This commit is contained in:
barredterra 2025-12-30 18:46:11 +01:00
parent eb4139ed4a
commit 87695bd08b

View file

@ -87,20 +87,20 @@ export default class Grid {
data-action="delete_rows">
${__("Delete")}
</button>
<button type="button" class="btn btn-xs btn-secondary hidden grid-duplicate-row"
data-action="duplicate_rows">
${__("Duplicate Row")}
</button>
<button type="button" class="btn btn-xs btn-danger grid-remove-all-rows hidden"
data-action="delete_all_rows">
${__("Delete All")}
data-action="delete_all_rows">
${__("Delete all")}
</button>
<button type="button" class="btn btn-xs btn-secondary grid-duplicate-rows hidden"
data-action="duplicate_rows">
${__("Duplicate rows")}
</button>
<!-- hack to allow firefox include this in tabs -->
<button type="button" class="btn btn-xs btn-secondary grid-add-row">
${__("Add Row")}
${__("Add row")}
</button>
<button type="button" class="grid-add-multiple-rows btn btn-xs btn-secondary hidden">
${__("Add Multiple")}</a>
${__("Add multiple")}</a>
</button>
</div>
<div class="grid-pagination">
@ -135,6 +135,7 @@ export default class Grid {
this.grid_buttons = this.wrapper.find(".grid-buttons");
this.grid_custom_buttons = this.wrapper.find(".grid-custom-buttons");
this.remove_rows_button = this.grid_buttons.find(".grid-remove-rows");
this.duplicate_rows_button = this.grid_buttons.find(".grid-duplicate-rows");
this.remove_all_rows_button = this.grid_buttons.find(".grid-remove-all-rows");
this.duplicate_row_button = this.grid_buttons.find(".grid-duplicate-row");
@ -219,6 +220,16 @@ export default class Grid {
this.grid_rows_by_docname[docname].select(checked);
this.last_checked_docname = docname;
}
const num_selected_rows = this.get_selected_children().length;
// toggle "Add Row" button
this.wrapper.find(".grid-add-row").toggleClass("hidden", num_selected_rows > 0);
// update "Delete" button label
this.remove_rows_button.text(__("Delete {0} rows", [num_selected_rows]));
this.duplicate_rows_button.text(__("Duplicate {0} rows", [num_selected_rows]));
this.refresh_remove_rows_button();
this.refresh_duplicate_rows_button();
});
@ -293,7 +304,8 @@ export default class Grid {
}
delete_all_rows() {
frappe.confirm(__("Are you sure you want to delete all rows?"), () => {
const num_rows = this.data.length;
frappe.confirm(__("Are you sure you want to delete all {0} rows?", [num_rows]), () => {
this.frm.doc[this.df.fieldname] = [];
$(this.parent).find(".rows").empty();
this.grid_rows = [];
@ -324,10 +336,11 @@ export default class Grid {
return;
}
this.remove_rows_button.toggleClass(
"hidden",
this.wrapper.find(".grid-body .grid-row-check:checked:first").length ? false : true
);
const show_buttons = this.wrapper.find(".grid-body .grid-row-check:checked:first").length
? false
: true;
this.remove_rows_button.toggleClass("hidden", show_buttons);
this.duplicate_rows_button.toggleClass("hidden", show_buttons);
let select_all_checkbox_checked = this.wrapper.find(
".grid-heading-row .grid-row-check:checked:first"
@ -335,6 +348,10 @@ export default class Grid {
let show_delete_all_btn =
select_all_checkbox_checked && this.data.length > this.get_selected_children().length;
this.remove_all_rows_button.toggleClass("hidden", !show_delete_all_btn);
if (show_delete_all_btn) {
this.remove_all_rows_button.text(__("Delete all {0} rows", [this.data.length]));
}
}
debounced_refresh_remove_rows_button = frappe.utils.debounce(
@ -547,8 +564,13 @@ export default class Grid {
if (this.is_editable()) {
this.wrapper.find(".grid-footer").toggle(true);
const num_selected_rows = this.get_selected_children().length;
// show, hide buttons to add rows
if (this.cannot_add_rows || (this.df && this.df.cannot_add_rows)) {
if (
this.cannot_add_rows ||
(this.df && this.df.cannot_add_rows) ||
num_selected_rows > 0
) {
// add 'hidden' to buttons
this.wrapper
.find(".grid-add-row, .grid-add-multiple-rows, .grid-duplicate-row")