SIPRP/trunk/SiprpWebFichasClinicas/WebContent/static/html/app/directives/customCombo.js

//bootstrap-select: http://silviomoreto.github.io/bootstrap-select/

evoapp.directive('customCombo', function($timeout) {

    //http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

    //pass specified values to specified function arguments
    function callback(fn, args) {
        var fnArgs = [].concat(args);
        fnArgs.push.apply(fnArgs, arguments);
        return fn.apply(this, fnArgs);
    };

    return {
        require:'ngModel',
        require: '^ngController',
        restrict: 'AE',
        template:   
        '<select data-style="{{cssClass}}" title="Seleccione uma opção..." class="selectpicker show-tick form-control" data-live-search="true" data-required="true">' + 
            '<option value="" ng-if="addEmptyOption === \'true\' && options.length > 0">Seleccione uma opção...</option>' + 
            '<option ng-repeat="item in options" value="{{item[valueField]}}" ng-selected="getSelected(item[valueField])">{{item[displayField]}}</option>' + 
        '</select>',
        scope: {

            selectedValue: '=',         //  =’ to accept a Object 

            storeModel: '@',            //  @’ to accept a string value
            storeActionsGet: '@',
            valueField: '@',
            displayField: '@',

            addEmptyOption: '@',    
            bindToModel: '@',  

            itemId: '@',  
            
            name: '@',

            //TODO: !!!
            optionsTemplate: '@',  

            onChange: '&'
        },
        controller: function($rootScope, $scope, $filter, globals, $timeout) {

            $scope.elem = null;

            //add reference to this combo, in parent controller
            if($scope.$parent[$scope.itemId] == undefined)
            {
                $scope.$parent[$scope.itemId] = $scope;
            }
            else
            {
                throw Error('Combo ' + $scope.itemId + ' already exists!');
            }

            $scope.store = new globals.dataService.store({
                //model: $scope.storeModel,
                actions: {
                    get: $scope.storeActionsGet
                },
                sort: $scope.displayField
            });

            $scope.$watch('store.items', function() {
      
                $timeout(function () { 

                    $scope.domEl.selectpicker('deselectAll');

                    $scope.domEl.selectpicker('refresh');
                });
            });

            $scope.options = [];

            $scope.getSelected = function(record){

                return record == $scope.selectedValue ? 'selected' : '';
            };

            $scope.$watch('selectedValue', function(newValue, oldValue){ 

                $scope.selectedValue = newValue;                
            });

            $scope.loadStore = function(){                

                var callBackFn = arguments.length == 1 ? arguments[0] : null;
                callBackFn = angular.isFunction(callBackFn) ? callBackFn : null;

                $scope.store.get(function(response, status, headers, config, items){        
                        
                    $scope.options = $scope.store.items;

                    if(callBackFn != null)
                    {
                        callback(callBackFn, [response, status, headers, config, items]);
                    }
                });
            };

            $scope.setValue = function(newValue){ 

                $scope.domEl.selectpicker('deselectAll'); 

                var option = $scope.domEl.find('option[value=' + newValue + ']');

                if(option.length > 0)
                {
                    var record = angular.element(option[0]).scope();

                    if(record.item)
                    { 
                        //TODO: this might throw an exception - recheck it please
                        if($scope.bindToModel === 'true')
                        {
                            $scope.selectedValue = newValue;
                            $scope.selectedRecord = record.item;                          
                        }

                        $scope.onChange({
                            selectedValue: newValue, 
                            selectedRecord: record.item
                        });    
                        
                        $scope.domEl.selectpicker('val', newValue);   
                    }
                }

                $scope.domEl.selectpicker('refresh');
            };

            $scope.loadData = function(data){

                $scope.store.items = [];
                $scope.options = [];

                $scope.store.loadData(data);

                $scope.options = $scope.store.items;
            };

            $scope.clear = function(){

                $scope.store.items = [];
                $scope.options = [];

                $scope.domEl.selectpicker('deselectAll');

                $scope.domEl.selectpicker('refresh');               
            };
        },
        link: function (scope, elem, attrs, controller) { 
            
            scope.cssClass = attrs.cssClass == undefined ? 'btn-default' : attrs.cssClass;
            scope.name = attrs.name == undefined ? scope.valueField : attrs.name;
            scope.elem = elem;
            scope.domEl = $(elem.find('select')[0]);
            scope.domEl.attr('name', scope.name);            

            $timeout(function () { 
                        
                scope.domEl.selectpicker({
                                        
                }).on('change', function(e) {
                    
                    var record = angular.element($(this).find("option:selected")).scope();

                    var value = $(this).find("option:selected").val();

                    if(scope.bindToModel === 'true')
                    {
                        scope.selectedValue = value;
                        scope.selectedRecord = record.item;                          
                    }

                    scope.onChange({
                        selectedValue: value, 
                        selectedRecord: record.item
                    });
                    
                });
                
            });

        }
    }
});