]> git.evergreen-ils.org Git - working/Evergreen.git/blob - Open-ILS/web/js/ui/default/staff/services/ui.js
webstaff: Teach org selector to be completely disabled via text attr
[working/Evergreen.git] / Open-ILS / web / js / ui / default / staff / services / ui.js
1 /**
2   * UI tools and directives.
3   */
4 angular.module('egUiMod', ['egCoreMod', 'ui.bootstrap'])
5
6
7 /**
8  * <input focus-me="iAmOpen"/>
9  * $scope.iAmOpen = true;
10  */
11 .directive('focusMe', 
12        ['$timeout','$parse', 
13 function($timeout , $parse) {
14     return {
15         link: function(scope, element, attrs) {
16             var model = $parse(attrs.focusMe);
17             scope.$watch(model, function(value) {
18                 if(value === true) 
19                     $timeout(function() {element[0].focus()});
20             });
21             element.bind('blur', function() {
22                 scope.$apply(model.assign(scope, false));
23             })
24         }
25     };
26 }])
27
28 /**
29  * <input blur-me="pleaseBlurMe"/>
30  * $scope.pleaseBlurMe = true
31  * Useful for de-focusing when no other obvious focus target exists
32  */
33 .directive('blurMe', 
34        ['$timeout','$parse', 
35 function($timeout , $parse) {
36     return {
37         link: function(scope, element, attrs) {
38             var model = $parse(attrs.blurMe);
39             scope.$watch(model, function(value) {
40                 if(value === true) 
41                     $timeout(function() {element[0].blur()});
42             });
43             element.bind('focus', function() {
44                 scope.$apply(model.assign(scope, false));
45             })
46         }
47     };
48 }])
49
50
51 // <input select-me="iWantToBeSelected"/>
52 // $scope.iWantToBeSelected = true;
53 .directive('selectMe', 
54        ['$timeout','$parse', 
55 function($timeout , $parse) {
56     return {
57         link: function(scope, element, attrs) {
58             var model = $parse(attrs.selectMe);
59             scope.$watch(model, function(value) {
60                 if(value === true) 
61                     $timeout(function() {element[0].select()});
62             });
63             element.bind('blur', function() {
64                 scope.$apply(model.assign(scope, false));
65             })
66         }
67     };
68 }])
69
70
71 // 'reverse' filter 
72 // <div ng-repeat="item in items | reverse">{{item.name}}</div>
73 // http://stackoverflow.com/questions/15266671/angular-ng-repeat-in-reverse
74 // TODO: perhaps this should live elsewhere
75 .filter('reverse', function() {
76     return function(items) {
77         return items.slice().reverse();
78     };
79 })
80
81
82 /**
83  * egAlertDialog.open({message : 'hello {{name}}'}).result.then(
84  *     function() { console.log('alert closed') });
85  */
86 .factory('egAlertDialog', 
87
88         ['$modal','$interpolate',
89 function($modal , $interpolate) {
90     var service = {};
91
92     service.open = function(message, msg_scope) {
93         return $modal.open({
94             templateUrl: './share/t_alert_dialog',
95             controller: ['$scope', '$modalInstance',
96                 function($scope, $modalInstance) {
97                     $scope.message = $interpolate(message)(msg_scope);
98                     $scope.ok = function() {
99                         if (msg_scope && msg_scope.ok) msg_scope.ok();
100                         $modalInstance.close()
101                     }
102                 }
103             ]
104         });
105     }
106
107     return service;
108 }])
109
110 /**
111  * egConfirmDialog.open("some message goes {{here}}", {
112  *  here : 'foo', ok : function() {}, cancel : function() {}});
113  */
114 .factory('egConfirmDialog', 
115     
116        ['$modal','$interpolate',
117 function($modal, $interpolate) {
118     var service = {};
119
120     service.open = function(title, message, msg_scope) {
121         return $modal.open({
122             templateUrl: './share/t_confirm_dialog',
123             controller: ['$scope', '$modalInstance',
124                 function($scope, $modalInstance) {
125                     $scope.title = $interpolate(title)(msg_scope);
126                     $scope.message = $interpolate(message)(msg_scope);
127                     $scope.ok = function() {
128                         if (msg_scope.ok) msg_scope.ok();
129                         $modalInstance.close()
130                     }
131                     $scope.cancel = function() {
132                         if (msg_scope.cancel) msg_scope.cancel();
133                         $modalInstance.dismiss();
134                     }
135                 }
136             ]
137         })
138     }
139
140     return service;
141 }])
142
143 /**
144  * egPromptDialog.open(
145  *    "prompt message goes {{here}}", 
146  *    promptValue,  // optional
147  *    {
148  *      here : 'foo',  
149  *      ok : function(value) {console.log(value)}, 
150  *      cancel : function() {console.log('prompt denied')}
151  *    }
152  *  );
153  */
154 .factory('egPromptDialog', 
155     
156        ['$modal','$interpolate',
157 function($modal, $interpolate) {
158     var service = {};
159
160     service.open = function(message, promptValue, msg_scope) {
161         return $modal.open({
162             templateUrl: './share/t_prompt_dialog',
163             controller: ['$scope', '$modalInstance',
164                 function($scope, $modalInstance) {
165                     $scope.message = $interpolate(message)(msg_scope);
166                     $scope.args = {value : promptValue || ''};
167                     $scope.focus = true;
168                     $scope.ok = function() {
169                         if (msg_scope.ok) msg_scope.ok($scope.args.value);
170                         $modalInstance.close()
171                     }
172                     $scope.cancel = function() {
173                         if (msg_scope.cancel) msg_scope.cancel();
174                         $modalInstance.dismiss();
175                     }
176                 }
177             ]
178         })
179     }
180
181     return service;
182 }])
183
184 .directive('aDisabled', function() {
185     return {
186         restrict : 'A',
187         compile: function(tElement, tAttrs, transclude) {
188             //Disable ngClick
189             tAttrs["ngClick"] = ("ng-click", "!("+tAttrs["aDisabled"]+") && ("+tAttrs["ngClick"]+")");
190
191             //Toggle "disabled" to class when aDisabled becomes true
192             return function (scope, iElement, iAttrs) {
193                 scope.$watch(iAttrs["aDisabled"], function(newValue) {
194                     if (newValue !== undefined) {
195                         iElement.toggleClass("disabled", newValue);
196                     }
197                 });
198
199                 //Disable href on click
200                 iElement.on("click", function(e) {
201                     if (scope.$eval(iAttrs["aDisabled"])) {
202                         e.preventDefault();
203                     }
204                 });
205             };
206         }
207     };
208 })
209
210 .directive('egBasicComboBox', function() {
211     return {
212         restrict: 'E',
213         replace: true,
214         scope: {
215             list: "=", // list of strings
216             selected: "="
217         },
218         template:
219             '<div class="input-group">'+
220                 '<input type="text" class="form-control" ng-model="selected">'+
221                 '<div class="input-group-btn" dropdown>'+
222                     '<button type="button" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>'+
223                     '<ul class="dropdown-menu dropdown-menu-right">'+
224                         '<li ng-repeat="item in list"><a href ng-click="changeValue(item)">{{item}}</a></li>'+
225                     '</ul>'+
226                 '</div>'+
227             '</div>',
228         controller: ['$scope',
229             function($scope) {
230
231                 $scope.changeValue = function (newVal) {
232                     $scope.selected = newVal;
233                 }
234
235             }
236         ]
237     };
238 })
239
240 /**
241  * Nested org unit selector modeled as a Bootstrap dropdown button.
242  */
243 .directive('egOrgSelector', function() {
244     return {
245         restrict : 'AE',
246         transclude : true,
247         replace : true, // makes styling easier
248         scope : {
249             selected : '=', // defaults to workstation or root org,
250                             // unless the nodefault attibute exists
251
252             // Each org unit is passed into this function and, for
253             // any org units where the response value is true, the
254             // org unit will not be added to the selector.
255             hiddenTest : '=',
256
257             // Each org unit is passed into this function and, for
258             // any org units where the response value is true, the
259             // org unit will not be available for selection.
260             disableTest : '=',
261
262             // if set to true, disable the UI element altogether
263             alldisabled : '@',
264
265             // Caller can either $watch(selected, ..) or register an
266             // onchange handler.
267             onchange : '=',
268
269             // optional primary drop-down button label
270             label : '@'
271         },
272
273         // any reason to move this into a TT2 template?
274         template : 
275             '<div class="btn-group eg-org-selector" dropdown>'
276             + '<button type="button" class="btn btn-default dropdown-toggle" ng-disabled="disable_button">'
277              + '<span style="padding-right: 5px;">{{getSelectedName()}}</span>'
278              + '<span class="caret"></span>'
279            + '</button>'
280            + '<ul class="dropdown-menu">'
281              + '<li ng-repeat="org in orgList" ng-hide="hiddenTest(org.id)">'
282                + '<a href ng-click="orgChanged(org)" a-disabled="disableTest(org.id)" '
283                  + 'style="padding-left: {{org.depth * 10 + 5}}px">'
284                  + '{{org.shortname}}'
285                + '</a>'
286              + '</li>'
287            + '</ul>'
288           + '</div>',
289
290         controller : ['$scope','$timeout','egOrg','egAuth',
291               function($scope , $timeout , egOrg , egAuth) {
292
293             if ($scope.alldisabled) {
294                 $scope.disable_button = $scope.alldisabled == 'true' ? true : false;
295             } else {
296                 $scope.disable_button = false;
297             }
298
299             $scope.egOrg = egOrg; // for use in the link function
300             $scope.egAuth = egAuth; // for use in the link function
301
302             // avoid linking the full fleshed tree to the scope by 
303             // tossing in a flattened list.
304             $scope.orgList = egOrg.list().map(function(org) {
305                 return {
306                     id : org.id(),
307                     shortname : org.shortname(), 
308                     depth : org.ou_type().depth()
309                 }
310             });
311
312             $scope.getSelectedName = function() {
313                 if ($scope.selected)
314                     return $scope.selected.shortname();
315                 return $scope.label;
316             }
317
318             $scope.orgChanged = function(org) {
319                 $scope.selected = egOrg.get(org.id);
320                 if ($scope.onchange) $scope.onchange($scope.selected);
321             }
322
323         }],
324         link : function(scope, element, attrs, egGridCtrl) {
325
326             // boolean fields are presented as value-less attributes
327             angular.forEach(
328                 ['nodefault'],
329                 function(field) {
330                     if (angular.isDefined(attrs[field]))
331                         scope[field] = true;
332                     else
333                         scope[field] = false;
334                 }
335             );
336
337             if (!scope.selected && !scope.nodefault)
338                 scope.selected = scope.egOrg.get(scope.egAuth.user().ws_ou());
339         }
340
341     }
342 })
343
344 /* http://eric.sau.pe/angularjs-detect-enter-key-ngenter/ */
345 .directive('egEnter', function () {
346     return function (scope, element, attrs) {
347         element.bind("keydown keypress", function (event) {
348             if(event.which === 13) {
349                 scope.$apply(function (){
350                     scope.$eval(attrs.egEnter);
351                 });
352  
353                 event.preventDefault();
354             }
355         });
356     };
357 })
358
359 /*
360 http://stackoverflow.com/questions/18061757/angular-js-and-html5-date-input-value-how-to-get-firefox-to-show-a-readable-d
361
362 This directive allows us to use html5 input type="date" (for Chrome) and 
363 gracefully fall back to a regular ISO text input for Firefox.
364 It also allows us to abstract away some browser finickiness.
365 */
366 .directive(
367     'egDateInput',
368     function(dateFilter) {
369         return {
370             require: 'ngModel',
371             template: '<input type="date"></input>',
372             replace: true,
373             link: function(scope, elm, attrs, ngModelCtrl) {
374
375                 // since this is a date-only selector, set the time
376                 // portion to 00:00:00, which should better match the
377                 // user's expectations.  Note this allows us to retain
378                 // the timezone.
379                 function strip_time(date) {
380                     if (!date) date = new Date();
381                     date.setHours(0);
382                     date.setMinutes(0);
383                     date.setSeconds(0);
384                     date.setMilliseconds(0);
385                     return date;
386                 }
387
388                 ngModelCtrl.$formatters.unshift(function (modelValue) {
389                     // apply strip_time here in case the user never 
390                     // modifies the date value.
391                     return dateFilter(strip_time(modelValue), 'yyyy-MM-dd');
392                 });
393                 
394                 ngModelCtrl.$parsers.unshift(function(viewValue) {
395                     return strip_time(new Date(viewValue));
396                 });
397             },
398         };
399 })