ionic-modal-select icon indicating copy to clipboard operation
ionic-modal-select copied to clipboard

Created a delegate service for the select modal so we can reset, show programatically

Open sn0opr opened this issue 7 years ago • 4 comments

The problem that I faced is that I have a reset button on my form, but when I reset my select options model in my controller , the items stay selected in the select modal, because the isChecked object is not updated.

I used the same idea of ionic delegate service for their directives like the <ion-list> etc, this service will allow us to reset the selected options programatically or show the select modal, we may also add other methods in the future...

###Usage: you should add handler-id attribute, an ID that we will use in our controller:

<button
                                    class="button button-block button-stable"
                                    modal-select=""
                                    ng-model="myModel.selectedItems"
                                    options="item"
                                    modal-title="Select an item"
                                    has-search="true"
                                    multiple="true"
                                    handler-id="myOptionsSelectId"
                            >
....

In our controller, we inject the modalSelectDelegate service, then we get our select modal handler by using the getHandler method:

var mySelectModalHandler = modalSelectDelegate.getHandler('myOptionsSelectId');

//Reset the values:
mySelectModalHandler.reset();
//Show the select modal:
mySelectModalHandler.show();

sn0opr avatar Jan 11 '17 10:01 sn0opr

hey @sn0opr , I like very much this delegate-service pattern used in ionic to manipulate directives scopes from outside, it's a great idea to apply it to the modal select directive.

The difference I see by looking at your code is that elsewhere in ionic delegate services, you do not need to specify a delegate-handle (this is often useful if you have only one instance of your directive in the current template or if you want to call the same method on all instances). This could be a nice addition.

Anyway, your implementation looks good to me, let me give it a quick try (we don't have programmatic tests, can you help on #26 ?) and I'm going to merge your commit.

best regards Mauro

bianchimro avatar Jan 11 '17 13:01 bianchimro

@bianchimro thank you for your consideration, I've never made automatic tests for JS but this is a good occasion to learn how to make tests, but it may take some additional time for me.

sn0opr avatar Jan 13 '17 07:01 sn0opr

@sn0opr if you could help adding some automated test in the repo that would be great.

Testing this kind of project is quite difficult in my opinion as we have to test interface components (so we must describe what we expect to see) and we rely on existing services that we have to mock ($ionicModal in this case, but probably other ionic and angular components as well).

let's keep in touch about this if you want to give it a try!

bianchimro avatar Jan 13 '17 17:01 bianchimro

hi @sn0opr, seems like merging previous PRs creates a conflict with your code. Can you please review your PR and remove the conflict? regards

Mauro

bianchimro avatar Apr 06 '17 15:04 bianchimro