Виджет TagSelector

Виджет

Виджет TagSelector представляет собой интерфейс, эмулирующий множественный выбор элементов:

Виджет состоит из:

• Элементов в виде цветных прямоугольников.
• Текстового блока ввода.
• Ссылок "Добавить" (при выборе одного элемента меняется на "Еще") и "Создать".

Элементы

Так же как и в диалоге выбора сущностей, каждый элемент уникально идентифицируется двумя атрибутами: id и entityId.

• id — числовой или строковый идентификатор элемента.
• entityId — строковый идентификатор сущности.

Атрибут entityId определяет принадлежность элемента к конкретной сущности, поэтому виджет позволяет одновременно отображать элементы разных сущностей.

Сущность — это уникальный тип элемента. Глобальные настройки сущности могут определять внешний вид элементов по умолчанию.

const tagSelector = new TagSelector({
	textBoxAutoHide: true,
	textBoxWidth: 350,
	maxHeight: 99,
	placeholder: 'введите название элемента',
	addButtonCaption: 'Добавить элемент',
	addButtonCaptionMore: 'Добавить еще',
	showCreateButton: true,
	items: [
		{ id: 1, entityId: 'user', entityType: 'extranet', textColor: 'orange', title: 'Василий Иванов' },
		{ id: 2, entityId: 'user', title: 'Екатерина Матвеева', deselectable: true, maxWidth: 150 },
		{
			id: 3,
			entityId: 'user',
			title: {
				text: 'Павел Иванов €',
				type: 'html',
			},
		},
		{ id: 3, entityId: 'department', title: 'Разработка' },
		{ id: 4, entityId: 'department', title: 'Отдел продаж' },
		{ id: 1, entityId: 'project', title: 'Группа И', onclick: (event) => { console.log('tag click'); } },
		{ id: 2, entityId: 'project', title: 'Группа Отдела Разработок', link: '/company/personal/user/1/',  },
	],
	events: {
		onBeforeTagAdd: function(event) {
			const selector = event.getTarget();
			const { tag } = event.getData();
			if (tag.getTitle() === 'xxx')
			{
				event.preventDefault();
			}
		},
		onBeforeTagRemove: function(event) {
			const selector = event.getTarget();
			const { tag } = event.getData();
			if (tag.getTitle() === 'aaa')
			{
				event.preventDefault();
			}
		},
		onEnter: (event) => {
			const selector = event.getTarget();
			const value = selector.getTextBoxValue();

			value.split(' ').forEach(function(title) {
				selector.addTag({
					id: id++,
					title: title,
   					entityId: 'xxx',
				});
			});
		}
	},
});

tagSelector.renderTo(document.getElementById('container'));

Интеграция с диалогом выбора сущностей

Виджет TagSelector является самодостаточным и может использоваться как отдельный программируемый интерфейс. Однако, как правило, он используется вместе с диалогом выбора сущностей. Если задать опцию dialogOptions, при нажатии на ссылку "Добавить" будет открываться диалог.

Пример кода для наглядной демонстрации работы виджета:

<input type="hidden" name="test1[]" value="0"/>
	<div id="test1" name="test1"></div>
<script>

(function() { const tagSelector = new BX.UI.EntitySelector.TagSelector({
id: 'test1',
multiple: 'Y',
	dialogOptions: {
		context: 'MY_MODULE_CONTEXT',
		entities: [
			{
				id: 'user', // пользователи
			},
			{
				id: 'project', // группы и проекты
			},
			{
				id: 'department', // структура компании
				options: {
					selectMode: 'usersAndDepartments' // выбор пользователей и отделов
				}
			},
			{
				id: 'meta-user',
				options: {
					'all-users': true // Все сотрудники
				}
			},
		],
	}
});
            tagSelector.renderTo(document.getElementById('test1'))})();
</script>
</pre></p>