Subversion Repositories SmartDukaan

/**

 * Offer circular - scope config screen.

 *

 * Which OEM divisions are ingested, and which alternate labels mean a division that

 * already exists. Everything here is CONFIG read at ingest time, so nothing on this

 * screen changes an already-published circular; the copy says so in several places

 * because that was the single most confusing thing about the product-alias screen.

 *

 * Like the review screen this is an AJAX fragment, so every handler is delegated from

 * document and state is rebuilt on each load. It must also work when the URL is opened

 * directly, which is why it uses $.ajax rather than common.js's helpers.

 */

$(function () {

    var state = { divisions: [], aliases: [], brands: [], categories: [], loaded: false };

    function ctx() {

        return (typeof context !== 'undefined' && context) ? context : (window.ocsContext || '');

    }

    function root() {

        return $('.ocs-root');

    }

    function esc(value) {

        if (value === null || value === undefined) {

            return '';

        }

        return $('<span>').text(String(value)).html();

    }

    function dash(value) {

        return (value === null || value === undefined || String(value).trim() === '')

            ? '<span class="ocs-muted">-</span>' : esc(value);

    }

    function ocsGet(url, onDone, onFail) {

        $.ajax({ url: url, type: 'GET', cache: false }).done(onDone).fail(onFail || noop);

    }

    function ocsPost(url, data, onDone, onFail) {

        $.ajax({ url: url, type: 'POST', data: data }).done(onDone).fail(onFail || noop);

    }

    function noop() {}

    function failMessage(xhr) {

        if (xhr.status === 0) { return 'could not reach the server'; }

        if (xhr.status === 404) { return 'endpoint not found (404) - is this build deployed?'; }

        if (xhr.status === 403 || xhr.status === 401) { return 'not authorised (' + xhr.status + ')'; }

        return 'server returned status ' + xhr.status;

    }

    function say(ok, message) {

        var okBox = root().find('[data-ocs-ok]');

        var badBox = root().find('[data-ocs-bad]');

        okBox.hide();

        badBox.hide();

        var box = ok ? okBox : badBox;

        box.text(message).show();

        if (ok) {

            window.setTimeout(function () { box.fadeOut(200); }, 6000);

        }

    }

    /**

     * The endpoints answer with the "response" view, which may arrive as a JSON string

     * or as an already-parsed object depending on how jQuery read the content type.

     */

    function payloadOf(response) {

        if (typeof response === 'string') {

            try { return JSON.parse(response); } catch (e) { return null; }

        }

        return response;

    }

    // ------------------------------------------------------------------ rendering

    function optionList(items, selected, noneLabel) {

        var html = '<option value="">' + esc(noneLabel) + '</option>';

        items.forEach(function (item) {

            html += '<option value="' + esc(item.id) + '"'

                 + (String(item.id) === String(selected) ? ' selected' : '') + '>'

                 + esc(item.name) + '</option>';

        });

        return html;

    }

    function renderPickers() {

        root().find('[data-ocs-d-brand]').html(optionList(state.brands, '', '- none -'));

        root().find('[data-ocs-d-category]').html(optionList(state.categories, '', '- none -'));

        var divisionOptions = state.divisions.map(function (d) {

            return { id: d.pdfLabel, name: d.pdfLabel + ' (' + (d.category || 'no category') + ')' };

        });

        root().find('[data-ocs-a-division]')

              .html(optionList(divisionOptions, '', '- pick one -'));

    }

    function renderDivisions() {

        var body = root().find('[data-ocs-divisions]');

        if (!state.divisions.length) {

            body.html('<tr><td colspan="9" class="ocs-empty">No divisions configured.</td></tr>');

            return;

        }

        var html = '';

        state.divisions.forEach(function (d, index) {

            html += '<tr class="' + (d.inScope ? '' : 'ocs-off') + '">'

                 + '<td class="ocs-mono">' + esc(d.pdfLabel) + '</td>'

                 + '<td>' + dash(d.displayName) + '</td>'

                 + '<td>' + dash(d.brand) + '</td>'

                 + '<td>' + dash(d.category) + '</td>'

                 + '<td><span class="ocs-pill ' + (d.inScope ? 'ocs-pill-on">in scope'

                                                             : 'ocs-pill-off">dropped')

                 + '</span></td>'

                 + '<td>' + dash(d.dropReason) + '</td>'

                 + '<td>' + esc(d.offerCount) + '</td>'

                 + '<td>' + esc(d.labelAliasCount) + '</td>'

                 + '<td style="white-space:nowrap">'

                 + '<button class="ocs-btn ocs-btn-sm" type="button" data-ocs-edit="'

                 + index + '">Edit</button> '

                 + '<button class="ocs-btn ocs-btn-sm ' + (d.inScope ? 'ocs-btn-danger' : '')

                 + '" type="button" data-ocs-toggle="' + index + '">'

                 + (d.inScope ? 'Remove' : 'Add back') + '</button>'

                 + '</td></tr>';

        });

        body.html(html);

    }

    function renderAliases() {

        var body = root().find('[data-ocs-aliases]');

        if (!state.aliases.length) {

            body.html('<tr><td colspan="5" class="ocs-empty">'

                + 'No label aliases yet. Add one when a circular prints a spelling of a '

                + 'division that is already configured.</td></tr>');

            return;

        }

        var html = '';

        state.aliases.forEach(function (a) {

            html += '<tr>'

                 + '<td class="ocs-mono">' + esc(a.aliasLabel) + '</td>'

                 + '<td><span class="ocs-pill ocs-pill-alias">' + esc(a.divisionLabel)

                 + '</span></td>'

                 + '<td>' + dash(a.note) + '</td>'

                 + '<td class="ocs-muted">' + dash(a.createdBy) + '</td>'

                 + '<td><button class="ocs-btn ocs-btn-sm ocs-btn-danger" type="button" '

                 + 'data-ocs-alias-remove="' + esc(a.aliasLabel) + '">Remove</button></td>'

                 + '</tr>';

        });

        body.html(html);

    }

    function load() {

        ocsGet(ctx() + '/offerCircular/divisions', function (response) {

            var payload = payloadOf(response);

            if (!payload) {

                say(false, 'Could not read the configuration response');

                return;

            }

            state.divisions = payload.divisions || [];

            state.aliases = payload.aliases || [];

            state.brands = payload.brands || [];

            state.categories = payload.categories || [];

            state.loaded = true;

            renderPickers();

            renderDivisions();

            renderAliases();

        }, function (xhr) {

            root().find('[data-ocs-divisions]').html('<tr><td colspan="9" class="ocs-empty">'

                + 'Could not load divisions: ' + esc(failMessage(xhr)) + '</td></tr>');

        });

    }

    // ------------------------------------------------------------------ actions

    function divisionForm() {

        return {

            pdfLabel: root().find('[data-ocs-d-label]').val(),

            displayName: root().find('[data-ocs-d-display]').val(),

            brandId: root().find('[data-ocs-d-brand]').val(),

            categoryId: root().find('[data-ocs-d-category]').val(),

            inScope: root().find('[data-ocs-d-inscope]').val(),

            dropReason: root().find('[data-ocs-d-reason]').val()

        };

    }

    function clearDivisionForm() {

        root().find('[data-ocs-d-label], [data-ocs-d-display], [data-ocs-d-reason]').val('');

        root().find('[data-ocs-d-brand], [data-ocs-d-category]').val('');

        root().find('[data-ocs-d-inscope]').val('true');

    }

    function afterWrite(response, fallback) {

        var payload = payloadOf(response) || {};

        say(payload.success !== false, payload.message || fallback);

        if (payload.success !== false) {

            if (payload.warning) {

                window.setTimeout(function () { say(false, payload.warning); }, 300);

            }

            load();

        }

    }

    $(document).on('click', '.ocs-root [data-ocs-d-save]', function () {

        var form = divisionForm();

        if (!String(form.pdfLabel || '').trim()) {

            say(false, 'The OEM label is required');

            return;

        }

        ocsPost(ctx() + '/offerCircular/division', form, function (response) {

            afterWrite(response, 'Saved');

        }, function (xhr) { say(false, 'Could not save: ' + failMessage(xhr)); });

    });

    $(document).on('click', '.ocs-root [data-ocs-d-clear]', clearDivisionForm);

    $(document).on('click', '.ocs-root [data-ocs-edit]', function () {

        var d = state.divisions[$(this).data('ocs-edit')];

        if (!d) { return; }

        root().find('[data-ocs-d-label]').val(d.pdfLabel);

        root().find('[data-ocs-d-display]').val(d.displayName || '');

        root().find('[data-ocs-d-brand]').val(d.brandId === null ? '' : d.brandId);

        root().find('[data-ocs-d-category]').val(d.categoryId === null ? '' : d.categoryId);

        root().find('[data-ocs-d-inscope]').val(d.inScope ? 'true' : 'false');

        root().find('[data-ocs-d-reason]').val(d.dropReason || '');

        showPanel('divisions');

        root().find('[data-ocs-d-label]').focus();

    });

    $(document).on('click', '.ocs-root [data-ocs-toggle]', function () {

        var d = state.divisions[$(this).data('ocs-toggle')];

        if (!d) { return; }

        var reason = null;

        if (d.inScope) {

            // The reason is the only record of why something stopped being ingested, so

            // it is asked for rather than defaulted.

            reason = window.prompt('Take "' + d.pdfLabel + '" out of scope.\n\n'

                + (d.offerCount > 0

                    ? d.offerCount + ' existing offers stay untouched; this changes what the '

                      + 'next ingest keeps.\n\n' : '')

                + 'Why is it out of scope?', d.dropReason || '');

            if (reason === null) { return; }

            if (!reason.trim()) {

                say(false, 'A reason is required to take a division out of scope');

                return;

            }

        }

        ocsPost(ctx() + '/offerCircular/divisionScope',

            { divisionId: d.divisionId, inScope: !d.inScope, dropReason: reason },

            function (response) { afterWrite(response, 'Updated'); },

            function (xhr) { say(false, 'Could not update: ' + failMessage(xhr)); });

    });

    $(document).on('click', '.ocs-root [data-ocs-a-save]', function () {

        var aliasLabel = root().find('[data-ocs-a-label]').val();

        var divisionLabel = root().find('[data-ocs-a-division]').val();

        if (!String(aliasLabel || '').trim() || !divisionLabel) {

            say(false, 'Both the printed label and the division it means are required');

            return;

        }

        ocsPost(ctx() + '/offerCircular/divisionAlias',

            { aliasLabel: aliasLabel, divisionLabel: divisionLabel,

              note: root().find('[data-ocs-a-note]').val() },

            function (response) {

                var payload = payloadOf(response) || {};

                if (payload.success !== false) {

                    root().find('[data-ocs-a-label], [data-ocs-a-note]').val('');

                }

                afterWrite(response, 'Saved');

            },

            function (xhr) { say(false, 'Could not save: ' + failMessage(xhr)); });

    });

    $(document).on('click', '.ocs-root [data-ocs-alias-remove]', function () {

        var label = $(this).data('ocs-alias-remove');

        if (!window.confirm('Remove the alias "' + label + '"? That label will be reported '

                + 'as UNKNOWN on the next ingest.')) {

            return;

        }

        ocsPost(ctx() + '/offerCircular/divisionAliasRemove', { aliasLabel: label },

            function (response) { afterWrite(response, 'Removed'); },

            function (xhr) { say(false, 'Could not remove: ' + failMessage(xhr)); });

    });

    $(document).on('click', '.ocs-root [data-ocs-reload]', load);

    $(document).on('click', '.ocs-root [data-ocs-export]', function () {

        var box = root().find('[data-ocs-export-box]');

        if (box.is(':visible')) {

            box.hide();

            return;

        }

        ocsGet(ctx() + '/offerCircular/scopeExport', function (response) {

            var payload = payloadOf(response) || {};

            box.val(payload.sql || '').show();

            box[0].select();

        }, function (xhr) { say(false, 'Could not export: ' + failMessage(xhr)); });

    });

    function showPanel(name) {

        root().find('[data-ocs-panel]').hide();

        root().find('[data-ocs-panel="' + name + '"]').show();

        root().find('[data-ocs-tab]').removeClass('is-on');

        root().find('[data-ocs-tab="' + name + '"]').addClass('is-on');

    }

    $(document).on('click', '.ocs-root [data-ocs-tab]', function () {

        showPanel($(this).data('ocs-tab'));

    });

    // sidebar entry / any trigger loads the fragment then initialises it

    function openOfferCircularScope(domId) {

        ocsGet(ctx() + '/offerCircularScope', function (response) {

            $('#' + (domId || 'main-content')).html(response);

            state = { divisions: [], aliases: [], brands: [], categories: [], loaded: false };

            load();

        });

    }

    window.openOfferCircularScope = openOfferCircularScope;

    // called by the standalone bootstrap in the .vm when the URL is opened directly

    window.initOfferCircularScope = load;

    $(document).on('click', '.offer-circular-scope', function (e) {

        e.preventDefault();

        openOfferCircularScope('main-content');

    });

});