2021-03-28 11:06:49 +02:00
|
|
|
import { newInput, selectionTypes } from "../lib/wizard-mapper";
|
2021-04-12 07:44:47 +02:00
|
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
2020-04-15 07:41:27 +02:00
|
|
|
import { later } from "@ember/runloop";
|
2020-04-05 03:37:09 +02:00
|
|
|
import Component from "@ember/component";
|
|
|
|
import { A } from "@ember/array";
|
2020-04-01 07:03:26 +02:00
|
|
|
|
2020-04-05 03:37:09 +02:00
|
|
|
export default Component.extend({
|
2021-03-28 11:06:49 +02:00
|
|
|
classNames: "wizard-mapper",
|
|
|
|
|
2020-04-15 07:41:27 +02:00
|
|
|
didReceiveAttrs() {
|
|
|
|
if (this.inputs && this.inputs.constructor !== Array) {
|
2021-03-28 11:06:49 +02:00
|
|
|
later(() => this.set("inputs", null));
|
2020-04-15 07:41:27 +02:00
|
|
|
}
|
|
|
|
},
|
2021-03-28 11:06:49 +02:00
|
|
|
|
|
|
|
@discourseComputed("inputs.@each.type")
|
2020-04-10 09:57:49 +02:00
|
|
|
canAdd(inputs) {
|
2021-03-28 11:06:49 +02:00
|
|
|
return (
|
|
|
|
!inputs ||
|
|
|
|
inputs.constructor !== Array ||
|
|
|
|
inputs.every((i) => {
|
|
|
|
return ["assignment", "association"].indexOf(i.type) === -1;
|
|
|
|
})
|
|
|
|
);
|
2020-04-01 07:03:26 +02:00
|
|
|
},
|
2021-03-28 11:06:49 +02:00
|
|
|
|
|
|
|
@discourseComputed("options.@each.inputType")
|
2020-04-01 07:03:26 +02:00
|
|
|
inputOptions(options) {
|
2020-04-05 03:37:09 +02:00
|
|
|
let result = {
|
2021-03-28 11:06:49 +02:00
|
|
|
inputTypes: options.inputTypes || "assignment,conditional",
|
|
|
|
inputConnector: options.inputConnector || "or",
|
2020-04-01 07:03:26 +02:00
|
|
|
pairConnector: options.pairConnector || null,
|
2020-04-06 03:54:16 +02:00
|
|
|
outputConnector: options.outputConnector || null,
|
2021-03-28 11:06:49 +02:00
|
|
|
context: options.context || null,
|
|
|
|
};
|
|
|
|
|
|
|
|
let inputTypes = ["key", "value", "output"];
|
|
|
|
inputTypes.forEach((type) => {
|
2020-04-06 03:54:16 +02:00
|
|
|
result[`${type}Placeholder`] = options[`${type}Placeholder`] || null;
|
2021-03-28 11:06:49 +02:00
|
|
|
result[`${type}DefaultSelection`] =
|
|
|
|
options[`${type}DefaultSelection`] || null;
|
2020-04-05 03:37:09 +02:00
|
|
|
});
|
2021-03-28 11:06:49 +02:00
|
|
|
|
|
|
|
selectionTypes.forEach((type) => {
|
2020-04-07 16:18:12 +02:00
|
|
|
if (options[`${type}Selection`] !== undefined) {
|
2021-03-28 11:06:49 +02:00
|
|
|
result[`${type}Selection`] = options[`${type}Selection`];
|
2020-04-05 03:37:09 +02:00
|
|
|
} else {
|
2021-03-28 11:06:49 +02:00
|
|
|
result[`${type}Selection`] = type === "text" ? true : false;
|
2020-04-05 03:37:09 +02:00
|
|
|
}
|
|
|
|
});
|
2021-03-28 11:06:49 +02:00
|
|
|
|
2020-04-05 03:37:09 +02:00
|
|
|
return result;
|
|
|
|
},
|
2021-03-28 11:06:49 +02:00
|
|
|
|
|
|
|
onUpdate() {},
|
2020-04-01 07:03:26 +02:00
|
|
|
|
|
|
|
actions: {
|
|
|
|
add() {
|
2021-03-28 11:06:49 +02:00
|
|
|
if (!this.get("inputs")) {
|
|
|
|
this.set("inputs", A());
|
2020-04-06 03:54:16 +02:00
|
|
|
}
|
|
|
|
|
2021-03-28 11:06:49 +02:00
|
|
|
this.get("inputs").pushObject(
|
2020-04-06 10:36:38 +02:00
|
|
|
newInput(this.inputOptions, this.inputs.length)
|
|
|
|
);
|
2021-03-28 11:06:49 +02:00
|
|
|
|
|
|
|
this.onUpdate(this.property, "input");
|
2020-04-01 07:03:26 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
remove(input) {
|
2020-04-07 06:56:16 +02:00
|
|
|
const inputs = this.inputs;
|
|
|
|
inputs.removeObject(input);
|
2021-03-28 11:06:49 +02:00
|
|
|
|
2020-04-07 06:56:16 +02:00
|
|
|
if (inputs.length) {
|
2021-03-28 11:06:49 +02:00
|
|
|
inputs[0].set("connector", null);
|
2020-04-07 06:56:16 +02:00
|
|
|
}
|
2021-03-28 11:06:49 +02:00
|
|
|
|
|
|
|
this.onUpdate(this.property, "input");
|
2020-04-20 11:41:13 +02:00
|
|
|
},
|
2021-03-28 11:06:49 +02:00
|
|
|
|
2020-04-29 03:42:39 +02:00
|
|
|
inputUpdated(component, type) {
|
|
|
|
this.onUpdate(this.property, component, type);
|
2021-03-28 11:06:49 +02:00
|
|
|
},
|
|
|
|
},
|
2020-04-01 07:03:26 +02:00
|
|
|
});
|