diff --git a/lxl-web/src/lib/styles/lxlquery.css b/lxl-web/src/lib/styles/lxlquery.css index a3f50a21a..82bfef750 100644 --- a/lxl-web/src/lib/styles/lxlquery.css +++ b/lxl-web/src/lib/styles/lxlquery.css @@ -29,8 +29,9 @@ } .invalid > .lxl-qualifier-key { - text-decoration: underline 2px solid; - text-decoration-color: rgba(255, 0, 0, 0.326); + text-decoration: underline 1px solid; + text-decoration-color: rgba(255, 0, 0, 0.75); + text-decoration-style: wavy; } .atomic { diff --git a/lxl-web/src/lib/types/search.ts b/lxl-web/src/lib/types/search.ts index 6256deb65..e92bad282 100644 --- a/lxl-web/src/lib/types/search.ts +++ b/lxl-web/src/lib/types/search.ts @@ -74,6 +74,7 @@ export interface DisplayMapping { label?: string; operator: keyof typeof SearchOperators; property?: string; + invalid?: string; } export interface PartialCollectionView { diff --git a/lxl-web/src/lib/utils/getLabelsFromMapping.svelte.ts b/lxl-web/src/lib/utils/getLabelsFromMapping.svelte.ts index d4d9f4d85..bddd0a4a5 100644 --- a/lxl-web/src/lib/utils/getLabelsFromMapping.svelte.ts +++ b/lxl-web/src/lib/utils/getLabelsFromMapping.svelte.ts @@ -13,6 +13,7 @@ function getLabelFromMappings( const keyLabel = suggestLabels.keyLabel || pageLabels.keyLabel; const valueLabel = suggestLabels.valueLabel || pageLabels.valueLabel; + const invalid = suggestLabels.invalid || pageLabels.invalid; // only page data have 'up' links we can use const removeLink = pageLabels.keyLabel ? pageLabels.removeLink : undefined; @@ -22,7 +23,7 @@ function getLabelFromMappings( prevSuggestMapping = suggestMapping; } - return { keyLabel, valueLabel, removeLink }; + return { keyLabel, valueLabel, removeLink, invalid }; } function iterateMapping( @@ -33,6 +34,7 @@ function iterateMapping( let keyLabel: string | undefined; let valueLabel: string | undefined; let removeLink: string | undefined; + let invalid: boolean = false; if (mapping && Array.isArray(mapping)) { _iterate(mapping); @@ -52,11 +54,13 @@ function iterateMapping( // only show remove btn for pills that can't be edited removeLink = el.up?.['@id']; } + } else if (el.invalid === key) { + invalid = true; } }); } } - return { keyLabel, valueLabel, removeLink }; + return { keyLabel, valueLabel, removeLink, invalid }; } export default getLabelFromMappings; diff --git a/lxl-web/src/lib/utils/search.ts b/lxl-web/src/lib/utils/search.ts index 139de61fd..ad241592f 100644 --- a/lxl-web/src/lib/utils/search.ts +++ b/lxl-web/src/lib/utils/search.ts @@ -117,6 +117,7 @@ export function displayMappings( m.property?.['@id']?.replace('https://id.kb.se/vocab/', '') || '', //TODO replace with something better operator, + ...(m.property?.['@type'] === '_Invalid' && { invalid: m.property?.label }), ...('up' in m && { up: replacePath(m.up as Link, usePath) }) } as DisplayMapping; } else if (operator && operator in m && Array.isArray(m[operator])) { diff --git a/packages/supersearch/README.md b/packages/supersearch/README.md index cd5c55ea4..2e0f2609e 100644 --- a/packages/supersearch/README.md +++ b/packages/supersearch/README.md @@ -35,7 +35,7 @@ To use `supersearch` in a non-Svelte project ... Supersearch also exports a `lxlQualifierPlugin` that can be used (passed to the extensions prop) if you want atomic, stylable, removable, labeled pills from some key-value pairs in your editor. This requires: - Your language exporting `Qualifier` nodes consisting of `QualifierKey`, `QualifierOperator` and `QualifierValue` (i.e `key:value`). -- Your pass a function of type `GetLabelFunction`, returning labels to be displayed and an optional remove link. +- Passing a function of type `GetLabelFunction`, returning labels to be displayed, an optional remove link and an optional `invalid` flag, which enables styling of invalid queries. ## Developing diff --git a/packages/supersearch/src/lib/extensions/lxlQualifierPlugin/index.ts b/packages/supersearch/src/lib/extensions/lxlQualifierPlugin/index.ts index 25339e9e6..2c4e293c5 100644 --- a/packages/supersearch/src/lib/extensions/lxlQualifierPlugin/index.ts +++ b/packages/supersearch/src/lib/extensions/lxlQualifierPlugin/index.ts @@ -26,6 +26,7 @@ export type GetLabelFunction = ( keyLabel?: string; valueLabel?: string; removeLink?: string; + invalid?: boolean; }; class QualifierWidget extends WidgetType { @@ -93,7 +94,7 @@ function lxlQualifierPlugin(getLabelFn?: GetLabelFunction) { const valueNode = node.node.getChild('QualifierValue'); const value = valueNode ? doc.slice(valueNode?.from, valueNode?.to) : undefined; - const { keyLabel, valueLabel, removeLink } = getLabelFn?.(key, value) || {}; + const { keyLabel, valueLabel, removeLink, invalid } = getLabelFn?.(key, value) || {}; // Add qualifier widget if (keyLabel) { @@ -113,7 +114,7 @@ function lxlQualifierPlugin(getLabelFn?: GetLabelFunction) { const decorationRangeFrom = node.from; const decorationRangeTo = valueLabel ? node.to : operatorNode?.to; widgets.push(qualifierDecoration.range(decorationRangeFrom, decorationRangeTo)); - } else { + } else if (invalid) { // Add invalid key mark decoration const qualifierMark = Decoration.mark({ class: 'invalid',