|
|
@@ -1,109 +1,110 @@ |
|
|
|
|
|
|
|
export class SovWidgets { |
|
|
|
|
|
|
|
static setSelect2($select) { |
|
|
|
if (typeof $select.data('select2-id') === 'undefined') { |
|
|
|
static setSelect2($select) { |
|
|
|
if (typeof $select.data('select2-id') === 'undefined') { |
|
|
|
|
|
|
|
$select.data('init', 'set') |
|
|
|
var options = { |
|
|
|
width: "100%", |
|
|
|
theme: "bootstrap4", |
|
|
|
dropdownAutoWidth: false, |
|
|
|
allowClear: true, |
|
|
|
minimumResultsForSearch: 8 |
|
|
|
}; |
|
|
|
$select.data('init', 'set') |
|
|
|
var options = { |
|
|
|
width: "100%", |
|
|
|
theme: "bootstrap4", |
|
|
|
dropdownAutoWidth: false, |
|
|
|
allowClear: true, |
|
|
|
minimumResultsForSearch: 8 |
|
|
|
}; |
|
|
|
|
|
|
|
if ($select.data('allow-clear') == 'false') { |
|
|
|
options.allowClear = false; |
|
|
|
} |
|
|
|
if ($select.data('width')) { |
|
|
|
options.width = 'auto' |
|
|
|
} |
|
|
|
if ($select.find('option[value=""]')) { |
|
|
|
options.placeholder = $select.find('option[value=""]').html() |
|
|
|
} |
|
|
|
if ($select.data('allow-clear') == 'false') { |
|
|
|
options.allowClear = false; |
|
|
|
} |
|
|
|
if ($select.data('width')) { |
|
|
|
options.width = 'auto' |
|
|
|
} |
|
|
|
if ($select.find('option[value=""]')) { |
|
|
|
options.placeholder = $select.find('option[value=""]').html() |
|
|
|
} |
|
|
|
|
|
|
|
var myselect = $select.select2(options); |
|
|
|
var myselect = $select.select2(options); |
|
|
|
|
|
|
|
myselect.on('select2:select', function (e) { |
|
|
|
var event = new Event('change'); |
|
|
|
e.target.dispatchEvent(event); |
|
|
|
}); |
|
|
|
myselect.on('select2:unselect', function (e) { |
|
|
|
var event = new Event('change'); |
|
|
|
e.target.dispatchEvent(event); |
|
|
|
}); |
|
|
|
myselect.on('select2:select', function (e) { |
|
|
|
var event = new Event('change'); |
|
|
|
e.target.dispatchEvent(event); |
|
|
|
}); |
|
|
|
myselect.on('select2:unselect', function (e) { |
|
|
|
var event = new Event('change'); |
|
|
|
e.target.dispatchEvent(event); |
|
|
|
}); |
|
|
|
|
|
|
|
return myselect; |
|
|
|
} |
|
|
|
return myselect; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
static setDateRange() { |
|
|
|
$('.date-time-range, .date-range').each(function (i, picker) { |
|
|
|
let options = { |
|
|
|
autoUpdateInput: false, |
|
|
|
locale: { |
|
|
|
"format": "DD/MM/YY", |
|
|
|
"separator": " - ", |
|
|
|
"applyLabel": "Appliquer", |
|
|
|
"cancelLabel": "Annuler", |
|
|
|
"fromLabel": "Du", |
|
|
|
"toLabel": "au", |
|
|
|
"customRangeLabel": "Custom", |
|
|
|
"daysOfWeek": ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"], |
|
|
|
"monthNames": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], |
|
|
|
"firstDay": 1 |
|
|
|
} |
|
|
|
}; |
|
|
|
if ($(picker).hasClass('date-time-range')) { |
|
|
|
options = Object.assign(options, { |
|
|
|
timePicker: true, |
|
|
|
timePickerIncrement: 30, |
|
|
|
timePicker24Hour: true, |
|
|
|
locale: { |
|
|
|
"format": "DD/MM/YYYY HH:mm", |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
if ($(picker).nextAll('.date-time-range-fields').find('.date-start').val()) { |
|
|
|
options.startDate = new Date($(picker).nextAll('.date-time-range-fields').find('.date-start').val()); |
|
|
|
options.autoUpdateInput = true; |
|
|
|
} |
|
|
|
if ($(picker).nextAll('.date-time-range-fields').find('.date-end').val()) { |
|
|
|
options.endDate = new Date($(picker).nextAll('.date-time-range-fields').find('.date-end').val()); |
|
|
|
options.autoUpdateInput = true; |
|
|
|
} |
|
|
|
$(picker).daterangepicker(options); |
|
|
|
$(picker).on('apply.daterangepicker', function (ev, pickerElm) { |
|
|
|
if ($(picker).hasClass('date-time-range')) { |
|
|
|
$(this).val(pickerElm.startDate.format('DD/MM/YY HH:mm') + ' - ' + pickerElm.endDate.format(options.locale.format)); |
|
|
|
} else { |
|
|
|
$(this).val(pickerElm.startDate.format('DD/MM/YY') + ' - ' + pickerElm.endDate.format(options.locale.format)); |
|
|
|
} |
|
|
|
if ($(picker).hasClass('date-time-range')) { |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-start').val(pickerElm.startDate.format('YYYY-MM-DD HH:mm')); |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-end').val(pickerElm.endDate.format('YYYY-MM-DD HH:mm')); |
|
|
|
} else { |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-start').val(pickerElm.startDate.format('YYYY-MM-DD')); |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-end').val(pickerElm.endDate.format('YYYY-MM-DD')); |
|
|
|
} |
|
|
|
}); |
|
|
|
static setDateRange() { |
|
|
|
$('.date-time-range, .date-range').each(function (i, picker) { |
|
|
|
let options = { |
|
|
|
autoUpdateInput: false, |
|
|
|
locale: { |
|
|
|
"format": "DD/MM/YY", |
|
|
|
"separator": " - ", |
|
|
|
"applyLabel": "Appliquer", |
|
|
|
"cancelLabel": "Annuler", |
|
|
|
"fromLabel": "Du", |
|
|
|
"toLabel": "au", |
|
|
|
"customRangeLabel": "Custom", |
|
|
|
"daysOfWeek": ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"], |
|
|
|
"monthNames": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], |
|
|
|
"firstDay": 1 |
|
|
|
} |
|
|
|
}; |
|
|
|
if ($(picker).hasClass('date-time-range')) { |
|
|
|
options = Object.assign(options, { |
|
|
|
timePicker: true, |
|
|
|
timePickerIncrement: 30, |
|
|
|
timePicker24Hour: true, |
|
|
|
locale: { |
|
|
|
"format": "DD/MM/YYYY HH:mm", |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
static setAutoCompleteField() { |
|
|
|
var autocompleteFields = $('[data-lc-autocomplete-url]'); |
|
|
|
} |
|
|
|
if ($(picker).nextAll('.date-time-range-fields').find('.date-start').val()) { |
|
|
|
options.startDate = new Date($(picker).nextAll('.date-time-range-fields').find('.date-start').val()); |
|
|
|
options.autoUpdateInput = true; |
|
|
|
} |
|
|
|
if ($(picker).nextAll('.date-time-range-fields').find('.date-end').val()) { |
|
|
|
options.endDate = new Date($(picker).nextAll('.date-time-range-fields').find('.date-end').val()); |
|
|
|
options.autoUpdateInput = true; |
|
|
|
} |
|
|
|
$(picker).daterangepicker(options); |
|
|
|
$(picker).on('apply.daterangepicker', function (ev, pickerElm) { |
|
|
|
if ($(picker).hasClass('date-time-range')) { |
|
|
|
$(this).val(pickerElm.startDate.format('DD/MM/YY HH:mm') + ' - ' + pickerElm.endDate.format(options.locale.format)); |
|
|
|
} else { |
|
|
|
$(this).val(pickerElm.startDate.format('DD/MM/YY') + ' - ' + pickerElm.endDate.format(options.locale.format)); |
|
|
|
} |
|
|
|
if ($(picker).hasClass('date-time-range')) { |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-start').val(pickerElm.startDate.format('YYYY-MM-DD HH:mm')); |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-end').val(pickerElm.endDate.format('YYYY-MM-DD HH:mm')); |
|
|
|
} else { |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-start').val(pickerElm.startDate.format('YYYY-MM-DD')); |
|
|
|
$(picker).nextAll('.date-time-range-fields').find('.date-end').val(pickerElm.endDate.format('YYYY-MM-DD')); |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
autocompleteFields.each(function () { |
|
|
|
var $this = $(this), |
|
|
|
url = $this.data('lc-autocomplete-url'); |
|
|
|
SovTools.log($this); |
|
|
|
$this.autoComplete({ |
|
|
|
noResultsText: 'Aucun résultat n\'a été trouvé.', |
|
|
|
resolverSettings: { |
|
|
|
url: url |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
static setAutoCompleteField() { |
|
|
|
var autocompleteFields = $('[data-lc-autocomplete-url]'); |
|
|
|
SovTools.log($.fn); |
|
|
|
autocompleteFields.each(function () { |
|
|
|
var $this = $(this), |
|
|
|
url = $this.data('lc-autocomplete-url'); |
|
|
|
SovTools.log($this); |
|
|
|
SovTools.log(url); |
|
|
|
$this.autoComplete({ |
|
|
|
//bootstrapVersion: 4, |
|
|
|
//noResultsText: 'Aucun résultat n\'a été trouvé.', |
|
|
|
resolverSettings: { |
|
|
|
url: url |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |