Skip to content

Commit ac8e43b

Browse files
ohadperryohadperry
committed
support url encoding of both value or server value to avoid a situation for duplicate names and refresh selects the wrong filter
1 parent e04071f commit ac8e43b

File tree

1 file changed

+79
-59
lines changed

1 file changed

+79
-59
lines changed

‎jquery.filters.js

+79-59
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,14 @@
4747
globalPadding: '33px',
4848
showShiftSelectMessage: true,
4949
searchButtonText: 'Search',
50+
timeOffsetInHours: 0,
51+
encodeInUrl: 'value', //can be 'value' / 'name'
5052
}, options);
5153

5254
filterModal.that = this;
5355
filterModal.settings = settings;
5456
filterModal.searchClickedCallback = settings.searchClickedCallback;
57+
filterModal.decryptField = settings.encodeInUrl == 'value' ? 'name': 'value';
5558

5659
decryptUrlIntoSelectedFilters();
5760
this.html(buildHtml(settings)).hide().fadeIn();
@@ -100,9 +103,9 @@
100103

101104
if (filterModal.settings.showSearchButton) {
102105
searchButton = '<div class="clearfix"></div>' +
103-
'<div class="row" style="float: right; margin-top: 20px;">' +
104-
'<button id="filter-search-button" style="padding: 10px 112px" class="btn btn-lg btn-block btn-success">'+filterModal.settings.searchButtonText+'</button>' +
105-
'</div> ';
106+
'<div class="row" style="float: right; margin-top: 20px;">' +
107+
'<button id="filter-search-button" style="padding: 10px 112px" class="btn btn-lg btn-block btn-success">'+filterModal.settings.searchButtonText+'</button>' +
108+
'</div> ';
106109
}
107110

108111
title = '<legend>'+ settings.title+'</legend>';
@@ -222,11 +225,12 @@
222225

223226
//in case this filter is connected to other filters
224227
relatedTo = relateToRender(filterParameter);
228+
// todo render relatedTo in the html to be coded in the url later
225229

226230
checkBoxesHtml += '<div class="checkbox" style="display: '+ display + '">' +
227-
'<a class="single-filter-js" data-attribute="'+filterParameter.value+'" ' +
228-
realNameAttribute+'="'+filterParameter.name+'">'+
229-
filterParameter.name+ relatedTo+'</a></div>';
231+
'<a class="single-filter-js" data-attribute="'+filterParameter.value+'" ' +
232+
realNameAttribute+'="'+filterParameter.name+'">'+
233+
filterParameter.name+ relatedTo+'</a></div>';
230234
});
231235
checkBoxesHtml += '<div class="clearfix"> </div>';
232236

@@ -241,7 +245,8 @@
241245
}
242246

