Update grades_-/staff_semester_view to css grid

[fekoch]

Refactors the DataGrid class to provide different factory functions for different HTML representations of the tables.

Updates the tables in:

• grades_semester_view.html
• staff_semester_view.html

[niklasmohrin]

There are still TODOs in the code. Is there something that we should already look at?

[fekoch]

There are still TODOs in the code. Is there something that we should already look at?

Good point, I overlooked those. Something, something self review....

Still, @niklasmohrin I would appreciate a review. Resolving the TODOs should only result in a minimal diff. (I switched it to draft anyway.)

[niklasmohrin]

no one is providing any value for these two attributes, right?

[niklasmohrin]

Same in old version, but: Why are we not querying for [data-col] here?

[niklasmohrin]

It seems that the base data grid is now even more complicated and the responsibilities are less clear. I wonder if there is some way to decompose the responsibilities into more modules/classes. Intuitively, I would say that we have
a) sorting of rows b) filtering of rows c) save and restore of state d) mirroring internal state to the DOM. These responsibilities are somewhat intertwined though.

Maybe one possible way to split this is to have one class that does all the sorting, filtering, state management, but does not interact with the DOM, and another class drives an instance according to what users to in the DOM. Not sure though.

[niklasmohrin]

Discussion today:

• CSS grid is not as great as we think, but we still want it in favor of tables for more flexible sizing
• we want to have table grid functionality in base datagrid, but the code is rather convoluted
• we want to refactor datagrid to separate concerns (filtering, sorting, rendering, initialization), perhaps with a factory function and by attaching several Filter instances to a grid; filters are tied to DOM elements and tell the grid to update, the grid re-renders itself
• long term: all filters fetch their range of possible values from the data in the DOM and create html inputs accordingly (similar to RangeSlider's includeValues today); edit: nevermind, we want to keep the chosen order of, for example, course types as in the database, and the dom doesn't know about that
• we develop this new data grid in parallel to the current data grid to avoid having a huge PR that changes all grids; this way, we can port HTML to CSS grid and js to new datagrid at once without doing everything in one huge PR