2017-11-21 18:53:09 +08:00
|
|
|
import MultiSelectComponent from "select-kit/components/multi-select";
|
2020-02-03 21:22:14 +08:00
|
|
|
import { MAIN_COLLECTION } from "select-kit/components/select-kit";
|
|
|
|
import { computed } from "@ember/object";
|
|
|
|
import { readOnly } from "@ember/object/computed";
|
|
|
|
import { makeArray } from "discourse-common/lib/helpers";
|
2017-11-21 18:53:09 +08:00
|
|
|
|
|
|
|
export default MultiSelectComponent.extend({
|
|
|
|
pluginApiIdentifiers: ["list-setting"],
|
2020-02-03 21:22:14 +08:00
|
|
|
classNames: ["list-setting"],
|
2017-11-21 18:53:09 +08:00
|
|
|
choices: null,
|
2020-02-03 21:22:14 +08:00
|
|
|
nameProperty: null,
|
|
|
|
valueProperty: null,
|
|
|
|
content: readOnly("choices"),
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2020-02-03 21:22:14 +08:00
|
|
|
selectKitOptions: {
|
|
|
|
filterable: true,
|
|
|
|
selectedNameComponent: "selectedNameComponent"
|
|
|
|
},
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2020-02-03 21:22:14 +08:00
|
|
|
modifyComponentForRow(collection) {
|
|
|
|
if (
|
|
|
|
collection === MAIN_COLLECTION &&
|
|
|
|
this.settingName &&
|
|
|
|
this.settingName.indexOf("color") > -1
|
|
|
|
) {
|
|
|
|
return "create-color-row";
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-02-03 21:22:14 +08:00
|
|
|
selectedNameComponent: computed("settingName", function() {
|
|
|
|
if (this.settingName && this.settingName.indexOf("color") > -1) {
|
|
|
|
return "selected-color";
|
2017-11-21 18:53:09 +08:00
|
|
|
} else {
|
2020-02-03 21:22:14 +08:00
|
|
|
return "selected-name";
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
2020-02-03 21:22:14 +08:00
|
|
|
}),
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2020-02-03 21:22:14 +08:00
|
|
|
deselect(value) {
|
|
|
|
this.onChangeChoices &&
|
|
|
|
this.onChangeChoices([...new Set([value, ...makeArray(this.choices)])]);
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2020-02-03 21:22:14 +08:00
|
|
|
this._super(...arguments);
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
|
|
|
});
|