Skip to content

Commit a92a11c

Browse files
jaythomasjaythomas
committed
Extract in-line scSelect controller
1 parent 13c8d98 commit a92a11c

File tree

1 file changed

+179
-177
lines changed

1 file changed

+179
-177
lines changed

‎src/directives/scSelect.js

Lines changed: 179 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -49,208 +49,210 @@ export default function scSelect() {
4949
restrict: 'E',
5050
require: 'ngModel',
5151
template: '<div></div>',
52-
controller: function($attrs, $element, $compile, $parse, $scope, $q, $timeout, scSelectParser) {
52+
controller: controller,
53+
controllerAs: 'vm',
54+
bindToController: true,
55+
scope: {
56+
pageLimit: '=',
57+
totalItems: '=',
58+
placeholder: '@',
59+
multiple: '=?',
60+
ngDisabled: '=',
61+
searchEnabled: '=',
62+
refreshDelay: '=',
63+
loadingDelay: '=',
64+
groupBy: '='
65+
},
66+
link: (scope, elm, attrs, ngModelCtrl) => {
67+
scope.vm.setNgModelCtrl(ngModelCtrl);
68+
}
69+
};
5370

54-
'ngInject';
71+
function controller($attrs, $element, $compile, $parse, $scope, $q, $timeout, scSelectParser) {
5572

56-
const vm = this;
57-
const loadingDelay = angular.isDefined(vm.loadingDelay) ? vm.loadingDelay : 0;
58-
vm.currentPage = 1;
59-
vm.canToggleAll = vm.multiple && !vm.pageLimit;
73+
'ngInject';
6074

61-
const selectElm = angular.element(template);
62-
if (vm.multiple) {
63-
selectElm.find('ui-select').attr('multiple', 'multiple');
64-
}
65-
$compile(selectElm)($scope);
66-
$element.append(selectElm);
67-
68-
vm.items = [];
69-
70-
let oldSearchText;
71-
72-
vm.searchItems = function() {
73-
if (vm.uiSelectCtrl) {
74-
//reset page if the search text has changed
75-
if (oldSearchText !== vm.uiSelectCtrl.search) {
76-
vm.currentPage = 1;
77-
}
78-
79-
oldSearchText = vm.uiSelectCtrl.search;
80-
const setLoadingTimeout = $timeout(() => {
81-
vm.loading = true;
82-
vm.items = [];
83-
}, loadingDelay);
84-
85-
return $q.when(vm.parsedOptions.source(vm.optionScope, {
86-
page: vm.currentPage,
87-
searchText: vm.uiSelectCtrl.search
88-
})).then((items) => {
89-
vm.items = items;
90-
}).finally(() => {
91-
vm.loading = false;
92-
$timeout.cancel(setLoadingTimeout);
93-
});
75+
const vm = this;
76+
const loadingDelay = angular.isDefined(vm.loadingDelay) ? vm.loadingDelay : 0;
77+
vm.currentPage = 1;
78+
vm.canToggleAll = vm.multiple && !vm.pageLimit;
9479

80+
const selectElm = angular.element(template);
81+
if (vm.multiple) {
82+
selectElm.find('ui-select').attr('multiple', 'multiple');
83+
}
84+
$compile(selectElm)($scope);
85+
$element.append(selectElm);
86+
87+
vm.items = [];
88+
89+
let oldSearchText;
90+
91+
vm.searchItems = function() {
92+
if (vm.uiSelectCtrl) {
93+
//reset page if the search text has changed
94+
if (oldSearchText !== vm.uiSelectCtrl.search) {
95+
vm.currentPage = 1;
9596
}
96-
};
9797

98-
vm.changePage = function(newPage) {
99-
vm.currentPage = newPage;
100-
vm.searchItems();
101-
};
98+
oldSearchText = vm.uiSelectCtrl.search;
99+
const setLoadingTimeout = $timeout(() => {
100+
vm.loading = true;
101+
vm.items = [];
102+
}, loadingDelay);
103+
104+
return $q.when(vm.parsedOptions.source(vm.optionScope, {
105+
page: vm.currentPage,
106+
searchText: vm.uiSelectCtrl.search
107+
})).then((items) => {
108+
vm.items = items;
109+
}).finally(() => {
110+
vm.loading = false;
111+
$timeout.cancel(setLoadingTimeout);
112+
});
102113

103-
vm.parsedOptions = scSelectParser.parse($attrs.scOptions);
114+
}
115+
};
104116

105-
vm.setOptionScope = function(scope) {
106-
vm.optionScope = scope; //expose for testing
107-
vm.changePage(vm.currentPage);
108-
};
117+
vm.changePage = function(newPage) {
118+
vm.currentPage = newPage;
119+
vm.searchItems();
120+
};
109121

110-
vm.setNgModelCtrl = function(ngModelCtrl) {
111-
vm.ngModelCtrl = ngModelCtrl;
112-
113-
ngModelCtrl.$render = function() {
114-
if (!ngModelCtrl.$viewValue) {
115-
return;
116-
}
117-
//var cc = vm.multiple ? ngModelCtrl.$viewValue : vm.items;
118-
var items;
119-
if (vm.multiple) {
120-
items = ngModelCtrl.$viewValue;
121-
} else {
122-
items = vm.items;
123-
}
124-
var matchingItems = [];
125-
if (angular.isArray(items)) {
126-
matchingItems = items.filter((item) => {
127-
var itemValue;
128-
if (!angular.isArray(item)) {
129-
itemValue = item;
130-
} else {
131-
itemValue = vm.parsedOptions.modelMapper({
132-
[vm.parsedOptions.itemName]: item
133-
});
134-
}
135-
if (vm.multiple) {
136-
var found = false;
137-
if (typeof ngModelCtrl.$viewValue === 'object') {
138-
139-
angular.forEach(ngModelCtrl.$viewValue, function(val) {
140-
if (typeof val === 'string') {
141-
if (val.indexOf(itemValue) > -1) {
142-
found = true;
143-
}
144-
}
145-
if (val && itemValue && val.id === itemValue.id) {
122+
vm.parsedOptions = scSelectParser.parse($attrs.scOptions);
123+
124+
vm.setOptionScope = function(scope) {
125+
vm.optionScope = scope; //expose for testing
126+
vm.changePage(vm.currentPage);
127+
};
128+
129+
vm.setNgModelCtrl = function(ngModelCtrl) {
130+
vm.ngModelCtrl = ngModelCtrl;
131+
132+
ngModelCtrl.$render = function() {
133+
if (!ngModelCtrl.$viewValue) {
134+
return;
135+
}
136+
//var cc = vm.multiple ? ngModelCtrl.$viewValue : vm.items;
137+
var items;
138+
if (vm.multiple) {
139+
items = ngModelCtrl.$viewValue;
140+
} else {
141+
items = vm.items;
142+
}
143+
var matchingItems = [];
144+
if (angular.isArray(items)) {
145+
matchingItems = items.filter((item) => {
146+
var itemValue;
147+
if (!angular.isArray(item)) {
148+
itemValue = item;
149+
} else {
150+
itemValue = vm.parsedOptions.modelMapper({
151+
[vm.parsedOptions.itemName]: item
152+
});
153+
}
154+
if (vm.multiple) {
155+
var found = false;
156+
if (typeof ngModelCtrl.$viewValue === 'object') {
157+
158+
angular.forEach(ngModelCtrl.$viewValue, function(val) {
159+
if (typeof val === 'string') {
160+
if (val.indexOf(itemValue) > -1) {
146161
found = true;
147162
}
148-
});
149-
} else if (ngModelCtrl.$viewValue.indexOf(itemValue) > -1) {
150-
found = true;
151-
}
152-
return found;
153-
} else {
154-
if (typeof itemValue === 'object') {
155-
return ngModelCtrl.$viewValue === itemValue.id || ngModelCtrl.$viewValue === itemValue.label || ngModelCtrl.$viewValue.id === itemValue.id;
156-
}
157-
return ngModelCtrl.$viewValue === itemValue;
163+
}
164+
if (val && itemValue && val.id === itemValue.id) {
165+
found = true;
166+
}
167+
});
168+
} else if (ngModelCtrl.$viewValue.indexOf(itemValue) > -1) {
169+
found = true;
158170
}
159-
});
160-
}
161-
162-
if (matchingItems.length === 0 && typeof ngModelCtrl.$viewValue === 'object') {
163-
matchingItems = [ngModelCtrl.$viewValue];
164-
}
165-
166-
if (vm.multiple) {
167-
vm.selected = matchingItems;
168-
} else {
169-
vm.selected = matchingItems[0];
170-
}
171-
};
172-
173-
//Ensure items array has been populated first - as it uses $q.when it will be after the first digest
174-
$timeout(function() {
175-
vm.ngModelCtrl.$render();
176-
});
171+
return found;
172+
} else {
173+
if (typeof itemValue === 'object') {
174+
return ngModelCtrl.$viewValue === itemValue.id || ngModelCtrl.$viewValue === itemValue.label || ngModelCtrl.$viewValue.id === itemValue.id;
175+
}
176+
return ngModelCtrl.$viewValue === itemValue;
177+
}
178+
});
179+
}
177180

178-
};
181+
if (matchingItems.length === 0 && typeof ngModelCtrl.$viewValue === 'object') {
182+
matchingItems = [ngModelCtrl.$viewValue];
183+
}
179184

180-
vm.modelChanged = function() {
181-
let modelValue;
182185
if (vm.multiple) {
183-
modelValue = vm.selected.map((item) => {
184-
return vm.parsedOptions.modelMapper({
185-
[vm.parsedOptions.itemName]: item
186-
});
187-
});
186+
vm.selected = matchingItems;
188187
} else {
189-
modelValue = vm.parsedOptions.modelMapper({
190-
[vm.parsedOptions.itemName]: vm.selected
191-
});
188+
vm.selected = matchingItems[0];
192189
}
193-
vm.ngModelCtrl.$setViewValue(modelValue);
194190
};
195191

196-
vm.getMappedItem = function(localItem) {
197-
return vm.parsedOptions.viewMapper({
198-
[vm.parsedOptions.itemName]: localItem
199-
});
200-
};
192+
//Ensure items array has been populated first - as it uses $q.when it will be after the first digest
193+
$timeout(function() {
194+
vm.ngModelCtrl.$render();
195+
});
201196

202-
vm.selectAll = function() {
203-
vm.selected = vm.items;
204-
vm.modelChanged();
205-
};
197+
};
206198

207-
vm.deselectAll = function() {
208-
vm.selected = [];
209-
vm.modelChanged();
210-
};
211-
212-
$scope.$watch(function() {
213-
return vm.ngModelCtrl.$modelValue;
214-
}, function(selected) {
215-
if (!selected) {
216-
vm.selected = vm.multiple ? [] : '';
217-
}
218-
}, true);
219-
220-
if (!angular.isDefined(vm.pageLimit)) {
221-
$scope.$watch(function() {
222-
return vm.parsedOptions.source(vm.optionScope);
223-
}, function(items) {
224-
if (items) {
225-
vm.items = items;
226-
}
199+
vm.modelChanged = function() {
200+
let modelValue;
201+
if (vm.multiple) {
202+
modelValue = vm.selected.map((item) => {
203+
return vm.parsedOptions.modelMapper({
204+
[vm.parsedOptions.itemName]: item
205+
});
206+
});
207+
} else {
208+
modelValue = vm.parsedOptions.modelMapper({
209+
[vm.parsedOptions.itemName]: vm.selected
227210
});
228211
}
229-
230-
if (angular.isUndefined(vm.groupBy) && angular.isDefined($attrs.groupBy)) {
231-
const getGroupBy = $parse($attrs.groupBy);
232-
vm.groupBy = function(item) {
233-
return getGroupBy(item);
234-
};
212+
vm.ngModelCtrl.$setViewValue(modelValue);
213+
};
214+
215+
vm.getMappedItem = function(localItem) {
216+
return vm.parsedOptions.viewMapper({
217+
[vm.parsedOptions.itemName]: localItem
218+
});
219+
};
220+
221+
vm.selectAll = function() {
222+
vm.selected = vm.items;
223+
vm.modelChanged();
224+
};
225+
226+
vm.deselectAll = function() {
227+
vm.selected = [];
228+
vm.modelChanged();
229+
};
230+
231+
$scope.$watch(function() {
232+
return vm.ngModelCtrl.$modelValue;
233+
}, function(selected) {
234+
if (!selected) {
235+
vm.selected = vm.multiple ? [] : '';
235236
}
237+
}, true);
236238

237-
},
238-
controllerAs: 'vm',
239-
bindToController: true,
240-
scope: {
241-
pageLimit: '=',
242-
totalItems: '=',
243-
placeholder: '@',
244-
multiple: '=?',
245-
ngDisabled: '=',
246-
searchEnabled: '=',
247-
refreshDelay: '=',
248-
loadingDelay: '=',
249-
groupBy: '='
250-
},
251-
link: (scope, elm, attrs, ngModelCtrl) => {
252-
scope.vm.setNgModelCtrl(ngModelCtrl);
239+
if (!angular.isDefined(vm.pageLimit)) {
240+
$scope.$watch(function() {
241+
return vm.parsedOptions.source(vm.optionScope);
242+
}, function(items) {
243+
if (items) {
244+
vm.items = items;
245+
}
246+
});
253247
}
254-
};
248+
249+
if (angular.isUndefined(vm.groupBy) && angular.isDefined($attrs.groupBy)) {
250+
const getGroupBy = $parse($attrs.groupBy);
251+
vm.groupBy = function(item) {
252+
return getGroupBy(item);
253+
};
254+
}
255+
256+
}
255257

256258
}

0 commit comments

Comments
 (0)