feat(filters): show user name and avatar for assignee filters
This commit is contained in:
parent
388a3a68ba
commit
571bcf8996
|
@ -2,6 +2,9 @@
|
||||||
import {computed, nextTick, ref, watch} from 'vue'
|
import {computed, nextTick, ref, watch} from 'vue'
|
||||||
import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
|
import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
|
||||||
import DatepickerWithValues from '@/components/date/datepickerWithValues.vue'
|
import DatepickerWithValues from '@/components/date/datepickerWithValues.vue'
|
||||||
|
import UserService from "@/services/user";
|
||||||
|
import {getAvatarUrl, getDisplayName} from "@/models/user";
|
||||||
|
import {createRandomID} from "@/helpers/randomId";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
modelValue,
|
modelValue,
|
||||||
|
@ -23,11 +26,18 @@ watch(
|
||||||
{immediate: true},
|
{immediate: true},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const userService = new UserService()
|
||||||
|
|
||||||
const dateFields = [
|
const dateFields = [
|
||||||
'dueDate',
|
'dueDate',
|
||||||
'startDate',
|
'startDate',
|
||||||
'endDate',
|
'endDate',
|
||||||
'doneAt',
|
'doneAt',
|
||||||
|
'reminders',
|
||||||
|
]
|
||||||
|
|
||||||
|
const assigneeFields = [
|
||||||
|
'assignees',
|
||||||
]
|
]
|
||||||
|
|
||||||
const availableFilterFields = [
|
const availableFilterFields = [
|
||||||
|
@ -35,10 +45,9 @@ const availableFilterFields = [
|
||||||
'priority',
|
'priority',
|
||||||
'usePriority',
|
'usePriority',
|
||||||
'percentDone',
|
'percentDone',
|
||||||
'reminders',
|
|
||||||
'assignees',
|
|
||||||
'labels',
|
'labels',
|
||||||
...dateFields,
|
...dateFields,
|
||||||
|
...assigneeFields,
|
||||||
]
|
]
|
||||||
|
|
||||||
const filterOperators = [
|
const filterOperators = [
|
||||||
|
@ -81,17 +90,51 @@ function unEscapeHtml(unsafe: string): string {
|
||||||
const highlightedFilterQuery = computed(() => {
|
const highlightedFilterQuery = computed(() => {
|
||||||
let highlighted = escapeHtml(filterQuery.value)
|
let highlighted = escapeHtml(filterQuery.value)
|
||||||
dateFields
|
dateFields
|
||||||
.map(o => escapeHtml(o))
|
|
||||||
.forEach(o => {
|
.forEach(o => {
|
||||||
const pattern = new RegExp(o + '\\s*(<|>|<=|>=|=|!=)\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig');
|
const pattern = new RegExp(o + '\\s*(<|>|<=|>=|=|!=)\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig');
|
||||||
highlighted = highlighted.replaceAll(pattern, (match, token, start, value, position, last) => {
|
highlighted = highlighted.replaceAll(pattern, (match, token, start, value, position) => {
|
||||||
console.log({position, last})
|
|
||||||
if (typeof value === 'undefined') {
|
if (typeof value === 'undefined') {
|
||||||
value = ''
|
value = ''
|
||||||
}
|
}
|
||||||
return `${o} ${token} <button class="button is-primary filter-query__date_value" data-position="${position}">${value}</button><span class="filter-query__date_value_placeholder">${value}</span>`
|
return `${o} ${token} <button class="button is-primary filter-query__date_value" data-position="${position}">${value}</button><span class="filter-query__date_value_placeholder">${value}</span>`
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
assigneeFields
|
||||||
|
.forEach(f => {
|
||||||
|
const pattern = new RegExp(f + '\\s*(<|>|<=|>=|=|!=)\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig');
|
||||||
|
highlighted = highlighted.replaceAll(pattern, (match, token, start, value) => {
|
||||||
|
if (typeof value === 'undefined') {
|
||||||
|
value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = createRandomID(32)
|
||||||
|
|
||||||
|
userService.getAll({}, {s: value}).then(users => {
|
||||||
|
if (users.length > 0) {
|
||||||
|
const displayName = getDisplayName(users[0])
|
||||||
|
const nameTag = document.createElement('span')
|
||||||
|
nameTag.innerText = displayName
|
||||||
|
|
||||||
|
const avatar = document.createElement('img')
|
||||||
|
avatar.src = getAvatarUrl(users[0], 20)
|
||||||
|
avatar.height = 20
|
||||||
|
avatar.width = 20
|
||||||
|
avatar.alt = displayName
|
||||||
|
|
||||||
|
// TODO: caching
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
const assigneeValue = document.getElementById(id)
|
||||||
|
assigneeValue.innerText = ''
|
||||||
|
assigneeValue?.appendChild(avatar)
|
||||||
|
assigneeValue?.appendChild(nameTag)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return `${f} ${token} <span class="filter-query__assignee_value" id="${id}">${value}<span>`
|
||||||
|
})
|
||||||
|
})
|
||||||
filterOperators
|
filterOperators
|
||||||
.map(o => ` ${escapeHtml(o)} `)
|
.map(o => ` ${escapeHtml(o)} `)
|
||||||
.forEach(o => {
|
.forEach(o => {
|
||||||
|
@ -194,6 +237,19 @@ function updateDateInQuery(newDate: string) {
|
||||||
padding: .125rem .25rem;
|
padding: .125rem .25rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.filter-query__assignee_value {
|
||||||
|
padding: .125rem .25rem;
|
||||||
|
border-radius: $radius;
|
||||||
|
background-color: var(--grey-200);
|
||||||
|
color: var(--grey-700);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
margin-right: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.filter-query__date_value {
|
button.filter-query__date_value {
|
||||||
|
|
Loading…
Reference in New Issue