refactor: consolidate JS toggle components, grid query parsers, and add tests
JS components: migrate app-custom-field-options-toggle, app-color-default-toggle, and app-settings-telemetry to shared conditional-controls factory/utility, removing duplicated syncControlState logic and init boilerplate. grid.php: extract gridQueryCsvInput() to DRY up 3 CSV parsers, simplify multi_csv handler via gridNormalizeLabelList, delegate order type to gridQueryEnum. Tests: add 23 SearchQueryNormalizer tests (LIKE escaping, wildcards, Unicode) and 7 additional Crypto edge-case tests (empty input, missing fields, special chars, binary content, truncation). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -269,26 +269,7 @@ function gridBuildToolbarFilterState(array $toolbarSchema, array $filterState):
|
|||||||
$value = array_key_exists($key, $filterState) ? $filterState[$key] : $default;
|
$value = array_key_exists($key, $filterState) ? $filterState[$key] : $default;
|
||||||
|
|
||||||
if ($type === 'multi_csv') {
|
if ($type === 'multi_csv') {
|
||||||
if (is_array($value)) {
|
$state[$key] = array_values(array_unique(gridNormalizeLabelList($value, ',')));
|
||||||
$items = array_values(array_filter(
|
|
||||||
array_map(static fn (mixed $item): string => trim((string) $item), $value),
|
|
||||||
static fn (string $item): bool => $item !== ''
|
|
||||||
));
|
|
||||||
$state[$key] = array_values(array_unique($items));
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
$text = trim((string) $value);
|
|
||||||
if ($text === '') {
|
|
||||||
$state[$key] = [];
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
$items = array_values(array_filter(
|
|
||||||
array_map(static fn (string $item): string => trim($item), explode(',', $text)),
|
|
||||||
static fn (string $item): bool => $item !== ''
|
|
||||||
));
|
|
||||||
$state[$key] = array_values(array_unique($items));
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -614,9 +595,7 @@ function gridParseFilters(array $query, array $schema): array
|
|||||||
(array) ($rule['allowed'] ?? [])
|
(array) ($rule['allowed'] ?? [])
|
||||||
), static fn (string $item): bool => $item !== ''));
|
), static fn (string $item): bool => $item !== ''));
|
||||||
$default = (string) ($rule['default'] ?? ($allowed[0] ?? ''));
|
$default = (string) ($rule['default'] ?? ($allowed[0] ?? ''));
|
||||||
$parsed[$key] = in_array(trim((string) ($query[$source] ?? $default)), $allowed, true)
|
$parsed[$key] = gridQueryEnum($query, $source, $allowed, $default);
|
||||||
? trim((string) ($query[$source] ?? $default))
|
|
||||||
: $default;
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -719,6 +698,28 @@ function gridQueryEnum(array $query, string $key, array $allowed, string $defaul
|
|||||||
return in_array($value, $allowed, true) ? $value : $default;
|
return in_array($value, $allowed, true) ? $value : $default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Extract raw items from a comma-separated or array query parameter.
|
||||||
|
*
|
||||||
|
* @return list<mixed>
|
||||||
|
*/
|
||||||
|
function gridQueryCsvInput(array $query, string $key): array
|
||||||
|
{
|
||||||
|
$value = $query[$key] ?? '';
|
||||||
|
if (is_string($value)) {
|
||||||
|
return $value === '' ? [] : explode(',', $value);
|
||||||
|
}
|
||||||
|
if (is_array($value)) {
|
||||||
|
$items = [];
|
||||||
|
array_walk_recursive($value, static function (mixed $item) use (&$items): void {
|
||||||
|
$items[] = $item;
|
||||||
|
});
|
||||||
|
return $items;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Normalize comma-separated positive IDs from query params.
|
* Normalize comma-separated positive IDs from query params.
|
||||||
*
|
*
|
||||||
@@ -730,15 +731,7 @@ function gridQueryCsvIds(array $query, string $key, int $max = 200): array
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
$value = $query[$key] ?? '';
|
$items = gridQueryCsvInput($query, $key);
|
||||||
$items = [];
|
|
||||||
if (is_string($value)) {
|
|
||||||
$items = $value === '' ? [] : explode(',', $value);
|
|
||||||
} elseif (is_array($value)) {
|
|
||||||
array_walk_recursive($value, static function (mixed $item) use (&$items): void {
|
|
||||||
$items[] = $item;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$ids = [];
|
$ids = [];
|
||||||
$seen = [];
|
$seen = [];
|
||||||
@@ -768,15 +761,7 @@ function gridQueryCsvUuids(array $query, string $key, int $max = 200): array
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
$value = $query[$key] ?? '';
|
$items = gridQueryCsvInput($query, $key);
|
||||||
$items = [];
|
|
||||||
if (is_string($value)) {
|
|
||||||
$items = $value === '' ? [] : explode(',', $value);
|
|
||||||
} elseif (is_array($value)) {
|
|
||||||
array_walk_recursive($value, static function (mixed $item) use (&$items): void {
|
|
||||||
$items[] = $item;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$uuids = [];
|
$uuids = [];
|
||||||
$seen = [];
|
$seen = [];
|
||||||
@@ -806,15 +791,7 @@ function gridQueryCsvStrings(array $query, string $key, int $max = 200, ?callabl
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
$value = $query[$key] ?? '';
|
$items = gridQueryCsvInput($query, $key);
|
||||||
$items = [];
|
|
||||||
if (is_string($value)) {
|
|
||||||
$items = $value === '' ? [] : explode(',', $value);
|
|
||||||
} elseif (is_array($value)) {
|
|
||||||
array_walk_recursive($value, static function (mixed $item) use (&$items): void {
|
|
||||||
$items[] = $item;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$result = [];
|
$result = [];
|
||||||
$seen = [];
|
$seen = [];
|
||||||
|
|||||||
@@ -67,4 +67,58 @@ final class CryptoTest extends TestCase
|
|||||||
$this->expectExceptionMessage('malformed');
|
$this->expectExceptionMessage('malformed');
|
||||||
Crypto::decryptString($encrypted);
|
Crypto::decryptString($encrypted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function testDecryptThrowsOnEmptyString(): void
|
||||||
|
{
|
||||||
|
$this->expectException(\RuntimeException::class);
|
||||||
|
Crypto::decryptString('');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testDecryptThrowsOnMissingPayloadFields(): void
|
||||||
|
{
|
||||||
|
// Valid base64 wrapping valid JSON, but missing required fields.
|
||||||
|
$payload = base64_encode(json_encode(['v' => 1]));
|
||||||
|
|
||||||
|
$this->expectException(\RuntimeException::class);
|
||||||
|
$this->expectExceptionMessage('malformed');
|
||||||
|
Crypto::decryptString($payload);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testRoundTripWithSpecialCharacters(): void
|
||||||
|
{
|
||||||
|
$values = [
|
||||||
|
'unicode: Ünterström ñ 日本語',
|
||||||
|
"newlines:\nand\ttabs",
|
||||||
|
'json-like: {"key": "value"}',
|
||||||
|
str_repeat('x', 10000),
|
||||||
|
];
|
||||||
|
|
||||||
|
foreach ($values as $plaintext) {
|
||||||
|
$encrypted = Crypto::encryptString($plaintext);
|
||||||
|
self::assertSame($plaintext, Crypto::decryptString($encrypted), "Round-trip failed for: " . substr($plaintext, 0, 40));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testRoundTripWithBinaryLikeContent(): void
|
||||||
|
{
|
||||||
|
$plaintext = "null-bytes:\x00\x01\x02 and high-bytes:\xFE\xFF";
|
||||||
|
$encrypted = Crypto::encryptString($plaintext);
|
||||||
|
|
||||||
|
self::assertSame($plaintext, Crypto::decryptString($encrypted));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testDecryptThrowsOnNonBase64Input(): void
|
||||||
|
{
|
||||||
|
$this->expectException(\RuntimeException::class);
|
||||||
|
Crypto::decryptString('not!valid@base64###');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testDecryptThrowsOnTruncatedPayload(): void
|
||||||
|
{
|
||||||
|
$encrypted = Crypto::encryptString('secret');
|
||||||
|
$truncated = substr($encrypted, 0, (int) (strlen($encrypted) / 2));
|
||||||
|
|
||||||
|
$this->expectException(\RuntimeException::class);
|
||||||
|
Crypto::decryptString($truncated);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
137
tests/Unit/Support/SearchQueryNormalizerTest.php
Normal file
137
tests/Unit/Support/SearchQueryNormalizerTest.php
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace MintyPHP\Tests\Unit\Support;
|
||||||
|
|
||||||
|
use MintyPHP\Support\Search\SearchQueryNormalizer;
|
||||||
|
use PHPUnit\Framework\Attributes\DataProvider;
|
||||||
|
use PHPUnit\Framework\TestCase;
|
||||||
|
|
||||||
|
final class SearchQueryNormalizerTest extends TestCase
|
||||||
|
{
|
||||||
|
// ── normalizeLikeQuery ──
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryReturnsEmptyForBlankInput(): void
|
||||||
|
{
|
||||||
|
self::assertSame('', SearchQueryNormalizer::normalizeLikeQuery(''));
|
||||||
|
self::assertSame('', SearchQueryNormalizer::normalizeLikeQuery(' '));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryWrapsWithWildcards(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%hello%', SearchQueryNormalizer::normalizeLikeQuery('hello'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryDoesNotDoubleWrapLeadingWildcard(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%hello%', SearchQueryNormalizer::normalizeLikeQuery('*hello'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryDoesNotDoubleWrapTrailingWildcard(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%hello%', SearchQueryNormalizer::normalizeLikeQuery('hello*'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryDoesNotDoubleWrapBothWildcards(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%hello%', SearchQueryNormalizer::normalizeLikeQuery('*hello*'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryEscapesBackslash(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%foo\\\\bar%', SearchQueryNormalizer::normalizeLikeQuery('foo\\bar'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryEscapesUnderscore(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%foo\\_bar%', SearchQueryNormalizer::normalizeLikeQuery('foo_bar'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryConvertsAsterisksToPercent(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%foo%bar%', SearchQueryNormalizer::normalizeLikeQuery('foo*bar'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryCombinesEscapingAndWildcards(): void
|
||||||
|
{
|
||||||
|
// Input: "a_b*c\d" → underscores escaped, * becomes %, backslash escaped, wrapped
|
||||||
|
self::assertSame('%a\\_b%c\\\\d%', SearchQueryNormalizer::normalizeLikeQuery('a_b*c\\d'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryTrimsWhitespace(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%search%', SearchQueryNormalizer::normalizeLikeQuery(' search '));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQuerySingleCharacter(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%x%', SearchQueryNormalizer::normalizeLikeQuery('x'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryOnlyWildcard(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%', SearchQueryNormalizer::normalizeLikeQuery('*'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryMultipleConsecutiveWildcards(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%a%%%b%', SearchQueryNormalizer::normalizeLikeQuery('a***b'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeLikeQueryUnicodeInput(): void
|
||||||
|
{
|
||||||
|
self::assertSame('%Ünterström%', SearchQueryNormalizer::normalizeLikeQuery('Ünterström'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── normalizeScoreQuery ──
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryReturnsEmptyForBlankInput(): void
|
||||||
|
{
|
||||||
|
self::assertSame('', SearchQueryNormalizer::normalizeScoreQuery(''));
|
||||||
|
self::assertSame('', SearchQueryNormalizer::normalizeScoreQuery(' '));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryStripsAsterisks(): void
|
||||||
|
{
|
||||||
|
self::assertSame('hello', SearchQueryNormalizer::normalizeScoreQuery('*hello*'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryStripsPercent(): void
|
||||||
|
{
|
||||||
|
self::assertSame('hello', SearchQueryNormalizer::normalizeScoreQuery('%hello%'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryStripsUnderscore(): void
|
||||||
|
{
|
||||||
|
self::assertSame('foobar', SearchQueryNormalizer::normalizeScoreQuery('foo_bar'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryStripsAllWildcardTypes(): void
|
||||||
|
{
|
||||||
|
self::assertSame('abc', SearchQueryNormalizer::normalizeScoreQuery('*a%b_c*'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryPreservesNormalText(): void
|
||||||
|
{
|
||||||
|
self::assertSame('search term', SearchQueryNormalizer::normalizeScoreQuery('search term'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryTrimsWhitespace(): void
|
||||||
|
{
|
||||||
|
self::assertSame('query', SearchQueryNormalizer::normalizeScoreQuery(' query '));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryOnlyWildcards(): void
|
||||||
|
{
|
||||||
|
self::assertSame('', SearchQueryNormalizer::normalizeScoreQuery('*%_'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryPreservesBackslash(): void
|
||||||
|
{
|
||||||
|
self::assertSame('a\\b', SearchQueryNormalizer::normalizeScoreQuery('a\\b'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testNormalizeScoreQueryUnicodeInput(): void
|
||||||
|
{
|
||||||
|
self::assertSame('Müller', SearchQueryNormalizer::normalizeScoreQuery('Müller'));
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
/**
|
/**
|
||||||
* Toggles color input between custom value and default/inherited color.
|
* Toggles color input between custom value and default/inherited color.
|
||||||
*/
|
*/
|
||||||
import { warnOnce, resolveHost } from '../core/app-dom.js';
|
import { warnOnce } from '../core/app-dom.js';
|
||||||
|
import { createConditionalToggleInit } from '../core/app-conditional-controls.js';
|
||||||
|
|
||||||
const syncToggle = (toggle, scope) => {
|
const syncToggle = (toggle, scope) => {
|
||||||
const targetSelector = toggle.dataset.colorTarget || '';
|
const targetSelector = toggle.dataset.colorTarget || '';
|
||||||
@@ -29,54 +30,39 @@ const syncToggle = (toggle, scope) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export function initColorDefaultToggle(root = document, options = {}) {
|
const initRoot = (toggle) => {
|
||||||
const host = resolveHost(root);
|
if (!(toggle instanceof HTMLInputElement)) {
|
||||||
const selector = String(options.selector || '[data-color-default-toggle]').trim() || '[data-color-default-toggle]';
|
return null;
|
||||||
const toggles = Array.from(host.querySelectorAll(selector)).filter(
|
|
||||||
(toggle) => toggle instanceof HTMLInputElement
|
|
||||||
);
|
|
||||||
if (!toggles.length) {
|
|
||||||
return { destroy: () => {} };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const cleanupFns = [];
|
const scope = document;
|
||||||
toggles.forEach((toggle) => {
|
const targetSelector = toggle.dataset.colorTarget || '';
|
||||||
if (toggle.dataset.colorDefaultToggleBound === '1') {
|
const target = targetSelector ? scope.querySelector(targetSelector) : null;
|
||||||
return;
|
if (targetSelector && !target) {
|
||||||
}
|
warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
|
||||||
toggle.dataset.colorDefaultToggleBound = '1';
|
}
|
||||||
|
|
||||||
const scope = document;
|
const onToggleChange = () => syncToggle(toggle, scope);
|
||||||
const targetSelector = toggle.dataset.colorTarget || '';
|
toggle.addEventListener('change', onToggleChange);
|
||||||
const target = targetSelector ? scope.querySelector(targetSelector) : null;
|
const cleanups = [() => toggle.removeEventListener('change', onToggleChange)];
|
||||||
if (targetSelector && !target) {
|
|
||||||
warnOnce('UI_EL_MISSING', `Missing color target: ${targetSelector}`, { module: 'color-default-toggle' });
|
|
||||||
}
|
|
||||||
|
|
||||||
const onToggleChange = () => syncToggle(toggle, scope);
|
if (target instanceof HTMLInputElement) {
|
||||||
toggle.addEventListener('change', onToggleChange);
|
const onTargetInput = () => {
|
||||||
cleanupFns.push(() => toggle.removeEventListener('change', onToggleChange));
|
if (toggle.checked) {
|
||||||
|
toggle.checked = false;
|
||||||
|
target.removeAttribute('disabled');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
target.addEventListener('input', onTargetInput);
|
||||||
|
cleanups.push(() => target.removeEventListener('input', onTargetInput));
|
||||||
|
}
|
||||||
|
|
||||||
if (target instanceof HTMLInputElement) {
|
syncToggle(toggle, scope);
|
||||||
const onTargetInput = () => {
|
return () => cleanups.forEach((fn) => fn());
|
||||||
if (toggle.checked) {
|
};
|
||||||
toggle.checked = false;
|
|
||||||
target.removeAttribute('disabled');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
target.addEventListener('input', onTargetInput);
|
|
||||||
cleanupFns.push(() => target.removeEventListener('input', onTargetInput));
|
|
||||||
}
|
|
||||||
|
|
||||||
syncToggle(toggle, scope);
|
export const initColorDefaultToggle = createConditionalToggleInit({
|
||||||
cleanupFns.push(() => {
|
rootSelector: '[data-color-default-toggle]',
|
||||||
delete toggle.dataset.colorDefaultToggleBound;
|
boundKey: 'colorDefaultToggleBound',
|
||||||
});
|
initRoot,
|
||||||
});
|
});
|
||||||
|
|
||||||
const destroy = () => {
|
|
||||||
cleanupFns.forEach((cleanup) => cleanup());
|
|
||||||
};
|
|
||||||
|
|
||||||
return { destroy };
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,35 +1,12 @@
|
|||||||
/**
|
/**
|
||||||
* Shows/hides custom field option list based on field type selection.
|
* Shows/hides custom field option list based on field type selection.
|
||||||
*/
|
*/
|
||||||
import { warnOnce, resolveHost } from '../core/app-dom.js';
|
import { warnOnce } from '../core/app-dom.js';
|
||||||
|
import { syncControlState, createConditionalToggleInit } from '../core/app-conditional-controls.js';
|
||||||
|
|
||||||
const TYPES_WITH_OPTIONS = new Set(['select', 'multiselect']);
|
const TYPES_WITH_OPTIONS = new Set(['select', 'multiselect']);
|
||||||
const FILTERABLE_TYPES = new Set(['select', 'multiselect', 'boolean', 'date']);
|
const FILTERABLE_TYPES = new Set(['select', 'multiselect', 'boolean', 'date']);
|
||||||
|
|
||||||
const syncOptionsVisibility = (source, target) => {
|
|
||||||
const selectedType = String(source.value || '').trim().toLowerCase();
|
|
||||||
const showOptions = TYPES_WITH_OPTIONS.has(selectedType);
|
|
||||||
|
|
||||||
target.hidden = !showOptions;
|
|
||||||
target.querySelectorAll('textarea, input, select').forEach((control) => {
|
|
||||||
if (!control.dataset.initialDisabled) {
|
|
||||||
control.dataset.initialDisabled = control.hasAttribute('disabled') ? '1' : '0';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!showOptions) {
|
|
||||||
control.setAttribute('disabled', 'disabled');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (control.dataset.initialDisabled === '1') {
|
|
||||||
control.setAttribute('disabled', 'disabled');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
control.removeAttribute('disabled');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const syncFilterableAvailability = (source, target) => {
|
const syncFilterableAvailability = (source, target) => {
|
||||||
const selectedType = String(source.value || '').trim().toLowerCase();
|
const selectedType = String(source.value || '').trim().toLowerCase();
|
||||||
const filterableAllowed = FILTERABLE_TYPES.has(selectedType);
|
const filterableAllowed = FILTERABLE_TYPES.has(selectedType);
|
||||||
@@ -62,63 +39,52 @@ const syncFilterableAvailability = (source, target) => {
|
|||||||
checkbox.removeAttribute('disabled');
|
checkbox.removeAttribute('disabled');
|
||||||
};
|
};
|
||||||
|
|
||||||
export function initCustomFieldOptionsToggle(root = document, options = {}) {
|
const initRoot = (source) => {
|
||||||
const host = resolveHost(root);
|
if (!(source instanceof HTMLSelectElement)) {
|
||||||
const sourceSelector = String(options.sourceSelector || '[data-custom-field-type-source]').trim() || '[data-custom-field-type-source]';
|
return null;
|
||||||
const sources = Array.from(host.querySelectorAll(sourceSelector));
|
|
||||||
if (!sources.length) {
|
|
||||||
return { destroy: () => {} };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const cleanupFns = [];
|
const group = String(source.dataset.customFieldGroup || '').trim();
|
||||||
sources.forEach((source) => {
|
if (!group) {
|
||||||
if (!(source instanceof HTMLSelectElement) || source.dataset.customFieldOptionsBound === '1') {
|
warnOnce('UI_EL_MISSING', 'Missing data-custom-field-group', { module: 'custom-field-options-toggle' });
|
||||||
return;
|
return null;
|
||||||
}
|
}
|
||||||
source.dataset.customFieldOptionsBound = '1';
|
|
||||||
|
|
||||||
const group = String(source.dataset.customFieldGroup || '').trim();
|
const target = document.querySelector(
|
||||||
if (!group) {
|
`[data-custom-field-options-target][data-custom-field-group="${group}"]`
|
||||||
warnOnce('UI_EL_MISSING', 'Missing data-custom-field-group', { module: 'custom-field-options-toggle' });
|
);
|
||||||
return;
|
if (!(target instanceof HTMLElement)) {
|
||||||
}
|
warnOnce('UI_EL_MISSING', `Missing custom field options target for group: ${group}`, {
|
||||||
|
module: 'custom-field-options-toggle',
|
||||||
const target = document.querySelector(
|
|
||||||
`[data-custom-field-options-target][data-custom-field-group="${group}"]`
|
|
||||||
);
|
|
||||||
if (!(target instanceof HTMLElement)) {
|
|
||||||
warnOnce('UI_EL_MISSING', `Missing custom field options target for group: ${group}`, {
|
|
||||||
module: 'custom-field-options-toggle',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterableTarget = document.querySelector(
|
|
||||||
`[data-custom-field-filterable-target][data-custom-field-group="${group}"]`
|
|
||||||
);
|
|
||||||
if (!(filterableTarget instanceof HTMLElement)) {
|
|
||||||
warnOnce('UI_EL_MISSING', `Missing custom field filterable target for group: ${group}`, {
|
|
||||||
module: 'custom-field-options-toggle',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange = () => {
|
|
||||||
syncOptionsVisibility(source, target);
|
|
||||||
syncFilterableAvailability(source, filterableTarget);
|
|
||||||
};
|
|
||||||
source.addEventListener('change', onChange);
|
|
||||||
cleanupFns.push(() => {
|
|
||||||
source.removeEventListener('change', onChange);
|
|
||||||
delete source.dataset.customFieldOptionsBound;
|
|
||||||
});
|
});
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
onChange();
|
const filterableTarget = document.querySelector(
|
||||||
});
|
`[data-custom-field-filterable-target][data-custom-field-group="${group}"]`
|
||||||
|
);
|
||||||
|
if (!(filterableTarget instanceof HTMLElement)) {
|
||||||
|
warnOnce('UI_EL_MISSING', `Missing custom field filterable target for group: ${group}`, {
|
||||||
|
module: 'custom-field-options-toggle',
|
||||||
|
});
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const destroy = () => {
|
const onChange = () => {
|
||||||
cleanupFns.forEach((cleanup) => cleanup());
|
const selectedType = String(source.value || '').trim().toLowerCase();
|
||||||
|
syncControlState(target, TYPES_WITH_OPTIONS.has(selectedType));
|
||||||
|
syncFilterableAvailability(source, filterableTarget);
|
||||||
};
|
};
|
||||||
|
source.addEventListener('change', onChange);
|
||||||
|
onChange();
|
||||||
|
|
||||||
return { destroy };
|
return () => {
|
||||||
}
|
source.removeEventListener('change', onChange);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initCustomFieldOptionsToggle = createConditionalToggleInit({
|
||||||
|
rootSelector: '[data-custom-field-type-source]',
|
||||||
|
boundKey: 'customFieldOptionsBound',
|
||||||
|
initRoot,
|
||||||
|
});
|
||||||
|
|||||||
@@ -2,17 +2,17 @@
|
|||||||
* Tracks settings page interactions for telemetry.
|
* Tracks settings page interactions for telemetry.
|
||||||
*/
|
*/
|
||||||
import { resolveHost } from '../core/app-dom.js';
|
import { resolveHost } from '../core/app-dom.js';
|
||||||
|
import { syncControlState } from '../core/app-conditional-controls.js';
|
||||||
|
|
||||||
export const initTelemetrySettings = (root = document, options = {}) => {
|
export const initTelemetrySettings = (root = document, options = {}) => {
|
||||||
const host = resolveHost(root);
|
const host = resolveHost(root);
|
||||||
const toggleSelector = String(options.toggleSelector || '[data-telemetry-enabled-toggle]').trim() || '[data-telemetry-enabled-toggle]';
|
const toggleSelector = String(options.toggleSelector || '[data-telemetry-enabled-toggle]').trim() || '[data-telemetry-enabled-toggle]';
|
||||||
const samplingFieldsetSelector = String(options.samplingFieldsetSelector || '[data-telemetry-sampling-fieldset]').trim() || '[data-telemetry-sampling-fieldset]';
|
const samplingFieldsetSelector = String(options.samplingFieldsetSelector || '[data-telemetry-sampling-fieldset]').trim() || '[data-telemetry-sampling-fieldset]';
|
||||||
const samplingRowSelector = String(options.samplingRowSelector || '[data-telemetry-sampling-row]').trim() || '[data-telemetry-sampling-row]';
|
const samplingRowSelector = String(options.samplingRowSelector || '[data-telemetry-sampling-row]').trim() || '[data-telemetry-sampling-row]';
|
||||||
const samplingSelectSelector = String(options.samplingSelectSelector || '[data-telemetry-sampling-select]').trim() || '[data-telemetry-sampling-select]';
|
|
||||||
|
|
||||||
const toggle = host.querySelector(toggleSelector);
|
const toggle = host.querySelector(toggleSelector);
|
||||||
const samplingFieldset = host.querySelector(samplingFieldsetSelector);
|
const samplingFieldset = host.querySelector(samplingFieldsetSelector);
|
||||||
const samplingRow = host.querySelector(samplingRowSelector);
|
const samplingRow = host.querySelector(samplingRowSelector);
|
||||||
const samplingSelect = host.querySelector(samplingSelectSelector);
|
|
||||||
|
|
||||||
if (!toggle || !samplingFieldset) {
|
if (!toggle || !samplingFieldset) {
|
||||||
return { destroy: () => {} };
|
return { destroy: () => {} };
|
||||||
@@ -20,13 +20,10 @@ export const initTelemetrySettings = (root = document, options = {}) => {
|
|||||||
|
|
||||||
const syncSamplingVisibility = () => {
|
const syncSamplingVisibility = () => {
|
||||||
const active = Boolean(toggle.checked);
|
const active = Boolean(toggle.checked);
|
||||||
samplingFieldset.hidden = !active;
|
syncControlState(samplingFieldset, active);
|
||||||
if (samplingRow) {
|
if (samplingRow instanceof HTMLElement) {
|
||||||
samplingRow.hidden = !active;
|
samplingRow.hidden = !active;
|
||||||
}
|
}
|
||||||
if (samplingSelect) {
|
|
||||||
samplingSelect.disabled = !active || toggle.disabled;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
toggle.addEventListener('change', syncSamplingVisibility);
|
toggle.addEventListener('change', syncSamplingVisibility);
|
||||||
|
|||||||
Reference in New Issue
Block a user