Skip to content

Commit a404414

Browse files
ohadperryohadperry
committed
adding saving input text and date range to data model to fix clear bug
1 parent c44318d commit a404414

File tree

2 files changed

+115
-34
lines changed

2 files changed

+115
-34
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎jquery.filters.js

+115-34
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
specificHtml = renderTextInput(parameter, name);
124124
break;
125125
case dateRange:
126-
specificHtml = renderDateRange();
126+
specificHtml = renderDateRange(parameter);
127127
break;
128128
case multiCheckBoxes:
129129
specificHtml = renderMultiSelect(parameter, name);
@@ -150,13 +150,24 @@
150150
}
151151

152152
function renderTextInput(parameter, name){
153-
return '<input style="margin: 5px 0" class="form-control" placeholder="'+ (parameter.placeholder || name) + '">';
153+
var value = '';
154+
if (filterModal.selectedFilterParameters[parameter.attributeName]){
155+
value = filterModal.selectedFilterParameters[parameter.attributeName].values[0].value
156+
}
157+
158+
return '<input style="margin: 5px 0" class="form-control text-input-js" value="'+value+'" placeholder="'+ (parameter.placeholder || name) + '">';
154159
}
155160

156-
function renderDateRange(){
161+
function renderDateRange(parameter){
162+
163+
var value = '';
164+
if (filterModal.selectedFilterParameters[parameter.attributeName]){
165+
value = filterModal.selectedFilterParameters[parameter.attributeName].values[0].value
166+
}
167+
157168
return '<div id="daterange" style="float: left; margin: 5px 0;" class="selectbox active">' +
158169
'<i class="fa fa-calendar"></i>' +
159-
'<input type="text" data-time-picker="true" name="'+dateRangeName+'" style="width: 170px; margin-left: 5px;">' +
170+
'<input type="text" data-time-picker="true" value="'+value+'" name="'+dateRangeName+'" style="width: 170px; margin-left: 5px;">' +
160171
'</div>';
161172
}
162173

@@ -218,24 +229,23 @@
218229
function renderRateRangeIfNeeded(){
219230
var dateRangeElement = $('input[name="'+dateRangeName+'"]');
220231
if (dateRangeElement.length >0 ) {
221-
var dateRange = dateRangeElement.daterangepicker(
222-
{
223-
format: filterModal.settings.dateFormat,
224-
startDate: moment().subtract(7, 'days').format(filterModal.settings.dateFormat),
225-
endDate: moment().format(filterModal.settings.dateFormat)
226-
},
227-
function (start, end, label) {
228-
console.log('change');
229-
}
230-
);
231-
232-
if (filterModal.startTime){
233-
dateRange.data('daterangepicker').setStartDate(filterModal.startTime);
234-
}
235-
236-
if (filterModal.endTime){
237-
dateRange.data('daterangepicker').setEndDate(filterModal.endTime);
232+
function cb(start, end) {
233+
$('input[name="'+dateRangeName+'"]').html(start.format(filterModal.settings.dateFormat) + ' - ' + end.format(filterModal.settings.dateFormat));
238234
}
235+
cb(moment().subtract(29, 'days'), moment().add(1, 'days'));
236+
237+
dateRangeElement.daterangepicker({
238+
format: filterModal.settings.dateFormat,
239+
ranges: {
240+
'Today': [moment(), moment().add(1, 'days')],
241+
'Yesterday': [moment().subtract(1, 'days'), moment()],
242+
'Last 7 Days': [moment().subtract(6, 'days'), moment().add(1, 'days')],
243+
'Last 30 Days': [moment().subtract(29, 'days'), moment().add(1, 'days')],
244+
'This Month': [moment().startOf('month'), moment().endOf('month')],
245+
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
246+
'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().add(1, 'days')]
247+
}
248+
}, cb);
239249
}
240250
}
241251

@@ -244,6 +254,10 @@
244254

245255
//should not render filter if is already selected
246256
function shouldNotRenderParameter(parameter){
257+
if ($.inArray(parameter.type, [dateRange, textType]) > -1){
258+
return false
259+
}
260+
247261
return undefined != filterModal.selectedFilterParameters[parameter.attributeName];
248262
}
249263

@@ -262,16 +276,20 @@
262276
showMoreModelName = calcShowMoreModelName(selectedParameter.attributeHumaneName);
263277
selectedValue = (1 < selectedParameter.values.length) ? '(' + selectedParameter.values.length + ')' : selectedParameter.values[0].name;
264278

265-
html += '<div class="selectbox pull-left active" data-attribute="'+ serverName +'" ' +
266-
'style="padding: 10px; margin-right: 10px; margin-bottom: 10px; ;border: 1px solid '+filterModal.settings.borderColor+'">' +
267-
'<a data-toggle="modal" data-target="#'+showMoreModelName+'">'+ humanParameterName + ': '+ selectedValue +'</a>' +
268-
'<button type="button" class="close remove-filter" aria-label="Close" style="padding: 0 10px 0 15px; line-height: 0.75">' +
269-
'<span aria-hidden="true">&times;</span></button>' +
270-
'</div>';
271-
272279
parameter = filterModal.filters[serverName];
273-
filteredOptions = filterOptionsByDateAndRelatedToFilters(parameter);
274-
html += showMoreHiddenPopUpHtml(parameter.name, showMoreModelName, parameter, filteredOptions);
280+
// errors on date range
281+
if (parameter) {
282+
283+
html += '<div class="selectbox pull-left active" data-attribute="'+ serverName +'" ' +
284+
'style="padding: 10px; margin-right: 10px; margin-bottom: 10px; ;border: 1px solid '+filterModal.settings.borderColor+'">' +
285+
'<a data-toggle="modal" data-target="#'+showMoreModelName+'">'+ humanParameterName + ': '+ selectedValue +'</a>' +
286+
'<button type="button" class="close remove-filter" aria-label="Close" style="padding: 0 10px 0 15px; line-height: 0.75">' +
287+
'<span aria-hidden="true">&times;</span></button>' +
288+
'</div>';
289+
290+
filteredOptions = filterOptionsByDateAndRelatedToFilters(parameter);
291+
html += showMoreHiddenPopUpHtml(parameter.name, showMoreModelName, parameter, filteredOptions);
292+
}
275293
});
276294

