chore: format

This commit is contained in:
kolaente 2024-03-05 18:57:11 +01:00
parent ca582dd743
commit 411a3cfd99
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 17 additions and 17 deletions

View File

@ -2,9 +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 UserService from '@/services/user'
import {getAvatarUrl, getDisplayName} from "@/models/user"; import {getAvatarUrl, getDisplayName} from '@/models/user'
import {createRandomID} from "@/helpers/randomId"; import {createRandomID} from '@/helpers/randomId'
const { const {
modelValue, modelValue,
@ -84,46 +84,46 @@ function unEscapeHtml(unsafe: string): string {
.replace(/&lt;/g, '<') .replace(/&lt;/g, '<')
.replace(/&gt;/g, '>') .replace(/&gt;/g, '>')
.replace(/&quot/g, '"') .replace(/&quot/g, '"')
.replace(/&#039;/g, "'") .replace(/&#039;/g, '\'')
} }
const highlightedFilterQuery = computed(() => { const highlightedFilterQuery = computed(() => {
let highlighted = escapeHtml(filterQuery.value) let highlighted = escapeHtml(filterQuery.value)
dateFields dateFields
.forEach(o => { .forEach(o => {
const pattern = new RegExp(o + '(\\s*)(&lt;|&gt;|&lt;=|&gt;=|=|!=)(\\s*)([\'"]?)([^\'"\\s]+\\1?)?', 'ig'); const pattern = new RegExp(o + '(\\s*)(&lt;|&gt;|&lt;=|&gt;=|=|!=)(\\s*)([\'"]?)([^\'"\\s]+\\1?)?', 'ig')
highlighted = highlighted.replaceAll(pattern, (match, spacesBefore, token, spacesAfter, start, value, position) => { highlighted = highlighted.replaceAll(pattern, (match, spacesBefore, token, spacesAfter, start, value, position) => {
if (typeof value === 'undefined') { if (typeof value === 'undefined') {
value = '' value = ''
} }
return `${o}${spacesBefore}${token}${spacesAfter}<button class="is-primary filter-query__date_value" data-position="${position}">${value}</button><span class="filter-query__date_value_placeholder">${value}</span>` return `${o}${spacesBefore}${token}${spacesAfter}<button class="is-primary filter-query__date_value" data-position="${position}">${value}</button><span class="filter-query__date_value_placeholder">${value}</span>`
}) })
}) })
assigneeFields assigneeFields
.forEach(f => { .forEach(f => {
const pattern = new RegExp(f + '\\s*(&lt;|&gt;|&lt;=|&gt;=|=|!=)\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig'); const pattern = new RegExp(f + '\\s*(&lt;|&gt;|&lt;=|&gt;=|=|!=)\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig')
highlighted = highlighted.replaceAll(pattern, (match, token, start, value) => { highlighted = highlighted.replaceAll(pattern, (match, token, start, value) => {
if (typeof value === 'undefined') { if (typeof value === 'undefined') {
value = '' value = ''
} }
const id = createRandomID(32) const id = createRandomID(32)
userService.getAll({}, {s: value}).then(users => { userService.getAll({}, {s: value}).then(users => {
if (users.length > 0) { if (users.length > 0) {
const displayName = getDisplayName(users[0]) const displayName = getDisplayName(users[0])
const nameTag = document.createElement('span') const nameTag = document.createElement('span')
nameTag.innerText = displayName nameTag.innerText = displayName
const avatar = document.createElement('img') const avatar = document.createElement('img')
avatar.src = getAvatarUrl(users[0], 20) avatar.src = getAvatarUrl(users[0], 20)
avatar.height = 20 avatar.height = 20
avatar.width = 20 avatar.width = 20
avatar.alt = displayName avatar.alt = displayName
// TODO: caching // TODO: caching
nextTick(() => { nextTick(() => {
const assigneeValue = document.getElementById(id) const assigneeValue = document.getElementById(id)
assigneeValue.innerText = '' assigneeValue.innerText = ''
@ -132,7 +132,7 @@ const highlightedFilterQuery = computed(() => {
}) })
} }
}) })
return `${f} ${token} <span class="filter-query__assignee_value" id="${id}">${value}<span>` return `${f} ${token} <span class="filter-query__assignee_value" id="${id}">${value}<span>`
}) })
}) })
@ -175,12 +175,12 @@ watch(
}) })
}) })
}, },
{immediate: true} {immediate: true},
) )
function updateDateInQuery(newDate: string) { function updateDateInQuery(newDate: string) {
// Need to escape and unescape the query because the positions are based on the escaped query // Need to escape and unescape the query because the positions are based on the escaped query
let escaped = escapeHtml(filterQuery.value) let escaped = escapeHtml(filterQuery.value)
escaped = escaped escaped = escaped
.substring(0, currentDatepickerPos.value) .substring(0, currentDatepickerPos.value)
+ escaped + escaped
@ -238,7 +238,7 @@ function updateDateInQuery(newDate: string) {
display: inline-block; display: inline-block;
color: transparent; color: transparent;
} }
&.filter-query__assignee_value { &.filter-query__assignee_value {
padding: .125rem .25rem; padding: .125rem .25rem;
border-radius: $radius; border-radius: $radius;
@ -246,7 +246,7 @@ function updateDateInQuery(newDate: string) {
color: var(--grey-700); color: var(--grey-700);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
> img { > img {
margin-right: .25rem; margin-right: .25rem;
} }