FEATURE: introduces list/compact_list components

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

@@ -1,113 +1,101 @@
+import { on } from "ember-addons/ember-computed-decorators";
+import computed from "ember-addons/ember-computed-decorators";
+
 export default Ember.Component.extend({
   classNameBindings: [":value-list"],
 
-  _enableSorting: function() {
-    const self = this;
-    const placeholder = document.createElement("div");
-    placeholder.className = "placeholder";
+  inputInvalid: Ember.computed.empty("newValue"),
 
-    let dragging = null;
-    let over = null;
-    let nodePlacement;
+  inputDelimiter: null,
+  inputType: null,
+  newValue: "",
+  collection: null,
+  values: null,
 
-    this.$().on("dragstart.discourse", ".values .value", function(e) {
-      dragging = e.currentTarget;
-      e.dataTransfer.effectAllowed = "move";
-      e.dataTransfer.setData("text/html", e.currentTarget);
-    });
+  @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";
+  },
 
-    this.$().on("dragend.discourse", ".values .value", function() {
-      Ember.run(function() {
-        dragging.parentNode.removeChild(placeholder);
-        dragging.style.display = "block";
-
-        // Update data
-        const from = Number(dragging.dataset.index);
-        let to = Number(over.dataset.index);
-        if (from < to) to--;
-        if (nodePlacement === "after") to++;
-
-        const collection = self.get("collection");
-        const fromObj = collection.objectAt(from);
-        collection.replace(from, 1);
-        collection.replace(to, 0, [fromObj]);
-        self._saveValues();
-      });
-      return false;
-    });
-
-    this.$().on("dragover.discourse", ".values", function(e) {
-      e.preventDefault();
-      dragging.style.display = "none";
-      if (e.target.className === "placeholder") {
-        return;
-      }
-      over = e.target;
-
-      const relY = e.originalEvent.clientY - over.offsetTop;
-      const height = over.offsetHeight / 2;
-      const parent = e.target.parentNode;
-
-      if (relY > height) {
-        nodePlacement = "after";
-        parent.insertBefore(placeholder, e.target.nextElementSibling);
-      } else if (relY < height) {
-        nodePlacement = "before";
-        parent.insertBefore(placeholder, e.target);
-      }
-    });
-  }.on("didInsertElement"),
-
-  _removeSorting: function() {
-    this.$()
-      .off("dragover.discourse")
-      .off("dragend.discourse")
-      .off("dragstart.discourse");
-  }.on("willDestroyElement"),
-
-  _setupCollection: function() {
+  @on("didReceiveAttrs")
+  _setupCollection() {
     const values = this.get("values");
     if (this.get("inputType") === "array") {
       this.set("collection", values || []);
-    } else {
-      this.set("collection", values && values.length ? values.split("\n") : []);
+      return;
     }
-  }
-    .on("init")
-    .observes("values"),
 
-  _saveValues: function() {
-    if (this.get("inputType") === "array") {
-      this.set("values", this.get("collection"));
-    } else {
-      this.set("values", this.get("collection").join("\n"));
-    }
+    this.set(
+      "collection",
+      this._splitValues(values, this.get("inputDelimiter") || "\n")
+    );
   },
 
-  inputInvalid: Ember.computed.empty("newValue"),
+  @computed("choices.[]", "collection.[]")
+  filteredChoices(choices, collection) {
+    return Ember.makeArray(choices).filter(i => collection.indexOf(i) < 0);
+  },
 
-  keyDown(e) {
-    if (e.keyCode === 13) {
-      this.send("addValue");
-    }
+  keyDown(event) {
+    if (event.keyCode === 13) this.send("addValue", this.get("newValue"));
   },
 
   actions: {
-    addValue() {
-      if (this.get("inputInvalid")) {
-        return;
-      }
+    changeValue(index, newValue) {
+      this._replaceValue(index, newValue);
+    },
+
+    addValue(newValue) {
+      if (this.get("inputInvalid")) return;
 
-      this.get("collection").addObject(this.get("newValue"));
       this.set("newValue", "");
-
-      this._saveValues();
+      this._addValue(newValue);
     },
 
     removeValue(value) {
-      const collection = this.get("collection");
-      collection.removeObject(value);
-      this._saveValues();
+      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 [];
     }
   }
 });