Skip to content

Update column visibility at the end of rendering the treeview [PREVIEW] #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 5, 2024
Merged

Update column visibility at the end of rendering the treeview [PREVIEW] #187

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 44 additions & 4 deletions sao/src/view/tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,9 +300,7 @@
column.set_visible(jQuery(evt.delegateTarget).prop('checked'));
this.save_optional();
this.display();
for (const row of this.rows) {
row.update_visible();
}
this.update_visible();
};
var menu = evt.data;
menu.empty();
Expand Down Expand Up @@ -905,6 +903,7 @@
}).map(function(row) {
return row.el;
}));
this.update_visible();
if ((this.display_size < this.group.length) &&
(!this.tbody.children().last().hasClass('more-row'))) {
var more_row = jQuery('<tr/>', {
Expand Down Expand Up @@ -985,6 +984,38 @@
this.record = record;
// TODO update_children
},
update_visible: function() {
var to_hide = [];
var to_show = [];
for (var i = 0; i < this.columns.length; i++) {
var column = this.columns[i];
if (column.visible && column.header.css('display') == 'none') {
to_hide.push(i);
} else {
to_show.push(i);
}
}
const make_selector = (col_idx) => {
// Take into account the selection or optional column
var offset = 1;
if (this.draggable) {
offset += 1;
} else if (this.optionals.length) {
offset += 1;
}
// CSS is 1-indexed
return `tr td:nth-child(${col_idx + offset + 1})`;
};

if (to_hide.length) {
this.tbody.find(to_hide.map(make_selector).join(','))
.addClass('invisible').hide();
}
if (to_show.length) {
this.tbody.find(to_show.map(make_selector).join(','))
.removeClass('invisible').show();
Copy link
Contributor

@havaguernicoopengo havaguernicoopengo Apr 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Petit problème ici avec jQuery qui repasse un coup de recalculate style sur tout le DOM en itérant sur le body j'ai l'impression. J'ai cherché des solutions pour éviter ça mais no luck.

Copy link
Collaborator Author

@nicoe nicoe Apr 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je pensais naïvement qu'en utilisant un selecteur ça ne ferait qu'une seule invalidation.

}
},
update_sum: function() {
for (const [column, sum_widget] of this.sum_widgets) {
var name = column.attributes.name;
Expand Down Expand Up @@ -1858,7 +1889,6 @@
}
apply_visual(td, visual);
}
this.update_visible();
}
if (this.children_field) {
this.tree.columns.every((column, i) => {
Expand Down Expand Up @@ -2009,6 +2039,7 @@
return row.el;
}));
this.tree.update_selection();
this.tree.update_visible();
});
});
},
Expand Down Expand Up @@ -2612,13 +2643,18 @@
this.suffixes = [];
this.header = null;
this.footers = [];
this._visible_header = true;
},
get field_name() {
return this.attributes.name;
},
get model_name() {
return model.name;
},
get visible() {
// 480px is bootstrap's screen-xs-max
return (window.visualViewport.width > 480) && this._visible_header;
},
get_cell: function() {
var cell = jQuery('<div/>', {
'class': this.class_,
Expand All @@ -2639,8 +2675,10 @@
this.field.set_state(record);
var state_attrs = this.field.get_state_attrs(record);
if (state_attrs.invisible) {
this._visible_header = false;
cell.hide();
} else {
this._visible_header = true;
cell.show();
}
};
Expand Down Expand Up @@ -2668,9 +2706,11 @@
for (const cell of cells) {
if (visible) {
cell.show();
this._visible_header = true;
cell.removeClass('invisible');
} else {
cell.hide();
this._visible_header = false;
cell.addClass('invisible');
}
}
Expand Down