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|safe }}
        </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>