Skip to content
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

Jump to bottom

feat: make improvements to org table #10679

Merged
merged 7 commits into from
Sep 17, 2024
Merged

feat: make improvements to org table #10679

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
34a6c2c
make improvements to org table
TheSussex Aug 12, 2024
f095938
replace creator with creator_email
TheSussex Aug 12, 2024
50c521f
add buttons to datatable files
TheSussex Aug 19, 2024
10d7472
merged main, fixed conflict
stephanegigandet Sep 17, 2024
8a1b9f3
lint
stephanegigandet Sep 17, 2024
f9da169
fix datatables css/js
stephanegigandet Sep 17, 2024
6a5459e
update tests
stephanegigandet Sep 17, 2024
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
35 changes: 32 additions & 3 deletions cgi/display_org_table.pl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,14 @@
$query_ref->{name} = qr/\Q$name\E/i if defined $name && $name ne '';
$query_ref->{valid_org} = $valid_org if defined $valid_org && $valid_org ne '';

$template_data_ref->{name} = $name;
$template_data_ref->{valid_org} = $valid_org;
$template_data_ref->{query_filters} = [] unless defined $template_data_ref->{query_filters};

@orgs = $orgs_collection->find($query_ref)->sort({created_t => -1})->all;

$template_data_ref = {orgs => \@orgs, has_orgs => scalar @orgs > 0};
$template_data_ref->{orgs} = \@orgs;
$template_data_ref->{has_orgs} = scalar @orgs > 0;

my $html;
process_template('web/pages/dashboard/display_orgs_table.tt.html', $template_data_ref, \$html) or $html = '';
Expand All @@ -73,22 +76,48 @@
info: "_TOTAL_ labels",
infoFiltered: " - out of _MAX_"
},
paging: false,
paging: true,
order: [[ 0, "asc" ]],
scrollX: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'colvis',
text: 'Column visibility',
columns: ':gt(1)'
}
]
});
JS
;

$request_ref->{scripts} .= <<SCRIPTS
<script src="https://static.openfoodfacts.org/js/datatables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>
SCRIPTS
;

$request_ref->{header} .= <<HEADER
<link rel="stylesheet" href="https://static.openfoodfacts.org/js/datatables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
Copy link
Member

Choose a reason for hiding this comment

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

Could you create a new version of the datatables.css and so on, which include the buttons? Alternatively, move DataTables to be downloaded from npm and bundled with webpack. We should ensure we use a consistent version, and we want to avoid using CDNs our assets.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'm not sure how to go about this @hangy

Copy link
Member

Choose a reason for hiding this comment

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

@TheSussex When you look at https://github.com/TheSussex/openfoodfacts-server/blob/9e1dd240ce9a1b4e51e7a3dcd8ac6f03aeaaf57b/html/js/datatables.css#L7-L10, you can see that the datatables we currently publish with some specific settings. If you go to that link, you can select the buttons component to be bundled, too. The simplest version would be to simply download the modified CSS and JS files from the datatables site and then replace the ones currently in git.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I did this and it's not showing the column visibility button anymore. Am I supposed to rebuild or what?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@hangy

Copy link
Member

Choose a reason for hiding this comment

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

I did this and it's not showing the column visibility button anymore. Am I supposed to rebuild or what?

Yes, can you try rebuilding, please? Just the frontend (make front_build if you're using docker) should be enough.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This did not work @hangy

Copy link
Contributor

Choose a reason for hiding this comment

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

@hangy @TheSussex I updated the JS files and included the ordering etc. buttons. They were also loaded with a hardcoded path to static.openfoodfacts.org, that's why they were not picked in a local dev environment.

<style>
/* Custom styling for the column visibility buttons */
.dt-button-collection .dt-button.active::before {
content: "✔";
display: inline-block;
margin-right: 6px;
}

.dt-button-collection .dt-button::before {
content: " ";
display: inline-block;
margin-right: 6px;
}
</style>
HEADER
;

$request_ref->{title} = "Organization List";
$request_ref->{title} = lang("organization_list");
$request_ref->{content_ref} = \$html;
display_page($request_ref);
10 changes: 9 additions & 1 deletion po/common/common.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7106,4 +7106,12 @@ msgstr "Improvements"

msgctxt "products_with_changes_since_last_export"
msgid "Products with changes since last export"
msgstr "Products with changes since last export"
msgstr "Products with changes since last export"

msgctxt "organization_list"
msgid "Organization list"
msgstr "Organization list"

msgctxt "serial_no"
msgid "S.No"
msgstr "S.No"
7 changes: 7 additions & 0 deletions po/common/en.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7094,3 +7094,10 @@ msgctxt "improvements_navigation"
msgid "Improvements"
msgstr "Improvements"

msgctxt "organization_list"
msgid "Organization list"
msgstr "Organization list"

msgctxt "serial_no"
TheSussex marked this conversation as resolved.
Show resolved Hide resolved
msgid "S.No"
msgstr "S.No"
6 changes: 5 additions & 1 deletion po/common/fr.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6950,4 +6950,8 @@ msgstr "Glissez"

msgctxt "select_product_data_file"
msgid "Select a file with product data"
msgstr "Choisissez un fichier avec les données des produits"
msgstr "Choisissez un fichier avec les données des produits"

msgctxt "organization_list"
msgid "Liste des organisations"
msgstr "Liste des organisations"
5 changes: 5 additions & 0 deletions templates/web/common/site_layout.tt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,11 @@
<li>
<a href="/cgi/search.pl?graph=1">[% lang('graphs_and_maps') %]</a>
</li>
[% IF pro_moderator or admin %]
<li>
<a href="/cgi/display_org_table.pl">[% lang('organization_list') %]</a>
</li>
[% END %]
</ul>
</li>

Expand Down
2 changes: 1 addition & 1 deletion templates/web/pages/dashboard/display_orgs_table.tt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<option value="rejected" [% IF valid_org == 'rejected' %]selected[% END %]>Rejected</option>
</select>

<button type="submit">[% lang("search") %]</button>
<button style="margin-bottom: 30px;" type="submit">[% lang("search") %]</button>
</form>

[% IF has_orgs %]
Expand Down
Loading