summaryrefslogtreecommitdiffstats
path: root/ecomp-portal-FE-common/client/app/directives/multiple-select/multiple-select.directive.js
blob: fb56d438790a4d6d0d9901f135e20874ea25bc71 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/*-
 * ================================================================================
 * ECOMP Portal
 * ================================================================================
 * Copyright (C) 2017 AT&T Intellectual Property
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ================================================================================
 */
/**
 * Created by nnaffar on 12/21/15.+
 */
angular.module('ecompApp')
    .directive('multipleSelect', function ($window) {
        return {
            restrict: 'E',
            templateUrl: 'app/directives/multiple-select/multiple-select.tpl.html',
            scope: {
                onChange: '&',
                nameAttr: '@',
                valueAttr: '@',
                ngModel: '=',
                placeholder: '@',
                uniqueData: '@?',
                onDropdownClose: '&?'
            },
            link: function(scope, elm, attrs){
                scope.isExpanded = false;

                scope.isDisabled = !scope.ngModel || !scope.ngModel.length;
                scope.$watch('ngModel', function(newVal){
                    scope.isDisabled = !newVal || !newVal.length;
                });


                let startListening = () => {
                    console.log('listening on $window!');
                    angular.element($window).on('click', function () {
                        stopListening();
                    });

                    angular.element('multiple-select').on('click', function(e) {
                        if($(e.target).closest('multiple-select')[0].attributes['unique-data'].value === attrs.uniqueData){
                            console.log('ignored that..:', attrs.uniqueData);
                            e.stopPropagation();
                        }else{
                            console.log('shouldnt ignore, close expanded!:', attrs.uniqueData);
                            scope.isExpanded = false;
                            scope.$applyAsync();
                        }
                    });
                };

                let stopListening = function() {
                    if(scope.onDropdownClose){
                        scope.onDropdownClose();
                    }
                    scope.isExpanded = false;
                    scope.$applyAsync();
                    console.log('stop listening on $window and multiple-element!');
                    angular.element($window).off('click');
                    angular.element('multiple-select').off('click');
                };

                scope.showCheckboxes = function(){
                    scope.isExpanded = !scope.isExpanded;
                    if(scope.isExpanded){
                        startListening();
                    }else{
                        stopListening();
                        if(scope.onDropdownClose){
                            scope.onDropdownClose();
                        }
                    }
                };

                scope.onCheckboxClicked = function() {
                    console.log('checkbox clicked; unique data: ',attrs.uniqueData);
                    if(scope.onChange) {
                        scope.onChange();
                    }
                }

                scope.getTitle = function(){
                    var disp = '';
                    if(!scope.ngModel || !scope.ngModel.length) {
                        return disp;
                    }
                    scope.ngModel.forEach(function(item){
                        if(item[scope.valueAttr]){
                            disp+=item[scope.nameAttr] + ',';
                        }
                    });
                    if(disp!==''){
                        disp = disp.slice(0,disp.length-1);
                    }else{
                        disp = scope.placeholder;
                    }
                    return disp;
                };
            }
        };
    });