openfoodfacts / openfoodfacts-server

Open Food Facts database, API server and web interface - 🐪🦋 Perl, CSS and JS coders welcome 😊 For helping in Python, see Robotoff or taxonomy-editor
http://openfoodfacts.github.io/openfoodfacts-server/
GNU Affero General Public License v3.0
652 stars 381 forks source link

NEW DESIGN - Reintroduce the Wipe ingredients button and the inline ingredients edit for moderators #7911

Open teolemon opened 1 year ago

teolemon commented 1 year ago

What

Screenshot

image

Part of

diivi commented 1 year ago

Can you give a mockup of what it should look like? Or a screenshot from the old design?

alexgarel commented 1 year ago

Previously:

image

Note @diivi this is reserved to moderators.

stephanegigandet commented 1 year ago

Previously, the generated code looked like this:

`

        <div class="button_div" id="saveingredientsbuttondiv" style="display:none"><button id="saveingredients" class="small button" type="button">Save ingredients (fr)</button></div>

        <div class="button_div" id="wipeingredientsbuttondiv"><button id="wipeingredients" class="small button" type="button">Ingredients (fr) are completely bogus, erase them.</button></div>

     <!-- Offer to add the ingredients in the language of the interface -->

        <p>
            If this product has an ingredients list in English, please add it.
            <a href="/cgi/product.pl?type=edit&amp;code=8710522682272#ingredients" class="button tiny"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" aria-hidden="true" focusable="false"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg> Edit the page</a>
        </p>

    `

` var editableText;

$("#editingredients").click({},function(event) {
    event.stopPropagation();
    event.preventDefault();

    var divHtml = $("#ingredients_list").html();
    var allergens = /(<span class="allergen">|<\/span>)/g;
    divHtml = divHtml.replace(allergens, '_');

    var editableText = $('<textarea id="ingredients_list" style="height:8rem" lang="fr" />');
    editableText.val(divHtml);
    $("#ingredients_list").replaceWith(editableText);
    editableText.focus();

    $("#editingredientsbuttondiv").hide();
    $("#saveingredientsbuttondiv").show();

    $(document).foundation('equalizer', 'reflow');

});

$("#saveingredients").click({},function(event) {
    event.stopPropagation();
    event.preventDefault();

    $('div[id="saveingredientsbuttondiv"]').hide();
    $('div[id="saveingredientsbuttondiv_status"]').html('<img src="/images/misc/loading2.gif"> Saving ingredients_texts_fr');
    $('div[id="saveingredientsbuttondiv_status"]').show();

    $.post('/cgi/product_jqm_multilingual.pl',
        {code: "8710522682272", ingredients_text_fr :  $("#ingredients_list").val(), comment: "Updated ingredients_texts_fr" },
        function(data) {

            $('div[id="saveingredientsbuttondiv_status"]').html('Saved ingredients_texts_fr');
            $('div[id="saveingredientsbuttondiv"]').show();

            $(document).foundation('equalizer', 'reflow');
        },
        'json'
    );

    $(document).foundation('equalizer', 'reflow');

});

$("#wipeingredients").click({},function(event) {
    event.stopPropagation();
    event.preventDefault();
    // alert(event.data.imagefield);
    $('div[id="wipeingredientsbuttondiv"]').html('<img src="/images/misc/loading2.gif"> Erasing ingredients_texts_fr');
    $.post('/cgi/product_jqm_multilingual.pl',
        {code: "8710522682272", ingredients_text_fr : "", comment: "Erased ingredients_texts_fr: too much bad data" },
        function(data) {

            $('div[id="wipeingredientsbuttondiv"]').html("Erased ingredients_texts_fr");
            $('div[id="ingredients_list"]').html("");

            $(document).foundation('equalizer', 'reflow');
        },
        'json'
    );

    $(document).foundation('equalizer', 'reflow');

});`
github-actions[bot] commented 1 year ago

This issue is stale because it has been open 90 days with no activity.