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

feat: Prevention - On the fly quality checks in the product edit form #8258

Merged
merged 10 commits into from
May 3, 2023
Merged

feat: Prevention - On the fly quality checks in the product edit form #8258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a864cd2
feat: Add quality checks on product edit page.
jnsereko Apr 24, 2023
4eceb15
change warning color to pale pink
jnsereko Apr 26, 2023
3b3073e
rerun build
jnsereko Apr 28, 2023
a3f20ad
remove unnecessary css
jnsereko Apr 28, 2023
5d4794f
Fix typo: replace nutirent with nutrient
jnsereko May 2, 2023
2d4ca6d
Merge branch 'main' into 1905
jnsereko May 2, 2023
b913100
fix unit test
jnsereko May 2, 2023
07b9c11
Merge branch 'main' into 1905
stephanegigandet May 2, 2023
7502a4d
remove non required changes
jnsereko May 2, 2023
b702302
Merge branch 'main' into 1905
jnsereko May 2, 2023
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
44 changes: 43 additions & 1 deletion templates/web/pages/product_edit/product_edit_form_display.tt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,9 @@ <h1>[% title %]</h1>
</td>

<td class="nutriment_col" [% column_display_style_nutrition_data %]>
<input class="nutriment_value nutriment_value_as_sold" id="nutriment_[% nutriment.enid %]" name="nutriment_[% nutriment.enid %]" value="[% nutriment.value %]" [% nutriment.disabled %] autocomplete="off"/>
<input class="nutriment_value nutriment_value_as_sold soft-background" id="nutriment_[% nutriment.enid %]" name="nutriment_[% nutriment.enid %]" value="[% nutriment.value %]" [% nutriment.disabled %] autocomplete="off"/>
<span id="nutriment_question_mark_[% nutriment.enid %]" class="question_mark">?</span>
<span id="nutriment_sugars_warning_[% nutriment.enid %]" class="sugars_warning">Please enter a valid value.</span>
</td>
<td class="nutriment_col_prepared" [% column_display_style_nutrition_data_prepared %]>
<input class="nutriment_value nutriment_value_prepared" id="nutriment_[% nutriment.enidp %]" name="nutriment_[% nutriment.enidp %]" value="[% nutriment.valuep %]" [% nutriment.disabled %] autocomplete="off"/>
Expand Down Expand Up @@ -347,4 +349,44 @@ <h1>[% title %]</h1>


</body>

<style>
.question_mark {
display: none;
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #999;
color: #fff;
text-align: center;
font-weight: bold;
cursor: help;
}

.sugars_warning {
display: none;
position: absolute;
left: 16%;
transform: translateX(50%);
padding: 0.5em;
background-color: #333;
color: #fff;
font-size: 0.8em;
white-space: nowrap;
margin-top: 1%;
}

.soft-background {
background-color: #f5f5f5;
}

.question_mark:hover + .sugars_warning {
display: inline-block;
}

.question_mark:hover {
opacity: 0.7;
}
</style>
<!-- end templates/[% template.name %] -->
64 changes: 64 additions & 0 deletions templates/web/pages/product_edit/product_edit_form_display.tt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,67 @@
\$('#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);
}else {
\$('#nutriment_'+nutrient_id).css("background-color", "white");
\$('#nutriment_question_mark_'+nutrient_id).css("display", "none");
}
}

var sugars_value;
var carbohydrates_value;
var saturated_fats_value;
var fat_value;

var required_nutrients_id = ['energy-kj', 'energy-kcal', 'fat', 'saturated-fat', 'sugars', 'carbohydrates', 'fiber', 'proteins', 'salt', 'sodium', 'alcohol'];

required_nutrients_id.forEach(nutrient_id => {
\$('#nutriment_' + nutrient_id).on('input', function() {
var nutrient_value = \$(this).val();
var is_above_or_below_100 = isNaN(nutrient_value) || nutrient_value < 0 || nutrient_value > 100;
show_warning(is_above_or_below_100, nutrient_id, "Please enter a value between 0 and 100");
Copy link
Contributor

Choose a reason for hiding this comment

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

The warnings should be added to po/common/common.pot and po/common/en.po so they can be translated, but we can also do that later in another PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@stephanegigandet can we do the translations in another PR
i have tried them locally but it might take me some time to make the logic work.


var crutial_nutrients = ['fat', 'saturated-fat', 'sugars', 'carbohydrates'];

if (crutial_nutrients.includes(nutrient_id)) {
switch(nutrient_id) {
case "saturated-fat":
saturated_fats_value = nutrient_value;
break;
case "sugars":
sugars_value = nutrient_value;
break;
case "carbohydrates":
carbohydrates_value = nutrient_value;
break;
case "fat":
fat_value = nutrient_value;
break;
}

if(!fat_value) {
fat_value = \$('#nutriment_fat').val();
}
if(!carbohydrates_value){
carbohydrates_value = \$('#nutriment_carbohydrates').val();
}
if(!sugars_value) {
sugars_value = \$('#nutriment_sugars').val();
}
if(!saturated_fats_value) {
saturated_fats_value = \$('#nutriment_saturated-fat').val();
}

var is_sugars_above_carbohydrates = carbohydrates_value < sugars_value;
show_warning(is_sugars_above_carbohydrates, 'sugars', 'Sugars should not be higher than carbohydrates');

var is_fat_above_saturated_fats = fat_value < saturated_fats_value;
show_warning(is_fat_above_saturated_fats, 'saturated-fat', 'Saturated fats should not be higher than fat');
}
});
});