vgapp 1.4.8 → 1.5.0

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

@@ -1,243 +0,0 @@
-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

@@ -1,444 +0,0 @@
-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;