@osimatic/helpers-js 1.1.78 → 1.2.1

package/contact_details.js

@@ -179,6 +179,10 @@ class TelephoneNumber {
 		});
 	}
 
+	static getIntlTelInputInstance(input) {
+		return window.intlTelInput.getInstance(input[0]);
+	}
+
 	static getEnteredNumberInInternationalFormat(intlTelInput) {
 		return intlTelInput.getNumber(window.intlTelInput.utils.numberFormat.E164);
 	}

package/examples/array_field.html

@@ -0,0 +1,186 @@
+<form action="#">
+	<div class="form-group field_emails">
+		<label>Liste des adresses email :</label>
+		<div class="hide list_empty"><em>aucune</em><br></div>
+		<table class="table table-sm">
+			<tbody>
+			<tr class="hide base">
+				<td><input type="hidden" name="emails[]"> <span class="value"></span></td>
+				<td class="text-end"><a href="#" title="Supprimer" class="remove btn btn-sm btn-danger"><i class="fas fa-times"></i></a></td>
+			</tr>
+			</tbody>
+		</table>
+		<div class="links text-center">
+			<a href="#" class="add_one btn btn-sm btn-success">Ajouter une adresse email</a>
+		</div>
+		<div class="item_add_one">
+			<div class="alert alert-danger pt-1 pb-1 errors hide"></div>
+			<div class="form-inline">
+				<input type="text" class="form-control" value="" placeholder="Adresse email" size="40" /> &nbsp;
+				<a href="#" title="Ajouter" class="add btn btn-success"><i class="fas fa-plus"></i></a>
+				&nbsp; <a href="#" class="cancel">Annuler</a>
+			</div>
+		</div>
+		<div class="item_add_mutli">
+			<div class="alert alert-danger pt-1 pb-1 errors hide"></div>
+			<div class="form-group">
+				<label>Liste des adresses email :</label>
+				<textarea name="phone_numbers" class="form-control" rows="10"></textarea>
+				<span class="form-text">Une adresse email par ligne.</span>
+			</div>
+			<div class="form-inline">
+				<a href="#" title="Ajouter" class="add btn btn-success"><i class="fas fa-plus"></i></a>
+				&nbsp; <a href="#" class="cancel">Annuler</a>
+			</div>
+		</div>
+	</div>
+
+	<div class="form-group field_phone_numbers">
+		<label>Liste des numéros de téléphone :</label>
+		<div class="hide list_empty"><em>aucun</em><br></div>
+		<table class="table table-sm">
+			<tbody>
+			<tr class="hide base">
+				<td><input type="hidden" name="phone_numbers[]"> <span class="value"></span></td>
+				<td class="text-end"><a href="#" title="Supprimer" class="remove btn btn-sm btn-danger"><i class="fas fa-times"></i></a></td>
+			</tr>
+			</tbody>
+		</table>
+		<div class="links text-center">
+			<a href="#" class="add_one btn btn-sm btn-success">Ajouter un numéro de téléphone</a>
+		</div>
+		<div class="item_add_one">
+			<div class="alert alert-danger pt-1 pb-1 errors hide"></div>
+			<div class="form-inline">
+				<input type="text" class="form-control" value="" placeholder="Numéro de téléphone" size="40" /> &nbsp;
+				<a href="#" title="Ajouter" class="add btn btn-success"><i class="fas fa-plus"></i></a>
+				&nbsp; <a href="#" class="cancel">Annuler</a>
+			</div>
+		</div>
+		<div class="item_add_mutli">
+			<div class="alert alert-danger pt-1 pb-1 errors hide"></div>
+			<div class="form-group">
+				<label>Pays des numéros de téléphone :</label>
+				<select name="country" class="form-control"></select>
+			</div>
+			<div class="form-group">
+				<label>Liste des numéros de téléphone :</label>
+				<textarea name="phone_numbers" class="form-control" rows="10"></textarea>
+				<span class="form-text">Un numéro de téléphone par ligne.</span>
+			</div>
+			<div class="form-inline">
+				<a href="#" title="Ajouter" class="add btn btn-success"><i class="fas fa-plus"></i></a>
+				&nbsp; <a href="#" class="cancel">Annuler</a>
+			</div>
+		</div>
+	</div>
+</form>
+
+<script>
+	const form = $('form');
+	ArrayField.init(form.find('.field_emails'), ['email@company.com'], {
+		entering_field_in_table: false,
+		item_name: 'Adresse email',
+		get_errors_callback: (email, itemsList) => {
+			if (Array.isArray(email) && email.length > 1) {
+				const emails = email;
+				if (emails.length === 0) {
+					return 'Veuillez saisir au moins une adresse email.';
+				}
+
+				let errors = [];
+				for (let i = 0; i < emails.length; i++) {
+					if (false === Email.validateEmail(emails[i])) {
+						errors.push(('L’adresse email n°{0} est incorrecte.').format(i + 1));
+						continue;
+					}
+
+					if (itemsList.indexOf(emails[i]) !== -1) {
+						errors.push(('L’adresse email n°{0} a déjà été ajoutée.').format(i + 1));
+						continue;
+					}
+				}
+
+				return errors.length ? errors : null;
+			}
+
+			email = Array.isArray(email) ? email[0] : email;
+
+			if (null == email || '' === email) {
+				return 'Veuillez saisir une adresse email.';
+			}
+			if (false === Email.validateEmail(email)) {
+				return 'Cette adresse email est incorrecte.';
+			}
+			if (itemsList.indexOf(email) !== -1) {
+				return 'Cette adresse email a déjà été ajoutée.';
+			}
+			return null;
+		},
+	});
+
+	ArrayField.init(form.find('field_phone_numbers'), ['+33601020304'], {
+		entering_field_in_table: false,
+		item_name: 'Numéro de téléphone',
+		init_callback: (div) => {
+			let itiPhoneNumberField = TelephoneNumber.setIntlTelInput(div.find('.item_add_one input[type="text"]'));
+			Location.fillCountrySelect(div.find('select[name="country"]'), 'FR');
+		},
+		format_entered_value_callback: (value, addDiv) => {
+			if (addDiv.hasClass('item_add_one')) {
+				const itiPhoneNumberField = TelephoneNumber.getIntlTelInputInstance(addDiv.find('input[type="text"]'));
+				return TelephoneNumber.getEnteredNumberInInternationalFormat(itiPhoneNumberField);
+			}
+
+			let country = addDiv.find('select[name="country"]').val();
+			if (false !== TelephoneNumber.check(value, country)) {
+				return TelephoneNumber.parse(value, country);
+			}
+			return value;
+		},
+		get_errors_callback: (phoneNumber, itemsList, addDiv) => {
+			if (Array.isArray(phoneNumber) && phoneNumber.length > 1) {
+				const phoneNumbers = phoneNumber;
+
+				if (phoneNumbers.length === 0) {
+					return 'Veuillez saisir au moins un numéro de téléphone.';
+				}
+
+				let country = addDiv.find('select[name="country"]').val();
+
+				let errors = [];
+				for (let i = 0; i < phoneNumbers.length; i++) {
+					if (false === TelephoneNumber.check(phoneNumbers[i], country)) {
+						errors.push(('Le numéro de téléphone n°{0} est incorrect.').format(i + 1));
+						continue;
+					}
+
+					let phoneNumber = TelephoneNumber.parse(phoneNumbers[i], country);
+					if (null === phoneNumber) {
+						continue;
+					}
+
+					if (itemsList.indexOf(phoneNumber) !== -1) {
+						errors.push(('Le numéro de téléphone n°{0} a déjà été ajouté.').format(i + 1));
+						continue;
+					}
+				}
+
+				return errors.length ? errors : null;
+			}
+
+			phoneNumber = Array.isArray(phoneNumber) ? phoneNumber[0] : phoneNumber;
+
+			const itiPhoneNumberField = TelephoneNumber.getIntlTelInputInstance(addDiv.find('input[type="text"]'));
+			if (null == phoneNumber || '' === phoneNumber) {
+				return 'Veuillez saisir un numéro de téléphone.';
+			}
+			if (!TelephoneNumber.check(phoneNumber, itiPhoneNumberField.defaultCountry)) {
+				return 'Ce numéro de téléphone est incorrect.';
+			}
+			if (itemsList.indexOf(phoneNumber) !== -1) {
+				return 'Ce numéro de téléphone a déjà été ajouté.';
+			}
+		},
+	});
+</script>

