Skip to content

Commit 1fe9ece

Browse files
gabrielhtgabrielht
committed
almost finished with multiselect
1 parent 242dafd commit 1fe9ece

File tree

6 files changed

+271
-8
lines changed

6 files changed

+271
-8
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@
5151
"moment-duration-format": "^2.2.1",
5252
"angular-bootstrap-toggle": "^0.1.3",
5353
"ng-dropzone": "https://github.com/thatisuday/ng-dropzone.git#v2.0.2",
54-
"swangular": "^1.4.3"
54+
"swangular": "^1.4.3",
55+
"angularjs-dropdown-multiselect": "^1.11.8"
5556
},
5657
"devDependencies": {},
5758
"main": [

‎src/directives/crud/lets-crud-filter.directive.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@
107107

108108

109109
setTimeout(function(){
110-
scope.$emit('filter-init', scope);
110+
scope.$emit('filter-init', scope);
111+
// console.log('scope do timeout',scope)
112+
scope.$broadcast('filter-init', scope);
111113
}, 500);
112114
}
113115

@@ -269,10 +271,13 @@
269271
filterData[field.name] = scope.getDateFormated(filterData[field.name])
270272
}
271273

272-
if(field.autocomplete){
274+
if(field.autocomplete && !field.customOptions.multiselect){
273275
filterData[field.name+"_label"] = scope.data[field.name+".label"].label;
274276
}
275277

278+
if (field.autocomplete && field.customOptions.multiselect){
279+
filterData[field.name] = scope.data[field.name];
280+
}
276281
}
277282
});
278283
scope.data.q = null;

