@osimatic/helpers-js 1.0.710 → 1.1.0

package/form_helper.js

@@ -1,26 +1,58 @@
 class FormHelper {
-	static resetSelectOption(form, selectName) {
-		form.find('select[name="'+selectName+'"] option').prop('disabled', false).prop('selected', false);
-	}
-	static setSelectedSelectOption(form, selectName, optionValue) {
-		form.find('select[name="'+selectName+'"] option[value="'+optionValue+'"]').prop('selected', true);
-	}
-	static setSelectedSelectOptions(form, selectName, optionValues) {
-		$.each(optionValues, function(idx, id) {
-			FormHelper.setSelectedSelectOption(form, selectName, id);
+	static init(form, onSubmitCallback, submitButton) {
+		FormHelper.reset(form, submitButton);
+		submitButton = typeof submitButton != 'undefined' && null != submitButton ? submitButton : form.find('button[name="validate"]');
+		submitButton.off('click').click(function(e) {
+			e.preventDefault();
+			FormHelper.buttonLoader($(this), 'loading');
+			FormHelper.hideFormErrors(form);
+			if (typeof onSubmitCallback == 'function') {
+				onSubmitCallback(form, submitButton);
+			}
 		});
+		return form;
 	}
-	static disableSelectOption(form, selectName, optionValue) {
-		form.find('select[name="'+selectName+'"] option[value="'+optionValue+'"]').prop('disabled', true);
+
+	static reset(form, submitButton) {
+		submitButton = typeof submitButton != 'undefined' && null != submitButton ? submitButton : form.find('button[name="validate"]');
+		form.find('input[name]:not([type="checkbox"], [type="radio"]), select:not(.selectpicker), textarea').each((idx, el) => $(el).val('')).off('change');
+		form.find('select.selectpicker').each((idx, el) => $(el).val(''));
+		FormHelper.buttonLoader(submitButton, 'reset');
+		FormHelper.hideFormErrors(form);
+		return form;
 	}
-	static disableSelectOptions(form, selectName, optionValues) {
-		$.each(optionValues, function(idx, id) {
-			FormHelper.disableSelectOption(form, selectName, id);
+
+	static populateForm(form, data) {
+		form.find('[name="employees_display_type"][value="NONE"]').prop('checked', true); //todo à retirer
+
+		$.each(data, function(key, value) {
+			if (value == null) {
+				return;
+			}
+
+			if (typeof value == 'object') {
+				var select = form.find('[name="'+key+'[]"]');
+				select.find('option').prop('selected', false);
+				select.data('default_id', value.join(','));
+				$.each(value, function(key, val) {
+					select.find('option[value="'+val+'"]').prop('selected', true);
+				});
+				return;
+			}
+
+			var input = form.find('[name="'+key+'"]');
+
+			if (input.prop('type') === 'radio' || input.prop('type') === 'checkbox') {
+				input.prop('checked', false);
+				input.filter('[value="'+value+'"]').prop('checked', true);
+				return;
+			}
+
+			input.val(value);
+			// console.log(form.find('[name="'+key+'"]').length);
 		});
 	}
-	static countSelectOptions(form, selectName) {
-		return form.find('select[name="'+selectName+'"] option:not([disabled])').length;
-	}
+
 
 	static getFormData(form) {
 		// var formElement = document.getElementById("myFormElement");
@@ -48,36 +80,57 @@ class FormHelper {
 	}
 
 
-	static populateForm(form, data) {
-		form.find('[name="employees_display_type"][value="NONE"]').prop('checked', true); //todo à retirer
-		
-		$.each(data, function(key, value) {
-			if (value == null) {
-				return;
-			}
 
-			if (typeof value == 'object') {
-				var select = form.find('[name="'+key+'[]"]');
-				select.find('option').prop('selected', false);
-				select.data('default_id', value.join(','));
-				$.each(value, function(key, val) {
-					select.find('option[value="'+val+'"]').prop('selected', true);
-				});
-				return;
-			}
+	// ------------------------------------------------------------
+	// Input text
+	// ------------------------------------------------------------
 
-			var input = form.find('[name="'+key+'"]');
+	static getInputValue(input) {
+		if (typeof input == 'undefined') {
+			return null;
+		}
+		let value = $(input).val();
+		if (value === null || value === '') {
+			return null;
+		}
+		return value;
+	}
 
-			if (input.prop('type') === 'radio' || input.prop('type') === 'checkbox') {
-				input.prop('checked', false);
-				input.filter('[value="'+value+'"]').prop('checked', true);
-				return;
-			}
+	static getLinesOfTextarea(textarea) {
+		return textarea.val().replace(/(\r\n|\n|\r)/g, "\n").split("\n").filter(word => word.length > 0);
+	}
 
-			input.val(value);
-			// console.log(form.find('[name="'+key+'"]').length);
+	// ------------------------------------------------------------
+	// Select
+	// ------------------------------------------------------------
+
+	static resetSelectOption(form, selectName) {
+		form.find('select[name="'+selectName+'"] option').prop('disabled', false).prop('selected', false);
+	}
+	static setSelectedSelectOption(form, selectName, optionValue) {
+		form.find('select[name="'+selectName+'"] option[value="'+optionValue+'"]').prop('selected', true);
+	}
+	static setSelectedSelectOptions(form, selectName, optionValues) {
+		$.each(optionValues, function(idx, id) {
+			FormHelper.setSelectedSelectOption(form, selectName, id);
+		});
+	}
+	static disableSelectOption(form, selectName, optionValue) {
+		form.find('select[name="'+selectName+'"] option[value="'+optionValue+'"]').prop('disabled', true);
+	}
+	static disableSelectOptions(form, selectName, optionValues) {
+		$.each(optionValues, function(idx, id) {
+			FormHelper.disableSelectOption(form, selectName, id);
 		});
 	}
+	static countSelectOptions(form, selectName) {
+		return form.find('select[name="'+selectName+'"] option:not([disabled])').length;
+	}
+
+
+	// ------------------------------------------------------------
+	// Checkbox
+	// ------------------------------------------------------------
 
 	static getCheckedValues(inputs) {
 		return inputs.map(function() {
@@ -99,10 +152,6 @@ class FormHelper {
 		}).get().filter(word => word.length > 0);
 	}
 
-	static getLinesOfTextarea(textarea) {
-		return textarea.val().replace(/(\r\n|\n|\r)/g, "\n").split("\n").filter(word => word.length > 0);
-	}
-
 
 	// ------------------------------------------------------------
 	// Champs
@@ -112,33 +161,35 @@ class FormHelper {
 		//if ( $('[type="date"]').prop('type') != 'date' ) {
 		//	$('[type="date"]').datepicker();
 		//}
-		if (!Modernizr.inputtypes.date) {
-			// $.fn.datepicker.defaults.language = 'fr';
-			// $.datepicker.setDefaults( $.datepicker.regional["fr"]);
-			form.find('input[type="date"]')
-				.css('max-width', '120px')
-				// 28/06/2021 : désactivation du datepicker car safari le gere en natif
-				/*
-				.datepicker({
-					dateFormat: 'yy-mm-dd',
-					changeMonth: true,
-					changeYear: true,
-					showOn: "both",
-					buttonImage: ROOT_PATH+'images/icons/calendar-alt.png',
-					buttonImageOnly: true,
-				})
-				*/
-			;
-			//form.find('input[type="date"]').datepicker({dateFormat: 'yy-mm-dd', minDate: "-10Y", maxDate: "+3Y"});
-			// $("#date_conf").datepicker("option", $.datepicker.regional["fr"]);
-			// $("#date_conf").datepicker("option", "dateFormat", "yy-mm-dd");
-		}
-		if (!Modernizr.inputtypes.time) {
-			form.find('input[type="time"]')
-				.css('max-width', '100px')
-				.attr('placeholder', 'hh:mm')
-			;
-			form.find('input[type="time"][step="1"]').attr('placeholder', 'hh:mm:ss');
+		if (typeof Modernizr != 'undefined') {
+			if (!Modernizr.inputtypes.date) {
+				// $.fn.datepicker.defaults.language = 'fr';
+				// $.datepicker.setDefaults( $.datepicker.regional["fr"]);
+				form.find('input[type="date"]')
+					.css('max-width', '120px')
+					// 28/06/2021 : désactivation du datepicker car safari le gere en natif
+					/*
+					.datepicker({
+						dateFormat: 'yy-mm-dd',
+						changeMonth: true,
+						changeYear: true,
+						showOn: "both",
+						buttonImage: ROOT_PATH+'images/icons/calendar-alt.png',
+						buttonImageOnly: true,
+					})
+					*/
+				;
+				//form.find('input[type="date"]').datepicker({dateFormat: 'yy-mm-dd', minDate: "-10Y", maxDate: "+3Y"});
+				// $("#date_conf").datepicker("option", $.datepicker.regional["fr"]);
+				// $("#date_conf").datepicker("option", "dateFormat", "yy-mm-dd");
+			}
+			if (!Modernizr.inputtypes.time) {
+				form.find('input[type="time"]')
+					.css('max-width', '100px')
+					.attr('placeholder', 'hh:mm')
+				;
+				form.find('input[type="time"][step="1"]').attr('placeholder', 'hh:mm:ss');
+			}
 		}
 
 		// Show/Hide password
@@ -153,8 +204,12 @@ class FormHelper {
 		form.find('input[type="password"]').wrap('<div class="input-group password"></div>').after(linkTogglePassword);
 	}
 
+	static hideField(inputOrSelect) {
+		inputOrSelect.closest('.form-group').addClass('hide');
+	}
+
 	// ------------------------------------------------------------
-	// Messages
+	// Messages erreur
 	// ------------------------------------------------------------
 
 	static extractErrorKeyOfJson(json, onlyIfUniqueError) {
@@ -174,6 +229,10 @@ class FormHelper {
 			return json[0].error;
 		}
 
+		if (typeof json[0] != 'undefined' && Array.isArray(json[0]) && json[0].length === 2) {
+			return json[0][0];
+		}
+
 		return null;
 	}
 
@@ -200,11 +259,12 @@ class FormHelper {
 	static displayFormErrors(form, btnSubmit, errors, errorWrapperDiv) {
 		this.displayFormErrorsFromText(form, this.getFormErrorText(errors), errorWrapperDiv);
 		if (btnSubmit != null) {
-			if (btnSubmit.buttonLoader != null) {
-				btnSubmit.buttonLoader('reset');
-			} else {
-				btnSubmit.attr('disabled', false).button('reset');
-			}
+			FormHelper.buttonLoader(btnSubmit, 'reset');
+			//if (btnSubmit.buttonLoader != null) {
+			//	btnSubmit.buttonLoader('reset');
+			//} else {
+			//	btnSubmit.attr('disabled', false).button('reset');
+			//}
 		}
 	}
 
@@ -241,6 +301,10 @@ class FormHelper {
 	}
 
 
+	// ------------------------------------------------------------
+	// Bouton valider
+	// ------------------------------------------------------------
+
 	static buttonLoader(button, action) {
 		button = $(button);
 		if (action === 'start' || action === 'loading') {
@@ -248,7 +312,7 @@ class FormHelper {
 				return self;
 			}
 			button.attr('disabled', true);
-			button.attr('data-btn-text', button.html());
+			button.data('btn-text', button.html());
 			//let text = '<span class="spinner"><i class=\'fa fa-circle-notch fa-spin\'></i></span>Traitement en cours…';
 			let text = '<i class=\'fa fa-circle-notch fa-spin\'></i> Traitement en cours…';
 			if (button.data('load-text') != undefined && button.data('load-text') != null && button.data('load-text') != '') {
@@ -261,7 +325,7 @@ class FormHelper {
 			button.addClass('disabled');
 		}
 		if (action === 'stop' || action === 'reset') {
-			button.html(button.attr('data-btn-text'));
+			button.html(button.data('btn-text'));
 			button.removeClass('disabled');
 			button.attr('disabled', false);
 			//button.removeAttr("disabled");
@@ -269,20 +333,52 @@ class FormHelper {
 		return button;
 	}
 	
-	
-	
-	
 
-	/** @deprecated **/
-	static logRequestFailure(status, exception) {
-		console.log('request failure. Status: '+status+' ; Exception: '+exception);
-	}
+}
 
-	/** @deprecated **/
-	static displayFormErrorsFromXhr(form, btnSubmit, xhr) {
-		this.displayFormErrors(form, btnSubmit, xhr.responseJSON);
-	}
+class EditValue {
+	static init(valueDiv, onSubmitCallback, getInputCallback) {
+		let link = $('<a href="#" class="text-warning"><i class="fas fa-pencil-alt"></i></a>');
+		valueDiv.parent().append('&nbsp;').append(link);
+
+		function cancelEdit(valueParentDiv) {
+			valueParentDiv.find('a, span').removeClass('hide');
+			valueParentDiv.find('form').remove();
+		}
 
+		link.click(function (e) {
+			e.preventDefault();
+
+			let parent = $(this).parent();
+
+			parent.find('a, span').addClass('hide');
+
+			let form = $('<form class="form-inline"></form>');
+
+			let value = parent.find('span').data('value') || parent.find('span').text();
+			let input = $( typeof getInputCallback == 'function' ? getInputCallback(value) : '<input type="text" />');
+			form.append(input);
+			form.find('input').addClass('form-control').css('width', 'auto').val(value);
+
+			let button = $('<button type="submit" class="btn btn-success ms-2" data-loading-text="<i class=\'fa fa-circle-notch fa-spin\'></i>" style="vertical-align: baseline;"><i class="fas fa-check"></i></button>');
+			button.click(function (e) {
+				FormHelper.buttonLoader(parent.find('button'), 'loading');
+				let newValue = parent.find('input').val();
+				onSubmitCallback(newValue, parent,
+					(isSuccess, valueFormatCallback) => {
+						cancelEdit(parent);
+						if (isSuccess) {
+							parent.find('span').data('value', newValue).text(typeof valueFormatCallback == 'function' ? valueFormatCallback(newValue) : newValue);
+						}
+					}
+				);
+			});
+			form.append(button);
+
+			parent.append(form);
+			return false;
+		});
+	}
 }
 
-module.exports = { FormHelper };
+module.exports = { FormHelper, EditValue };

package/google_charts.js

@@ -13,7 +13,7 @@ class GoogleCharts {
 		// on supprime du tableau la liste des graphiques dont l'id div n'a pas été trouvé (le graphique ne pourra pas être généré)
 		chartsList = chartsList.filter(chartData => typeof chartData.div_id != 'undefined' && $('#'+chartData.div_id).length);
 
-		var nbChartsCompleted = 0;
+		let nbChartsCompleted = 0;
 		chartsList.forEach(chartData => {
 			//console.log(chartData);
 			GoogleCharts.draw(
@@ -41,17 +41,18 @@ class GoogleCharts {
 
 	static draw(div, typeGraph, titre, libelleAbs, tabDataAbsParam, listeLibelleOrd, listeTabDataOrd, tabColor, formatData, height, width, onComplete) {
 		if (typeof div == 'undefined' || !div.length) {
+			console.error('div not found');
 			return;
 		}
 
 		height = height || null;
 		width = width || null;
 
-		var htmlDomDiv = div[0];
+		let htmlDomDiv = div[0];
 
-		var afficherLibelleOrd = false;
+		let afficherLibelleOrd = false;
 
-		var isStacked = false;
+		let isStacked = false;
 		if (typeGraph === 'stacked_bar_chart') {
 			typeGraph = 'bar_chart';
 			isStacked = true;
@@ -65,7 +66,7 @@ class GoogleCharts {
 			isStacked = true;
 		}
 
-		var isDualChart = false;
+		let isDualChart = false;
 		if (typeGraph === 'dual_column_chart') {
 			typeGraph = 'column_chart';
 			isDualChart = true;
@@ -75,7 +76,7 @@ class GoogleCharts {
 			isDualChart = true;
 		}
 
-		var data = null;
+		let data = null;
 		if (typeGraph === 'pie_chart') {
 			//data = google.visualization.arrayToDataTable(tabDataAbsParam);
 
@@ -83,7 +84,7 @@ class GoogleCharts {
 			data.addColumn('string', libelleAbs);
 			data.addColumn('number', '');
 
-			var numRow = 0;
+			let numRow = 0;
 			$.each(tabDataAbsParam, function(idx, value) {
 				data.addRows(1);
 				data.setCell(numRow, 0, idx);
@@ -100,8 +101,8 @@ class GoogleCharts {
 			});
 
 			// Remplissage des données
-			var nbCells = 0;
-			var numRow = 0;
+			let nbCells = 0;
+			let numRow = 0;
 			$.each(tabDataAbsParam, function(idx, dataAbs) {
 				// dataOrd = tabDataOrd[idx];
 				// data.addRow([dataAbs, dataOrd]);
@@ -109,7 +110,7 @@ class GoogleCharts {
 
 				data.setCell(numRow, 0, dataAbs);
 
-				var numCell = 1;
+				let numCell = 1;
 				$.each(listeTabDataOrd, function(idx2, tabDataOrd) {
 					data.setCell(numRow, numCell, tabDataOrd[idx]);
 					//data.setCell(numRow, numCell, Math.round(tabDataOrd[idx], 2));
@@ -126,7 +127,7 @@ class GoogleCharts {
 		// console.log('drawGraph : '+div+' ; type : '+typeGraph);
 
 		// Options générales
-		var options = {
+		let options = {
 			colors: tabColor,
 			fontName: 'Trebuchet MS',
 			fontSize: 12,
@@ -221,7 +222,7 @@ class GoogleCharts {
 				// console.log(idx);
 				if (idx <= 1) {
 					// key = 'series_'+idx;
-					var key = idx;
+					let key = idx;
 					// options.series[idx] = {axis: key, targetAxisIndex: key};
 					options.series[idx] = {axis: key, targetAxisIndex: idx};
 					if (typeGraph === 'column_chart') {
@@ -278,7 +279,7 @@ class GoogleCharts {
 		// console.log(options);
 
 		// Création du graphique
-		var chart = null;
+		let chart = null;
 		if (typeGraph === 'column_chart') {
 			// chart = new google.visualization.ColumnChart(htmlDomDiv);
 			chart = new google.charts.Bar(htmlDomDiv);
@@ -301,7 +302,7 @@ class GoogleCharts {
 		div.removeClass('loading');
 
 		if (chart === null) {
-			console.log('erreur graphique');
+			console.error('error during creating chart');
 			div.addClass('graphique_error');
 			htmlDomDiv.innerHTML = 'Une erreur s\'est produite lors du chargement du graphique.';
 			return;
@@ -317,7 +318,7 @@ class GoogleCharts {
 			tabPaneDiv = div.closest('.tab-pane');
 		}
 
-		var hasClassActive = tabPaneDiv.hasClass('active');
+		let hasClassActive = tabPaneDiv.hasClass('active');
 		if (!hasClassActive) {
 			tabPaneDiv.addClass('active');
 		}