discourse/app/assets/javascripts/admin/components/value-list.js.es6

import { on } from "ember-addons/ember-computed-decorators";
import computed from "ember-addons/ember-computed-decorators";

export default Ember.Component.extend({
  classNameBindings: [":value-list"],

  inputInvalid: Ember.computed.empty("newValue"),

  inputDelimiter: null,
  inputType: null,
  newValue: "",
  collection: null,
  values: null,

  @computed("addKey", "filteredChoices.length")
  noneKey(addKey, filteredChoicesLength) {
    return addKey || filteredChoicesLength === 0
      ? "admin.site_settings.value_list.no_choices_none"
      : "admin.site_settings.value_list.default_none";
  },

  @on("didReceiveAttrs")
  _setupCollection() {
    const values = this.get("values");
    if (this.get("inputType") === "array") {
      this.set("collection", values || []);
      return;
    }

    this.set(
      "collection",
      this._splitValues(values, this.get("inputDelimiter") || "\n")
    );
  },

  @computed("choices.[]", "collection.[]")
  filteredChoices(choices, collection) {
    return Ember.makeArray(choices).filter(i => collection.indexOf(i) < 0);
  },

  keyDown(event) {
    if (event.keyCode === 13) this.send("addValue", this.get("newValue"));
  },

  actions: {
    changeValue(index, newValue) {
      this._replaceValue(index, newValue);
    },

    addValue(newValue) {
      if (this.get("inputInvalid")) return;

      this.set("newValue", "");
      this._addValue(newValue);
    },

    removeValue(value) {
      this._removeValue(value);
    },

    selectChoice(choice) {
      this._addValue(choice);
    }
  },

  _addValue(value) {
    this.get("collection").addObject(value);
    this._saveValues();
  },

  _removeValue(value) {
    const collection = this.get("collection");
    collection.removeObject(value);
    this._saveValues();
  },

  _replaceValue(index, newValue) {
    this.get("collection").replace(index, 1, [newValue]);
    this._saveValues();
  },

  _saveValues() {
    if (this.get("inputType") === "array") {
      this.set("values", this.get("collection"));
      return;
    }

    this.set(
      "values",
      this.get("collection").join(this.get("inputDelimiter") || "\n")
    );
  },

  _splitValues(values, delimiter) {
    if (values && values.length) {
      return values.split(delimiter).filter(x => x);
    } else {
      return [];
    }
  }
});