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

app/assets/javascripts/select-kit/addon/components/multi-select.js

@@ -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();
 

app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js

@@ -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;
+      }
+    },
+  },
 });

app/assets/javascripts/select-kit/addon/components/select-kit.js

@@ -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) {

app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-filter.js

@@ -47,6 +47,8 @@ export default Component.extend(UtilsMixin, {
   },
 
   actions: {
+    onPaste() {},
+
     onInput(event) {
       this.selectKit.onInput(event);
       return true;

app/assets/javascripts/select-kit/addon/mixins/utils.js

@@ -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;
       });
     }
   },

app/assets/javascripts/select-kit/addon/templates/components/select-kit/select-kit-filter.hbs

@@ -9,6 +9,7 @@
     spellcheck=false
     value=(readonly selectKit.filter)
     input=(action "onInput")
+    paste=(action "onPaste")
     keyDown=(action "onKeydown")
   }}