2019-11-07 16:38:28 -05:00
|
|
|
import discourseComputed, { on } from "discourse-common/utils/decorators";
|
2020-02-03 08:22:14 -05:00
|
|
|
import { empty, reads } from "@ember/object/computed";
|
2019-10-23 12:30:52 -04:00
|
|
|
import Component from "@ember/component";
|
2019-11-01 13:06:50 -04:00
|
|
|
import { makeArray } from "discourse-common/lib/helpers";
|
2018-08-03 16:41:37 -04:00
|
|
|
|
2019-10-23 12:30:52 -04:00
|
|
|
export default Component.extend({
|
2015-06-09 12:19:41 -04:00
|
|
|
classNameBindings: [":value-list"],
|
2019-10-30 16:28:29 -04:00
|
|
|
inputInvalid: empty("newValue"),
|
2018-08-03 16:41:37 -04:00
|
|
|
inputDelimiter: null,
|
|
|
|
inputType: null,
|
|
|
|
newValue: "",
|
|
|
|
collection: null,
|
|
|
|
values: null,
|
2020-02-03 08:22:14 -05:00
|
|
|
noneKey: reads("addKey"),
|
2018-08-03 16:41:37 -04:00
|
|
|
|
|
|
|
@on("didReceiveAttrs")
|
|
|
|
_setupCollection() {
|
2019-05-27 04:15:39 -04:00
|
|
|
const values = this.values;
|
|
|
|
if (this.inputType === "array") {
|
2015-07-28 12:29:40 -04:00
|
|
|
this.set("collection", values || []);
|
2018-08-03 16:41:37 -04:00
|
|
|
return;
|
2015-07-28 12:29:40 -04:00
|
|
|
}
|
2015-06-09 12:19:41 -04:00
|
|
|
|
2018-08-03 16:41:37 -04:00
|
|
|
this.set(
|
|
|
|
"collection",
|
2019-05-27 04:15:39 -04:00
|
|
|
this._splitValues(values, this.inputDelimiter || "\n")
|
2018-08-03 16:41:37 -04:00
|
|
|
);
|
2015-07-28 15:58:49 -04:00
|
|
|
},
|
2015-06-09 12:19:41 -04:00
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed("choices.[]", "collection.[]")
|
2018-08-03 16:41:37 -04:00
|
|
|
filteredChoices(choices, collection) {
|
2019-10-31 13:55:01 -04:00
|
|
|
return makeArray(choices).filter((i) => collection.indexOf(i) < 0);
|
2018-08-03 16:41:37 -04:00
|
|
|
},
|
2015-06-09 12:19:41 -04:00
|
|
|
|
2018-08-03 16:41:37 -04:00
|
|
|
keyDown(event) {
|
2021-08-09 05:41:36 -04:00
|
|
|
if (event.key === "Enter") {
|
2020-09-22 10:28:28 -04:00
|
|
|
this.send("addValue", this.newValue);
|
|
|
|
}
|
2015-06-09 12:19:41 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
actions: {
|
2018-08-03 16:41:37 -04:00
|
|
|
changeValue(index, newValue) {
|
|
|
|
this._replaceValue(index, newValue);
|
|
|
|
},
|
2015-06-09 12:19:41 -04:00
|
|
|
|
2018-08-03 16:41:37 -04:00
|
|
|
addValue(newValue) {
|
2020-09-22 10:28:28 -04:00
|
|
|
if (this.inputInvalid) {
|
|
|
|
return;
|
|
|
|
}
|
2015-07-28 15:58:49 -04:00
|
|
|
|
2020-02-03 08:22:14 -05:00
|
|
|
this.set("newValue", null);
|
2018-08-03 16:41:37 -04:00
|
|
|
this._addValue(newValue);
|
2015-06-09 12:19:41 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
removeValue(value) {
|
2018-08-03 16:41:37 -04:00
|
|
|
this._removeValue(value);
|
|
|
|
},
|
|
|
|
|
|
|
|
selectChoice(choice) {
|
|
|
|
this._addValue(choice);
|
|
|
|
},
|
2022-02-03 16:47:02 -05:00
|
|
|
|
|
|
|
shift(operation, index) {
|
|
|
|
let futureIndex = index + operation;
|
|
|
|
|
|
|
|
if (futureIndex > this.collection.length - 1) {
|
|
|
|
futureIndex = 0;
|
|
|
|
} else if (futureIndex < 0) {
|
|
|
|
futureIndex = this.collection.length - 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
const shiftedValue = this.collection[index];
|
|
|
|
this.collection.removeAt(index);
|
|
|
|
this.collection.insertAt(futureIndex, shiftedValue);
|
|
|
|
|
|
|
|
this._saveValues();
|
|
|
|
},
|
2018-08-03 16:41:37 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
_addValue(value) {
|
2019-05-27 04:15:39 -04:00
|
|
|
this.collection.addObject(value);
|
2020-02-03 08:22:14 -05:00
|
|
|
|
|
|
|
if (this.choices) {
|
|
|
|
this.set("choices", this.choices.rejectBy("id", value));
|
|
|
|
} else {
|
|
|
|
this.set("choices", []);
|
|
|
|
}
|
|
|
|
|
2018-08-03 16:41:37 -04:00
|
|
|
this._saveValues();
|
|
|
|
},
|
|
|
|
|
|
|
|
_removeValue(value) {
|
2020-02-03 08:22:14 -05:00
|
|
|
this.collection.removeObject(value);
|
|
|
|
|
|
|
|
if (this.choices) {
|
2020-02-14 11:33:17 -05:00
|
|
|
this.set("choices", this.choices.concat([value]).uniq());
|
2020-02-03 08:22:14 -05:00
|
|
|
} else {
|
2020-02-14 11:21:06 -05:00
|
|
|
this.set("choices", makeArray(value));
|
2020-02-03 08:22:14 -05:00
|
|
|
}
|
|
|
|
|
2018-08-03 16:41:37 -04:00
|
|
|
this._saveValues();
|
|
|
|
},
|
|
|
|
|
|
|
|
_replaceValue(index, newValue) {
|
2019-05-27 04:15:39 -04:00
|
|
|
this.collection.replace(index, 1, [newValue]);
|
2018-08-03 16:41:37 -04:00
|
|
|
this._saveValues();
|
|
|
|
},
|
|
|
|
|
|
|
|
_saveValues() {
|
2019-05-27 04:15:39 -04:00
|
|
|
if (this.inputType === "array") {
|
|
|
|
this.set("values", this.collection);
|
2018-08-03 16:41:37 -04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-05-27 04:42:53 -04:00
|
|
|
this.set("values", this.collection.join(this.inputDelimiter || "\n"));
|
2018-08-03 16:41:37 -04:00
|
|
|
},
|
|
|
|
|
2022-02-03 16:47:02 -05:00
|
|
|
@discourseComputed("collection")
|
|
|
|
showUpDownButtons(collection) {
|
|
|
|
return collection.length - 1 ? true : false;
|
|
|
|
},
|
|
|
|
|
2018-08-03 16:41:37 -04:00
|
|
|
_splitValues(values, delimiter) {
|
|
|
|
if (values && values.length) {
|
|
|
|
return values.split(delimiter).filter((x) => x);
|
|
|
|
} else {
|
|
|
|
return [];
|
2015-06-09 12:19:41 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|