243247
function renderDateRangeIfNeeded(){
244-
var dateRangeElement = $('input[name="'+dateRangeName+'"]');
248+
var dateRangeElement = $('input[name="'+dateRangeName+'"]'),
249+
s = filterModal.settings;
245250
if (dateRangeElement.length >0 ) {
246251
function cb(start, end) {
247252
$('input[name="' + dateRangeName + '"]').html(start.format(filterModal.settings.dateFormat) + ' - ' + end.format(filterModal.settings.dateFormat));
@@ -252,22 +257,21 @@
252257
dateRangeElement.daterangepicker({
253258
format: filterModal.settings.dateFormat,
254259
ranges: {
255-
ranges: {
256-
'Today': [moment().startOf('day'), moment().endOf('day')],
257-
'Last 5 minutes': [moment().subtract(5, 'minutes'), moment().endOf('day')],
258-
'Last 15 minutes': [moment().subtract(15, 'minutes'), moment().endOf('day')],
259-
'Last 1 hour': [moment().subtract(1, 'hour'), moment().endOf('day')],
260-
'Last 3 hour': [moment().subtract(3, 'hour'), moment().endOf('day')],
261-
'Last 1 day': [moment().subtract(1, 'day'), moment().endOf('day')],
262-
'Last 7 Days': [moment().subtract(6, 'days'), moment().endOf('day')],
263-
'Last 30 Days': [moment().subtract(29, 'days'), moment().endOf('day')],
264-
'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
265-
'This Month': [moment().startOf('month'), moment().endOf('month')],
266-
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
267-
'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().add(10, 'minutes')],
268-
}, locale: {cancelLabel: 'Clear'}
260+
'Today': [moment().startOf('day'), moment().endOf('day')],
261+
'Last 5 minutes': [moment().subtract(s.timeOffsetInHours, 'hour').subtract(5, 'minutes'), moment().endOf('day')],
262+
'Last 15 minutes': [moment().subtract(s.timeOffsetInHours, 'hour').subtract(15, 'minutes'), moment().endOf('day')],
263+
'Last 1 hour': [moment().subtract(s.timeOffsetInHours, 'hour').subtract(1, 'hour'), moment().endOf('day')],
264+
'Last 3 hour': [moment().subtract(s.timeOffsetInHours, 'hour').subtract(3, 'hour'), moment().endOf('day')],
265+
'Last 1 day': [moment().subtract(1, 'day'), moment().endOf('day')],
266+
'Last 7 Days': [moment().subtract(6, 'days'), moment().endOf('day')],
267+
'Last 30 Days': [moment().subtract(29, 'days'), moment().endOf('day')],
268+
'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
269+
'This Month': [moment().startOf('month'), moment().endOf('month')],
270+
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
271+
'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().add(10, 'minutes')],
269272
}, locale: {cancelLabel: 'Clear'}
270273

274+
271275
}, cb);
272276
}
273277

@@ -300,18 +304,18 @@
300304
$.each(filterModal.selectedFilterParameters, function(serverName, selectedParameter){
301305
humanParameterName = selectedParameter.attributeHumaneName;
302306
showMoreModelName = calcShowMoreModelName(selectedParameter.attributeHumaneName);
303-
selectedValue = (1 < selectedParameter.values.length) ? '(' + selectedParameter.values.length + ')' : selectedParameter.values[0].name;
307+
selectedValue = (1 < selectedParameter.values.length) ? '(' + selectedParameter.values.length + ')' : selectedParameter.values[0]['name'];
304308

305309
parameter = filterModal.filters[serverName];
306310
// errors on date range
307311
if (parameter) {
308312

309313
html += '<div class="selectbox pull-left active" data-attribute="'+ serverName +'" ' + 'type-attribute="' + selectedParameter.type + '"' +
310-
'style="padding: 10px; margin-right: 10px; margin-bottom: 10px; ;border: 1px solid '+filterModal.settings.borderColor+'">' +
311-
'<a data-toggle="modal" data-target="#'+showMoreModelName+'">'+ humanParameterName + ': '+ selectedValue +'</a>' +
312-
'<button type="button" class="close remove-filter" aria-label="Close" style="padding: 0 10px 0 15px; line-height: 0.75">' +
313-
'<span aria-hidden="true">&times;</span></button>' +
314-
'</div>';
314+
'style="padding: 10px; margin-right: 10px; margin-bottom: 10px; ;border: 1px solid '+filterModal.settings.borderColor+'">' +
315+
'<a data-toggle="modal" data-target="#'+showMoreModelName+'">'+ humanParameterName + ': '+ selectedValue +'</a>' +
316+
'<button type="button" class="close remove-filter" aria-label="Close" style="padding: 0 10px 0 15px; line-height: 0.75">' +
317+
'<span aria-hidden="true">&times;</span></button>' +
318+
'</div>';
315319

316320
filteredOptions = filterOptionsByDateAndRelatedToFilters(parameter);
317321
html += showMoreHiddenPopUpHtml(parameter.name, showMoreModelName, parameter, filteredOptions);
@@ -363,10 +367,10 @@
363367
filteredOptions = filterOptionsByDateAndRelatedToFilters(parameter);
364368
tempHtml = showMoreHiddenPopUpHtml(parameter.name, showMoreModelName, parameter, filteredOptions);
365369
additionalFilterHtml += '<div class="checkbox"><a data-toggle="modal" data-target="#'+
366-
showMoreModelName+'" data-attribute="'+
367-
parameter.attributeName+'">'+parameter.name+'</a>' +
368-
'</div>' +
369-
tempHtml;
370+
showMoreModelName+'" data-attribute="'+
371+
parameter.attributeName+'">'+parameter.name+'</a>' +
372+
'</div>' +
373+
tempHtml;
370374
}
371375
}
372376
});
@@ -375,11 +379,11 @@
375379
}
376380

377381
filterInternalHtml +='<div class="select-parameter-box " style="border: 1px solid '+filterModal.settings.borderColor+'; height: '+filterModal.settings.selectBoxHeight *2+'px; padding: 20px; width: 25%; float: left;">' +
378-
'Additional Filters' +
379-
'<div class="group-surround">' +
380-
additionalFilterHtml +
381-
'</div>' +
382-
'</div>' ;
382+
'Additional Filters' +
383+
'<div class="group-surround">' +
384+
additionalFilterHtml +
385+
'</div>' +
386+
'</div>' ;
383387

384388
filterInternalHtml += '</div>';
385389

@@ -477,10 +481,10 @@
477481
relatedTo = relateToRender(filterParameter);
478482

479483
checkBoxesHtml += '<div class="checkbox"><label>' +
480-
'<input type="checkbox" '+ checked + ' value="' + filterParameter.value + '" ' +
481-
realNameAttribute+'="' + filterParameter.name + '">' +
482-
filterParameter.name + relatedTo +
483-
'</label></div>';
484+
'<input type="checkbox" '+ checked + ' value="' + filterParameter.value + '" ' +
485+
realNameAttribute+'="' + filterParameter.name + '">' +
486+
filterParameter.name + relatedTo +
487+
'</label></div>';
484488
});
485489