277295
return html
@@ -391,7 +409,7 @@
391409
htmlForParameterOptions(parameter, filteredOptions) +
392410
'</div>' +
393411
'<div class="modal-footer">' +
394-
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
412+
'<button type="button" class="btn btn-default multi-popup-close-js" data-dismiss="modal">Close</button>' +
395413
'<button type="button" class="btn btn-primary multi-popup-save-changes-js">Apply Changes</button>' +
396414
'</div>' +
397415
'</div><!-- /.modal-content -->'+
@@ -469,14 +487,22 @@
469487
bindMultiPopup();
470488
bindSingleClick();
471489
bindRemoveSelectedFilter();
490+
bindMultiPopupClose();
472491
bindMultiSelectFromMain();
473492
bindChangeDate();
493+
bindInputChange();
474494
bindExpandCollapse();
475495
bindBackButton();
476496
bindEnterButton();
477497

478498
}
479499

500+
function bindInputChange(){
501+
$('.text-input-js').keyup(function(){
502+
addInputSelectedToDataModal($(this).closest('.select-parameter-box'))
503+
})
504+
}
505+
480506
function bindMultiPopup(){
481507
$('.multi-popup-save-changes-js').on('click', function () {
482508
var popup = $(this).closest('.modal'),
@@ -486,8 +512,9 @@
486512
result = addMultiSelectedToDataModal(popup);
487513

488514
if (0 < result.checked.length) {
489-
//close the popup
490-
popup.modal('toggle');
515+
popup.modal('hide');
516+
$('body').removeClass('modal-open');
517+
$('.modal-backdrop').remove();
491518

492519
setTimeout(function(){
493520
//refresh the filter
@@ -500,6 +527,18 @@
500527
})
501528
}
502529

530+
function bindMultiPopupClose(){
531+
$('.multi-popup-close-js').on('click', function () {
532+
var popup = $(this).closest('.modal');
533+
534+
//close the popup
535+
popup.modal('hide');
536+
$('body').removeClass('modal-open');
537+
$('.modal-backdrop').remove();
538+
539+
})
540+
}
541+
503542
function bindMultiSelectFromMain(){
504543

505544
$('.multi-apply-main-js').on('click', function () {
@@ -589,6 +628,8 @@
589628

590629
$.each([textType, dateRange], function(_, inputType) {
591630
$('.select-parameter-box.' + inputType).each(function (_, selectBox) {
631+
632+
//TODO replace this with genericCollect
592633
var serverParameterName = getAttributeBackendName(selectBox),
593634
humanParameterName = getAttributeHumanName(selectBox),
594635
searchFor = getSearchParameter(inputType);
@@ -612,6 +653,35 @@
612653
return $.extend(DoNotSaveThisInTheSelectedFiltered, filterModal.selectedFilterParameters)
613654
}
614655

656+
657+
function genericCollect(selectBox, inputType) {
658+
var tempValues = [],
659+
DoNotSaveThisInTheSelectedFiltered = {};
660+
661+
var serverParameterName = getAttributeBackendName(selectBox),
662+
humanParameterName = getAttributeHumanName(selectBox),
663+
searchFor = getSearchParameter(inputType);
664+
665+
//TODO - find a better way to collect the data
666+
$(selectBox).find(searchFor).each(function (_, inputElement) {
667+
var value = $(inputElement).val();
668+
if (value) {
669+
tempValues.push({value: value}); // TODO pass also name here
670+
}
671+
});
672+
if (0 < tempValues.length) {
673+
DoNotSaveThisInTheSelectedFiltered[serverParameterName] = {attributeHumaneName: humanParameterName, values: tempValues};
674+
}
675+
676+
return {value: DoNotSaveThisInTheSelectedFiltered[serverParameterName], serverParameterName: serverParameterName}
677+
}
678+
679+
680+
function addInputSelectedToDataModal(selectBox){
681+
var data = genericCollect(selectBox, textType);
682+
filterModal.selectedFilterParameters[data.serverParameterName] = data.value
683+
}
684+
615685
function bindSingleClick(){
616686
$('.single-filter-js').on('click', function(){
617687
var selectBox = $(this).closest('.select-parameter-box');
@@ -638,12 +708,18 @@
638708

639709
function bindChangeDate(){
640710
$('.applyBtn').on('click',function(){
711+
641712
filterModal.startTime = $('input[name=daterangepicker_start]').last().val();
642713
filterModal.endTime = $('input[name=daterangepicker_end]').last().val();
643714

644715
//re render with dates filter
645716
filterModal.that.renderFilter();
646-
})
717+
});
718+
719+
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
720+
addDateSelectedToDataModal($(this).closest('.select-parameter-box'));
721+
});
722+
647723
}
648724

649725
function bindExpandCollapse(){
@@ -792,6 +868,11 @@
792868
return {checked: optionsResult.checked}
793869
}
794870

871+
function addDateSelectedToDataModal(selectBox){
872+
var data = genericCollect(selectBox, dateRange);
873+
filterModal.selectedFilterParameters[data.serverParameterName] = data.value
874+
}
875+
795876
function resetShowSingleFilterIfNeeded(){
796877
filterModal.status = null;
797878
filterModal.singleFilterToShow = null;

0 commit comments

Comments
 (0)