ami/tl-vikunja
1
0
Fork 0
Code

feat(filters): highlight label colors in filter

Browse Source
This commit is contained in:
kolaente 2024-03-09 18:58:59 +01:00
parent 084a62e835
commit b874b02412
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/project/partials/FilterInput.vue
View File

@ -18,7 +18,7 @@ import {
AVAILABLE_FILTER_FIELDS, AVAILABLE_FILTER_FIELDS,
FILTER_JOIN_OPERATOR, FILTER_JOIN_OPERATOR,
FILTER_OPERATORS, FILTER_OPERATORS,
FILTER_OPERATORS_REGEX, FILTER_OPERATORS_REGEX, LABEL_FIELDS,
} from '@/helpers/filters' } from '@/helpers/filters'
const { const {
@ -99,16 +99,29 @@ const highlightedFilterQuery = computed(() => {
return `${f} ${token} <span class="filter-query__assignee_value">${value}<span>` return `${f} ${token} <span class="filter-query__assignee_value">${value}<span>`
}) })
}) })
FILTER_OPERATORS
.map(o => ` ${escapeHtml(o)} `)
.forEach(o => {
highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
})
FILTER_JOIN_OPERATOR FILTER_JOIN_OPERATOR
.map(o => escapeHtml(o)) .map(o => escapeHtml(o))
.forEach(o => { .forEach(o => {
highlighted = highlighted.replaceAll(o, `<span class="filter-query__join-operator">${o}</span>`) highlighted = highlighted.replaceAll(o, `<span class="filter-query__join-operator">${o}</span>`)
}) })
LABEL_FIELDS
.forEach(f => {
const pattern = new RegExp(f + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig')
highlighted = highlighted.replaceAll(pattern, (match, token, start, value) => {
if (typeof value === 'undefined') {
value = ''
}
const label = labelStore.getLabelsByExactTitles([value])[0] || undefined
return `${f} ${token} <span class="filter-query__label_value" style="background-color: ${label?.hexColor}; color: ${label?.textColor}">${label?.title ?? value}<span>`
})
})
FILTER_OPERATORS
.map(o => ` ${escapeHtml(o)} `)
.forEach(o => {
highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
})
AVAILABLE_FILTER_FIELDS.forEach(f => { AVAILABLE_FILTER_FIELDS.forEach(f => {
highlighted = highlighted.replaceAll(f, `<span class="filter-query__field">${f}</span>`) highlighted = highlighted.replaceAll(f, `<span class="filter-query__field">${f}</span>`)
}) })
@ -286,7 +299,7 @@ function autocompleteSelect(value) {
color: transparent; color: transparent;
} }
&.filter-query__assignee_value { &.filter-query__assignee_value, &.filter-query__label_value {
border-radius: $radius; border-radius: $radius;
background-color: var(--grey-200); background-color: var(--grey-200);
color: var(--grey-700); color: var(--grey-700);