vgapp 1.2.4 → 1.2.6

package/app/modules/vgdynamictable/js/table-state.js

@@ -0,0 +1,243 @@
+const tableStateMethods = {
+    _renderRemoteRows(rows) {
+        const body = this._getBody();
+
+        if (!rows.length) {
+            const message = this._getTableMessage('stateEmpty', 'Ничего нет');
+            this._renderStateRow(message, 'empty');
+            return;
+        }
+
+        this._setFixedColumnsSuppressed(false);
+        this._clearStateMode();
+        body.innerHTML = rows.map((row) => {
+            const cells = this._fields.map((field) => {
+                const rawValue = row && Object.prototype.hasOwnProperty.call(row, field) ? row[field] : '';
+                const prepared = this._formatFieldValue(field, rawValue);
+                return `<td>${this._escapeHtml(prepared)}</td>`;
+            });
+            return `<tr>${cells.join('')}</tr>`;
+        }).join('');
+        this._updatePanHintVisibility();
+    },
+
+    _renderStateRow(message, state) {
+        const body = this._getBody();
+        const columns = this._getRenderedColumnsCount();
+        const retryButton = state === 'error'
+            ? `<div class="vgdt-state-actions"><button type="button" class="vgdt-state-reset" data-state-retry>${this._escapeHtml(this._getTableMessage('retry', 'Retry'))}</button></div>`
+            : '';
+        const illustration = this._buildStateIllustrationMarkup(state);
+        body.innerHTML = `<tr><td colspan="${columns}" data-table-state="${state}"><div class="vgdt-state">${illustration}<div class="vgdt-state-text">${this._escapeHtml(message)}</div>${retryButton}</div></td></tr>`;
+        const stateCell = body.querySelector('[data-table-state]');
+        this._setFixedColumnsSuppressed(true);
+        this._setStateMode(state);
+        this._ensureStateRowVisible(stateCell);
+        this._announce(message);
+        this._clearFooter();
+        this._updatePanHintVisibility();
+        this._refreshStickyAndFixedLayout();
+    },
+
+    _hasRenderableRowsInBody(body) {
+        if (!body || !body.rows || !body.rows.length) {
+            return false;
+        }
+        return Array.from(body.rows).some((row) => {
+            const cells = Array.from(row.cells || []);
+            if (!cells.length) {
+                return false;
+            }
+            return cells.some((cell) => {
+                if (!cell) {
+                    return false;
+                }
+                const text = String(cell.textContent || '').trim();
+                return text !== '' || cell.children.length > 0;
+            });
+        });
+    },
+
+    _setFixedColumnsSuppressed(value) {
+        this._fixedColumnsSuppressed = Boolean(value);
+    },
+
+    _setStateMode(state) {
+        if (!this._parent) {
+            return;
+        }
+        this._parent.setAttribute('data-state-mode', String(state || ''));
+    },
+
+    _clearStateMode() {
+        if (!this._parent) {
+            return;
+        }
+        this._parent.removeAttribute('data-state-mode');
+    },
+
+    _buildStateIllustrationMarkup(state) {
+        const stateOptions = this._params.state && typeof this._params.state === 'object'
+            ? this._params.state
+            : {};
+        const optionKey = state === 'error' ? 'errorIllustration' : 'emptyIllustration';
+        const attrName = state === 'error'
+            ? 'data-state-error-illustration'
+            : 'data-state-empty-illustration';
+        const optionValue = stateOptions[optionKey] || '';
+        const attrValue = this._element ? this._element.getAttribute(attrName) : '';
+        const src = String(optionValue || attrValue || '').trim();
+        if (!src) {
+            return '<div class="vgdt-state-illustration" aria-hidden="true"></div>';
+        }
+        const inlineSvg = this._extractInlineSvgMarkup(src);
+        if (inlineSvg) {
+            return `<div class="vgdt-state-illustration" aria-hidden="true">${inlineSvg}</div>`;
+        }
+        const alt = state === 'error' ? 'Error' : 'Empty';
+        return `<div class="vgdt-state-illustration"><img src="${this._escapeHtml(src)}" alt="${alt}" loading="lazy"></div>`;
+    },
+
+    _extractInlineSvgMarkup(value) {
+        const raw = String(value || '').trim();
+        if (!raw) {
+            return '';
+        }
+        if (/^<svg[\s>]/i.test(raw)) {
+            return raw;
+        }
+
+        const decoded = this._decodeHtmlEntities(raw);
+        if (/^<svg[\s>]/i.test(decoded)) {
+            return decoded;
+        }
+        return '';
+    },
+
+    _decodeHtmlEntities(value) {
+        return String(value || '')
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&quot;/g, '"')
+            .replace(/&#39;/g, '\'')
+            .replace(/&amp;/g, '&');
+    },
+
+    _ensureStateRowVisible(stateCell) {
+        if (!stateCell) {
+            return;
+        }
+        const minHeight = this._getStateBlockMinHeight();
+        stateCell.style.minHeight = `${minHeight}px`;
+        if (this._tableViewport) {
+            this._tableViewport.scrollTop = 0;
+            this._tableViewport.scrollLeft = 0;
+        }
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const rect = stateCell.getBoundingClientRect();
+        const vh = window.innerHeight || 0;
+        if (rect.top < 0 || (vh > 0 && rect.bottom > vh)) {
+            stateCell.scrollIntoView({ block: 'center', inline: 'nearest' });
+        }
+    },
+
+    _getStateBlockMinHeight() {
+        if (typeof window === 'undefined') {
+            return 180;
+        }
+        const vh = window.innerHeight || 0;
+        const isMobile = (window.innerWidth || 0) <= 768;
+        const ratio = isMobile ? 0.52 : 0.34;
+        const computed = vh > 0 ? Math.round(vh * ratio) : 0;
+        return Math.max(160, computed);
+    },
+
+    _bindTableStateActions() {
+        this._element.addEventListener('click', (event) => {
+            const reset = event.target.closest('[data-state-reset]');
+            if (reset) {
+                event.preventDefault();
+                this._resetFiltersAndSearch();
+                return;
+            }
+            const retry = event.target.closest('[data-state-retry]');
+            if (retry) {
+                event.preventDefault();
+                this._reloadCurrentPage();
+            }
+        });
+    },
+
+    _resetFiltersAndSearch() {
+        if (!this._isRemote) {
+            return;
+        }
+
+        this._remoteParams = {};
+        this._activeFilters = {};
+        this._sortState = Object.assign({}, this._sortState, { field: '', dir: 'asc', columnIndex: -1, sorts: [] });
+        if (this._sortable) {
+            this._sortable.setState({ sorts: [] });
+        }
+
+        const searchSelector = this._getSearchInputSelector();
+        if (searchSelector) {
+            const searchInput = this._getSearchInputNode(searchSelector);
+            if (searchInput) {
+                searchInput.value = '';
+            }
+        }
+
+        if (this._filters && typeof this._filters.setValues === 'function') {
+            this._filters.setValues({}, { emit: false });
+        }
+
+        const perPage = this._pageState.perPage || this._normalizePositiveInt(this._params.pagination.perPage, 10);
+        this._pageState = { page: 1, perPage };
+        this._emitAction('reset', {
+            page: 1,
+            perPage,
+        });
+        this._loadRemotePage(1, perPage);
+    },
+
+    _reloadCurrentPage() {
+        if (!this._isRemote) {
+            return;
+        }
+        const page = this._pageState.page || 1;
+        const perPage = this._pageState.perPage || this._normalizePositiveInt(this._params.pagination.perPage, 10);
+        this._loadRemotePage(page, perPage);
+    },
+
+    _hasActiveRemoteFilters() {
+        if (!this._isRemote) {
+            return false;
+        }
+        return Object.keys(this._remoteParams || {}).length > 0;
+    },
+
+    _ensureLiveRegion() {
+        if (this._liveRegion || !this._parent) {
+            return;
+        }
+        const node = document.createElement('div');
+        node.className = 'vgdt-live-region';
+        node.setAttribute('aria-live', 'polite');
+        node.setAttribute('aria-atomic', 'true');
+        this._parent.appendChild(node);
+        this._liveRegion = node;
+    },
+
+    _announce(message) {
+        if (!this._liveRegion) {
+            return;
+        }
+        this._liveRegion.textContent = String(message || '');
+    },
+};
+
+export default tableStateMethods;
+