package/form_helper.js

@@ -363,6 +363,286 @@ class FormHelper {
 
 }
 
+class ArrayField {
+	static init(formGroupDiv, defaultValues=[], options = {
+		entering_field_in_table: true,
+		item_name: null,
+		nb_min_lines: 5,
+		nb_max_lines: null,
+		list_empty_text: null,
+		add_one_button_enabled: true,
+		add_one_button_label: null,
+		add_multi_button_enabled: false,
+		add_multi_button_label: null,
+		input_name: null,
+		init_callback: null,
+		update_list_callback: null,
+		get_errors_callback: null,
+
+	}) {
+		function isOptionDefined(optionName) {
+			return typeof options[optionName] != 'undefined' && null !== options[optionName];
+		}
+
+		let itemsList = defaultValues;
+
+		if (!formGroupDiv.find('table').length) {
+			formGroupDiv.append($('<table class="table table-sm"><tbody></tbody></table>'));
+		}
+		if (!formGroupDiv.find('.list_empty').length) {
+			formGroupDiv.append($('<div class="list_empty">'+(isOptionDefined('list_empty_text') ? options['list_empty_text'] : '<em>aucun</em>')+'</div>'));
+		}
+		if (!options['entering_field_in_table'] && !formGroupDiv.find('.add_one, .add_multi').length) {
+			let divLinks = formGroupDiv.find('.links');
+			if (!divLinks.length) {
+				divLinks = $('<div class="links text-center"></div>');
+				formGroupDiv.append(divLinks);
+			}
+
+			if (options['add_one_button_enabled']) {
+				divLinks.append($('<a href="#" class="add_one btn btn-sm btn-success">'+(isOptionDefined('add_one_button_label') ? options['add_one_button_label'] : 'Ajouter')+'</a>'));
+			}
+			if (options['add_multi_button_enabled']) {
+				divLinks.append($('<a href="#" class="add_multi btn btn-sm btn-success">'+(isOptionDefined('add_multi_button_label') ? options['add_multi_button_label'] : 'Ajout multiple')+'</a>'));
+			}
+			formGroupDiv.append(divLinks);
+		}
+
+		function addLine(item) {
+			const table = formGroupDiv.find('table').removeClass('hide');
+			let tr;
+			if (table.find('tbody tr.base').length) {
+				tr = table.find('tbody tr.base').clone().removeClass('hide').removeClass('base');
+			}
+			else {
+				let links = '';
+				if (options['entering_field_in_table']) {
+					links += '<a href="#" title="Ajouter" class="add btn btn-sm btn-success ms-1"><i class="fas fa-plus"></i></a>';
+				}
+				links += '<a href="#" title="Supprimer" class="remove btn btn-sm btn-danger ms-1"><i class="fas fa-times"></i></a>';
+
+				tr = $(
+					'<tr>' +
+						'<td class="table-input" style="vertical-align: middle">' +
+							(options['entering_field_in_table'] ? '<input type="text" name="'+options['input_name']+'" class="form-control pt-1 pb-1">' : '<input type="hidden" name="'+options['input_name']+'"> <span class="value"></span>') +
+						'</td>' +
+						'<td class="table-links text-end" style="vertical-align: middle">'+links+'</td>' +
+					'</tr>'
+				);
+			}
+
+			tr.find('a.add').click(function () {
+				const tr = $(this).closest('tr');
+				const tableBody = tr.closest('tbody');
+
+				if (isOptionDefined('nb_max_lines') && tableBody.find('tr').length >= options['nb_max_lines']) {
+					return false;
+				}
+				addLine();
+				onUpdateList();
+				return false;
+			});
+			tr.find('a.remove').click(function () {
+				const tr = $(this).closest('tr');
+				const tableBody = tr.closest('tbody');
+				if (options['entering_field_in_table'] && tableBody.find('tr').length <= 1) {
+					return false;
+				}
+
+				if (!options['entering_field_in_table'] || '' !== tr.data('item')) {
+					itemsList.unsetVal(tr.data('item'));
+				}
+
+				tr.remove();
+				onUpdateList();
+				return false;
+			});
+
+			if (typeof item != 'undefined' && null !== item) {
+				tr.data('item', item);
+				tr.find('input').val(item);
+				tr.find('span.value').text(item);
+			}
+
+			table.find('tbody').append(tr);
+			return tr;
+		}
+
+		function onUpdateList() {
+			formGroupDiv.find('.list_empty, table').addClass('hide');
+
+			// Maj tableau
+			let table = formGroupDiv.find('table');
+			const tableLines = table.find('tbody tr:not(.base)');
+			if ((options['entering_field_in_table'] && tableLines.length ) || (!options['entering_field_in_table'] && itemsList.length)) {
+				table.removeClass('hide');
+			}
+			else {
+				formGroupDiv.find('.list_empty').removeClass('hide');
+			}
+
+			tableLines.find('a').prop('disabled', false).removeClass('disabled');
+			if (isOptionDefined('nb_max_lines') && tableLines.length >= options['nb_max_lines']) {
+				tableLines.find('a.add').prop('disabled', true).addClass('disabled');
+			}
+			if (options['entering_field_in_table'] && tableLines.length <= 1) {
+				tableLines.find('a.remove').prop('disabled', true).addClass('disabled');
+			}
+
+			if (typeof options['update_list_callback'] == 'function') {
+				options['update_list_callback'](itemsList);
+			}
+
+			cancelAdd();
+		}
+
+		function startAdd() {
+			formGroupDiv.find('a.add_one, a.add_multi').addClass('hide').closest('.links').addClass('hide');
+			formGroupDiv.find('.item_add_one, .item_add_multi').addClass('hide');
+			formGroupDiv.find('.item_add_one, .item_add_multi').find('input[type="text"], textarea').val('');
+			formGroupDiv.find('.item_add_one, .item_add_multi').find('.errors').addClass('hide');
+		}
+		function cancelAdd() {
+			formGroupDiv.find('a.add_one, a.add_multi').removeClass('hide').closest('.links').removeClass('hide');
+			formGroupDiv.find('.item_add_one, .item_add_multi').addClass('hide');
+		}
+
+		function addItemsInList(items) {
+			if (!Array.isArray(items)) {
+				items = [items];
+			}
+
+			for (let i = 0; i < items.length; i++) {
+				if (itemsList.indexOf(items[i]) === -1) {
+					itemsList.push(items[i]);
+					addLine(items[i]);
+				}
+			}
+
+			onUpdateList();
+		}
+
+		function submitAddNewItem(item, divAdd) {
+			let items = Array.isArray(item) ? item : [item];
+
+			if (typeof options['format_entered_value_callback'] == 'function') {
+				items = items.map(item => options['format_entered_value_callback'](item, divAdd));
+			}
+
+			if (typeof options['get_errors_callback'] == 'function') {
+				const errors = options['get_errors_callback'](items, itemsList, divAdd);
+				if (null !== errors && errors.length) {
+					displayErrors(divAdd, errors);
+					return;
+				}
+			}
+
+			addItemsInList(items);
+		}
+
+		function displayErrors(divAdd, errors) {
+			if (!Array.isArray(errors)) {
+				errors = [errors];
+			}
+			divAdd.find('.errors').text(errors.join('<br/>')).removeClass('hide');
+		}
+
+		function initLinkAddOne() {
+			if (!formGroupDiv.find('a.add_one').length || !formGroupDiv.find('a.add_one:not([disabled])').length) {
+				return;
+			}
+
+			let divAdd = formGroupDiv.find('.item_add_one');
+			if (!divAdd.length) {
+				divAdd = $(
+					'<div class="item_add_one">' +
+						'<div class="alert alert-danger pt-1 pb-1 errors hide"></div>' +
+						'<div class="form-inline">' +
+							'<input type="text" class="form-control" placeholder="'+options['item_name']+'" value="" /> &nbsp;' +
+							'<a href="#" title="Ajouter" class="add btn btn-success"><i class="fas fa-plus"></i></a> &nbsp;' +
+							'<a href="#" class="cancel">Annuler</a>' +
+						'</div>' +
+						(isOptionDefined('form_desc')?'<br><span class="form-text">'+options['form_desc']+'</span>':'') +
+					'</div>'
+				);
+				formGroupDiv.append(divAdd);
+			}
+
+			divAdd.find('a.cancel').off('click').click(function () {
+				cancelAdd();
+				return false;
+			});
+			divAdd.find('a.add').off('click').click(function () {
+				submitAddNewItem(divAdd.find('input[type="text"]').val(), divAdd);
+				return false;
+			});
+
+			formGroupDiv.find('a.add_one').off('click').click(function () {
+				startAdd();
+				formGroupDiv.find('.item_add_one').removeClass('hide');
+				return false;
+			});
+		}
+
+		function initLinkAddMulti() {
+			if (!formGroupDiv.find('a.add_multi').length || !formGroupDiv.find('a.add_multi:not([disabled])').length) {
+				return;
+			}
+
+			let divAdd = formGroupDiv.find('.item_add_multi');
+			if (!divAdd.length) {
+				divAdd = $(
+					'<div class="item_add_multi">' +
+						'<div class="alert alert-danger pt-1 pb-1 errors hide"></div>' +
+						'<div class="form-group">' +
+							'<label>Liste à ajouter :</label>' +
+							'<textarea name="emails" class="form-control" rows="10"></textarea>' +
+							'<span class="form-text">Un élément par ligne.</span>' +
+						'</div>' +
+						'<div class="form-inline">' +
+							'<a href="#" title="Ajouter" class="add btn btn-success"><i class="fas fa-plus"></i></a> &nbsp;' +
+							'<a href="#" class="cancel">Annuler</a>' +
+						'</div>' +
+					'</div>'
+				);
+				formGroupDiv.append(divAdd);
+			}
+
+			divAdd.find('a.cancel').off('click').click(function () {
+				cancelAdd();
+				return false;
+			});
+			divAdd.find('a.add').off('click').click(function () {
+				const items = divAdd.find('textarea').val().normalizeBreaks("\n").split(/\n/ms).filter(value => value.length > 0);
+				submitAddNewItem(items, divAdd);
+				return false;
+			});
+
+			formGroupDiv.find('a.add_multi').off('click').click(function () {
+				startAdd();
+				formGroupDiv.find('.item_add_multi').removeClass('hide');
+				return false;
+			});
+		}
+
+		initLinkAddOne();
+		initLinkAddMulti();
+
+		itemsList.forEach(item => addLine(item));
+		if (options['entering_field_in_table']) {
+			for (let i=itemsList.length; i <= options['nb_min_lines']; i++) {
+				addLine();
+			}
+		}
+
+		onUpdateList();
+
+		if (typeof options['init_callback'] == 'function') {
+			options['init_callback'](formGroupDiv, onUpdateList, addItemsInList);
+		}
+	}
+}
+
 class EditValue {
 	static init(valueDiv, onSubmitCallback, getInputCallback) {
 		let link = $('<a href="#" class="text-warning"><i class="fas fa-pencil-alt"></i></a>');
@@ -408,4 +688,4 @@ class EditValue {
 	}
 }
 
-module.exports = { FormHelper, EditValue };
+module.exports = { FormHelper, ArrayField, EditValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.1.78",
+  "version": "1.2.1",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"