Turn changes history into a table

[teolemon]

What

• Turn changes history into a table for better legibility. Row should have alterning colors
• The table might be collapsed within a knowledge panel for better page legibility
• This table should be sortable, filterable and responsive, using one of the many of the shelf libraries to do so
• This table should be exposed as a table knowledge panel

Crude mockup

[alexgarel]

That's a cool Idea, I don't know if @stephanegigandet already did the kp for this in it's redesign, but if it's not the case that could be an opportunity to implement this.

[hhaider00]

Hello I would like to contribute to this project and am a beginner to open source contribution, is this issue still available? Also any advice on how to get started would be appreciated. Thank you.

[alexgarel]

@hhaider00 welcome :-) (sorry for the delay) there is a caveat here, is that we are re-working the look and feel of the site. So you should not start from main branch, but from redesign2 branch (make a branch on top of it).

You first to need to setup the product locally (you will need docker) or using gitpod , see https://openfoodfacts.github.io/openfoodfacts-server/introduction/dev-environment-quick-start-guide/

For the feature itself, it seems to be the template edit_history.tt.html which is called by method display_product_history in Display.pm.

[stephanegigandet]

Related code is here: https://github.com/openfoodfacts/openfoodfacts-server/blob/main/templates/web/pages/product/includes/edit_history.tt.html

One very easy option is to change this template to output a table.

But it would be great to turn it into a knowledge panel table, like the nutrition facts table, so that it can be displayed easily in the mobile app as well.

Example of a table created with the knowledge panels: https://github.com/openfoodfacts/openfoodfacts-server/blob/main/templates/api/knowledge-panels/health/nutrition/nutrition_facts_table.tt.json

One issue with that though is that we have links to view the revision, and some Javascript to revert the product to a revision. This is not supported by knowledge panels yet, so we would have to find a way around that (maybe adding some panel table data that would only be for the web).

[stephanegigandet]

To see the edit history of a product, you have first to create an account, and then edit a product, the history is at the bottom.

If the user is a moderator, the edit history is also displayed at the bottom of the product page (in view mode, not only edit mode).

Related code in lib/ProductOpener/Display.pm - sub display_product_history ($request_ref, $code, $product_ref) {

[mike-lu1]

@stephanegigandet Thank you for the informative responses you previously left on this issue

As we can use CSS to better the preview of the table on mobile, i trued exploring the option of adding this logic through the panel. As a first step, i added a line in the pannels to allow table cells to specify a hard coded html element,. This can be a button, a, checkbox etc. https://github.com/openfoodfacts/openfoodfacts-server/pull/9936/files#diff-15bd551f569935dc7019d524449b8cb7af27235fbe0276db09a325f7a4744668R289 However, the table i added is not showing on calling the handler function i created. Kindly advise me on how i should move forward

If this gets a little complex, i will just have to transform the edit_history html template and deal with the mobile layout