front_fields_selectedFilters.js

const findstr = window.findstr || {};

const { Handlebars } = window.findstr.helpers || {};

document.addEventListener('findstrLoaded', function () {
	const fields = document.querySelectorAll(
		'.findstr-field.findstr-field-selectedFilters'
	);

	const resetFilters = (e) => {
		const button = e.target.closest(
			'button.findstrSelectedFilters__item__remove'
		);

		if (button) {
			const value = button.dataset.findstrFilterValue;
			const targetId = button.dataset.findstrFilterId;
			const target = document.getElementById(targetId);

			switch (target.field.type) {
				case 'checkbox':
					target.checked = false;
					break;
				case 'dropdown':
					target.tomselect.removeItem(value);
					break;
				case 'datepicker':
          const datepicker = document.getElementById('findstr-datepicker-' + target.dataset.findstrId + '-' + target.dataset.findstrGroup);
          datepicker.startDate = new Date();
          datepicker.value = undefined;
          target.value = '';
					break;
				case 'search':
					target.value = '';
					break;
        default:
          findstr.hooks.doAction(
            'findstrResetFiltersItemRemove',
            target,
            value
          );
          break;
			}

			target.dataset.findstrReseted = 'true';

			target.dispatchEvent(new Event('input'));
			e.target.removeEventListener('click', resetFilters, false);
		}
	};

	const getSelectedFilters = (group, field) => {
		const groupItems = findstr.groups[group].items || [];

		let selectedFilters = [];
		groupItems.forEach((groupItem) => {
			/**
			 * Filter the selected filters items before rendering them.
			 *
			 * @hook findstrSelectedFiltersItems
			 *
			 * @param {Object} item  - The item object
			 * @param {string} group - The group name
			 * @param {Object} field - The field object (selectedFilters field)
			 *
			 * @return {Object} The item object
			 */
			const item = findstr.hooks.applyFilters(
				'findstrSelectedFiltersItems',
				groupItem,
				group,
				field
			);

			switch (item.field.type) {
				case 'checkbox':
				default:
					if (item.checked && item.value !== '') {
						selectedFilters.push({
							item: item.id,
							value: item.value,
							label: item.value,
						});
					}
					break;
				case 'dropdown':
					if (item.value !== '') {
						item.value.split('||').forEach((value) => {
							selectedFilters.push({
								item: item.id,
								value,
								label: findstr.hooks.applyFilters(
									'findstrFieldValueLabel',
									value,
									item.field
								),
							});
						});
					}
					break;
				case 'toggle':
					if (item.checked) {
						const value = document
							.querySelector("[for='" + item.id + "']")
							.textContent.trim();
						selectedFilters.push({
							item: item.id,
							value,
							label: findstr.hooks.applyFilters(
								'findstrFieldValueLabel',
								value,
								item.field
							),
						});
					}
					break;
				case 'datepicker':
					if (item.value !== '') {
						selectedFilters.push({
							item: item.id,
							value: item.value,
							label: findstr.hooks.applyFilters(
								'findstrFieldValueLabel',
								item.value,
								item.field
							),
						});
					}
					break;
				case 'search':
					if (item.value !== '') {
						selectedFilters.push({
							item: item.id,
							value: item.value,
							label: findstr.hooks.applyFilters(
								'findstrFieldValueLabel',
								item.value,
								item.field
							),
						});
					}
					break;
			}

      selectedFilters = findstr.hooks.applyFilters(
        'findstrSelectedFilters',
        selectedFilters,
        item,
        group,
        field
      );
		});

		const selectedFiltersContainer = document.querySelector(
			`[data-id="${field.id}"][data-group="${group}"]`
		);

		const paginationTemplate = Handlebars.compile(
			selectedFiltersContainer.querySelector(
				'.findstrSelectedFiltersFieldTemplate'
			).innerHTML
		);
		const container = selectedFiltersContainer.querySelector(
			'.findstrSelectedFilters'
		);

		container.addEventListener('click', resetFilters);

		container.innerHTML = paginationTemplate({
			selectedFilters,
			field,
		});
	};

	findstr.hooks.addAction('findstrInit', 'selectedFilters', function () {
		fields.forEach((fieldItem) => {
			const field = JSON.parse(fieldItem.dataset.field);
			const group = fieldItem.dataset.group;
			getSelectedFilters(group, field);

			findstr.hooks.addAction(
				'searchResults',
				'selectedFilters',
				function () {
					getSelectedFilters(group, field);
				}
			);
		});
	});
});