Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(supersearch): Implement the _Invalid type (LWS-287) #1196

Merged
merged 1 commit into from
Jan 8, 2025
Merged

fix(supersearch): Implement the _Invalid type (LWS-287) #1196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions lxl-web/src/lib/styles/lxlquery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions lxl-web/src/lib/types/search.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export interface DisplayMapping {
label?: string;
operator: keyof typeof SearchOperators;
property?: string;
invalid?: string;
}

export interface PartialCollectionView {
Expand Down
8 changes: 6 additions & 2 deletions lxl-web/src/lib/utils/getLabelsFromMapping.svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -22,7 +23,7 @@ function getLabelFromMappings(
prevSuggestMapping = suggestMapping;
}

return { keyLabel, valueLabel, removeLink };
return { keyLabel, valueLabel, removeLink, invalid };
}

function iterateMapping(
Expand All @@ -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);
Expand All @@ -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;
1 change: 1 addition & 0 deletions lxl-web/src/lib/utils/search.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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])) {
Expand Down
2 changes: 1 addition & 1 deletion packages/supersearch/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 3 additions & 2 deletions packages/supersearch/src/lib/extensions/lxlQualifierPlugin/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export type GetLabelFunction = (
keyLabel?: string;
valueLabel?: string;
removeLink?: string;
invalid?: boolean;
};

class QualifierWidget extends WidgetType {
Expand Down Expand Up @@ -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) {
Expand All @@ -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',
Expand Down
Loading