Compare commits
2 Commits
main
...
feature/ne
Author | SHA1 | Date |
---|---|---|
kolaente | bcfd2d5392 | |
kolaente | 8313bb8a9b |
|
@ -0,0 +1,142 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, ref, watch} from 'vue'
|
||||||
|
import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
|
||||||
|
|
||||||
|
const {
|
||||||
|
modelValue,
|
||||||
|
} = defineProps<{
|
||||||
|
modelValue: string,
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const filterQuery = ref('')
|
||||||
|
const {
|
||||||
|
textarea: filterInput,
|
||||||
|
height,
|
||||||
|
} = useAutoHeightTextarea(filterQuery)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => modelValue,
|
||||||
|
() => {
|
||||||
|
filterQuery.value = modelValue
|
||||||
|
},
|
||||||
|
{immediate: true},
|
||||||
|
)
|
||||||
|
|
||||||
|
const availableFilterFields = [
|
||||||
|
'done',
|
||||||
|
'dueDate',
|
||||||
|
'priority',
|
||||||
|
'usePriority',
|
||||||
|
'startDate',
|
||||||
|
'endDate',
|
||||||
|
'percentDone',
|
||||||
|
'reminders',
|
||||||
|
'assignees',
|
||||||
|
'labels',
|
||||||
|
]
|
||||||
|
|
||||||
|
const filterOperators = [
|
||||||
|
'!=',
|
||||||
|
'=',
|
||||||
|
'>',
|
||||||
|
'>=',
|
||||||
|
'<',
|
||||||
|
'<=',
|
||||||
|
'like',
|
||||||
|
'in',
|
||||||
|
'?=',
|
||||||
|
]
|
||||||
|
|
||||||
|
const filterJoinOperators = [
|
||||||
|
'&&',
|
||||||
|
'||',
|
||||||
|
'(',
|
||||||
|
')',
|
||||||
|
]
|
||||||
|
|
||||||
|
const highlightedFilterQuery = computed(() => {
|
||||||
|
let highlighted = escapeHtml(filterQuery.value)
|
||||||
|
filterOperators
|
||||||
|
.map(o => ` ${escapeHtml(o)} `)
|
||||||
|
.forEach(o => {
|
||||||
|
highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
|
||||||
|
})
|
||||||
|
filterJoinOperators
|
||||||
|
.map(o => escapeHtml(o))
|
||||||
|
.forEach(o => {
|
||||||
|
highlighted = highlighted.replaceAll(o, `<span class="filter-query__join-operator">${o}</span>`)
|
||||||
|
})
|
||||||
|
availableFilterFields.forEach(f => {
|
||||||
|
highlighted = highlighted.replaceAll(f, `<span class="filter-query__field">${f}</span>`)
|
||||||
|
})
|
||||||
|
return highlighted
|
||||||
|
})
|
||||||
|
|
||||||
|
function escapeHtml(unsafe: string): string {
|
||||||
|
return unsafe
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/'/g, ''')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label">{{ $t('filters.query.title') }}</label>
|
||||||
|
<div class="control filter-input">
|
||||||
|
<textarea
|
||||||
|
autocomplete="off"
|
||||||
|
autocorrect="off"
|
||||||
|
autocapitalize="off"
|
||||||
|
spellcheck="false"
|
||||||
|
v-model="filterQuery"
|
||||||
|
class="input"
|
||||||
|
ref="filterInput"
|
||||||
|
></textarea>
|
||||||
|
<div
|
||||||
|
class="filter-input-highlight"
|
||||||
|
:style="{'height': height}"
|
||||||
|
v-html="highlightedFilterQuery"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.filter-input-highlight span {
|
||||||
|
&.filter-query__field {
|
||||||
|
color: #faf594;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.filter-query__operator {
|
||||||
|
color: hsla(var(--primary-h), var(--primary-s), 80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.filter-query__join-operator {
|
||||||
|
color: hsla(var(--primary-h), var(--primary-s), 90%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.filter-input {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
position: absolute;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background: transparent !important;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-input-highlight {
|
||||||
|
height: 2.5em;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: .5em .75em;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -27,6 +27,9 @@
|
||||||
{{ $t('filters.attributes.sortAlphabetically') }}
|
{{ $t('filters.attributes.sortAlphabetically') }}
|
||||||
</fancycheckbox>
|
</fancycheckbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<FilterInput v-model="filterQuery"/>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">{{ $t('misc.search') }}</label>
|
<label class="label">{{ $t('misc.search') }}</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
|
@ -204,6 +207,7 @@ import ProjectService from '@/services/project'
|
||||||
|
|
||||||
// FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
|
// FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
|
||||||
import {getDefaultParams} from '@/composables/useTaskList'
|
import {getDefaultParams} from '@/composables/useTaskList'
|
||||||
|
import FilterInput from '@/components/project/partials/FilterInput.vue'
|
||||||
|
|
||||||
// FIXME: merge with DEFAULT_PARAMS in taskProject.js
|
// FIXME: merge with DEFAULT_PARAMS in taskProject.js
|
||||||
const DEFAULT_PARAMS = {
|
const DEFAULT_PARAMS = {
|
||||||
|
@ -217,6 +221,9 @@ const DEFAULT_PARAMS = {
|
||||||
s: '',
|
s: '',
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
|
// FIXME: use params
|
||||||
|
const filterQuery = ref('')
|
||||||
|
|
||||||
const DEFAULT_FILTERS = {
|
const DEFAULT_FILTERS = {
|
||||||
done: false,
|
done: false,
|
||||||
dueDate: '',
|
dueDate: '',
|
||||||
|
|
|
@ -71,7 +71,7 @@ const props = defineProps({
|
||||||
const emit = defineEmits(['taskAdded'])
|
const emit = defineEmits(['taskAdded'])
|
||||||
|
|
||||||
const newTaskTitle = ref('')
|
const newTaskTitle = ref('')
|
||||||
const newTaskInput = useAutoHeightTextarea(newTaskTitle)
|
const {textarea: newTaskInput} = useAutoHeightTextarea(newTaskTitle)
|
||||||
|
|
||||||
const {t} = useI18n({useScope: 'global'})
|
const {t} = useI18n({useScope: 'global'})
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
|
|
|
@ -6,6 +6,7 @@ import {debouncedWatch, tryOnMounted, useWindowSize, type MaybeRef} from '@vueus
|
||||||
export function useAutoHeightTextarea(value: MaybeRef<string>) {
|
export function useAutoHeightTextarea(value: MaybeRef<string>) {
|
||||||
const textarea = ref<HTMLTextAreaElement | null>(null)
|
const textarea = ref<HTMLTextAreaElement | null>(null)
|
||||||
const minHeight = ref(0)
|
const minHeight = ref(0)
|
||||||
|
const height = ref('')
|
||||||
|
|
||||||
// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
|
// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
|
||||||
function resize(textareaEl: HTMLTextAreaElement | null) {
|
function resize(textareaEl: HTMLTextAreaElement | null) {
|
||||||
|
@ -23,14 +24,13 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
|
||||||
|
|
||||||
textareaEl.style.minHeight = ''
|
textareaEl.style.minHeight = ''
|
||||||
textareaEl.style.height = '0'
|
textareaEl.style.height = '0'
|
||||||
const offset = textareaEl.offsetHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom)
|
height.value = textareaEl.scrollHeight + 'px'
|
||||||
const height = textareaEl.scrollHeight + offset + 'px'
|
|
||||||
|
|
||||||
textareaEl.style.height = height
|
textareaEl.style.height = height.value
|
||||||
|
|
||||||
// calculate min-height for the first time
|
// calculate min-height for the first time
|
||||||
if (!minHeight.value) {
|
if (!minHeight.value) {
|
||||||
minHeight.value = parseFloat(height)
|
minHeight.value = parseFloat(height.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
textareaEl.style.minHeight = minHeight.value.toString()
|
textareaEl.style.minHeight = minHeight.value.toString()
|
||||||
|
@ -68,5 +68,8 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
return textarea
|
return {
|
||||||
|
textarea,
|
||||||
|
height,
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -410,6 +410,9 @@
|
||||||
"edit": {
|
"edit": {
|
||||||
"title": "Edit This Saved Filter",
|
"title": "Edit This Saved Filter",
|
||||||
"success": "The filter was saved successfully."
|
"success": "The filter was saved successfully."
|
||||||
|
},
|
||||||
|
"query": {
|
||||||
|
"title": "Query"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"migrate": {
|
"migrate": {
|
||||||
|
|
Reference in New Issue