FIX: allows to define label/title properties for display instead of name

FIX: allows to define label/title properties for display instead of name

Usage:

const content = [{foo: "FOO", bar: "BAR", value: 1, name: "foo-bar"}];

{{combo-box
  content=content
  value=value
  labelProperty="foo"
  titleProperty="bar"
}}
diff --git a/app/assets/javascripts/admin/templates/user-index.hbs b/app/assets/javascripts/admin/templates/user-index.hbs
index 1353ed0..df9a6e1 100644
--- a/app/assets/javascripts/admin/templates/user-index.hbs
+++ b/app/assets/javascripts/admin/templates/user-index.hbs
@@ -517,6 +517,7 @@
         {{admin-group-selector
           content=availableGroups
           value=customGroupIdsBuffer
+          labelProperty="name"
           onChange=(action (mut customGroupIdsBuffer))
         }}
       </div>
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js
index 02acfb5..8ad01cc 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js
@@ -57,6 +57,8 @@ export default Component.extend(
     nameProperty: "name",
     singleSelect: false,
     multiSelect: false,
+    labelProperty: null,
+    titleProperty: null,
 
     init() {
       this._super(...arguments);
@@ -76,6 +78,8 @@ export default Component.extend(
           uniqueID: guidFor(this),
           valueProperty: this.valueProperty,
           nameProperty: this.nameProperty,
+          labelProperty: this.labelProperty,
+          titleProperty: this.titleProperty,
           options: EmberObject.create(),
 
           isLoading: false,
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js
index c3ab602..452e46a 100644
--- a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js
+++ b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js
@@ -38,13 +38,18 @@ export default Component.extend(UtilsMixin, {
     return this.getProperty(this.item, "ariaLabel") || this.title;
   }),
 
-  title: computed("item.title", "rowName", function() {
-    return this.getProperty(this.item, "title") || this.rowName;
+  title: computed("rowTitle", "item.title", "rowName", function() {
+    return (
+      this.rowTitle || this.getProperty(this.item, "title") || this.rowName
+    );
   }),
 
-  label: computed("item.label", "title", "rowName", function() {
+  label: computed("rowLabel", "item.label", "title", "rowName", function() {
     const label =
-      this.getProperty(this.item, "label") || this.title || this.rowName;
+      this.rowLabel ||
+      this.getProperty(this.item, "label") ||
+      this.title ||
+      this.rowName;
     if (
       this.selectKit.options.allowAny &&
       this.rowValue === this.selectKit.filter &&
@@ -61,7 +66,9 @@ export default Component.extend(UtilsMixin, {
 
     this.setProperties({
       rowName: this.getName(this.item),
-      rowValue: this.getValue(this.item)
+      rowValue: this.getValue(this.item),
+      rowLabel: this.getProperty(this.item, "labelProperty"),
+      rowTitle: this.getProperty(this.item, "titleProperty")
     });
   },
 
diff --git a/app/assets/javascripts/select-kit/addon/components/selected-name.js b/app/assets/javascripts/select-kit/addon/components/selected-name.js
index e1c75a6..fc357bf 100644
--- a/app/assets/javascripts/select-kit/addon/components/selected-name.js
+++ b/app/assets/javascripts/select-kit/addon/components/selected-name.js
@@ -22,6 +22,8 @@ export default Component.extend(UtilsMixin, {
 
     // we can't listen on `item.nameProperty` given it's variable
     this.setProperties({
+      headerLabel: this.getProperty(this.item, "labelProperty"),
+      headerTitle: this.getProperty(this.item, "titleProperty"),
       name: this.getName(this.item),
       value:
         this.item === this.selectKit.noneItem ? null : this.getValue(this.item)
@@ -38,12 +40,22 @@ export default Component.extend(UtilsMixin, {
     return String(this.title).replace("&hellip;", "");
   }),
 
-  title: computed("item", function() {
-    return this._safeProperty("title", this.item) || this.name || "";
+  title: computed("headerTitle", "item", function() {
+    return (
+      this.headerTitle ||
+      this._safeProperty("title", this.item) ||
+      this.name ||
+      ""
+    );
   }),
 
-  label: computed("title", "name", function() {
-    return this._safeProperty("label", this.item) || this.title || this.name;
+  label: computed("headerLabel", "title", "name", function() {
+    return (
+      this.headerLabel ||
+      this._safeProperty("label", this.item) ||
+      this.title ||
+      this.name
+    );
   }),
 
   icons: computed("item.{icon,icons}", function() {
diff --git a/test/javascripts/components/select-kit/single-select-test.js b/test/javascripts/components/select-kit/single-select-test.js
index cb89c59..022f94e 100644
--- a/test/javascripts/components/select-kit/single-select-test.js
+++ b/test/javascripts/components/select-kit/single-select-test.js
@@ -296,3 +296,45 @@ componentTest("focusAfterOnChange", {
     );
   }
 });
+
+componentTest("labelProperty", {
+  template: '{{single-select labelProperty="foo" value=value content=content}}',
+
+  beforeEach() {
+    this.setProperties({
+      content: [{ id: 1, name: "john", foo: "JACKSON" }],
+      value: 1
+    });
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().label(), "JACKSON");
+
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(1);
+
+    assert.equal(row.label(), "JACKSON");
+  }
+});
+
+componentTest("titleProperty", {
+  template: '{{single-select titleProperty="foo" value=value content=content}}',
+
+  beforeEach() {
+    this.setProperties({
+      content: [{ id: 1, name: "john", foo: "JACKSON" }],
+      value: 1
+    });
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().title(), "JACKSON");
+
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(1);
+
+    assert.equal(row.title(), "JACKSON");
+  }
+});
diff --git a/test/javascripts/helpers/select-kit-helper.js b/test/javascripts/helpers/select-kit-helper.js
index f795991..f470d5c 100644
--- a/test/javascripts/helpers/select-kit-helper.js
+++ b/test/javascripts/helpers/select-kit-helper.js
@@ -95,6 +95,12 @@ function rowHelper(row) {
     title() {
       return row.attr("title");
     },
+    label() {
+      return row
+        .find(".name")
+        .text()
+        .trim();
+    },
     value() {
       const value = row.attr("data-value");
       return isEmpty(value) ? null : value;
@@ -124,7 +130,7 @@ function headerHelper(header) {
       return header.find(".d-icon");
     },
     title() {
-      return header.attr("title");
+      return header.find(".selected-name").attr("title");
     },
     el() {
       return header;

GitHub sha: 08547851

1 Like

This commit appears in #9899 which was approved by eviltrout. It was merged by jjaffeux.