‎src/directives/crud/lets-crud-list.directive.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,11 @@
550550
for (var key in params[par]) {
551551
if(key == "ini" || key == "fim"){
552552
$scopeFilter.data[par+"_"+key] = moment(params[par][key], 'DD/MM/YYYY').toDate();
553-
}else{
553+
}
554+
else if (params[par][key].id && params[par][key].label) {
555+
$scopeFilter.data[par] = params[par]
556+
}
557+
else {
554558
$scopeFilter.data[par] = $scopeFilter.data[par] || {};
555559
$scopeFilter.data[par][key] = params[par][key] ;
556560
}

‎src/directives/framework/lets-fw-multiselect.directive.js‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
(function () {
2+
'use strict';
3+
4+
angular.module('letsAngular')
5+
.directive('fwMultiSelect', fwMultiSelect);
6+
7+
fwMultiSelect.$inject = ['$compile', '$timeout', 'Restangular', '$state'];
8+
9+
function fwMultiSelect($compile, $timeout, Restangular) {
10+
// debugger
11+
return {
12+
restrict: 'A',
13+
priority: 1,
14+
link: function (scope, element) {
15+
// console.log('element', element)
16+
17+
scope.dataReference = $(element)
18+
19+
// var _input = element.find('input');
20+
21+
// var clickHandler = function () {
22+
// var _oldVal = _input.val();
23+
// var _val = _oldVal + ' ';
24+
// _input.controller('ngModel').$setViewValue(_val);
25+
// // scope.$digest;
26+
// $timeout(function(){
27+
// _input.controller('ngModel').$setViewValue(_oldVal);
28+
// });
29+
// };
30+
31+
// element.find('button').click(clickHandler);
32+
// _input.click(clickHandler);
33+
34+
// _input.keyup(function(){
35+
// if (this.value.trim()==""){
36+
// _input.scope().data[_input.attr('name')] = null;
37+
// }
38+
// })
39+
40+
41+
42+
},
43+
controller: function ($scope, $state) {
44+
/*Multiselect*/
45+
$scope.initMultiSelect = false;
46+
$scope.msmodel = [];
47+
$scope.filter = {};
48+
$scope.msdata = [];
49+
$scope.setting = {}
50+
var vini = [
51+
{id: 1, label: "Administrador Geral"},
52+
{id: 2, label: "Arbo"},
53+
{id: 4, label: "Corretor"},
54+
]
55+
var field = ''
56+
57+
// console.log('state',$state)
58+
59+
$scope.$on('filter-init', function(scope){
60+
// console.log('scope gambiarra do vini', scope)
61+
62+
// console.log(data)
63+
var data = scope.targetScope.data || undefined
64+
var filter = $($scope.dataReference).attr('data-reference') || undefined
65+
field = filter
66+
// console.log('scopes', filter, data)
67+
68+
if(filter && data){
69+
$scope.msmodel = angular.copy(data[filter]) || []
70+
// console.log('set msmodel', filter, data)
71+
}
72+
73+
// console.log('undefined?', $scope.dataReference)
74+
// console.log('controller scope',$scope )
75+
})
76+
77+
// Eventos da biblioteca 'angularjs-dropdown-multiselect'
78+
79+
$scope.changedMultiSelect = function (a) {
80+
// console.log('evento')
81+
if ($scope.msmodel.length) {
82+
angular.element('.fw-multiselect-button').css('color', '#555555')
83+
} else {
84+
angular.element('.fw-multiselect-button').css('color', '#CCC')
85+
}
86+
}
87+
88+
$scope.onItemSelect = function (item, $event) {
89+
// console.log('onItemSelect',item, $scope.msmodel, $scope.msdata)
90+
91+
$scope.data[field] = $scope.msmodel
92+
var _label = $scope.msdata.find(function (_item) {
93+
return _item.id == item.id
94+
})
95+
item.label = _label.label
96+
}
97+
98+
$scope.onItemDeselect = function (item) {
99+
100+
}
101+
102+
// Fim dos eventos
103+
104+
$scope.removeDuplicates= function (a, param){
105+
return a.filter(function(item, pos, array){
106+
return array.map(function(mapItem){ return mapItem[param]; }).indexOf(item[param]) === pos;
107+
})
108+
}
109+
110+
$scope.makeRequestAutocomplete = function (scope, value, route) {
111+
$timeout(function() {
112+
if(!value) value = '[blank]'
113+
$scope.resource = Restangular.all($scope.route());
114+
$scope.resource.customGET('autocomplete/'+route+'/'+value+'?limit=10').then(function (data) {
115+
scope.options = $scope.removeDuplicates(data.concat(scope.selectedModel),'id');
116+
117+
$timeout(function() {},0)
118+
}, function errorCallback() {
119+
// console.log('b')
120+
});
121+
})
122+
}
123+
124+
$scope._debounce = function(cb) {
125+
var timeout = null;
126+
return function(data) {
127+
if (timeout) {
128+
clearTimeout(timeout);
129+
}
130+
timeout = setTimeout(function() {
131+
cb(data);
132+
}, 200);
133+
};
134+
};
135+
136+
$scope.openDropdownByButton = function(name){
137+
// console.log('openDropdownByButton',name)
138+
$timeout(function() {
139+
$('[data-reference="'+name+'"] button').click()
140+
})
141+
}
142+
143+
// Inicialização e set e eventos
144+
$scope.onInitMulti = function (event, field) {
145+
// $scope.msdata = vini
146+
// console.log(event)
147+
var dropdown = $(event.target)
148+
dropdown.scope().input.searchFilter = "";
149+
150+
if (!dropdown.initMultiSelect) {
151+
var _scope = dropdown.scope()
152+
dropdown.initMultiSelect = true
153+
// Popular o msdata pela depois de iniciado
154+
$scope.makeRequestAutocomplete(_scope,'[blank]', field.name)
155+
dropdown.parent().find(".dropdown-header").append('<i class="glyphicon glyphicon-search" style=" position: absolute; top: 20px; right: 35px; "></i>')
156+
157+
// Chamar autocomplete toda vez que alguma coisa é digitada no search-filter
158+
_scope.$watch('input.searchFilter', $scope._debounce(function(data) {
159+
$scope.makeRequestAutocomplete(_scope,data,field.name)
160+
}))
161+
162+
// sim, precisa dessa gambiarra pra chumbar os evento e os textos
163+
// console.log(_scope)
164+
165+
//set texts
166+
_scope.texts.buttonDefaultText = "Selecione " + field.label
167+
_scope.texts.searchPlaceholder = "Buscar " + field.label
168+
_scope.texts.dynamicButtonTextSuffix = "selecionado(s)"
169+
170+
_scope.externalEvents.onItemSelect = $scope.onItemSelect
171+
_scope.externalEvents.onSelectionChanged = $scope.changedMultiSelect = function (a) {
172+
// console.log('evento')
173+
if ($scope.msmodel.length) {
174+
angular.element('.fw-multiselect-button').css('color', '#555555')
175+
} else {
176+
angular.element('.fw-multiselect-button').css('color', '#CCC')
177+
}
178+
}
179+
_scope.externalEvents.onItemDeselect = $scope.onItemDeselect = function (item) {
180+
181+
}
182+
}
183+
}
184+
185+
// settings que foram chumbadas no html
186+
// TODO: fix this ... someday ...
187+
$scope.mssettings = {
188+
scrollableHeight: '200px',
189+
scrollable: true,
190+
buttonDefaultText: 'Tipos de imóveis',
191+
enableSearch: true,
192+
styleActive: true,
193+
showCheckAll: false,
194+
showUncheckAll: false,
195+
selectedToTop: true,
196+
buttonClasses: 'btn btn-default fw-multiselect-button',
197+
// smartButtonTextConverter: function (itemText, originalItem) {
198+
// // if (itemText === 'Jhon') {
199+
// // return 'Jhonny!';
200+
// // }
201+
// return itemText;
202+
// }
203+
};
204+
205+
/*Multiselect End*/
206+
},
207+
};
208+
}
209+
})();

‎src/lets.module.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
'colorpicker-dr',
1919
'ckeditor',
2020
'thatisuday.dropzone',
21-
'swangular'
21+
'swangular',
22+
'angularjs-dropdown-multiselect'
2223
]);
2324

