From 08547851756e90599576c03fc465acee5dbe4d36 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 28 May 2020 08:30:31 +0200 Subject: [PATCH] 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" }} ``` --- .../admin/templates/user-index.hbs | 1 + .../select-kit/addon/components/select-kit.js | 4 ++ .../components/select-kit/select-kit-row.js | 17 +++++--- .../addon/components/selected-name.js | 20 +++++++-- .../select-kit/single-select-test.js | 42 +++++++++++++++++++ test/javascripts/helpers/select-kit-helper.js | 8 +++- 6 files changed, 82 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/admin/templates/user-index.hbs b/app/assets/javascripts/admin/templates/user-index.hbs index 1353ed0d789..df9a6e196ff 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)) }} 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 02acfb5a2e1..8ad01cc3387 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 c3ab6024b08..452e46a2b09 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 e1c75a6e5f8..fc357bfa356 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("…", ""); }), - 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 cb89c596b4d..022f94eedd4 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 f7959913263..f470d5c1f24 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;