vgapp 1.4.8 → 1.5.0

package/app/modules/vgtable/js/_expandable.js

@@ -0,0 +1,242 @@
+/**
+ * Описание: многоуровневые сворачиваемые строки базовой таблицы VGTable.
+ * Возможности: дерево любой глубины, автоматические toggle-кнопки, Data API, публичное управление и события состояния.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+
+const EVENT_TOGGLE = 'rowtoggle.vg.table';
+const EVENT_EXPAND = 'rowexpand.vg.table';
+const EVENT_COLLAPSE = 'rowcollapse.vg.table';
+const GENERATED_TOGGLE_ATTRIBUTE = 'data-vg-table-expandable-generated';
+const HIDDEN_ATTRIBUTE = 'data-vg-table-expand-hidden';
+const DEPTH_ATTRIBUTE = 'data-expand-depth';
+const PAGE_ATTRIBUTE = 'data-vg-table-page-row';
+
+class _expandable {
+	constructor(table, options = {}) {
+		this._table = table;
+		this._options = options;
+		this._collapsed = new Set();
+		this._seeded = new Set();
+		this._rowById = new Map();
+		this._childrenByParent = new Map();
+		this._boundClick = this._handleClick.bind(this);
+	}
+
+	init() {
+		this._table.classList.add('vg-table-expandable');
+		this._table.addEventListener('click', this._boundClick);
+		return this.refresh();
+	}
+
+	dispose() {
+		this._table.removeEventListener('click', this._boundClick);
+		this._table.classList.remove('vg-table-expandable');
+		this._rows().forEach((row) => {
+			row.removeAttribute(DEPTH_ATTRIBUTE);
+			row.removeAttribute(HIDDEN_ATTRIBUTE);
+			row.style.removeProperty('--vg-table-expandable-depth');
+			row.hidden = row.getAttribute(PAGE_ATTRIBUTE) === 'hidden'
+				|| row.hasAttribute('data-vg-table-filter-hidden');
+			row.querySelectorAll(`[${GENERATED_TOGGLE_ATTRIBUTE}]`).forEach((toggle) => toggle.remove());
+			const toggle = this._findToggle(row);
+			if (toggle) {
+				toggle.classList.remove('vg-table-expandable__toggle');
+				toggle.removeAttribute('aria-expanded');
+				toggle.removeAttribute('aria-label');
+				toggle.hidden = false;
+			}
+		});
+		this._collapsed.clear();
+		this._seeded.clear();
+		this._rowById.clear();
+		this._childrenByParent.clear();
+	}
+
+	refresh() {
+		const rows = this._rows();
+		const idAttr = this._idAttr();
+		const parentAttr = this._parentAttr();
+		this._rowById = new Map();
+		this._childrenByParent = new Map();
+		const parentById = new Map();
+
+		rows.forEach((row, index) => {
+			const fallback = `row-${index + 1}`;
+			const id = String(row.getAttribute(idAttr) || fallback).trim() || fallback;
+			row.setAttribute(idAttr, id);
+			this._rowById.set(id, row);
+			const parentId = String(row.getAttribute(parentAttr) || '').trim();
+			parentById.set(id, parentId);
+			if (parentId) {
+				if (!this._childrenByParent.has(parentId)) this._childrenByParent.set(parentId, []);
+				this._childrenByParent.get(parentId).push(id);
+			}
+		});
+
+		const depthCache = new Map();
+		this._rowById.forEach((row, id) => {
+			const depth = this._depth(id, parentById, depthCache, new Set());
+			const hasChildren = (this._childrenByParent.get(id) || []).length > 0;
+			row.setAttribute(DEPTH_ATTRIBUTE, String(depth));
+			row.style.setProperty('--vg-table-expandable-depth', String(depth));
+			if (hasChildren && !this._seeded.has(id)) {
+				if (this._initiallyCollapsed(row)) this._collapsed.add(id);
+				this._seeded.add(id);
+			}
+			this._syncToggle(row, id, hasChildren);
+		});
+
+		this._rowById.forEach((row, id) => {
+			const hidden = this._hasCollapsedAncestor(id, parentById);
+			if (hidden) row.setAttribute(HIDDEN_ATTRIBUTE, 'true');
+			else row.removeAttribute(HIDDEN_ATTRIBUTE);
+			row.hidden = hidden
+				|| row.getAttribute(PAGE_ATTRIBUTE) === 'hidden'
+				|| row.hasAttribute('data-vg-table-filter-hidden');
+		});
+
+		return this.getState();
+	}
+
+	toggle(row, expanded = null, emit = true) {
+		const target = this._resolveRow(row);
+		if (!target) return false;
+		const id = String(target.getAttribute(this._idAttr()) || '').trim();
+		if (!id || !(this._childrenByParent.get(id) || []).length) return false;
+		const nextExpanded = expanded === null ? this._collapsed.has(id) : expanded === true;
+		if (nextExpanded) this._collapsed.delete(id);
+		else this._collapsed.add(id);
+		this.refresh();
+		if (emit) this._emit(target, id, nextExpanded);
+		return true;
+	}
+
+	expand(row, emit = true) {
+		return this.toggle(row, true, emit);
+	}
+
+	collapse(row, emit = true) {
+		return this.toggle(row, false, emit);
+	}
+
+	getState() {
+		const parents = Array.from(this._childrenByParent.keys()).filter((id) => this._rowById.has(id));
+		return {
+			expanded: parents.filter((id) => !this._collapsed.has(id)),
+			collapsed: parents.filter((id) => this._collapsed.has(id)),
+		};
+	}
+
+	_handleClick(event) {
+		const target = event.target instanceof Element ? event.target : event.target?.parentElement;
+		let toggle = null;
+		try {
+			toggle = target?.closest(this._combinedToggleSelector());
+		} catch (_) {
+			toggle = target?.closest('[data-expand-toggle]');
+		}
+		if (!toggle || !this._table.contains(toggle)) return;
+		event.preventDefault();
+		const row = toggle.closest('tr');
+		if (row) this.toggle(row, null, true);
+	}
+
+	_syncToggle(row, id, hasChildren) {
+		let toggle = this._findToggle(row);
+		if (!toggle && hasChildren) {
+			const cell = row.cells?.[0];
+			if (cell) {
+				toggle = document.createElement('button');
+				toggle.type = 'button';
+				toggle.setAttribute('data-expand-toggle', id);
+				toggle.setAttribute(GENERATED_TOGGLE_ATTRIBUTE, '');
+				cell.prepend(toggle);
+			}
+		}
+		if (!toggle) return;
+		toggle.classList.add('vg-table-expandable__toggle');
+		toggle.hidden = !hasChildren;
+		if (!hasChildren) return;
+		const expanded = !this._collapsed.has(id);
+		const labels = this._options.labels || {};
+		toggle.setAttribute('data-expand-toggle', id);
+		toggle.setAttribute('aria-expanded', String(expanded));
+		toggle.setAttribute('aria-label', expanded ? labels.collapse || 'Свернуть дочерние строки' : labels.expand || 'Развернуть дочерние строки');
+	}
+
+	_findToggle(row) {
+		try {
+			return row.querySelector(this._combinedToggleSelector());
+		} catch (_) {
+			return row.querySelector('[data-expand-toggle]');
+		}
+	}
+
+	_combinedToggleSelector() {
+		const selector = String(this._options.toggleSelector || '[data-expand-toggle]').trim();
+		return selector === '[data-expand-toggle]' ? selector : `${selector}, [data-expand-toggle]`;
+	}
+
+	_depth(id, parentById, cache, trail) {
+		if (cache.has(id)) return cache.get(id);
+		if (trail.has(id)) return 0;
+		trail.add(id);
+		const parentId = String(parentById.get(id) || '').trim();
+		const depth = !parentId || parentId === id || !this._rowById.has(parentId)
+			? 0
+			: this._depth(parentId, parentById, cache, trail) + 1;
+		trail.delete(id);
+		cache.set(id, depth);
+		return depth;
+	}
+
+	_hasCollapsedAncestor(id, parentById) {
+		const visited = new Set([id]);
+		let parentId = String(parentById.get(id) || '').trim();
+		while (parentId && !visited.has(parentId)) {
+			if (this._collapsed.has(parentId)) return true;
+			visited.add(parentId);
+			parentId = String(parentById.get(parentId) || '').trim();
+		}
+		return false;
+	}
+
+	_initiallyCollapsed(row) {
+		const value = row.getAttribute('data-expand-collapsed');
+		return value === null ? this._options.collapsed === true : this._boolean(value);
+	}
+
+	_resolveRow(row) {
+		if (row instanceof Element) {
+			const target = row.matches('tbody tr') ? row : row.closest('tbody tr');
+			return target && this._table.contains(target) ? target : null;
+		}
+		return this._rowById.get(String(row)) || null;
+	}
+
+	_rows() {
+		return Array.from(this._table.tBodies || []).flatMap((body) => Array.from(body.rows || []));
+	}
+
+	_idAttr() {
+		return String(this._options.idAttr || 'data-expand-id').trim() || 'data-expand-id';
+	}
+
+	_parentAttr() {
+		return String(this._options.parentAttr || 'data-expand-parent-id').trim() || 'data-expand-parent-id';
+	}
+
+	_boolean(value) {
+		return !['false', '0', 'off', 'no'].includes(String(value).toLowerCase());
+	}
+
+	_emit(row, id, expanded) {
+		const detail = {id, row, expanded, collapsed: !expanded};
+		EventHandler.trigger(this._table, EVENT_TOGGLE, detail);
+		EventHandler.trigger(this._table, expanded ? EVENT_EXPAND : EVENT_COLLAPSE, detail);
+	}
+}
+
+export default _expandable;

package/app/modules/vgtable/js/_filters.js

@@ -0,0 +1,264 @@
+/**
+ * Описание: форма локальных и remote-фильтров VGTable.
+ * Возможности: auto/manual применение, debounce, операторы, reset и публичное состояние.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+const EVENT_CHANGE = 'filterschange.vg.table';
+
+class _filters {
+	constructor(table, options = {}, onChange = null) {
+		this._table = table;
+		this._options = options;
+		this._onChange = typeof onChange === 'function' ? onChange : null;
+		this._form = null;
+		this._controls = [];
+		this._timer = null;
+		this._boundInput = this._handleInput.bind(this);
+		this._boundChange = this._handleChange.bind(this);
+		this._boundClick = this._handleClick.bind(this);
+		this._boundSubmit = this._handleSubmit.bind(this);
+	}
+
+	init() {
+		this._form = this._resolveForm();
+		if (!this._form) return this;
+		this.refresh();
+		this._form.addEventListener('input', this._boundInput);
+		this._form.addEventListener('change', this._boundChange);
+		this._form.addEventListener('click', this._boundClick);
+		this._form.addEventListener('submit', this._boundSubmit);
+		return this;
+	}
+
+	dispose() {
+		if (this._form) {
+			this._form.removeEventListener('input', this._boundInput);
+			this._form.removeEventListener('change', this._boundChange);
+			this._form.removeEventListener('click', this._boundClick);
+			this._form.removeEventListener('submit', this._boundSubmit);
+		}
+		if (this._timer) window.clearTimeout(this._timer);
+		this._timer = null;
+		this._controls = [];
+		this._form = null;
+	}
+
+	refresh() {
+		if (!this._form) return this.getState();
+		this._controls = Array.from(this._form.querySelectorAll(`[${this._fieldAttr()}]`))
+			.filter((control) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(control.tagName));
+		return this.getState();
+	}
+
+	getState() {
+		const groups = new Map();
+		this._controls.forEach((control) => {
+			const field = String(control.getAttribute(this._fieldAttr()) || '').trim();
+			if (!field) return;
+			if (!groups.has(field)) groups.set(field, {
+				field,
+				type: String(control.getAttribute(this._typeAttr()) || 'text').trim() || 'text',
+				operator: String(control.getAttribute(this._operatorAttr()) || this._options.defaultOperator || 'eq').trim() || 'eq',
+				value: '',
+				values: [],
+			});
+			const item = groups.get(field);
+			const part = String(control.getAttribute(this._partAttr()) || 'value').toLowerCase();
+			const value = this._readValue(control);
+			if (part === 'operator') {
+				item.operator = String(value || this._options.defaultOperator || 'eq').trim() || 'eq';
+				return;
+			}
+			if (part === 'type') {
+				item.type = String(value || 'text').trim() || 'text';
+				return;
+			}
+			if (Array.isArray(value)) {
+				item.values = value;
+				item.value = value.join(',');
+				return;
+			}
+			if ((control.type === 'checkbox' || control.type === 'radio') && value === '') return;
+			item.value = value;
+		});
+
+		const filters = {};
+		const params = {};
+		groups.forEach((item, field) => {
+			const normalized = this._normalizeItem(item);
+			if (!normalized) return;
+			filters[field] = normalized;
+			params[field] = normalized.values.length ? normalized.values.slice() : normalized.value;
+			if (normalized.operator) params[`${field}_op`] = normalized.operator;
+		});
+		return {filters, params, fields: Object.keys(filters), meta: {count: Object.keys(filters).length}};
+	}
+
+	getFields() {
+		return this._fieldNames();
+	}
+
+	setValues(values = {}, options = {}) {
+		const source = values && typeof values === 'object' ? values : {};
+		this._controls.forEach((control) => {
+			const field = String(control.getAttribute(this._fieldAttr()) || '').trim();
+			if (!field) return;
+			const part = String(control.getAttribute(this._partAttr()) || 'value').toLowerCase();
+			const key = part === 'operator' ? `${field}_op` : field;
+			this._writeValue(control, Object.prototype.hasOwnProperty.call(source, key) ? source[key] : '');
+		});
+		if (options.emit === true) this._emit(String(options.source || 'api'));
+		return this.getState();
+	}
+
+	reset(options = {}) {
+		this._controls.forEach((control) => this._resetControl(control));
+		if (options.emit !== false) this._emit(String(options.source || 'reset'));
+		return this.getState();
+	}
+
+	_handleInput(event) {
+		if (!this._isControl(event.target) || this._isManual()) return;
+		if (['checkbox', 'radio'].includes(String(event.target.type).toLowerCase()) || event.target.tagName === 'SELECT') {
+			this._emit('input');
+			return;
+		}
+		this._schedule('input');
+	}
+
+	_handleChange(event) {
+		if (!this._isControl(event.target) || this._isManual()) return;
+		this._clearTimer();
+		this._emit('change');
+	}
+
+	_handleClick(event) {
+		const buttons = this._options.buttons || {};
+		const apply = this._closest(event.target, buttons.apply || '[data-filter-apply]');
+		if (apply && this._form.contains(apply)) {
+			event.preventDefault();
+			this._clearTimer();
+			this._emit('apply');
+			return;
+		}
+		const reset = this._closest(event.target, buttons.reset || '[data-filter-reset]');
+		if (!reset || !this._form.contains(reset)) return;
+		event.preventDefault();
+		this._clearTimer();
+		this.reset({source: 'reset'});
+	}
+
+	_handleSubmit(event) {
+		if (!this._isManual()) return;
+		event.preventDefault();
+		this._clearTimer();
+		this._emit('submit');
+	}
+
+	_emit(source) {
+		const state = Object.assign(this.getState(), {source});
+		EventHandler.trigger(this._table, EVENT_CHANGE, state);
+		this._onChange?.(state);
+	}
+
+	_schedule(source) {
+		this._clearTimer();
+		this._timer = window.setTimeout(() => {
+			this._timer = null;
+			this._emit(source);
+		}, this._nonNegativeInt(this._options.debounce, 300));
+	}
+
+	_clearTimer() {
+		if (this._timer) window.clearTimeout(this._timer);
+		this._timer = null;
+	}
+
+	_resolveForm() {
+		if (typeof Element !== 'undefined' && this._options.form instanceof Element) return this._options.form;
+		const selector = String(this._options.form || '').trim();
+		if (!selector) return null;
+		try { return document.querySelector(selector); } catch (_) { return null; }
+	}
+
+	_normalizeItem(item) {
+		let value = item.value;
+		let values = Array.isArray(item.values) ? item.values.slice() : [];
+		if (this._options.trim !== false) {
+			if (typeof value === 'string') value = value.trim();
+			values = values.map((entry) => String(entry ?? '').trim()).filter(Boolean);
+		}
+		if (this._options.skipEmpty !== false && !values.length && (value === null || value === undefined || String(value) === '')) return null;
+		return {
+			field: item.field,
+			type: String(item.type || 'text').toLowerCase(),
+			operator: String(item.operator || this._options.defaultOperator || 'eq').toLowerCase(),
+			value: value ?? '',
+			values,
+		};
+	}
+
+	_readValue(control) {
+		if (control.tagName === 'SELECT' && control.multiple) {
+			return Array.from(control.selectedOptions).map((option) => option.value).filter(Boolean);
+		}
+		if (control.type === 'checkbox' || control.type === 'radio') {
+			if (!control.checked) return '';
+			return control.getAttribute(this._valueAttr()) ?? control.value ?? '1';
+		}
+		return control.value ?? '';
+	}
+
+	_writeValue(control, value) {
+		if (control.type === 'checkbox' || control.type === 'radio') {
+			const values = Array.isArray(value) ? value.map(String) : [String(value ?? '')];
+			const own = String(control.getAttribute(this._valueAttr()) ?? control.value ?? '1');
+			control.checked = values.includes(own) || (control.type === 'checkbox' && ['1', 'true', 'on'].includes(values[0]?.toLowerCase()));
+			return;
+		}
+		if (control.tagName === 'SELECT' && control.multiple) {
+			const values = new Set((Array.isArray(value) ? value : String(value ?? '').split(',')).map(String));
+			Array.from(control.options).forEach((option) => { option.selected = values.has(option.value); });
+			return;
+		}
+		control.value = String(value ?? '');
+	}
+
+	_resetControl(control) {
+		if (control.type === 'checkbox' || control.type === 'radio') control.checked = control.defaultChecked;
+		else if (control.tagName === 'SELECT') Array.from(control.options).forEach((option) => { option.selected = option.defaultSelected; });
+		else control.value = control.defaultValue || '';
+	}
+
+	_fieldNames() {
+		return Array.from(new Set(this._controls.map((control) => String(control.getAttribute(this._fieldAttr()) || '').trim()).filter(Boolean)));
+	}
+
+	_isControl(node) {
+		return this._controls.includes(node);
+	}
+
+	_closest(node, selector) {
+		if (!node?.closest) return null;
+		const normalized = String(selector || '').trim();
+		if (!normalized) return null;
+		try { return node.closest(normalized); } catch (_) { return null; }
+	}
+
+	_isManual() {
+		return String(this._options.apply || 'auto').toLowerCase() === 'manual';
+	}
+
+	_fieldAttr() { return String(this._options.fieldAttr || 'data-filter-field'); }
+	_partAttr() { return String(this._options.partAttr || 'data-filter-part'); }
+	_typeAttr() { return String(this._options.typeAttr || 'data-filter-type'); }
+	_valueAttr() { return String(this._options.valueAttr || 'data-filter-value'); }
+	_operatorAttr() { return String(this._options.operatorAttr || 'data-filter-operator'); }
+	_nonNegativeInt(value, fallback) {
+		const parsed = Number.parseInt(value, 10);
+		return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+	}
+}
+
+export default _filters;