2425
// ----------------------------

‎src/views/framework/input.html‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,11 +176,54 @@
176176
</div>
177177
</div>
178178

179+
<!-- Multiselect -->
180+
<div ng-if="field.autocomplete && !field.customOptions.autocomplete_table && field.customOptions.multiselect">
181+
<!-- <label for="corretor">{{field.label}}</label> -->
182+
<div class="fw-multiselect-content">
183+
<!-- -->
184+
<div
185+
data-element=""
186+
id="{{field.name}}"
187+
name="{{field.name}}"
188+
ng-dropdown-multiselect=""
189+
fw-multi-select
190+
data-reference="{{field.name}}"
191+
class="ng-dropdown-multiselect"
192+
ng-click="onInitMulti($event, field)"
193+
events="{'onSelectionChanged':changedMultiSelect,'onItemSelect':onItemSelect,'onItemDeselect':onItemDeselect}"
194+
translation-texts="{'buttonDefaultText': 'Selecione ...'}"
195+
options="msdata"
196+
extra-settings="{scrollableHeight: '200px',
197+
scrollable: true,
198+
buttonDefaultText: 'Tipos de {field.label}',
199+
enableSearch: true,
200+
styleActive: true,
201+
showCheckAll: false,
202+
showUncheckAll: true,
203+
selectedToTop: true,
204+
buttonClasses: 'btn btn-default fw-multiselect-button'}"
205+
selected-model="msmodel"
206+
ng-model="data[msmodel]"></div>
207+
<span class="input-group-btn" ng-click="openDropdownByButton(field.name)">
208+
<button type="button" class="btn btn-default">
209+
<i class="glyphicon glyphicon-menu-down"></i>
210+
</button>
211+
</span>
212+
</div>
213+
</div>
214+
215+
179216
<!--Autocomplete-->
180-
<div ng-if="field.autocomplete && !field.customOptions.autocomplete_table">
217+
<div ng-if="field.autocomplete && !field.customOptions.autocomplete_table && !field.customOptions.multiselect">
181218
<div fw-auto-complete="" class="fw-input-group fw-auto-complete input-group">
182-
<input id="{{field.name}}" ng-model-options="{fieldInfo: field}" fw-auto-complete typeahead-on-select="autocompleteSelect($item, $model, $label)"
183-
aria-autocomplete="none" autocomplete="off" typeahead-min-length="0" typeahead="row as row.label for row in autocomplete(field, $viewValue)"
219+
<input
220+
id="{{field.name}}"
221+
ng-model-options="{fieldInfo: field}"
222+
fw-auto-complete
223+
typeahead-on-select="autocompleteSelect($item, $model, $label)"
224+
aria-autocomplete="none"
225+
autocomplete="off"
226+
typeahead-min-length="0" typeahead="row as row.label for row in autocomplete(field, $viewValue)"
184227
type="text" class="form-control" name="{{field.name}}" ng-required="field.notnull" ng-model="$parent.data[field.name + '.label']"
185228
size="{{field.length}}" placeholder="{{field.label}}" ng-disabled="field.disabled" ng-readonly="field.customOptions.select == true"
186229
ng-class="{'fieldSelect': field.customOptions.select == true}" />

0 commit comments

Comments
 (0)