fix(filters): lint
This commit is contained in:
parent
6fea5640e8
commit
4e6e0608c7
@ -91,7 +91,7 @@
|
|||||||
variant="hint-modal"
|
variant="hint-modal"
|
||||||
@close="() => showHowItWorks = false"
|
@close="() => showHowItWorks = false"
|
||||||
>
|
>
|
||||||
<DatemathHelp/>
|
<DatemathHelp />
|
||||||
</modal>
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -68,7 +68,7 @@
|
|||||||
variant="hint-modal"
|
variant="hint-modal"
|
||||||
@close="() => showHowItWorks = false"
|
@close="() => showHowItWorks = false"
|
||||||
>
|
>
|
||||||
<DatemathHelp/>
|
<DatemathHelp />
|
||||||
</modal>
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -94,6 +94,7 @@ import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: {
|
modelValue: {
|
||||||
required: false,
|
required: false,
|
||||||
|
default: null,
|
||||||
},
|
},
|
||||||
open: {
|
open: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -1,316 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {computed, nextTick, ref, watch} from 'vue'
|
|
||||||
|
|
||||||
const TAB = 9,
|
|
||||||
ENTER = 13,
|
|
||||||
ESCAPE = 27,
|
|
||||||
ARROW_UP = 38,
|
|
||||||
ARROW_DOWN = 40
|
|
||||||
|
|
||||||
type state = 'unfocused' | 'focused'
|
|
||||||
|
|
||||||
const selectedIndex = ref(0)
|
|
||||||
const state = ref<state>('unfocused')
|
|
||||||
const val = ref<string>('')
|
|
||||||
const isResizing = ref(false)
|
|
||||||
const model = defineModel<string>()
|
|
||||||
|
|
||||||
const suggestionScrollerRef = ref<HTMLInputElement | null>(null)
|
|
||||||
const containerRef = ref<HTMLInputElement | null>(null)
|
|
||||||
const editorRef = ref<HTMLInputElement | null>(null)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => model.value,
|
|
||||||
newValue => {
|
|
||||||
val.value = newValue
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
const placeholderText = computed(() => {
|
|
||||||
const value = (model.value || '').replace(/[\n\r\t]/gi, ' ')
|
|
||||||
|
|
||||||
if (state.value === 'unfocused') {
|
|
||||||
return value ? '' : props.suggestion
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!value || !value.trim()) {
|
|
||||||
return props.suggestion
|
|
||||||
}
|
|
||||||
|
|
||||||
return lookahead()
|
|
||||||
})
|
|
||||||
|
|
||||||
const spacerText = computed(() => {
|
|
||||||
const value = (model.value || '').replace(/[\n\r\t]/gi, ' ')
|
|
||||||
|
|
||||||
if (!value || !value.trim()) {
|
|
||||||
return props.suggestion
|
|
||||||
}
|
|
||||||
|
|
||||||
return value
|
|
||||||
})
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
|
||||||
options: string[],
|
|
||||||
suggestion?: string,
|
|
||||||
maxHeight?: number,
|
|
||||||
}>(), {
|
|
||||||
maxHeight: 200,
|
|
||||||
})
|
|
||||||
function addSelectedIndex(offset: number) {
|
|
||||||
let nextIndex = Math.max(
|
|
||||||
0,
|
|
||||||
Math.min(selectedIndex.value + offset, props.options.length - 1),
|
|
||||||
)
|
|
||||||
if (!isFinite(nextIndex)) {
|
|
||||||
nextIndex = 0
|
|
||||||
}
|
|
||||||
selectedIndex.value = nextIndex
|
|
||||||
updateSuggestionScroll()
|
|
||||||
}
|
|
||||||
|
|
||||||
function highlight(words: string, query: string) {
|
|
||||||
return (words || '').replace(new RegExp(query, 'i'), '<mark class="scroll-term">' + query + '</mark>')
|
|
||||||
}
|
|
||||||
|
|
||||||
function lookahead() {
|
|
||||||
if (!props.options.length) {
|
|
||||||
return model.value
|
|
||||||
}
|
|
||||||
const index = Math.max(0, Math.min(selectedIndex.value, props.options.length - 1))
|
|
||||||
const match = props.options[index]
|
|
||||||
return model.value + (match ? match.substring(model.value?.length) : '')
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSuggestionScroll() {
|
|
||||||
nextTick(() => {
|
|
||||||
const scroller = suggestionScrollerRef.value
|
|
||||||
const selectedItem = scroller?.querySelector('.selected')
|
|
||||||
scroller.scrollTop = selectedItem ? selectedItem.offsetTop : 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateScrollWindowSize() {
|
|
||||||
if (isResizing.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
isResizing.value = true
|
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
isResizing.value = false
|
|
||||||
|
|
||||||
const scroller = suggestionScrollerRef.value
|
|
||||||
const parent = containerRef.value
|
|
||||||
if (scroller) {
|
|
||||||
const rect = parent.getBoundingClientRect()
|
|
||||||
const pxTop = rect.top
|
|
||||||
const pxBottom = window.innerHeight - rect.bottom
|
|
||||||
const maxHeight = Math.max(pxTop, pxBottom, props.maxHeight)
|
|
||||||
const isReversed = pxBottom < props.maxHeight && pxTop > pxBottom
|
|
||||||
scroller.style.maxHeight = Math.min(isReversed ? pxTop : pxBottom, props.maxHeight) + 'px'
|
|
||||||
scroller.parentNode.style.transform =
|
|
||||||
isReversed ? 'translateY(-100%) translateY(-1.4rem)'
|
|
||||||
: 'translateY(.4rem)'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function setState(stateName: state) {
|
|
||||||
state.value = stateName
|
|
||||||
if (stateName === 'unfocused') {
|
|
||||||
editorRef.value.blur()
|
|
||||||
} else {
|
|
||||||
updateScrollWindowSize()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onFocusField(e) {
|
|
||||||
setState('focused')
|
|
||||||
}
|
|
||||||
|
|
||||||
function onKeydown(e) {
|
|
||||||
switch (e.keyCode || e.which) {
|
|
||||||
case ESCAPE:
|
|
||||||
e.preventDefault()
|
|
||||||
setState('unfocused')
|
|
||||||
break
|
|
||||||
case ARROW_UP:
|
|
||||||
e.preventDefault()
|
|
||||||
addSelectedIndex(-1)
|
|
||||||
break
|
|
||||||
case ARROW_DOWN:
|
|
||||||
e.preventDefault()
|
|
||||||
addSelectedIndex(1)
|
|
||||||
break
|
|
||||||
case ENTER:
|
|
||||||
case TAB:
|
|
||||||
e.preventDefault()
|
|
||||||
onSelectValue(lookahead() || model.value)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onSelectValue(value) {
|
|
||||||
model.value = value
|
|
||||||
selectedIndex.value = 0
|
|
||||||
setState('unfocused')
|
|
||||||
}
|
|
||||||
|
|
||||||
function onUpdateField(e) {
|
|
||||||
setState('focused')
|
|
||||||
model.value = e.currentTarget.value
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="autocomplete" ref="containerRef">
|
|
||||||
<div class="entry-box">
|
|
||||||
<div class="spacer">{{ spacerText }}</div>
|
|
||||||
<div class="placeholder">{{ placeholderText }}</div>
|
|
||||||
<textarea class="field"
|
|
||||||
@input="onUpdateField"
|
|
||||||
@focus="onFocusField"
|
|
||||||
@keydown="onKeydown"
|
|
||||||
:class="state"
|
|
||||||
:value="val"
|
|
||||||
ref="editorRef"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="suggestion-list" v-if="state === 'focused' && options.length">
|
|
||||||
<div v-if="options && options.length" class="scroll-list">
|
|
||||||
<div class="items" ref="suggestionScrollerRef" @keydown="onKeydown">
|
|
||||||
<button
|
|
||||||
v-for="(item, index) in options"
|
|
||||||
class="item"
|
|
||||||
@click="onSelectValue(item)"
|
|
||||||
:class="{ selected: index === selectedIndex }"
|
|
||||||
:key="item"
|
|
||||||
v-html="highlight(item, val)"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
.autocomplete {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
* {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Consolas, Lucida Console, Courier New, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry-box {
|
|
||||||
position: relative;
|
|
||||||
width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer,
|
|
||||||
.placeholder,
|
|
||||||
.field {
|
|
||||||
border: none;
|
|
||||||
height: 100%;
|
|
||||||
padding: .1rem .2rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
min-height: 1rem;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0.4;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&.focused {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder,
|
|
||||||
.field {
|
|
||||||
left: 0;
|
|
||||||
outline: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
resize: none;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-list {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-list {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
border: solid 1px lightgray;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
||||||
}
|
|
||||||
|
|
||||||
.items {
|
|
||||||
margin: 0;
|
|
||||||
max-height: 150px;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #045068;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: #dfe1e5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
border: solid 1px transparent;
|
|
||||||
background-color: white;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.selected):hover {
|
|
||||||
background-color: #c1dae2;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
background-color: #00aee6;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-term {
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: unset;
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
@ -1,16 +1,26 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {type ComponentPublicInstance, computed, nextTick, ref, watch} from 'vue'
|
import {type ComponentPublicInstance, nextTick, ref, watch} from 'vue'
|
||||||
|
|
||||||
const TAB = 9,
|
const props = withDefaults(defineProps<{
|
||||||
ENTER = 13,
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
ESCAPE = 27,
|
options: any[],
|
||||||
|
suggestion?: string,
|
||||||
|
maxHeight?: number,
|
||||||
|
}>(), {
|
||||||
|
maxHeight: 200,
|
||||||
|
suggestion: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['blur'])
|
||||||
|
|
||||||
|
const ESCAPE = 27,
|
||||||
ARROW_UP = 38,
|
ARROW_UP = 38,
|
||||||
ARROW_DOWN = 40
|
ARROW_DOWN = 40
|
||||||
|
|
||||||
type state = 'unfocused' | 'focused'
|
type StateType = 'unfocused' | 'focused'
|
||||||
|
|
||||||
const selectedIndex = ref(-1)
|
const selectedIndex = ref(-1)
|
||||||
const state = ref<state>('unfocused')
|
const state = ref<StateType>('unfocused')
|
||||||
const val = ref<string>('')
|
const val = ref<string>('')
|
||||||
const model = defineModel<string>()
|
const model = defineModel<string>()
|
||||||
|
|
||||||
@ -25,25 +35,6 @@ watch(
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
const emit = defineEmits(['blur'])
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
|
||||||
options: any[],
|
|
||||||
suggestion?: string,
|
|
||||||
maxHeight?: number,
|
|
||||||
}>(), {
|
|
||||||
maxHeight: 200,
|
|
||||||
})
|
|
||||||
|
|
||||||
function lookahead() {
|
|
||||||
if (!props.options.length) {
|
|
||||||
return model.value
|
|
||||||
}
|
|
||||||
const index = Math.max(0, Math.min(selectedIndex.value, props.options.length - 1))
|
|
||||||
const match = props.options[index]
|
|
||||||
return model.value + (match ? match.substring(model.value?.length) : '')
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSuggestionScroll() {
|
function updateSuggestionScroll() {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const scroller = suggestionScrollerRef.value
|
const scroller = suggestionScrollerRef.value
|
||||||
@ -52,14 +43,14 @@ function updateSuggestionScroll() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function setState(stateName: state) {
|
function setState(stateName: StateType) {
|
||||||
state.value = stateName
|
state.value = stateName
|
||||||
if (stateName === 'unfocused') {
|
if (stateName === 'unfocused') {
|
||||||
emit('blur')
|
emit('blur')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onFocusField(e) {
|
function onFocusField() {
|
||||||
setState('focused')
|
setState('focused')
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -103,7 +94,7 @@ function select(offset: number) {
|
|||||||
// Arrow up but we're already at the top
|
// Arrow up but we're already at the top
|
||||||
index = props.options.length - 1
|
index = props.options.length - 1
|
||||||
}
|
}
|
||||||
let elems = resultRefs.value[index]
|
const elems = resultRefs.value[index]
|
||||||
if (
|
if (
|
||||||
typeof elems === 'undefined'
|
typeof elems === 'undefined'
|
||||||
) {
|
) {
|
||||||
@ -133,37 +124,48 @@ function onUpdateField(e) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="autocomplete" ref="containerRef">
|
<div
|
||||||
|
ref="containerRef"
|
||||||
|
class="autocomplete"
|
||||||
|
>
|
||||||
<div class="entry-box">
|
<div class="entry-box">
|
||||||
<slot
|
<slot
|
||||||
name="input"
|
name="input"
|
||||||
:onUpdateField
|
:on-update-field
|
||||||
:onFocusField
|
:on-focus-field
|
||||||
:onKeydown
|
:on-keydown
|
||||||
>
|
>
|
||||||
<textarea class="field"
|
<textarea
|
||||||
@input="onUpdateField"
|
ref="editorRef"
|
||||||
@focus="onFocusField"
|
class="field"
|
||||||
@keydown="onKeydown"
|
:class="state"
|
||||||
:class="state"
|
:value="val"
|
||||||
:value="val"
|
@input="onUpdateField"
|
||||||
ref="editorRef"></textarea>
|
@focus="onFocusField"
|
||||||
|
@keydown="onKeydown"
|
||||||
|
/>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="suggestion-list" v-if="state === 'focused' && options.length">
|
<div
|
||||||
<div v-if="options && options.length" class="scroll-list">
|
v-if="state === 'focused' && options.length"
|
||||||
|
class="suggestion-list"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="options && options.length"
|
||||||
|
class="scroll-list"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="items"
|
|
||||||
ref="suggestionScrollerRef"
|
ref="suggestionScrollerRef"
|
||||||
|
class="items"
|
||||||
@keydown="onKeydown"
|
@keydown="onKeydown"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
v-for="(item, index) in options"
|
v-for="(item, index) in options"
|
||||||
class="item"
|
|
||||||
@click="onSelectValue(item)"
|
|
||||||
:class="{ selected: index === selectedIndex }"
|
|
||||||
:key="item"
|
:key="item"
|
||||||
:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, index)"
|
:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, index)"
|
||||||
|
class="item"
|
||||||
|
:class="{ selected: index === selectedIndex }"
|
||||||
|
@click="onSelectValue(item)"
|
||||||
>
|
>
|
||||||
<slot
|
<slot
|
||||||
name="result"
|
name="result"
|
||||||
@ -182,10 +184,10 @@ function onUpdateField(e) {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.autocomplete {
|
.autocomplete {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.suggestion-list {
|
.suggestion-list {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
background: var(--white);
|
background: var(--white);
|
||||||
border-radius: 0 0 var(--input-radius) var(--input-radius);
|
border-radius: 0 0 var(--input-radius) var(--input-radius);
|
||||||
border: 1px solid var(--primary);
|
border: 1px solid var(--primary);
|
||||||
@ -197,7 +199,7 @@ function onUpdateField(e) {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<slot
|
<slot
|
||||||
name="trigger"
|
name="trigger"
|
||||||
:is-open="open"
|
:is-open="openValue"
|
||||||
:toggle="toggle"
|
:toggle="toggle"
|
||||||
:close="close"
|
:close="close"
|
||||||
/>
|
/>
|
||||||
@ -9,13 +9,13 @@
|
|||||||
ref="popup"
|
ref="popup"
|
||||||
class="popup"
|
class="popup"
|
||||||
:class="{
|
:class="{
|
||||||
'is-open': open,
|
'is-open': openValue,
|
||||||
'has-overflow': props.hasOverflow && open
|
'has-overflow': props.hasOverflow && openValue
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<slot
|
<slot
|
||||||
name="content"
|
name="content"
|
||||||
:is-open="open"
|
:is-open="openValue"
|
||||||
:toggle="toggle"
|
:toggle="toggle"
|
||||||
:close="close"
|
:close="close"
|
||||||
/>
|
/>
|
||||||
@ -37,29 +37,29 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['close'])
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.open,
|
() => props.open,
|
||||||
nowOpen => {
|
nowOpen => {
|
||||||
open.value = nowOpen
|
openValue.value = nowOpen
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
const emit = defineEmits(['close'])
|
const openValue = ref(false)
|
||||||
|
|
||||||
const open = ref(false)
|
|
||||||
const popup = ref<HTMLElement | null>(null)
|
const popup = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
open.value = false
|
openValue.value = false
|
||||||
emit('close')
|
emit('close')
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle() {
|
function toggle() {
|
||||||
open.value = !open.value
|
openValue.value = !openValue.value
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickOutside(popup, () => {
|
onClickOutside(popup, () => {
|
||||||
if (!open.value) {
|
if (!openValue.value) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
close()
|
close()
|
||||||
|
@ -15,7 +15,7 @@ function initState(value: string) {
|
|||||||
:init-state="initState('dueDate < now && done = false && dueDate > now/w+1w')"
|
:init-state="initState('dueDate < now && done = false && dueDate > now/w+1w')"
|
||||||
>
|
>
|
||||||
<template #default="{state}">
|
<template #default="{state}">
|
||||||
<FilterInput v-model="state.value"/>
|
<FilterInput v-model="state.value" />
|
||||||
</template>
|
</template>
|
||||||
</Variant>
|
</Variant>
|
||||||
</Story>
|
</Story>
|
||||||
|
@ -3,8 +3,6 @@ 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 {createRandomID} from '@/helpers/randomId'
|
|
||||||
import AutocompleteDropdown from '@/components/input/AutocompleteDropdown.vue'
|
import AutocompleteDropdown from '@/components/input/AutocompleteDropdown.vue'
|
||||||
import {useLabelStore} from '@/stores/labels'
|
import {useLabelStore} from '@/stores/labels'
|
||||||
import XLabel from '@/components/tasks/partials/label.vue'
|
import XLabel from '@/components/tasks/partials/label.vue'
|
||||||
@ -169,19 +167,21 @@ function updateDateInQuery(newDate: string) {
|
|||||||
const autocompleteMatchPosition = ref(0)
|
const autocompleteMatchPosition = ref(0)
|
||||||
const autocompleteMatchText = ref('')
|
const autocompleteMatchText = ref('')
|
||||||
const autocompleteResultType = ref<'labels' | 'assignees' | 'projects' | null>(null)
|
const autocompleteResultType = ref<'labels' | 'assignees' | 'projects' | null>(null)
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
const autocompleteResults = ref<any[]>([])
|
const autocompleteResults = ref<any[]>([])
|
||||||
const labelStore = useLabelStore()
|
const labelStore = useLabelStore()
|
||||||
const projectStore = useProjectStore()
|
const projectStore = useProjectStore()
|
||||||
|
|
||||||
function handleFieldInput(e, autocompleteOnInput) {
|
function handleFieldInput() {
|
||||||
const cursorPosition = filterInput.value.selectionStart
|
const cursorPosition = filterInput.value.selectionStart
|
||||||
const textUpToCursor = filterQuery.value.substring(0, cursorPosition)
|
const textUpToCursor = filterQuery.value.substring(0, cursorPosition)
|
||||||
|
|
||||||
AUTOCOMPLETE_FIELDS.forEach(field => {
|
AUTOCOMPLETE_FIELDS.forEach(field => {
|
||||||
const pattern = new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&\|\(\)]+\\1?)?$', 'ig')
|
const pattern = new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&|()]+\\1?)?$', 'ig')
|
||||||
const match = pattern.exec(textUpToCursor)
|
const match = pattern.exec(textUpToCursor)
|
||||||
|
|
||||||
if (match !== null) {
|
if (match !== null) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const [matched, prefix, operator, space, keyword] = match
|
const [matched, prefix, operator, space, keyword] = match
|
||||||
if (keyword) {
|
if (keyword) {
|
||||||
if (matched.startsWith('label')) {
|
if (matched.startsWith('label')) {
|
||||||
@ -229,40 +229,40 @@ function autocompleteSelect(value) {
|
|||||||
@update:modelValue="autocompleteSelect"
|
@update:modelValue="autocompleteSelect"
|
||||||
>
|
>
|
||||||
<template
|
<template
|
||||||
v-slot:input="{ onKeydown, onFocusField, onUpdateField }"
|
#input="{ onKeydown, onFocusField }"
|
||||||
>
|
>
|
||||||
<div class="control filter-input">
|
<div class="control filter-input">
|
||||||
<textarea
|
<textarea
|
||||||
@input="e => handleFieldInput(e, onUpdateField)"
|
ref="filterInput"
|
||||||
@focus="onFocusField"
|
v-model="filterQuery"
|
||||||
@keydown="onKeydown"
|
|
||||||
|
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
|
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
autocapitalize="off"
|
autocapitalize="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
v-model="filterQuery"
|
|
||||||
class="input"
|
class="input"
|
||||||
:class="{'has-autocomplete-results': autocompleteResults.length > 0}"
|
:class="{'has-autocomplete-results': autocompleteResults.length > 0}"
|
||||||
ref="filterInput"
|
|
||||||
:placeholder="$t('filters.query.placeholder')"
|
:placeholder="$t('filters.query.placeholder')"
|
||||||
|
@input="handleFieldInput"
|
||||||
|
@focus="onFocusField"
|
||||||
|
@keydown="onKeydown"
|
||||||
@blur="e => emit('blur', e)"
|
@blur="e => emit('blur', e)"
|
||||||
></textarea>
|
/>
|
||||||
<div
|
<div
|
||||||
class="filter-input-highlight"
|
class="filter-input-highlight"
|
||||||
:style="{'height': height}"
|
:style="{'height': height}"
|
||||||
v-html="highlightedFilterQuery"
|
v-html="highlightedFilterQuery"
|
||||||
></div>
|
/>
|
||||||
<DatepickerWithValues
|
<DatepickerWithValues
|
||||||
v-model="currentDatepickerValue"
|
v-model="currentDatepickerValue"
|
||||||
:open="datePickerPopupOpen"
|
:open="datePickerPopupOpen"
|
||||||
@close="() => datePickerPopupOpen = false"
|
@close="() => datePickerPopupOpen = false"
|
||||||
@update:model-value="updateDateInQuery"
|
@update:modelValue="updateDateInQuery"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template
|
<template
|
||||||
v-slot:result="{ item }"
|
#result="{ item }"
|
||||||
>
|
>
|
||||||
<XLabel
|
<XLabel
|
||||||
v-if="autocompleteResultType === 'labels'"
|
v-if="autocompleteResultType === 'labels'"
|
||||||
@ -273,7 +273,9 @@ function autocompleteSelect(value) {
|
|||||||
:user="item"
|
:user="item"
|
||||||
:avatar-size="25"
|
:avatar-size="25"
|
||||||
/>
|
/>
|
||||||
<template v-else> {{ item.title }}</template>
|
<template v-else>
|
||||||
|
{{ item.title }}
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</AutocompleteDropdown>
|
</AutocompleteDropdown>
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,12 +6,18 @@ const showDocs = ref(false)
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<BaseButton @click="showDocs = !showDocs" class="has-text-primary">
|
<BaseButton
|
||||||
|
class="has-text-primary"
|
||||||
|
@click="showDocs = !showDocs"
|
||||||
|
>
|
||||||
{{ $t('filters.query.help.link') }}
|
{{ $t('filters.query.help.link') }}
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
|
|
||||||
<Transition>
|
<Transition>
|
||||||
<div v-if="showDocs" class="content">
|
<div
|
||||||
|
v-if="showDocs"
|
||||||
|
class="content"
|
||||||
|
>
|
||||||
<p>{{ $t('filters.query.help.intro') }}</p>
|
<p>{{ $t('filters.query.help.intro') }}</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li>
|
<li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li>
|
||||||
@ -47,11 +53,13 @@ const showDocs = ref(false)
|
|||||||
<ul>
|
<ul>
|
||||||
<li><code>priority = 4</code>: {{ $t('filters.query.help.examples.priorityEqual') }}</li>
|
<li><code>priority = 4</code>: {{ $t('filters.query.help.examples.priorityEqual') }}</li>
|
||||||
<li><code>dueDate < now</code>: {{ $t('filters.query.help.examples.dueDatePast') }}</li>
|
<li><code>dueDate < now</code>: {{ $t('filters.query.help.examples.dueDatePast') }}</li>
|
||||||
<li><code>done = false && priority >= 3</code>:
|
<li>
|
||||||
|
<code>done = false && priority >= 3</code>:
|
||||||
{{ $t('filters.query.help.examples.undoneHighPriority') }}
|
{{ $t('filters.query.help.examples.undoneHighPriority') }}
|
||||||
</li>
|
</li>
|
||||||
<li><code>assignees in [user1, user2]</code>: {{ $t('filters.query.help.examples.assigneesIn') }}</li>
|
<li><code>assignees in [user1, user2]</code>: {{ $t('filters.query.help.examples.assigneesIn') }}</li>
|
||||||
<li><code>(priority = 1 || priority = 2) && dueDate <= now</code>:
|
<li>
|
||||||
|
<code>(priority = 1 || priority = 2) && dueDate <= now</code>:
|
||||||
{{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }}
|
{{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -25,6 +25,7 @@
|
|||||||
v-model="value"
|
v-model="value"
|
||||||
:has-title="true"
|
:has-title="true"
|
||||||
class="filter-popup"
|
class="filter-popup"
|
||||||
|
@update:modelValue="emitChanges"
|
||||||
/>
|
/>
|
||||||
</modal>
|
</modal>
|
||||||
</template>
|
</template>
|
||||||
@ -36,28 +37,27 @@ import Filters from '@/components/project/partials/filters.vue'
|
|||||||
|
|
||||||
import {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
|
import {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
|
||||||
|
|
||||||
const modelValue = defineModel<TaskFilterParams>()
|
const modelValue = defineModel<TaskFilterParams>({})
|
||||||
|
|
||||||
const value = computed<TaskFilterParams>({
|
const value = ref<TaskFilterParams>({})
|
||||||
get() {
|
|
||||||
return modelValue.value
|
|
||||||
},
|
|
||||||
set(value) {
|
|
||||||
if(modelValue === value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
modelValue.value = value
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => modelValue,
|
() => modelValue.value,
|
||||||
(modelValue) => {
|
(modelValue: TaskFilterParams) => {
|
||||||
value.value = modelValue
|
value.value = modelValue
|
||||||
},
|
},
|
||||||
{immediate: true},
|
{immediate: true},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
function emitChanges(newValue: TaskFilterParams) {
|
||||||
|
if (modelValue.value?.filter === newValue.filter && modelValue.value?.s === newValue.s) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
modelValue.value.filter = newValue.filter
|
||||||
|
modelValue.value.s = newValue.s
|
||||||
|
}
|
||||||
|
|
||||||
const hasFilters = computed(() => {
|
const hasFilters = computed(() => {
|
||||||
// this.value also contains the page parameter which we don't want to include in filters
|
// this.value also contains the page parameter which we don't want to include in filters
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
@ -4,12 +4,12 @@
|
|||||||
:title="hasTitle ? $t('filters.title') : ''"
|
:title="hasTitle ? $t('filters.title') : ''"
|
||||||
role="search"
|
role="search"
|
||||||
>
|
>
|
||||||
<FilterInput
|
<FilterInput
|
||||||
v-model="params.filter"
|
v-model="params.filter"
|
||||||
:project-id="projectId"
|
:project-id="projectId"
|
||||||
@blur="change()"
|
@blur="change()"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="field is-flex is-flex-direction-column">
|
<div class="field is-flex is-flex-direction-column">
|
||||||
<Fancycheckbox
|
<Fancycheckbox
|
||||||
v-model="params.filter_include_nulls"
|
v-model="params.filter_include_nulls"
|
||||||
@ -18,10 +18,13 @@
|
|||||||
{{ $t('filters.attributes.includeNulls') }}
|
{{ $t('filters.attributes.includeNulls') }}
|
||||||
</Fancycheckbox>
|
</Fancycheckbox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FilterInputDocs/>
|
<FilterInputDocs />
|
||||||
|
|
||||||
<template v-if="hasFooter" #footer>
|
<template
|
||||||
|
v-if="hasFooter"
|
||||||
|
#footer
|
||||||
|
>
|
||||||
<x-button
|
<x-button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
@click.prevent.stop="change()"
|
@click.prevent.stop="change()"
|
||||||
@ -48,25 +51,24 @@ import {useProjectStore} from '@/stores/projects'
|
|||||||
import {FILTER_OPERATORS, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
|
import {FILTER_OPERATORS, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
|
||||||
import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
|
import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const {
|
||||||
hasTitle: {
|
hasTitle= false,
|
||||||
type: Boolean,
|
hasFooter = true,
|
||||||
default: false,
|
modelValue,
|
||||||
},
|
} = defineProps<{
|
||||||
hasFooter: {
|
hasTitle?: boolean,
|
||||||
type: Boolean,
|
hasFooter?: boolean,
|
||||||
default: true,
|
modelValue: TaskFilterParams,
|
||||||
},
|
}>()
|
||||||
})
|
|
||||||
|
|
||||||
const modelValue = defineModel<TaskFilterParams>()
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const projectId = computed(() => {
|
const projectId = computed(() => {
|
||||||
if (route.name?.startsWith('project.')) {
|
if (route.name?.startsWith('project.')) {
|
||||||
return Number(route.params.projectId)
|
return Number(route.params.projectId)
|
||||||
}
|
}
|
||||||
|
|
||||||
return undefined
|
return undefined
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -80,7 +82,7 @@ const params = ref<TaskFilterParams>({
|
|||||||
|
|
||||||
// Using watchDebounced to prevent the filter re-triggering itself.
|
// Using watchDebounced to prevent the filter re-triggering itself.
|
||||||
watchDebounced(
|
watchDebounced(
|
||||||
() => modelValue.value,
|
() => modelValue,
|
||||||
(value: TaskFilterParams) => {
|
(value: TaskFilterParams) => {
|
||||||
const val = {...value}
|
const val = {...value}
|
||||||
val.filter = transformFilterStringFromApi(
|
val.filter = transformFilterStringFromApi(
|
||||||
@ -102,22 +104,25 @@ function change() {
|
|||||||
labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
|
labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
|
||||||
projectTitle => projectStore.searchProject(projectTitle)[0]?.id || null,
|
projectTitle => projectStore.searchProject(projectTitle)[0]?.id || null,
|
||||||
)
|
)
|
||||||
|
|
||||||
let s = ''
|
let s = ''
|
||||||
|
|
||||||
// When the filter does not contain any filter tokens, assume a simple search and redirect the input
|
// When the filter does not contain any filter tokens, assume a simple search and redirect the input
|
||||||
const hasFilterQueries = FILTER_OPERATORS.find(o => filter.includes(o)) || false
|
const hasFilterQueries = FILTER_OPERATORS.find(o => filter.includes(o)) || false
|
||||||
if (!hasFilterQueries) {
|
if (!hasFilterQueries) {
|
||||||
s = filter
|
s = filter
|
||||||
}
|
}
|
||||||
|
|
||||||
modelValue.value = {
|
const newParams = {
|
||||||
...params.value,
|
...params.value,
|
||||||
filter: s === '' ? filter : '',
|
filter: s === '' ? filter : '',
|
||||||
s,
|
s,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (JSON.stringify(modelValue) === JSON.stringify(newParams)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('update:modelValue', newParams)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
|
@ -20,7 +20,7 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
|
|||||||
textareaEl.value = textareaEl.placeholder
|
textareaEl.value = textareaEl.placeholder
|
||||||
}
|
}
|
||||||
|
|
||||||
const cs = getComputedStyle(textareaEl)
|
// const cs = getComputedStyle(textareaEl)
|
||||||
|
|
||||||
textareaEl.style.minHeight = ''
|
textareaEl.style.minHeight = ''
|
||||||
textareaEl.style.height = '0'
|
textareaEl.style.height = '0'
|
||||||
|
@ -57,7 +57,7 @@ export const FILTER_JOIN_OPERATOR = [
|
|||||||
export const FILTER_OPERATORS_REGEX = '(<|>|<=|>=|=|!=)'
|
export const FILTER_OPERATORS_REGEX = '(<|>|<=|>=|=|!=)'
|
||||||
|
|
||||||
function getFieldPattern(field: string): RegExp {
|
function getFieldPattern(field: string): RegExp {
|
||||||
return new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&\|\(\)]+\\1?)?', 'ig')
|
return new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&|()]+\\1?)?', 'ig')
|
||||||
}
|
}
|
||||||
|
|
||||||
export function transformFilterStringForApi(
|
export function transformFilterStringForApi(
|
||||||
@ -76,6 +76,7 @@ export function transformFilterStringForApi(
|
|||||||
|
|
||||||
let match: RegExpExecArray | null
|
let match: RegExpExecArray | null
|
||||||
while ((match = pattern.exec(filter)) !== null) {
|
while ((match = pattern.exec(filter)) !== null) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const [matched, prefix, operator, space, keyword] = match
|
const [matched, prefix, operator, space, keyword] = match
|
||||||
if (keyword) {
|
if (keyword) {
|
||||||
const labelId = labelResolver(keyword.trim())
|
const labelId = labelResolver(keyword.trim())
|
||||||
@ -91,6 +92,7 @@ export function transformFilterStringForApi(
|
|||||||
|
|
||||||
let match: RegExpExecArray | null
|
let match: RegExpExecArray | null
|
||||||
while ((match = pattern.exec(filter)) !== null) {
|
while ((match = pattern.exec(filter)) !== null) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const [matched, prefix, operator, space, keyword] = match
|
const [matched, prefix, operator, space, keyword] = match
|
||||||
if (keyword) {
|
if (keyword) {
|
||||||
const projectId = projectResolver(keyword.trim())
|
const projectId = projectResolver(keyword.trim())
|
||||||
@ -130,6 +132,7 @@ export function transformFilterStringFromApi(
|
|||||||
|
|
||||||
let match: RegExpExecArray | null
|
let match: RegExpExecArray | null
|
||||||
while ((match = pattern.exec(filter)) !== null) {
|
while ((match = pattern.exec(filter)) !== null) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const [matched, prefix, operator, space, keyword] = match
|
const [matched, prefix, operator, space, keyword] = match
|
||||||
if (keyword) {
|
if (keyword) {
|
||||||
const labelTitle = labelResolver(Number(keyword.trim()))
|
const labelTitle = labelResolver(Number(keyword.trim()))
|
||||||
@ -146,6 +149,7 @@ export function transformFilterStringFromApi(
|
|||||||
|
|
||||||
let match: RegExpExecArray | null
|
let match: RegExpExecArray | null
|
||||||
while ((match = pattern.exec(filter)) !== null) {
|
while ((match = pattern.exec(filter)) !== null) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const [matched, prefix, operator, space, keyword] = match
|
const [matched, prefix, operator, space, keyword] = match
|
||||||
if (keyword) {
|
if (keyword) {
|
||||||
const project = projectResolver(Number(keyword.trim()))
|
const project = projectResolver(Number(keyword.trim()))
|
||||||
|
@ -105,13 +105,13 @@ func TestBucket_ReadAll(t *testing.T) {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
bucketsInterface, _, _, err := b.ReadAll(s, testuser, "", -1, 0)
|
bucketsInterface, _, _, err := b.ReadAll(s, testuser, "", -1, 0)
|
||||||
assert.NoError(t, err)
|
require.NoError(t, err)
|
||||||
|
|
||||||
buckets := bucketsInterface.([]*Bucket)
|
buckets := bucketsInterface.([]*Bucket)
|
||||||
assert.Len(t, buckets, 3)
|
assert.Len(t, buckets, 3)
|
||||||
assert.Len(t, buckets[0].Tasks, 0)
|
assert.Empty(t, buckets[0].Tasks, 0)
|
||||||
assert.Len(t, buckets[1].Tasks, 3)
|
assert.Len(t, buckets[1].Tasks, 3)
|
||||||
assert.Len(t, buckets[2].Tasks, 0)
|
assert.Empty(t, buckets[2].Tasks, 0)
|
||||||
assert.Equal(t, int64(3), buckets[1].Tasks[0].ID)
|
assert.Equal(t, int64(3), buckets[1].Tasks[0].ID)
|
||||||
assert.Equal(t, int64(4), buckets[1].Tasks[1].ID)
|
assert.Equal(t, int64(4), buckets[1].Tasks[1].ID)
|
||||||
assert.Equal(t, int64(5), buckets[1].Tasks[2].ID)
|
assert.Equal(t, int64(5), buckets[1].Tasks[2].ID)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user