2017-11-21 18:53:09 +08:00
|
|
|
import SelectKitComponent from "select-kit/components/select-kit";
|
|
|
|
import computed from "ember-addons/ember-computed-decorators";
|
|
|
|
import { on } from "ember-addons/ember-computed-decorators";
|
2018-03-22 18:29:55 +08:00
|
|
|
const { get, isNone, isEmpty, makeArray, run } = Ember;
|
2018-09-05 23:18:52 +08:00
|
|
|
import {
|
|
|
|
applyOnSelectPluginApiCallbacks,
|
|
|
|
applyOnSelectNonePluginApiCallbacks
|
|
|
|
} from "select-kit/mixins/plugin-api";
|
2017-11-21 18:53:09 +08:00
|
|
|
|
|
|
|
export default SelectKitComponent.extend({
|
|
|
|
pluginApiIdentifiers: ["multi-select"],
|
2018-02-26 18:42:57 +08:00
|
|
|
layoutName: "select-kit/templates/components/multi-select",
|
2017-11-21 18:53:09 +08:00
|
|
|
classNames: "multi-select",
|
|
|
|
headerComponent: "multi-select/multi-select-header",
|
|
|
|
headerText: "select_kit.default_header_text",
|
|
|
|
allowAny: true,
|
|
|
|
allowInitialValueMutation: false,
|
|
|
|
autoFilterable: true,
|
|
|
|
selectedNameComponent: "multi-select/selected-name",
|
2018-02-26 18:42:57 +08:00
|
|
|
filterIcon: null,
|
2018-03-22 18:29:55 +08:00
|
|
|
filterComponent: "multi-select/multi-select-filter",
|
|
|
|
computedValues: null,
|
|
|
|
values: null,
|
2017-11-21 18:53:09 +08:00
|
|
|
|
|
|
|
init() {
|
2019-01-19 17:05:51 +08:00
|
|
|
this._super(...arguments);
|
2017-11-21 18:53:09 +08:00
|
|
|
|
|
|
|
this.set("computedValues", []);
|
2018-03-22 18:29:55 +08:00
|
|
|
|
2018-06-15 23:03:24 +08:00
|
|
|
if (isNone(this.get("values"))) {
|
|
|
|
this.set("values", []);
|
|
|
|
}
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2018-09-12 18:19:04 +08:00
|
|
|
this.get("headerComponentOptions").setProperties({
|
|
|
|
selectedNameComponent: this.get("selectedNameComponent")
|
|
|
|
});
|
2017-11-21 18:53:09 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
@on("didRender")
|
|
|
|
_setChoicesMaxWidth() {
|
|
|
|
const width = this.$body().outerWidth(false);
|
2018-11-06 18:30:12 +08:00
|
|
|
if (width > 0) {
|
|
|
|
this.$(".choices").css({ maxWidth: width });
|
|
|
|
}
|
2017-11-21 18:53:09 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
@on("didReceiveAttrs")
|
|
|
|
_compute() {
|
2018-03-22 18:29:55 +08:00
|
|
|
run.scheduleOnce("afterRender", () => {
|
2017-11-21 18:53:09 +08:00
|
|
|
this.willComputeAttributes();
|
2018-02-26 18:42:57 +08:00
|
|
|
let content = this.get("content") || [];
|
|
|
|
let asyncContent = this.get("asyncContent") || [];
|
|
|
|
content = this.willComputeContent(content);
|
|
|
|
asyncContent = this.willComputeAsyncContent(asyncContent);
|
2017-11-21 18:53:09 +08:00
|
|
|
let values = this._beforeWillComputeValues(this.get("values"));
|
|
|
|
content = this.computeContent(content);
|
2018-02-26 18:42:57 +08:00
|
|
|
asyncContent = this.computeAsyncContent(asyncContent);
|
2017-11-21 18:53:09 +08:00
|
|
|
content = this._beforeDidComputeContent(content);
|
2018-02-26 18:42:57 +08:00
|
|
|
asyncContent = this._beforeDidComputeAsyncContent(asyncContent);
|
2017-11-21 18:53:09 +08:00
|
|
|
values = this.willComputeValues(values);
|
|
|
|
values = this.computeValues(values);
|
|
|
|
values = this._beforeDidComputeValues(values);
|
|
|
|
this.didComputeContent(content);
|
2018-02-26 18:42:57 +08:00
|
|
|
this.didComputeAsyncContent(asyncContent);
|
2017-11-21 18:53:09 +08:00
|
|
|
this.didComputeValues(values);
|
|
|
|
this.didComputeAttributes();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
@computed("filter", "shouldDisplayCreateRow")
|
|
|
|
createRowComputedContent(filter, shouldDisplayCreateRow) {
|
2018-03-22 18:29:55 +08:00
|
|
|
if (shouldDisplayCreateRow) {
|
2017-11-21 18:53:09 +08:00
|
|
|
let content = this.createContentFromInput(filter);
|
|
|
|
return this.computeContentItem(content, { created: true });
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
@computed("filter", "computedValues")
|
|
|
|
shouldDisplayCreateRow(filter, computedValues) {
|
|
|
|
return this._super() && !computedValues.includes(filter);
|
|
|
|
},
|
|
|
|
|
2017-11-22 01:07:10 +08:00
|
|
|
@computed
|
2018-06-15 23:03:24 +08:00
|
|
|
shouldDisplayFilter() {
|
|
|
|
return true;
|
|
|
|
},
|
2017-11-22 01:07:10 +08:00
|
|
|
|
2017-11-21 18:53:09 +08:00
|
|
|
_beforeWillComputeValues(values) {
|
2018-05-25 05:41:39 +08:00
|
|
|
return values.map(v => this._cast(v === "" ? null : v));
|
2017-11-21 18:53:09 +08:00
|
|
|
},
|
2018-06-15 23:03:24 +08:00
|
|
|
willComputeValues(values) {
|
|
|
|
return values;
|
|
|
|
},
|
|
|
|
computeValues(values) {
|
|
|
|
return values;
|
|
|
|
},
|
2017-11-21 18:53:09 +08:00
|
|
|
_beforeDidComputeValues(values) {
|
|
|
|
this.setProperties({ computedValues: values });
|
|
|
|
return values;
|
|
|
|
},
|
2018-06-15 23:03:24 +08:00
|
|
|
didComputeValues(values) {
|
|
|
|
return values;
|
|
|
|
},
|
2017-11-21 18:53:09 +08:00
|
|
|
|
|
|
|
mutateAttributes() {
|
2018-03-22 18:29:55 +08:00
|
|
|
run.next(() => {
|
|
|
|
if (this.get("isDestroyed") || this.get("isDestroying")) return;
|
2017-11-28 02:50:04 +08:00
|
|
|
|
2017-11-21 18:53:09 +08:00
|
|
|
this.mutateContent(this.get("computedContent"));
|
|
|
|
this.mutateValues(this.get("computedValues"));
|
|
|
|
});
|
|
|
|
},
|
2017-11-22 17:34:12 +08:00
|
|
|
mutateValues(computedValues) {
|
|
|
|
this.set("values", computedValues);
|
|
|
|
},
|
2018-06-15 23:03:24 +08:00
|
|
|
mutateContent() {},
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2018-12-10 21:05:00 +08:00
|
|
|
forceValues(values) {
|
|
|
|
this.mutateValues(values);
|
|
|
|
this._compute();
|
|
|
|
},
|
|
|
|
|
2017-11-21 18:53:09 +08:00
|
|
|
filterComputedContent(computedContent, computedValues, filter) {
|
|
|
|
return computedContent.filter(c => {
|
2018-06-26 18:19:14 +08:00
|
|
|
return this._normalize(get(c, "name")).indexOf(filter) > -1;
|
2017-11-21 18:53:09 +08:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-02-26 18:42:57 +08:00
|
|
|
@computed("computedAsyncContent.[]", "computedValues.[]")
|
|
|
|
filteredAsyncComputedContent(computedAsyncContent, computedValues) {
|
|
|
|
computedAsyncContent = computedAsyncContent.filter(c => {
|
|
|
|
return !computedValues.includes(get(c, "value"));
|
|
|
|
});
|
|
|
|
|
|
|
|
if (this.get("limitMatches")) {
|
|
|
|
return computedAsyncContent.slice(0, this.get("limitMatches"));
|
|
|
|
}
|
|
|
|
|
|
|
|
return computedAsyncContent;
|
|
|
|
},
|
|
|
|
|
2017-11-21 18:53:09 +08:00
|
|
|
@computed("computedContent.[]", "computedValues.[]", "filter")
|
|
|
|
filteredComputedContent(computedContent, computedValues, filter) {
|
|
|
|
computedContent = computedContent.filter(c => {
|
|
|
|
return !computedValues.includes(get(c, "value"));
|
|
|
|
});
|
|
|
|
|
2018-01-11 16:39:51 +08:00
|
|
|
if (this.get("shouldFilter")) {
|
2018-06-15 23:03:24 +08:00
|
|
|
computedContent = this.filterComputedContent(
|
|
|
|
computedContent,
|
|
|
|
computedValues,
|
2018-06-26 18:19:14 +08:00
|
|
|
this._normalize(filter)
|
2018-06-15 23:03:24 +08:00
|
|
|
);
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
|
|
|
|
2018-01-11 16:54:39 +08:00
|
|
|
if (this.get("limitMatches")) {
|
|
|
|
return computedContent.slice(0, this.get("limitMatches"));
|
|
|
|
}
|
|
|
|
|
|
|
|
return computedContent;
|
2017-11-21 18:53:09 +08:00
|
|
|
},
|
|
|
|
|
2018-03-22 18:29:55 +08:00
|
|
|
computeHeaderContent() {
|
2018-04-05 22:45:19 +08:00
|
|
|
let content = {
|
2017-12-22 20:08:12 +08:00
|
|
|
title: this.get("title"),
|
2018-03-22 18:29:55 +08:00
|
|
|
selection: this.get("selection")
|
2017-11-21 18:53:09 +08:00
|
|
|
};
|
2018-04-05 22:45:19 +08:00
|
|
|
|
|
|
|
if (this.get("noneLabel")) {
|
|
|
|
if (!this.get("hasSelection")) {
|
2018-06-15 23:03:24 +08:00
|
|
|
content.title = content.name = content.label = I18n.t(
|
|
|
|
this.get("noneLabel")
|
|
|
|
);
|
2018-04-05 22:45:19 +08:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (!this.get("hasReachedMinimum")) {
|
2018-06-15 23:03:24 +08:00
|
|
|
const key =
|
|
|
|
this.get("minimumLabel") || "select_kit.min_content_not_reached";
|
|
|
|
content.title = content.name = content.label = I18n.t(key, {
|
|
|
|
count: this.get("minimum")
|
|
|
|
});
|
2018-04-05 22:45:19 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return content;
|
2017-11-21 18:53:09 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
@computed("filter")
|
|
|
|
templateForCreateRow() {
|
2018-06-15 23:03:24 +08:00
|
|
|
return rowComponent => {
|
|
|
|
return I18n.t("select_kit.create", {
|
|
|
|
content: rowComponent.get("computedContent.name")
|
|
|
|
});
|
2017-11-21 18:53:09 +08:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2018-02-26 18:42:57 +08:00
|
|
|
validateSelect() {
|
2018-04-05 22:45:19 +08:00
|
|
|
return this._super() && !this.get("hasReachedMaximum");
|
2017-11-21 18:53:09 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
@computed("computedValues.[]", "computedContent.[]")
|
2018-03-22 18:29:55 +08:00
|
|
|
selection(computedValues, computedContent) {
|
2017-11-21 18:53:09 +08:00
|
|
|
const selected = [];
|
2017-12-15 15:45:50 +08:00
|
|
|
|
|
|
|
computedValues.forEach(v => {
|
|
|
|
const value = computedContent.findBy("value", v);
|
|
|
|
if (value) selected.push(value);
|
|
|
|
});
|
|
|
|
|
2017-11-21 18:53:09 +08:00
|
|
|
return selected;
|
|
|
|
},
|
|
|
|
|
2018-03-22 18:29:55 +08:00
|
|
|
@computed("selection.[]")
|
2018-06-15 23:03:24 +08:00
|
|
|
hasSelection(selection) {
|
|
|
|
return !isEmpty(selection);
|
|
|
|
},
|
2018-03-22 18:29:55 +08:00
|
|
|
|
|
|
|
didPressTab(event) {
|
|
|
|
if (isEmpty(this.get("filter")) && !this.get("highlighted")) {
|
|
|
|
this.$header().focus();
|
|
|
|
this.close(event);
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.get("highlighted") && this.get("isExpanded")) {
|
|
|
|
this._destroyEvent(event);
|
|
|
|
this.focus();
|
|
|
|
this.select(this.get("highlighted"));
|
|
|
|
return false;
|
|
|
|
} else {
|
|
|
|
this.close(event);
|
|
|
|
}
|
|
|
|
|
|
|
|
return true;
|
|
|
|
},
|
2017-11-21 18:53:09 +08:00
|
|
|
|
|
|
|
autoHighlight() {
|
2018-03-22 18:29:55 +08:00
|
|
|
run.schedule("afterRender", () => {
|
2018-01-11 16:39:51 +08:00
|
|
|
if (!this.get("isExpanded")) return;
|
|
|
|
if (!this.get("renderedBodyOnce")) return;
|
2018-03-22 18:29:55 +08:00
|
|
|
if (this.get("highlighted")) return;
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2018-02-26 18:42:57 +08:00
|
|
|
if (isEmpty(this.get("collectionComputedContent"))) {
|
2017-11-21 18:53:09 +08:00
|
|
|
if (this.get("createRowComputedContent")) {
|
2018-03-22 18:29:55 +08:00
|
|
|
this.highlight(this.get("createRowComputedContent"));
|
2018-06-15 23:03:24 +08:00
|
|
|
} else if (
|
|
|
|
this.get("noneRowComputedContent") &&
|
|
|
|
this.get("hasSelection")
|
|
|
|
) {
|
2018-03-22 18:29:55 +08:00
|
|
|
this.highlight(this.get("noneRowComputedContent"));
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
|
|
|
} else {
|
2018-03-22 18:29:55 +08:00
|
|
|
this.highlight(this.get("collectionComputedContent.firstObject"));
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-03-22 18:29:55 +08:00
|
|
|
select(computedContentItem) {
|
2018-06-15 23:03:24 +08:00
|
|
|
if (
|
|
|
|
!computedContentItem ||
|
|
|
|
computedContentItem.__sk_row_type === "noneRow"
|
|
|
|
) {
|
2018-09-05 23:18:52 +08:00
|
|
|
applyOnSelectNonePluginApiCallbacks(
|
|
|
|
this.get("pluginApiIdentifiers"),
|
|
|
|
this
|
|
|
|
);
|
|
|
|
this._boundaryActionHandler("onSelectNone");
|
2018-03-22 18:29:55 +08:00
|
|
|
this.clearSelection();
|
|
|
|
return;
|
|
|
|
}
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2018-11-15 22:21:40 +08:00
|
|
|
if (computedContentItem.__sk_row_type === "noopRow") {
|
2018-11-29 22:56:19 +08:00
|
|
|
applyOnSelectPluginApiCallbacks(
|
|
|
|
this.get("pluginApiIdentifiers"),
|
|
|
|
computedContentItem.value,
|
|
|
|
this
|
|
|
|
);
|
|
|
|
|
2018-11-15 22:21:40 +08:00
|
|
|
this._boundaryActionHandler("onSelect", computedContentItem.value);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-03-22 18:29:55 +08:00
|
|
|
if (computedContentItem.__sk_row_type === "createRow") {
|
2018-06-15 23:03:24 +08:00
|
|
|
if (
|
|
|
|
!this.get("computedValues").includes(computedContentItem.value) &&
|
|
|
|
this.validateCreate(computedContentItem.value)
|
|
|
|
) {
|
2018-03-22 18:29:55 +08:00
|
|
|
this.willCreate(computedContentItem);
|
|
|
|
|
|
|
|
computedContentItem.__sk_row_type = null;
|
2017-11-21 18:53:09 +08:00
|
|
|
this.get("computedContent").pushObject(computedContentItem);
|
2018-03-22 18:29:55 +08:00
|
|
|
|
|
|
|
run.schedule("afterRender", () => {
|
|
|
|
this.didCreate(computedContentItem);
|
|
|
|
this._boundaryActionHandler("onCreate");
|
|
|
|
});
|
|
|
|
|
|
|
|
this.select(computedContentItem);
|
|
|
|
return;
|
2018-01-11 16:39:51 +08:00
|
|
|
} else {
|
|
|
|
this._boundaryActionHandler("onCreateFailure");
|
2018-03-22 18:29:55 +08:00
|
|
|
return;
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
2018-03-22 18:29:55 +08:00
|
|
|
}
|
2017-11-21 18:53:09 +08:00
|
|
|
|
2018-03-22 18:29:55 +08:00
|
|
|
if (this.validateSelect(computedContentItem)) {
|
2017-11-21 18:53:09 +08:00
|
|
|
this.willSelect(computedContentItem);
|
2018-03-22 18:29:55 +08:00
|
|
|
this.clearFilter();
|
|
|
|
this.setProperties({ highlighted: null });
|
|
|
|
this.get("computedValues").pushObject(computedContentItem.value);
|
2018-02-14 00:23:12 +08:00
|
|
|
|
2018-03-22 18:29:55 +08:00
|
|
|
run.next(() => this.mutateAttributes());
|
|
|
|
|
|
|
|
run.schedule("afterRender", () => {
|
|
|
|
this.didSelect(computedContentItem);
|
|
|
|
|
|
|
|
applyOnSelectPluginApiCallbacks(
|
|
|
|
this.get("pluginApiIdentifiers"),
|
|
|
|
computedContentItem.value,
|
|
|
|
this
|
|
|
|
);
|
|
|
|
|
|
|
|
this.autoHighlight();
|
|
|
|
|
|
|
|
this._boundaryActionHandler("onSelect", computedContentItem.value);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this._boundaryActionHandler("onSelectFailure");
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
2018-03-22 18:29:55 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
deselect(rowComputedContentItems) {
|
|
|
|
this.willDeselect(rowComputedContentItems);
|
|
|
|
rowComputedContentItems = makeArray(rowComputedContentItems);
|
2018-06-15 23:03:24 +08:00
|
|
|
const generatedComputedContents = this._filterRemovableComputedContents(
|
|
|
|
makeArray(rowComputedContentItems)
|
|
|
|
);
|
2018-03-22 18:29:55 +08:00
|
|
|
this.set("highlighted", null);
|
|
|
|
this.set("highlightedSelection", []);
|
2018-06-15 23:03:24 +08:00
|
|
|
this.get("computedValues").removeObjects(
|
|
|
|
rowComputedContentItems.map(r => r.value)
|
|
|
|
);
|
2018-03-22 18:29:55 +08:00
|
|
|
this.get("computedContent").removeObjects(generatedComputedContents);
|
|
|
|
run.next(() => this.mutateAttributes());
|
|
|
|
run.schedule("afterRender", () => {
|
|
|
|
this.didDeselect(rowComputedContentItems);
|
|
|
|
this.autoHighlight();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
close(event) {
|
|
|
|
this.clearHighlightSelection();
|
|
|
|
|
|
|
|
this._super(event);
|
|
|
|
},
|
|
|
|
|
|
|
|
unfocus(event) {
|
|
|
|
this.clearHighlightSelection();
|
|
|
|
|
|
|
|
this._super(event);
|
2017-11-21 18:53:09 +08:00
|
|
|
}
|
|
|
|
});
|