enviPy-bayer/templates/modals/objects/generic_set_aliases_modal.html

{% load static %}

<style>
    .alias-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 6px;
        cursor: text;
        min-height: 38px;
        background-color: #fff;
    }

    .alias {
        display: inline-flex;
        align-items: center;
        background-color: #5bc0de;
        color: white;
        padding: 4px 8px;
        margin: 3px 3px;
        border-radius: 4px;
        font-size: 13px;
        line-height: 1.4;
    }

    .alias .remove {
        margin-left: 6px;
        cursor: pointer;
        font-weight: bold;
        line-height: 1;
    }

    .alias-input {
        flex: 1;
        min-width: 120px;
        border: none;
        outline: none;
        margin: 3px 3px;
        font-size: 14px;
    }

    .form-control.alias-container {
        height: auto;
        box-shadow: none;
    }
</style>

<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_modal"
     aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Set Aliases for {{ current_object.name }}</h4>
            </div>
            <div class="modal-body">
                <form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
                      data-remote="true" method="post">
                    {% csrf_token %}
                    <label for="alias-input">Aliases:</label>
                    <div class="form-control alias-container" id="alias-box">
                        {% for alias in current_object.aliases %}
                        <span class="alias">{{ alias|escape }}<span class="remove">&times;</span></span>
                        {% endfor %}
                        <input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
                    </div>
                </form>
                <div id="add-alias-error-message" class="alert alert-danger" role="alert" style="display: none">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="set_aliases_modal_form_submit">Submit</button>
            </div>
        </div>
    </div>

</div>
<script>
    $(function () {

        function addAlias(aliasText) {
            aliasText = aliasText.trim();
            if (aliasText === '') return;

            // Avoid duplicate aliass
            var exists = false;
            $('#alias-box .alias').each(function () {
                if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
                    exists = true;
                    return false;
                }
            });

            if (!exists) {
                var aliasHtml = '<span class="alias">' + $('<div>').text(aliasText).html() +
                    '<span class="remove">&times;</span></span>';
                $(aliasHtml).insertBefore('#alias-input');
            }

            $('#alias-input').val('');
        }

        // Add alias when Enter is pressed
        $('#alias-input').on('keypress', function (e) {
            if (e.which === 13) {
                e.preventDefault();
                addAlias($(this).val());
            }
        });

        // Add alias when input loses focus
        $('#alias-input').on('blur', function () {
            var val = $(this).val();
            if (val.trim() !== '') {
                addAlias(val);
            }
        });

        // Remove alias when clicking ×
        $('#alias-box').on('click', '.remove', function () {
            $(this).closest('.alias').remove();
        });

        // Focus input when clicking the container
        $('#alias-box').on('click', function () {
            $('#alias-input').focus();
        });


        $('#set_aliases_modal_form_submit').on('click', function (e) {
            e.preventDefault();

            let aliases = [];
            $('#alias-box .alias').each(function () {
                aliases.push($(this).text().replace('×', '').trim())
            });

            if (aliases.length === 0) {
                // Set empty string for deletion of all aliases
                // If empty list is sent, its gets removed entirely from post data
                aliases = ['']
            }

            formData = {
                'aliases': aliases
            }

            $.ajax({
                type: 'post',
                data: formData,
                url: '{{ current_object.url }}',
                traditional: true,
                success: function (data, textStatus) {
                    window.location.href = data.success;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#add-alias-error-message').append('<p>Setting aliases failed!</p>');
                    $('#add-alias-error-message').show();                }
            });

        });

    });
</script>