[Feature] Alias Support (#151)

Fixes #149

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#151

templates/modals/objects/generic_set_aliases_modal.html

@@ -0,0 +1,169 @@
+{% 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>