[WIP] Tagging with ember data support #92

koemeet · 2015-05-07T00:15:54Z

This fixes issue #7

I am currently working on supporting tags in this component, while also supporting ember data. You can pass in an ember data record array (DS.RecordArray) instance, and it will create new tags based on the
type of the recordarray, almost magic.

This PR is still a WIP and is still made with only ember data in mind, any feedback is welcome!

@iStefo Could you review this, note this is still a WIP, but would like to know your ideas on this.

Currently, the following settings work as you would expect:

Option	Type	Info
tags	bool	This is required to enable tagging
content	Array	This can also be an ember data record array
value	Array	This can also be an ember data record array, new records are appended automatically. When a new tag is deleted, the record is unloaded from the store.
optionLabelPath	string	This will be mapped to the field name of the ember data model too, this would be something like `title` or `name`.
optionIdPath	string	Set this the same as the label to have unique tags

Example usage (you could leave out content here if you don't want to preload some tags):

{{select-2
    tags=true
    content=model.tags
    value=model.post.tags
    placeholder="Begin typing tags for this post"
    optionLabelPath="name"
    optionIdPath="name"
}}

TODO

Test this functionality for both ember data objects and for simple objects
Fix bug where the query filters new tags with the same name as an existing tag correctly
Complete examples/documentation
Add actions createTag and removeTag that can override default behaviour

I am currently working on supporting tags in this component, while also supporting ember data. You can pass in an ember data record array (DS.RecordArray) instance, and it will create new tags based on the `type` of the recordarray. This PR is still a WIP, any feedback is welcome!

koemeet · 2015-05-07T00:17:17Z

addon/components/select-2.js

-      return (e === undefined) ? null : get(e, optionIdPath);
+      var id = (e === undefined) ? null : get(e, optionIdPath);
+      if (self.get('tags')) {
+        return id.toLowerCase();


I am forcing the lowercase of the ID here, since you don't want tags that only differ in uppercase or lowercase and are still added.

Seems fine with me, especially since this only applies for tagging=true 👍

koemeet · 2015-05-07T00:52:02Z

addon/components/select-2.js

+        var record;
+        if (e.added instanceof DS.Model) {
+          record = e.added;
+        } else {


I need to check the type of the value property here, so it can both support ember data record arrays and simple objects.

iStefo · 2015-05-07T14:47:35Z

Thanks for the work you put into this! I like how you aim for a high code quality and test coverage, it is great. I added some comments to the code, but I'm already very happy with the direction this is going.
This will be the 1.4.0 feature!

koemeet · 2015-05-07T15:56:51Z

@iStefo Good to hear 👍 I am sure many people will like this feature. I think this will be the only library that has ember data support build in for creating tags. Without the need of implementing factory actions for every select box. I will work on your comments and refactor my code some more.

Also, I think it is nicer to name the option tags to create. So you configure it like this:

{{select-2
    create=true
    placeholder="Begin typing tags for this post"
    content=model.tags
    value=model.post.tags
}}

A small change, but I think it fits better.

iStefo · 2015-05-07T16:05:52Z

Actually, I'm not sure about naming this option create, because the behaviour is what most people would understand as tagging (and also select2 iteself calls it tagging). What do you think about createTags=true? It's a little verbose but also states the suggested use case for the option.

koemeet · 2015-05-07T16:07:13Z

@iStefo Ah, np, will leave it as tags (the same as select2). Too abstract is sometimes bad I guess.

ember objects instead of ember data models. This is automatically determined by this component.

koemeet · 2015-05-07T20:11:58Z

@iStefo I made some good progress and expanded the examples page. It currently uses the matcher to prevent creating new tags that already exists. Because I use the matcher is also handles diacritics. Also added support for plain ember arrays & objects. What do you think of the examples so far, is it enough?

Also, how should we handle optionIdPath? It is kinda ugly now to declare both of them in order to make it work as expected. We can force it to be the same as the optionLabelPath for tags. Since the label is also the ID for tags in the terminology of select2, right?

iStefo · 2015-05-09T15:02:12Z

I checked out your branch and fixed the example code indentation (general indentation for the examples.hbs is still a mess, though). How can I incorporate my changes to the PR? PR your forked repo? Sounds unnecessarily complicated though, should I send you my .patch?

shunchu · 2015-05-14T04:21:14Z

Wow. This is awesome Thank you!

edude03 · 2015-06-03T20:07:51Z

tests/dummy/app/templates/examples.hbs

+        <p>When one select2 components needs special styles, set the <code>cssClass</code> binding to a string
+            containing a single css class. It will be assigned to the <code>.select2-container</code>, which is the
+            input in closed state, as well as to the <code>.select2-drop</code>, which is the dropdown menu.</p>
+        <p><b>Warning:</b> Don't get to fancy! These classes will not update when the binding updates, they have to


abobwhite · 2015-06-21T20:11:41Z

Hey guys - what's the latest on this? I took a look at the diff and tried to apply some of the Ember Data changes to my local copy but can't figure out where is the correct spot with ember addon. As for this PR, why are we limiting Ember Data support to only when "tags" are being used? Shouldn't I just be able to use a multiple=true with selection=model.myHasManyProperty ? I wasn't aware until now that ember-select-2 did not already support Ember Data officially - which surprised me. I have been very stuck because of ember-select-2 causing Ember to throw an error trying to set a read-only hasMany relationship vs addObject and removeObject....

Let me know if I can help or provide more info as this is a blocker for me right now.

fullofcaffeine · 2015-08-19T18:18:58Z

+1 I also need this functionality and was glad I found out someone already worked on it, but it's been a while already, is it ready to be merged? Any ways I could help?

fullofcaffeine · 2015-08-20T17:44:53Z

Hmm, I see select2 (and select2-ember) already supports multiple=true for a similar functionality. What's the difference here?

sbauch · 2015-10-01T20:31:55Z

addon/components/select-2.js

@@ -505,6 +590,9 @@ var Select2Component = Ember.Component.extend({
      this._select.select2("val", value);
    } else {
      // otherwise set the full object via "data"
+      if (value instanceof Ember.ArrayProxy) {


I had to change Ember.ArrayProxy to DS.ManyArray to get this to work as expected. I'm on Ember 1.13.7 and Ember Data 1.13.8, and when I use the hasMany relationship as value, this is false, and my values aren't properly displayed. Obviously this would break for those not using Ember Data.

joaoribeirost · 2015-10-19T12:37:21Z

Are these changes usable when we install the addon? I'm trying to get it to work but it seems i still can't add new tags.
My code is like this:

{{select-2
    content=tag_list
    optionValuePath="name"
    optionLabelPath="name"
    optionIdPath="name"
    value=selectedTags
    multiple=true
    createTags=true
    placeholder="Choose some Tags"
 }}

Is there something i'm doing wrong?

valtlfelipe · 2016-01-13T18:16:30Z

Any update on this? I'm using Ember v1.13.3 with Ember Data v1.13.5 and it is not working.
I'm getting this warning in console:

WARNING: select2#initSelection was not able to map each "id" to an object from "content". The remaining keys are: 1,abc. The input will be disabled until a) the desired objects is added to the "content" array or b) the "value" is changed.

It appears that the new value is not getting added to the content property, just to the value, which is causing this error.

koemeet reviewed May 7, 2015
View reviewed changes

Added some additional info and cleaned up the test a bit.

faee320

koemeet changed the title ~~[WIP] Tagging support with ember data support~~ [WIP] Tagging with ember data support May 7, 2015

koemeet reviewed May 7, 2015
View reviewed changes

Cleaned up the code and refactored some. Also added support for plain

0abefed

ember objects instead of ember data models. This is automatically determined by this component.

Fixed and added tests

ae9aa7d

edude03 reviewed Jun 3, 2015
View reviewed changes

sbauch reviewed Oct 1, 2015
View reviewed changes

joaoribeirost mentioned this pull request Nov 20, 2015

Can't get tagging to work. #133

Open

shunchu mentioned this pull request May 10, 2016

Feature/tags #140

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Tagging with ember data support #92

[WIP] Tagging with ember data support #92

koemeet commented May 7, 2015

koemeet May 7, 2015

iStefo May 7, 2015

koemeet May 7, 2015

iStefo commented May 7, 2015

koemeet commented May 7, 2015

iStefo commented May 7, 2015

koemeet commented May 7, 2015

koemeet commented May 7, 2015

iStefo commented May 9, 2015

shunchu commented May 14, 2015

edude03 Jun 3, 2015

abobwhite commented Jun 21, 2015

fullofcaffeine commented Aug 19, 2015

fullofcaffeine commented Aug 20, 2015

sbauch Oct 1, 2015

joaoribeirost commented Oct 19, 2015

valtlfelipe commented Jan 13, 2016

[WIP] Tagging with ember data support #92

Are you sure you want to change the base?

[WIP] Tagging with ember data support #92

Conversation

koemeet commented May 7, 2015

TODO

koemeet May 7, 2015

Choose a reason for hiding this comment

iStefo May 7, 2015

Choose a reason for hiding this comment

koemeet May 7, 2015

Choose a reason for hiding this comment

iStefo commented May 7, 2015

koemeet commented May 7, 2015

iStefo commented May 7, 2015

koemeet commented May 7, 2015

koemeet commented May 7, 2015

iStefo commented May 9, 2015

shunchu commented May 14, 2015

edude03 Jun 3, 2015

Choose a reason for hiding this comment

abobwhite commented Jun 21, 2015

fullofcaffeine commented Aug 19, 2015

fullofcaffeine commented Aug 20, 2015

sbauch Oct 1, 2015

Choose a reason for hiding this comment

joaoribeirost commented Oct 19, 2015

valtlfelipe commented Jan 13, 2016