486490
return filterInputBox + shiftSelectMultiMessage + checkBoxesHtml;
@@ -562,7 +566,7 @@
562566
// enable the user to type directly in the search input
563567
// without having to select it using the mouse
564568
$('#'+modal.id).on('shown.bs.modal', function (e) {
565-
$(this).find('.search-filters-js').focus()
569+
$(this).find('.search-filters-js').focus()
566570
});
567571

568572
//enable shift + select multi checkboxes
@@ -592,9 +596,9 @@
592596
}
593597

594598
function bindInputChange(){
595-
$('.text-input-js').keyup(function(){
596-
addInputSelectedToDataModal($(this).closest('.select-parameter-box'))
597-
})
599+
$('.text-input-js').keyup(function(){
600+
addInputSelectedToDataModal($(this).closest('.select-parameter-box'))
601+
})
598602
}
599603

600604
function bindMultiPopup(){
@@ -960,7 +964,8 @@
960964
values,
961965
selectedValue,
962966
selectedData,
963-
dataToPush;
967+
dataToPush,
968+
name, tempValue;
964969

965970
//will init only of needed
966971
initFilterParametersByKeyValue();
@@ -973,15 +978,24 @@
973978
values = value.split(',');
974979
selectedData = filterModal.filterParametersByKeyValue[key];
975980
filterModal.selectedFilterParameters[key] = {values: [],
976-
attributeHumaneName: selectedData.name,
977-
type: selectedData.type};
978-
$.each(values, function (_, humanValue) {
979-
humanValue = decodeURIComponent(humanValue);
981+
attributeHumaneName: selectedData.name,
982+
type: selectedData.type};
983+
$.each(values, function (_, selectedFilterValue) {
984+
selectedFilterValue = decodeURIComponent(selectedFilterValue);
980985
// possible bug here
981-
humanValue = humanValue.replace("/", "");
982-
if (selectedData.options[humanValue]) {
983-
selectedValue = selectedData.options[humanValue].value;
984-
dataToPush = buildElementData({name: humanValue, value: selectedValue}, rawObject);
986+
selectedFilterValue = selectedFilterValue.replace("/", "");
987+
if (selectedData.options[selectedFilterValue]) {
988+
989+
selectedValue = selectedData.options[selectedFilterValue][filterModal.decryptField];
990+
if (filterModal.decryptField == 'value'){
991+
name = selectedFilterValue;
992+
tempValue = selectedValue;
993+
}else{
994+
name = selectedValue;
995+
tempValue = selectedFilterValue;
996+
}
997+
998+
dataToPush = buildElementData({name: name, value: tempValue}, rawObject);
985999
filterModal.selectedFilterParameters[key].values.push(dataToPush)
9861000
}
9871001
});
@@ -997,14 +1011,19 @@
9971011

9981012

9991013
function initFilterParametersByKeyValue(){
1014+
var key;
10001015
if (!filterModal.filterParametersByKeyValue){
10011016
filterModal.filterParametersByKeyValue = {};
10021017
$.each(filterModal.settings.filterParameters, function(_, data){
10031018
filterModal.filterParametersByKeyValue[data.attributeName] = $.extend({}, data);
10041019
filterModal.filterParametersByKeyValue[data.attributeName].options = {};
10051020
if (data.options) {
10061021
$.each(data.options, function (_, optionData) {
1007-
filterModal.filterParametersByKeyValue[data.attributeName].options[optionData.name] = optionData;
1022+
// todo maybe change optionData.name to optionData.value ,
1023+
// name can repeat , value - less likely
1024+
1025+
key = optionData[filterModal.settings.encodeInUrl];
1026+
filterModal.filterParametersByKeyValue[data.attributeName].options[key] = optionData;
10081027
})
10091028
}
10101029
});
@@ -1092,7 +1111,8 @@
10921111
$.each(data, function(key, keyData){
10931112
url += prefix + key + '=';
10941113
$.each(keyData.values, function(_, value){
1095-
url += value.realName + ','
1114+
// filterModal.settings.encodeInUrl or 'realValue'
1115+
url += value[filterModal.settings.encodeInUrl] + ','
10961116
});
10971117
url = url.slice(0, -1); // cur the last ,
10981118
url += '&'
@@ -1184,10 +1204,10 @@
11841204

11851205
if (0 < selected.length) {
11861206
modifySelectedFilterData(serverParameterName, {
1187-
attributeHumaneName: humanParameterName,
1188-
values: selected
1189-
},
1190-
parameter.type);
1207+
attributeHumaneName: humanParameterName,
1208+
values: selected
1209+
},
1210+
parameter.type);
11911211
}
11921212
}
11931213
});

0 commit comments

Comments
 (0)