package/app/modules/vgdynamictable/js/table-url-state.js

@@ -0,0 +1,444 @@
+import {normalizeBooleanOption, normalizeEnabledFlag, safeQuerySelector, toQueryParamValue} from "./utils/common";
+
+const tableUrlStateMethods = {
+    _syncUrlState() {
+        if (!this._isFiltersUrlStateEnabled() || !this._isFiltersUrlStateWriteOnChange()) {
+            return;
+        }
+        if (typeof window === 'undefined' || !window.history || !window.location) {
+            return;
+        }
+
+        let url;
+        try {
+            url = new URL(window.location.href);
+        } catch (error) {
+            this._emitAction('urlstateerror', {
+                source: 'write',
+                error,
+            });
+            return;
+        }
+
+        const nextState = this._collectUrlState();
+        const managedKeys = this._getManagedUrlStateKeys();
+        managedKeys.forEach((key) => {
+            url.searchParams.delete(key);
+        });
+
+        Object.keys(nextState).forEach((key) => {
+            const rawValue = nextState[key];
+            const value = toQueryParamValue(rawValue);
+            if (value === undefined || value === null || value === '') {
+                return;
+            }
+            url.searchParams.set(key, String(value));
+        });
+
+        const nextUrl = `${url.pathname}${url.search}${url.hash}`;
+        const currentUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+        if (nextUrl === currentUrl) {
+            return;
+        }
+
+        const mode = this._getUrlStateMode();
+        if (mode === 'push') {
+            window.history.pushState({}, '', nextUrl);
+        } else {
+            window.history.replaceState({}, '', nextUrl);
+        }
+
+        this._emitAction('urlstatewrite', {
+            mode,
+            state: Object.assign({}, nextState),
+            url: nextUrl,
+        });
+    },
+
+    _collectUrlState() {
+        const next = {};
+        const config = this._getFiltersUrlStateConfig();
+        const prefix = this._getFiltersUrlPrefix();
+        const searchParam = this._getSearchParamName();
+
+        if (searchParam && Object.prototype.hasOwnProperty.call(this._remoteParams || {}, searchParam)) {
+            next[searchParam] = this._remoteParams[searchParam];
+        }
+
+        this._getFilterFieldKeys().forEach((field) => {
+            const valueKey = field;
+            const operatorKey = `${field}_op`;
+            const urlValueKey = this._prefixFilterParamKey(valueKey, prefix);
+            const urlOperatorKey = this._prefixFilterParamKey(operatorKey, prefix);
+            if (Object.prototype.hasOwnProperty.call(this._remoteParams || {}, valueKey)) {
+                next[urlValueKey] = this._remoteParams[valueKey];
+            }
+            if (Object.prototype.hasOwnProperty.call(this._remoteParams || {}, operatorKey)) {
+                next[urlOperatorKey] = this._remoteParams[operatorKey];
+            }
+        });
+
+        if (this._isPaginationEnabled()) {
+            const page = this._normalizePositiveInt(this._pageState.page, 1);
+            const fallbackPerPage = this._normalizePositiveInt(this._params.pagination.perPage, 10);
+            const perPage = this._normalizePositiveInt(this._pageState.perPage, fallbackPerPage);
+            next[String(config.pageKey || 'page')] = page;
+            next[String(config.perPageKey || 'perPage')] = perPage;
+        }
+
+        if (this._params.sortable && this._params.sortable.enable) {
+            const sorts = this._getNormalizedSorts(this._sortState.sorts || []);
+            const valid = sorts
+                .filter((item) => String(item.field || '').trim() !== '')
+                .map((item) => `${item.field}:${this._normalizeSortDir(item.dir)}`);
+            if (valid.length > 0) {
+                next[String(config.sortKey || 'sort')] = valid.join(',');
+            }
+        }
+
+        return next;
+    },
+
+    _getManagedUrlStateKeys() {
+        const keys = new Set();
+        const config = this._getFiltersUrlStateConfig();
+        const prefix = this._getFiltersUrlPrefix();
+
+        keys.add(this._getSearchParamName());
+        this._getFilterFieldKeys().forEach((field) => {
+            keys.add(this._prefixFilterParamKey(field, prefix));
+            keys.add(this._prefixFilterParamKey(`${field}_op`, prefix));
+        });
+
+        if (this._isPaginationEnabled()) {
+            keys.add(String(config.pageKey || 'page'));
+            keys.add(String(config.perPageKey || 'perPage'));
+        }
+        if (this._params.sortable && this._params.sortable.enable) {
+            keys.add(String(config.sortKey || 'sort'));
+        }
+
+        return Array.from(keys).filter(Boolean);
+    },
+
+    _isUrlStateEnabled() {
+        return this._isFiltersUrlStateEnabled();
+    },
+
+    _getUrlStateMode() {
+        const config = this._getFiltersUrlStateConfig();
+        const attr = this._element.getAttribute('data-filters-urlstate-history-mode');
+        const mode = String(attr !== null ? attr : (config.historyMode || 'replace')).toLowerCase().trim();
+        return mode === 'push' ? 'push' : 'replace';
+    },
+
+    _isUrlStateIncludePagination() {
+        return this._isPaginationEnabled();
+    },
+
+    _isUrlStateIncludeSort() {
+        return Boolean(this._params.sortable && this._params.sortable.enable);
+    },
+
+    _bindPopState() {
+        if (!this._isRemote || !this._isFiltersUrlStateEnabled()) {
+            return;
+        }
+        if (typeof window === 'undefined' || !window.addEventListener) {
+            return;
+        }
+        const listen = this._isUrlStatePopStateEnabled();
+        if (!listen) {
+            return;
+        }
+        window.removeEventListener('popstate', this._boundPopState);
+        window.addEventListener('popstate', this._boundPopState);
+    },
+
+    async _handlePopState() {
+        if (!this._isRemote) {
+            return;
+        }
+
+        this._remoteParams = this._getInitialRemoteParams();
+        this._sortState = this._getInitialSortState();
+        if (this._sortable) {
+            this._sortable.setState({
+                sorts: this._sortState.sorts,
+            });
+        }
+
+        this._syncControlsFromState();
+
+        const page = this._getInitialPage();
+        const perPage = this._getInitialPerPage();
+        this._pageState = { page, perPage };
+        if (this._pagination) {
+            this._pagination.setMeta({
+                page,
+                perPage,
+            });
+        }
+
+        const filtersRequestMeta = this._getFiltersRequestMetaIfActive();
+        await this._loadRemotePage(page, perPage, null, filtersRequestMeta);
+    },
+
+    _syncControlsFromState() {
+        const searchParam = this._getSearchParamName();
+        const searchSelector = this._getSearchInputSelector();
+        if (searchSelector) {
+            const input = this._getSearchInputNode(searchSelector);
+            if (input) {
+                input.value = String(this._remoteParams[searchParam] || '');
+            }
+        }
+
+        if (this._filters && typeof this._filters.setValues === 'function') {
+            this._filters.setValues(this._getInitialFilterValues(), { emit: false });
+        }
+    },
+
+    _isUrlStatePopStateEnabled() {
+        const attr = this._element.getAttribute('data-filters-urlstate-listen-popstate');
+        return normalizeEnabledFlag(attr, true);
+    },
+
+    _getInitialRemoteParams() {
+        const requestOptions = this._params.request || {};
+        const requestParams = requestOptions.params || {};
+        const nextParams = {};
+        const reserved = new Set(['page', 'per_page', 'sort', 'dir']);
+
+        Object.keys(requestParams).forEach((key) => {
+            if (reserved.has(key)) {
+                return;
+            }
+            const value = requestParams[key];
+            if (value === undefined || value === null || value === '') {
+                return;
+            }
+            nextParams[key] = value;
+        });
+
+        if (!this._isFiltersUrlStateEnabled() || !this._isFiltersUrlStateReadOnInit()) {
+            return nextParams;
+        }
+
+        const config = this._getFiltersUrlStateConfig();
+        const prefix = this._getFiltersUrlPrefix();
+        const urlParams = this._getUrlParams();
+        const searchParam = this._getSearchParamName();
+        const filterFields = this._getFilterFieldKeys();
+
+        if (searchParam && urlParams.has(searchParam)) {
+            const value = String(urlParams.get(searchParam) || '').trim();
+            if (value) {
+                nextParams[searchParam] = value;
+            } else {
+                delete nextParams[searchParam];
+            }
+        }
+
+        filterFields.forEach((field) => {
+            const valueKey = this._prefixFilterParamKey(field, prefix);
+            const operatorKey = this._prefixFilterParamKey(`${field}_op`, prefix);
+            if (urlParams.has(valueKey)) {
+                const value = String(urlParams.get(valueKey) || '').trim();
+                if (value) {
+                    nextParams[field] = value.includes(',') ? value.split(',').map((item) => String(item || '').trim()).filter(Boolean) : value;
+                } else {
+                    delete nextParams[field];
+                }
+            }
+            if (urlParams.has(operatorKey)) {
+                const operator = String(urlParams.get(operatorKey) || '').trim();
+                if (operator) {
+                    nextParams[`${field}_op`] = operator;
+                } else {
+                    delete nextParams[`${field}_op`];
+                }
+            }
+        });
+
+        const sortKey = String(config.sortKey || 'sort');
+        if (urlParams.has(sortKey)) {
+            const rawSort = String(urlParams.get(sortKey) || '').trim();
+            if (rawSort) {
+                const items = rawSort.split(',').map((item) => String(item || '').trim()).filter(Boolean);
+                const fields = [];
+                const dirs = [];
+                items.forEach((item) => {
+                    const parts = item.split(':').map((part) => String(part || '').trim()).filter(Boolean);
+                    if (!parts.length) {
+                        return;
+                    }
+                    fields.push(parts[0]);
+                    dirs.push(parts[1] === 'desc' ? 'desc' : 'asc');
+                });
+                if (fields.length) {
+                    nextParams.sort = fields.join(',');
+                    nextParams.dir = dirs.join(',');
+                }
+            }
+        }
+
+        this._emitAction('urlstateread', {
+            state: Object.assign({}, nextParams),
+        });
+
+        return nextParams;
+    },
+
+    _prefixFilterParamKey(key, prefix) {
+        const rawKey = String(key || '').trim();
+        if (!rawKey) {
+            return '';
+        }
+        const rawPrefix = String(prefix || '').trim();
+        if (!rawPrefix || rawKey.startsWith(rawPrefix)) {
+            return rawKey;
+        }
+        return `${rawPrefix}${rawKey}`;
+    },
+
+    _getUrlParams() {
+        try {
+            return new URLSearchParams(window.location.search || '');
+        } catch (error) {
+            this._emitAction('urlstateerror', {
+                source: 'read',
+                error,
+            });
+            return new URLSearchParams();
+        }
+    },
+
+    _getSearchParamName() {
+        const searchOptions = this._params.search || {};
+        const attrParam = this._element.getAttribute('data-search-param') || '';
+        return String(searchOptions.param || attrParam || 'q').trim() || 'q';
+    },
+
+    _getFilterFieldKeys() {
+        const form = this._getFiltersFormNode();
+        if (!form) {
+            return [];
+        }
+
+        if (Array.isArray(this._filterParamKeysCache)) {
+            return this._filterParamKeysCache.slice();
+        }
+
+        const options = this._params.filters || {};
+        const fieldAttr = String(options.fieldAttr || 'data-filter-field').trim() || 'data-filter-field';
+        const unique = new Set();
+        Array.from(form.querySelectorAll(`[${fieldAttr}]`)).forEach((node) => {
+            const key = String(node.getAttribute(fieldAttr) || '').trim();
+            if (key) {
+                unique.add(key);
+            }
+        });
+        this._filterParamKeysCache = Array.from(unique);
+        return this._filterParamKeysCache.slice();
+    },
+
+    _getInitialFilterValues() {
+        const keys = this._getFilterFieldKeys();
+        if (!keys.length) {
+            return {};
+        }
+        const values = {};
+        keys.forEach((key) => {
+            if (Object.prototype.hasOwnProperty.call(this._remoteParams, key)) {
+                values[key] = this._remoteParams[key];
+            }
+            if (Object.prototype.hasOwnProperty.call(this._remoteParams, `${key}_op`)) {
+                values[`${key}_op`] = this._remoteParams[`${key}_op`];
+            }
+        });
+        return values;
+    },
+
+    _getFiltersFormSelector() {
+        const filterOptions = this._params.filters || {};
+        if (typeof filterOptions.form === 'string') {
+            return String(filterOptions.form).trim();
+        }
+        const attrSelector = this._element.getAttribute('data-filters-form') || '';
+        return String(attrSelector).trim();
+    },
+
+    _getFiltersFormNode() {
+        const filterOptions = this._params.filters || {};
+        const optionForm = filterOptions.form;
+        if (optionForm && optionForm.nodeType === 1) {
+            const shouldRefreshByNode = this._filtersFormCacheNode !== optionForm
+                || this._filtersFormCacheSelector !== '';
+            if (shouldRefreshByNode) {
+                this._filtersFormCacheSelector = '';
+                this._filtersFormCacheNode = optionForm;
+                this._filterParamKeysCache = null;
+            }
+            if (!optionForm.isConnected) {
+                return null;
+            }
+            return this._filtersFormCacheNode;
+        }
+
+        const selector = this._getFiltersFormSelector();
+        if (!selector) {
+            this._filtersFormCacheSelector = '';
+            this._filtersFormCacheNode = null;
+            this._filterParamKeysCache = null;
+            return null;
+        }
+        const shouldRefresh = this._filtersFormCacheSelector !== selector
+            || !this._filtersFormCacheNode
+            || !this._filtersFormCacheNode.isConnected;
+        if (shouldRefresh) {
+            this._filtersFormCacheSelector = selector;
+            this._filtersFormCacheNode = safeQuerySelector(selector);
+            this._filterParamKeysCache = null;
+        }
+        return this._filtersFormCacheNode;
+    },
+
+    _getFiltersUrlStateConfig() {
+        const filters = this._params.filters || {};
+        const urlState = filters.urlState && typeof filters.urlState === 'object'
+            ? filters.urlState
+            : {};
+        return urlState;
+    },
+
+    _getFiltersUrlPrefix() {
+        const config = this._getFiltersUrlStateConfig();
+        const attr = this._element.getAttribute('data-filters-urlstate-prefix');
+        const raw = attr !== null ? attr : config.paramPrefix;
+        return String(raw || 'f.').trim() || 'f.';
+    },
+
+    _isFiltersUrlStateEnabled() {
+        const config = this._getFiltersUrlStateConfig();
+        const attr = this._element.getAttribute('data-filters-urlstate-enable');
+        const raw = attr !== null ? attr : config.enable;
+        return normalizeBooleanOption(raw, false);
+    },
+
+    _isFiltersUrlStateReadOnInit() {
+        const config = this._getFiltersUrlStateConfig();
+        const attr = this._element.getAttribute('data-filters-urlstate-read-on-init');
+        const raw = attr !== null ? attr : config.readOnInit;
+        return normalizeEnabledFlag(raw, true);
+    },
+
+    _isFiltersUrlStateWriteOnChange() {
+        const config = this._getFiltersUrlStateConfig();
+        const attr = this._element.getAttribute('data-filters-urlstate-write-on-change');
+        const raw = attr !== null ? attr : config.writeOnChange;
+        return normalizeEnabledFlag(raw, true);
+    },
+};
+
+export default tableUrlStateMethods;