UX: allows to copy/paste a list of | separated values in sk (#11642)
* UX: allows to copy/paste a list of | separated values in sk * fixes tests
This commit is contained in:
parent
5f846531a5
commit
53f9a0883e
app/assets/javascripts/select-kit/addon
components
mixins
templates/components/select-kit
|
@ -29,6 +29,31 @@ export default SelectKitComponent.extend({
|
|||
);
|
||||
},
|
||||
|
||||
append(values) {
|
||||
const existingItems = values
|
||||
.map((value) => {
|
||||
const defaultItem = this.defaultItem(value, value);
|
||||
const existingItem =
|
||||
this.findValue(this.mainCollection, defaultItem) ||
|
||||
this.findName(this.mainCollection, defaultItem);
|
||||
if (!existingItem) {
|
||||
if (this.validateCreate(value, this.content)) {
|
||||
return value;
|
||||
}
|
||||
} else if (this.validateSelect(existingItem)) {
|
||||
return this.getValue(existingItem);
|
||||
}
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
const newValues = makeArray(this.value).concat(existingItems);
|
||||
const newContent = makeArray(this.selectedContent).concat(
|
||||
makeArray(existingItems)
|
||||
);
|
||||
|
||||
this.selectKit.change(newValues, newContent);
|
||||
},
|
||||
|
||||
deselect(item) {
|
||||
this.clearErrors();
|
||||
|
||||
|
|
|
@ -15,4 +15,25 @@ export default SelectKitFilterComponent.extend({
|
|||
}
|
||||
return isEmpty(placeholder) ? "" : I18n.t(placeholder);
|
||||
},
|
||||
|
||||
actions: {
|
||||
onPaste(event) {
|
||||
const data = event.originalEvent.clipboardData;
|
||||
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
const parts = data.getData("text").split("|").filter(Boolean);
|
||||
|
||||
if (parts.length > 1) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.selectKit.append(parts);
|
||||
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
@ -112,6 +112,7 @@ export default Component.extend(
|
|||
change: bind(this, this._onChangeWrapper),
|
||||
select: bind(this, this.select),
|
||||
deselect: bind(this, this.deselect),
|
||||
append: bind(this, this.append),
|
||||
|
||||
onOpen: bind(this, this._onOpenWrapper),
|
||||
onClose: bind(this, this._onCloseWrapper),
|
||||
|
@ -540,6 +541,10 @@ export default Component.extend(
|
|||
this.selectKit.change(null, null);
|
||||
},
|
||||
|
||||
append() {
|
||||
// do nothing on general case
|
||||
},
|
||||
|
||||
search(filter) {
|
||||
let content = this.content || [];
|
||||
if (filter) {
|
||||
|
|
|
@ -47,6 +47,8 @@ export default Component.extend(UtilsMixin, {
|
|||
},
|
||||
|
||||
actions: {
|
||||
onPaste() {},
|
||||
|
||||
onInput(event) {
|
||||
this.selectKit.onInput(event);
|
||||
return true;
|
||||
|
|
|
@ -57,18 +57,26 @@ export default Mixin.create({
|
|||
},
|
||||
|
||||
findValue(content, item) {
|
||||
const property = get(this.selectKit, "valueProperty");
|
||||
return this._findInContent(content, item, "valueProperty", "getValue");
|
||||
},
|
||||
|
||||
findName(content, item) {
|
||||
return this._findInContent(content, item, "nameProperty", "getName");
|
||||
},
|
||||
|
||||
_findInContent(content, item, type, getter) {
|
||||
const property = get(this.selectKit, type);
|
||||
|
||||
if (!property) {
|
||||
if (content.indexOf(item) > -1) {
|
||||
return item;
|
||||
}
|
||||
} else if (typeof property === "string") {
|
||||
return content.findBy(property, this.getValue(item));
|
||||
return content.findBy(property, this[getter](item));
|
||||
} else {
|
||||
const value = this.getValue(item);
|
||||
const name = this[getter](item);
|
||||
return content.find((contentItem) => {
|
||||
return this.getValue(contentItem) === value;
|
||||
return this[getter](contentItem) === name;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
spellcheck=false
|
||||
value=(readonly selectKit.filter)
|
||||
input=(action "onInput")
|
||||
paste=(action "onPaste")
|
||||
keyDown=(action "onKeydown")
|
||||
}}
|
||||
|
||||
|
|
Loading…
Reference in New Issue