Skip to content

Commit

Permalink
fix: fix JS issue for US product edit form + refactor (#9882)
Browse files Browse the repository at this point in the history 
fixs: #9364 -  JS error that broke all dynamic JS functions on the product edit form for US product

While I was at it, I moved a bunch of JS code that was dynamically generated from templates/web/pages/product_edit/product_edit_form_display.tt.js to the static product-multilingual.js file.
  • Loading branch information
@stephanegigandet
stephanegigandet authored Mar 8, 2024
1 parent 19c8160 commit 7edddaa
Show file tree
Hide file tree
Showing 8 changed files with 185 additions and 155 deletions.
12 changes: 6 additions & 6 deletions cgi/product_multilingual.pl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -759,7 +759,6 @@ ($product_ref, $field, $language)
compute_serving_size_data($product_ref);

my $template_data_ref_display = {};
my $js;

$log->debug("displaying product", {code => $code}) if $log->is_debug();

Expand Down Expand Up @@ -1045,7 +1044,9 @@ ($product_ref, $field, $language)

my %column_display_style = ();
my %nutrition_data_per_display_style = ();
my @nutrition_products;

# We can display 2 nutrition facts columns, one for the product as sold, and one for the prepared product
my @nutrition_product_types = ();

# keep existing field ids for the product as sold, and append _prepared_product for the product after it has been prepared
foreach my $product_type ("", "_prepared") {
Expand Down Expand Up @@ -1092,7 +1093,7 @@ ($product_ref, $field, $language)
}

push(
@nutrition_products,
@nutrition_product_types,
{
checked => $checked,
nutrition_data => $nutrition_data,
Expand All @@ -1112,7 +1113,7 @@ ($product_ref, $field, $language)

}

$template_data_ref_display->{nutrition_products} = \@nutrition_products;
$template_data_ref_display->{nutrition_product_types} = \@nutrition_product_types;

$template_data_ref_display->{column_display_style_nutrition_data} = $column_display_style{"nutrition_data"};
$template_data_ref_display->{column_display_style_nutrition_data_prepared}
Expand Down Expand Up @@ -1484,8 +1485,7 @@ ($product_ref, $field, $language)

process_template('web/pages/product_edit/product_edit_form_display.tt.html', $template_data_ref_display, \$html)
or $html = "<p>" . $tt->error() . "</p>";
process_template('web/pages/product_edit/product_edit_form_display.tt.js', $template_data_ref_display, \$js);
$initjs .= $js;

$request_ref->{page_type} = "product_edit";
$request_ref->{page_format} = "banner";

Expand Down
144 changes: 144 additions & 0 deletions html/js/product-multilingual.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1297,3 +1297,147 @@ $("#move_images").click({}, function (event) {
}

});

// Nutrition facts

$(function () {
$('#nutrition_data').change(function() {
if ($(this).prop('checked')) {
$('#nutrition_data_instructions').show();
$('.nutriment_col').show();
} else {
$('#nutrition_data_instructions').hide();
$('.nutriment_col').hide();
$('.nutriment_value_as_sold').val('');
}
update_nutrition_image_copy();
$(document).foundation('equalizer', 'reflow');
});

$('input[name=nutrition_data_per]').change(function() {
if ($('input[name=nutrition_data_per]:checked').val() == '100g') {
$('#nutrition_data_100g').show();
$('#nutrition_data_serving').hide();
} else {
$('#nutrition_data_100g').hide();
$('#nutrition_data_serving').show();
}
update_nutrition_image_copy();
$(document).foundation('equalizer', 'reflow');
});

$('#nutrition_data_prepared').change(function() {
if ($(this).prop('checked')) {
$('#nutrition_data_prepared_instructions').show();
$('.nutriment_col_prepared').show();
} else {
$('#nutrition_data_prepared_instructions').hide();
$('.nutriment_col_prepared').hide();
$('.nutriment_value_prepared').val('');
}
update_nutrition_image_copy();
$(document).foundation('equalizer', 'reflow');
});

$('input[name=nutrition_data_prepared_per]').change(function() {
if ($('input[name=nutrition_data_prepared_per]:checked').val() == '100g') {
$('#nutrition_data_prepared_100g').show();
$('#nutrition_data_prepared_serving').hide();
} else {
$('#nutrition_data_prepared_100g').hide();
$('#nutrition_data_prepared_serving').show();
}
update_nutrition_image_copy();
$(document).foundation('equalizer', 'reflow');
});

$('#no_nutrition_data').change(function() {
if ($(this).prop('checked')) {
$('#nutrition_data_div').hide();
} else {
$('#nutrition_data_div').show();
}
});

});

function show_warning(should_show, nutrient_id, warning_message){
if(should_show) {
$('#nutriment_'+nutrient_id).css("background-color", "rgb(255 237 235)");
$('#nutriment_question_mark_'+nutrient_id).css("display", "inline-table");
$('#nutriment_sugars_warning_'+nutrient_id).text(warning_message);
}
// clear the warning only if the warning message we don't show is the same as the existing warning
// so that we don't remove a warning on sugars > 100g if we change carbohydrates
else if (warning_message == $('#nutriment_sugars_warning_'+nutrient_id).text()) {
$('#nutriment_'+nutrient_id).css("background-color", "white");
$('#nutriment_question_mark_'+nutrient_id).css("display", "none");
}
}

function check_nutrient(nutrient_id) {
// check the changed nutrient value
const nutrient_value = $('#nutriment_' + nutrient_id).val().replace(',','.').replace(/^(<|>|~)/, '');
const nutrient_unit = $('#nutriment_' + nutrient_id + '_unit').val();

// define the max valid value
let max;
let percent;

if (nutrient_id == 'energy-kj') {
max = 3800;
}
else if (nutrient_id == 'energy-kcal') {
max = 900;
}
else if (nutrient_id == 'alcohol') {
max = 100;
percent = true;
}
else if (nutrient_unit == 'g') {
max = 100;
}
else if (nutrient_unit == 'mg') {
max = 100 * 1000;
}
else if (nutrient_unit == 'µg') {
max = 100 * 1000 * 1000;
}

let is_above_or_below_max;
if (max) {
is_above_or_below_max = (isNaN(nutrient_value) && nutrient_value != '-') || nutrient_value < 0 || nutrient_value > max;
// if the nutrition facts are indicated per serving, the value can be above 100
if ((nutrient_value > max) && ($('#nutrition_data_per_serving').is(':checked')) && !percent) {
is_above_or_below_max = false;
}
show_warning(is_above_or_below_max, nutrient_id, lang().product_js_enter_value_between_0_and_max.replace('{max}', max));
}

// check that nutrients are sound (e.g. sugars is not above carbohydrates)
// but only if the changed nutrient does not have a warning
// otherwise we may clear the sugars or saturated-fat warning
if (! is_above_or_below_max) {
const fat_value = $('#nutriment_fat').val().replace(',','.');
const carbohydrates_value = $('#nutriment_carbohydrates').val().replace(',','.');
const sugars_value = $('#nutriment_sugars').val().replace(',','.');
const saturated_fats_value = $('#nutriment_saturated-fat').val().replace(',','.');

const is_sugars_above_carbohydrates = parseFloat(carbohydrates_value) < parseFloat(sugars_value);
show_warning(is_sugars_above_carbohydrates, 'sugars', lang().product_js_sugars_warning);

const is_fat_above_saturated_fats = parseFloat(fat_value) < parseFloat(saturated_fats_value);
show_warning(is_fat_above_saturated_fats, 'saturated-fat', lang().product_js_saturated_fat_warning);
}
}

$(function () {
$('.nutriment_value_as_sold').each(function () {
const nutrient_id = this.id.replace('nutriment_', '');
this.oninput = function() {
check_nutrient(nutrient_id);
};
check_nutrient(nutrient_id);
});
}
);
8 changes: 4 additions & 4 deletions lib/ProductOpener/Food.pm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,10 +657,10 @@ It is a list of nutrients names with eventual prefixes and suffixes:
'vitamin-b9-', 'folates-',
'vitamin-b12-', 'biotin-',
'pantothenic-acid-', '#minerals',
'silica-', 'bicarbonate-',
'potassium', 'chloride-',
'calcium', 'phosphorus-',
'iron', 'magnesium-',
'calcium', 'iron',
'potassium', 'silica-',
'bicarbonate-', 'chloride-',
'phosphorus-', 'magnesium-',
'zinc-', 'copper-',
'manganese-', 'fluoride-',
'selenium-', 'chromium-',
Expand Down
6 changes: 4 additions & 2 deletions taxonomies/nutrients.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
# - The "automatically_computed:en: yes" property is used for nutrients (or scores) that are not entered by users, but computed by Product Opener
# (e.g. the NOVA group, Nutrition score, % of fruits/vegetables estimated by ingredients analysis etc.)
# See also: https://wiki.openfoodfacts.org/Nutrients_handling_in_Open_Food_Facts
# DV (Daily Value) for minerals and vitamins in the US: https://www.fda.gov/food/nutrition-facts-label/daily-value-nutrition-and-supplement-facts-labels

stopwords:en: including, of, which
stopwords:fr: dont
Expand Down Expand Up @@ -3547,7 +3548,7 @@ vi:vitamin D
yi:וויטאמין D
zh:维生素D
dv_2016_value:en: 20
dv_value:en: 40
dv_value:en: 20
iu_value:en: 0.025
unit:en: µg
wikidata:en: Q175621
Expand Down Expand Up @@ -4452,6 +4453,7 @@ zh:钾
unit:en: mg
wikidata:en: Q703
wikipedia:en: https://en.wikipedia.org/wiki/Potassium
dv_value:en: 4700

zz:chloride
en:Chloride
Expand Down Expand Up @@ -4627,7 +4629,7 @@ yi:קאלציום
yo:Calcium
zh:鈣, 钙
dv_2016_value:en: 1300
dv_value:en: 1000
dv_value:en: 1300
unit:en: mg
unit_ca:en: % DV
unit:pt:mg
Expand Down
18 changes: 9 additions & 9 deletions templates/web/pages/product_edit/product_edit_form_display.tt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,18 +165,18 @@ <h1>[% title %]</h1>
[% display_tab_nutrition_image %]
[% display_field_serving_size %]

[% FOREACH nutrient IN nutrition_products %]
[% FOREACH product_type IN nutrition_product_types %]
<!-- extra field suffixed with _displayed to allow detecting when a box is unchecked -->
<input type="hidden" name="[% nutrient.nutrition_data %]_displayed" value="1" />
<input type="checkbox" id="[% nutrient.nutrition_data %]" name="[% nutrient.nutrition_data %]" [% nutrient.checked %] />
<label for="[% nutrient.nutrition_data %]" class="checkbox_label">[% nutrient.nutrition_data_exists %]</label> &nbsp;
<input type="radio" id="[% nutrient.nutrition_data_per %]_100g" value="100g" name="[% nutrient.nutrition_data_per %]" [% nutrient.checked_per_100g %] />
<label for="[% nutrient.nutrition_data_per %]_100g">[% edq(lang('nutrition_data_per_100g')) %]</label>
<input type="radio" id="[% nutrient.nutrition_data_per %]_serving" value="serving" name="[% nutrient.nutrition_data_per %]" [% nutrient.checked_per_serving %] />
<label for="[%nutrient. nutrition_data_per %]_serving">[% edq(lang('nutrition_data_per_serving')) %]</label><br/>
<input type="hidden" name="[% product_type.nutrition_data %]_displayed" value="1" />
<input type="checkbox" id="[% product_type.nutrition_data %]" name="[% product_type.nutrition_data %]" [% product_type.checked %] />
<label for="[% product_type.nutrition_data %]" class="checkbox_label">[% product_type.nutrition_data_exists %]</label> &nbsp;
<input type="radio" id="[% product_type.nutrition_data_per %]_100g" value="100g" name="[% product_type.nutrition_data_per %]" [% product_type.checked_per_100g %] />
<label for="[% product_type.nutrition_data_per %]_100g">[% edq(lang('nutrition_data_per_100g')) %]</label>
<input type="radio" id="[% product_type.nutrition_data_per %]_serving" value="serving" name="[% product_type.nutrition_data_per %]" [% product_type.checked_per_serving %] />
<label for="[%product_type. nutrition_data_per %]_serving">[% edq(lang('nutrition_data_per_serving')) %]</label><br/>

[% IF nutrition_data_instructions_check && nutrition_data_instructions_check != '' %]
<p id="[% nutrient.nutrition_data_instructions %]" [% nutrient.hidden %]>[% lang(nutrient.nutrition_data_instructions) %]</p>
<p id="[% product_type.nutrition_data_instructions %]" [% product_type.hidden %]>[% lang(product_type.nutrition_data_instructions) %]</p>
[% END %]
[% END %]

Expand Down
116 changes: 0 additions & 116 deletions templates/web/pages/product_edit/product_edit_form_display.tt.js
View file

This file was deleted.

Loading

0 comments on commit 7edddaa

Please sign in to comment.