2020-06-11 15:34:13 +00:00
< template >
2021-01-17 17:57:57 +00:00
< card class = "filters has-overflow" >
< div class = "field" >
2021-12-21 16:29:49 +00:00
< fancycheckbox v-model ="params.filter_include_nulls" >
{ { $t ( 'filters.attributes.includeNulls' ) } }
< / fancycheckbox >
< fancycheckbox
v - model = "filters.requireAllFilters"
@ change = "setFilterConcat()"
>
{ { $t ( 'filters.attributes.requireAll' ) } }
< / fancycheckbox >
< fancycheckbox @change ="setDoneFilter" v-model ="filters.done" >
2021-06-23 23:24:57 +00:00
{ { $t ( 'filters.attributes.showDoneTasks' ) } }
2021-12-21 16:29:49 +00:00
< / fancycheckbox >
< fancycheckbox
v - if = "!$route.name.includes('list.kanban') || !$route.name.includes('list.table')"
v - model = "sortAlphabetically"
>
{ { $t ( 'filters.attributes.sortAlphabetically' ) } }
< / fancycheckbox >
2021-01-17 17:57:57 +00:00
< / div >
2021-03-10 13:13:28 +00:00
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'misc.search' ) } } < / label >
2021-03-10 13:13:28 +00:00
< div class = "control" >
< input
class = "input"
2021-06-23 23:24:57 +00:00
: placeholder = "$t('misc.search')"
2021-03-10 13:13:28 +00:00
v - model = "params.s"
@ blur = "change()"
@ keyup . enter = "change()"
/ >
< / div >
< / div >
2021-01-17 17:57:57 +00:00
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'task.attributes.priority' ) } } < / label >
2021-01-17 17:57:57 +00:00
< div class = "control single-value-control" >
< priority -select
2021-10-17 16:52:05 +00:00
: disabled = "!filters.usePriority || null"
2021-01-17 17:57:57 +00:00
v - model . number = "filters.priority"
@ change = "setPriority"
/ >
< fancycheckbox
v - model = "filters.usePriority"
@ change = "setPriority"
>
2021-06-23 23:24:57 +00:00
{ { $t ( 'filters.attributes.enablePriority' ) } }
2021-01-17 17:57:57 +00:00
< / fancycheckbox >
2020-09-26 21:02:37 +00:00
< / div >
2021-01-17 17:57:57 +00:00
< / div >
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'task.attributes.percentDone' ) } } < / label >
2021-01-17 17:57:57 +00:00
< div class = "control single-value-control" >
< percent -done -select
v - model . number = "filters.percentDone"
@ change = "setPercentDoneFilter"
2021-10-17 16:52:05 +00:00
: disabled = "!filters.usePercentDone || null"
2021-01-17 17:57:57 +00:00
/ >
< fancycheckbox
v - model = "filters.usePercentDone"
@ change = "setPercentDoneFilter"
>
2021-06-23 23:24:57 +00:00
{ { $t ( 'filters.attributes.enablePercentDone' ) } }
2021-01-17 17:57:57 +00:00
< / fancycheckbox >
2020-12-19 21:39:25 +00:00
< / div >
2021-01-17 17:57:57 +00:00
< / div >
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'task.attributes.dueDate' ) } } < / label >
2021-01-17 17:57:57 +00:00
< div class = "control" >
2022-02-20 20:15:56 +00:00
< datepicker -with -range @ dateChanged = "values => setDateFilter('due_date', values)" >
2022-02-06 17:46:53 +00:00
< template # trigger = "{toggle, buttonText}" >
< x -button @click.prevent.stop ="toggle()" variant = "secondary" :shadow ="false" class = "mb-2" >
{ { buttonText } }
< / x - b u t t o n >
< / template >
< / d a t e p i c k e r - w i t h - r a n g e >
2020-12-19 21:39:25 +00:00
< / div >
2021-01-17 17:57:57 +00:00
< / div >
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'task.attributes.startDate' ) } } < / label >
2021-01-17 17:57:57 +00:00
< div class = "control" >
2022-02-20 20:15:56 +00:00
< datepicker -with -range @ dateChanged = "values => setDateFilter('start_date', values)" >
2022-02-06 17:46:53 +00:00
< template # trigger = "{toggle, buttonText}" >
< x -button @click.prevent.stop ="toggle()" variant = "secondary" :shadow ="false" class = "mb-2" >
{ { buttonText } }
< / x - b u t t o n >
< / template >
< / d a t e p i c k e r - w i t h - r a n g e >
2020-09-26 21:02:37 +00:00
< / div >
2021-01-17 17:57:57 +00:00
< / div >
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'task.attributes.endDate' ) } } < / label >
2021-01-17 17:57:57 +00:00
< div class = "control" >
2022-02-20 20:15:56 +00:00
< datepicker -with -range @ dateChanged = "values => setDateFilter('end_date', values)" >
2022-02-06 17:46:53 +00:00
< template # trigger = "{toggle, buttonText}" >
< x -button @click.prevent.stop ="toggle()" variant = "secondary" :shadow ="false" class = "mb-2" >
{ { buttonText } }
< / x - b u t t o n >
< / template >
< / d a t e p i c k e r - w i t h - r a n g e >
2020-09-26 21:02:37 +00:00
< / div >
2021-01-17 17:57:57 +00:00
< / div >
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'task.attributes.reminders' ) } } < / label >
2021-01-17 17:57:57 +00:00
< div class = "control" >
2022-02-20 20:15:56 +00:00
< datepicker -with -range @ dateChanged = "values => setDateFilter('reminders', values)" >
2022-02-06 17:46:53 +00:00
< template # trigger = "{toggle, buttonText}" >
< x -button @click.prevent.stop ="toggle()" variant = "secondary" :shadow ="false" class = "mb-2" >
{ { buttonText } }
< / x - b u t t o n >
< / template >
< / d a t e p i c k e r - w i t h - r a n g e >
2021-01-17 17:57:57 +00:00
< / div >
< / div >
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'task.attributes.assignees' ) } } < / label >
2021-01-17 17:57:57 +00:00
< div class = "control" >
< multiselect
: loading = "usersService.loading"
2021-06-23 23:24:57 +00:00
: placeholder = "$t('team.edit.search')"
2021-01-17 17:57:57 +00:00
@ search = "query => find('users', query)"
: search - results = "foundusers"
@ select = "() => add('users', 'assignees')"
label = "username"
: multiple = "true"
@ remove = "() => remove('users', 'assignees')"
v - model = "users"
/ >
< / div >
< / div >
< div class = "field" >
2021-07-09 08:22:20 +00:00
< label class = "label" > { { $t ( 'task.attributes.labels' ) } } < / label >
2021-07-20 20:46:39 +00:00
< div class = "control labels-list" >
2021-07-20 20:42:34 +00:00
< edit -labels v -model = " labels " @change ="changeLabelFilter" / >
2020-12-19 19:23:46 +00:00
< / div >
2021-01-17 17:57:57 +00:00
< / div >
2020-12-19 21:39:25 +00:00
2021-01-17 17:57:57 +00:00
< template v-if ="$route.name === 'filters.create' || $route.name === 'list.edit'" >
2020-09-26 21:02:37 +00:00
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'list.lists' ) } } < / label >
2020-12-19 21:39:25 +00:00
< div class = "control" >
< multiselect
2021-01-17 17:57:57 +00:00
: loading = "listsService.loading"
2021-06-23 23:24:57 +00:00
: placeholder = "$t('list.search')"
2021-01-17 17:57:57 +00:00
@ search = "query => find('lists', query)"
: search - results = "foundlists"
@ select = "() => add('lists', 'list_id')"
label = "title"
@ remove = "() => remove('lists', 'list_id')"
2021-01-06 22:36:31 +00:00
: multiple = "true"
2021-01-17 17:57:57 +00:00
v - model = "lists"
2021-01-06 22:36:31 +00:00
/ >
2020-09-26 21:02:37 +00:00
< / div >
< / div >
2020-12-20 12:41:47 +00:00
< div class = "field" >
2021-06-23 23:24:57 +00:00
< label class = "label" > { { $t ( 'namespace.namespaces' ) } } < / label >
2020-12-20 12:41:47 +00:00
< div class = "control" >
< multiselect
2021-01-17 17:57:57 +00:00
: loading = "namespaceService.loading"
2021-06-23 23:24:57 +00:00
: placeholder = "$t('namespace.search')"
2021-01-17 17:57:57 +00:00
@ search = "query => find('namespace', query)"
: search - results = "foundnamespace"
@ select = "() => add('namespace', 'namespace')"
2020-12-20 12:41:47 +00:00
label = "title"
2021-01-17 17:57:57 +00:00
@ remove = "() => remove('namespace', 'namespace')"
2021-01-06 22:36:31 +00:00
: multiple = "true"
2021-01-17 17:57:57 +00:00
v - model = "namespace"
/ >
2020-12-20 12:41:47 +00:00
< / div >
< / div >
2021-01-17 17:57:57 +00:00
< / template >
< / card >
2020-06-11 15:34:13 +00:00
< / template >
2022-02-15 12:07:34 +00:00
< script lang = "ts" >
2022-01-09 16:27:28 +00:00
import DatepickerWithRange from '@/components/date/datepickerWithRange'
2020-09-05 20:35:52 +00:00
import Fancycheckbox from '../../input/fancycheckbox'
2020-06-11 15:34:13 +00:00
2021-10-06 20:25:06 +00:00
import { includesById } from '@/helpers/utils'
2021-07-25 13:27:15 +00:00
import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'
import Multiselect from '@/components/input/multiselect.vue'
2022-01-09 16:27:28 +00:00
import { parseDateOrString } from '@/helpers/time/parseDateOrString'
2020-09-26 21:02:37 +00:00
2020-12-20 12:41:47 +00:00
import UserService from '@/services/user'
2020-12-21 23:13:39 +00:00
import ListService from '@/services/list'
import NamespaceService from '@/services/namespace'
2021-07-25 13:27:15 +00:00
import EditLabels from '@/components/tasks/partials/editLabels.vue'
2020-12-19 21:39:25 +00:00
2021-11-14 15:56:52 +00:00
import { objectToSnakeCase } from '@/helpers/case'
2021-10-25 20:17:23 +00:00
import { getDefaultParams } from '@/composables/taskList'
2021-11-14 15:56:52 +00:00
2021-09-10 13:02:52 +00:00
// FIXME: merge with DEFAULT_PARAMS in taskList.js
const DEFAULT _PARAMS = {
sort _by : [ ] ,
order _by : [ ] ,
filter _by : [ ] ,
filter _value : [ ] ,
filter _comparator : [ ] ,
filter _include _nulls : true ,
filter _concat : 'or' ,
s : '' ,
}
const DEFAULT _FILTERS = {
done : false ,
dueDate : '' ,
requireAllFilters : false ,
priority : 0 ,
usePriority : false ,
startDate : '' ,
endDate : '' ,
percentDone : 0 ,
usePercentDone : false ,
reminders : '' ,
assignees : '' ,
labels : '' ,
list _id : '' ,
namespace : '' ,
}
2022-01-09 16:27:28 +00:00
export const ALPHABETICAL _SORT = 'title'
2021-12-21 16:29:49 +00:00
2020-09-05 20:35:52 +00:00
export default {
name : 'filters' ,
components : {
2022-01-09 16:27:28 +00:00
DatepickerWithRange ,
2021-07-20 20:42:34 +00:00
EditLabels ,
2020-09-26 21:02:37 +00:00
PrioritySelect ,
2020-09-05 20:35:52 +00:00
Fancycheckbox ,
2020-09-26 21:02:37 +00:00
PercentDoneSelect ,
2020-12-19 21:39:25 +00:00
Multiselect ,
2020-09-05 20:35:52 +00:00
} ,
data ( ) {
return {
2021-09-10 13:02:52 +00:00
params : DEFAULT _PARAMS ,
filters : DEFAULT _FILTERS ,
2020-12-19 21:39:25 +00:00
2021-09-08 09:59:38 +00:00
usersService : new UserService ( ) ,
2020-12-21 23:13:39 +00:00
foundusers : [ ] ,
2020-12-19 21:39:25 +00:00
users : [ ] ,
2020-12-20 12:41:47 +00:00
2021-06-03 20:23:04 +00:00
labelQuery : '' ,
2020-12-20 12:41:47 +00:00
labels : [ ] ,
2020-12-21 23:13:39 +00:00
2021-09-08 09:59:38 +00:00
listsService : new ListService ( ) ,
2020-12-21 23:13:39 +00:00
foundlists : [ ] ,
lists : [ ] ,
2021-09-08 09:59:38 +00:00
namespaceService : new NamespaceService ( ) ,
2020-12-21 23:13:39 +00:00
foundnamespace : [ ] ,
namespace : [ ] ,
2020-09-05 20:35:52 +00:00
}
} ,
mounted ( ) {
2020-09-26 21:02:37 +00:00
this . filters . requireAllFilters = this . params . filter _concat === 'and'
2020-09-05 20:35:52 +00:00
} ,
props : {
2021-08-23 19:18:12 +00:00
modelValue : {
2020-09-05 20:35:52 +00:00
required : true ,
2020-06-11 15:34:13 +00:00
} ,
2020-09-05 20:35:52 +00:00
} ,
2021-08-23 19:18:12 +00:00
emits : [ 'update:modelValue' , 'change' ] ,
2020-09-05 20:35:52 +00:00
watch : {
2021-08-23 19:18:12 +00:00
modelValue : {
2021-09-08 09:59:38 +00:00
handler ( value ) {
2021-11-14 15:56:52 +00:00
// FIXME: filters should only be converted to snake case in
// the last moment
this . params = objectToSnakeCase ( value )
2021-09-08 09:59:38 +00:00
this . prepareFilters ( )
} ,
immediate : true ,
2020-06-11 15:34:13 +00:00
} ,
2020-09-05 20:35:52 +00:00
} ,
2021-06-03 20:23:04 +00:00
computed : {
2021-12-21 16:29:49 +00:00
sortAlphabetically : {
get ( ) {
return this . params ? . sort _by ? . find ( sortBy => sortBy === ALPHABETICAL _SORT ) !== undefined
} ,
set ( sortAlphabetically ) {
2022-01-09 16:27:28 +00:00
this . params . sort _by = sortAlphabetically
2021-12-21 16:29:49 +00:00
? [ ALPHABETICAL _SORT ]
: getDefaultParams ( ) . sort _by
this . change ( )
} ,
} ,
2021-06-03 20:23:04 +00:00
foundLabels ( ) {
2021-10-06 20:25:06 +00:00
return this . $store . getters [ 'labels/filterLabelsByQuery' ] ( this . labels , this . query )
2021-06-03 20:23:04 +00:00
} ,
} ,
2020-09-05 20:35:52 +00:00
methods : {
change ( ) {
2021-08-23 19:18:12 +00:00
this . $emit ( 'update:modelValue' , this . params )
2020-09-05 20:35:52 +00:00
this . $emit ( 'change' , this . params )
2020-06-11 15:34:13 +00:00
} ,
2020-09-26 21:02:37 +00:00
prepareFilters ( ) {
this . prepareDone ( )
2020-12-21 23:13:39 +00:00
this . prepareDate ( 'due_date' , 'dueDate' )
this . prepareDate ( 'start_date' , 'startDate' )
this . prepareDate ( 'end_date' , 'endDate' )
this . prepareSingleValue ( 'priority' , 'priority' , 'usePriority' , true )
this . prepareSingleValue ( 'percent_done' , 'percentDone' , 'usePercentDone' , true )
this . prepareDate ( 'reminders' )
this . prepareRelatedObjectFilter ( 'users' , 'assignees' )
this . prepareRelatedObjectFilter ( 'lists' , 'list_id' )
this . prepareRelatedObjectFilter ( 'namespace' )
2021-07-20 20:42:34 +00:00
this . prepareSingleValue ( 'labels' )
2021-10-06 20:25:06 +00:00
const labels = typeof this . filters . labels === 'string'
? this . filters . labels
: ''
const labelIds = labels . split ( ',' ) . map ( i => parseInt ( i ) )
this . labels = this . $store . getters [ 'labels/getLabelsByIds' ] ( labelIds )
2020-09-05 20:35:52 +00:00
} ,
2020-09-26 21:02:37 +00:00
removePropertyFromFilter ( propertyName ) {
2021-04-15 19:45:34 +00:00
// Because of the way arrays work, we can only ever remove one element at once.
// To remove multiple filter elements of the same name this function has to be called multiple times.
2020-09-26 21:02:37 +00:00
for ( const i in this . params . filter _by ) {
if ( this . params . filter _by [ i ] === propertyName ) {
this . params . filter _by . splice ( i , 1 )
this . params . filter _comparator . splice ( i , 1 )
this . params . filter _value . splice ( i , 1 )
break
2020-06-11 15:34:13 +00:00
}
2020-09-05 20:35:52 +00:00
}
} ,
2022-01-09 16:27:28 +00:00
setDateFilter ( filterName , { dateFrom , dateTo } ) {
dateFrom = parseDateOrString ( dateFrom , null )
dateTo = parseDateOrString ( dateTo , null )
2022-02-06 17:46:53 +00:00
2022-01-09 16:27:28 +00:00
// Only filter if we have a date
if ( dateFrom !== null && dateTo !== null ) {
2020-06-11 15:34:13 +00:00
2020-09-05 20:35:52 +00:00
// Check if we already have values in params and only update them if we do
let foundStart = false
let foundEnd = false
this . params . filter _by . forEach ( ( f , i ) => {
2020-09-26 21:02:37 +00:00
if ( f === filterName && this . params . filter _comparator [ i ] === 'greater_equals' ) {
2020-09-05 20:35:52 +00:00
foundStart = true
2022-01-09 16:27:28 +00:00
this . params . filter _value [ i ] = dateFrom
2020-06-11 15:34:13 +00:00
}
2020-09-26 21:02:37 +00:00
if ( f === filterName && this . params . filter _comparator [ i ] === 'less_equals' ) {
2020-09-05 20:35:52 +00:00
foundEnd = true
2022-01-09 16:27:28 +00:00
this . params . filter _value [ i ] = dateTo
2020-06-11 15:34:13 +00:00
}
2020-09-05 20:35:52 +00:00
} )
if ( ! foundStart ) {
2020-09-26 21:02:37 +00:00
this . params . filter _by . push ( filterName )
2020-09-05 20:35:52 +00:00
this . params . filter _comparator . push ( 'greater_equals' )
2022-01-09 16:27:28 +00:00
this . params . filter _value . push ( dateFrom )
2020-06-11 15:34:13 +00:00
}
2020-09-05 20:35:52 +00:00
if ( ! foundEnd ) {
2020-09-26 21:02:37 +00:00
this . params . filter _by . push ( filterName )
2020-09-05 20:35:52 +00:00
this . params . filter _comparator . push ( 'less_equals' )
2022-01-09 16:27:28 +00:00
this . params . filter _value . push ( dateTo )
2020-09-05 20:35:52 +00:00
}
this . change ( )
2021-04-15 19:45:34 +00:00
return
2020-09-05 20:35:52 +00:00
}
2021-04-15 19:45:34 +00:00
this . removePropertyFromFilter ( filterName )
this . removePropertyFromFilter ( filterName )
this . change ( )
2020-06-11 15:34:13 +00:00
} ,
2020-09-26 21:02:37 +00:00
prepareDate ( filterName , variableName ) {
if ( typeof this . params . filter _by === 'undefined' ) {
return
}
let foundDateStart = false
let foundDateEnd = false
for ( const i in this . params . filter _by ) {
if ( this . params . filter _by [ i ] === filterName && this . params . filter _comparator [ i ] === 'greater_equals' ) {
foundDateStart = i
}
if ( this . params . filter _by [ i ] === filterName && this . params . filter _comparator [ i ] === 'less_equals' ) {
foundDateEnd = i
}
if ( foundDateStart !== false && foundDateEnd !== false ) {
break
}
}
if ( foundDateStart !== false && foundDateEnd !== false ) {
const start = new Date ( this . params . filter _value [ foundDateStart ] )
const end = new Date ( this . params . filter _value [ foundDateEnd ] )
this . filters [ variableName ] = ` ${ start . getFullYear ( ) } - ${ start . getMonth ( ) + 1 } - ${ start . getDate ( ) } to ${ end . getFullYear ( ) } - ${ end . getMonth ( ) + 1 } - ${ end . getDate ( ) } `
}
} ,
2020-12-19 21:39:25 +00:00
setSingleValueFilter ( filterName , variableName , useVariableName = '' , comparator = 'equals' ) {
if ( useVariableName !== '' && ! this . filters [ useVariableName ] ) {
2020-09-26 21:02:37 +00:00
this . removePropertyFromFilter ( filterName )
return
}
let found = false
this . params . filter _by . forEach ( ( f , i ) => {
if ( f === filterName ) {
found = true
2021-08-19 19:35:38 +00:00
this . params . filter _value [ i ] = this . filters [ variableName ]
2020-09-26 21:02:37 +00:00
}
} )
if ( ! found ) {
this . params . filter _by . push ( filterName )
2020-12-19 21:39:25 +00:00
this . params . filter _comparator . push ( comparator )
2020-09-26 21:02:37 +00:00
this . params . filter _value . push ( this . filters [ variableName ] )
}
this . change ( )
} ,
2020-12-21 23:13:39 +00:00
/ * *
*
* @ param filterName The filter name in the api .
* @ param variableName The name of the variable in this . filters .
* @ param useVariableName The name of the variable of the "Use this filter" variable . Will only be set if the parameter is not null .
* @ param isNumber Toggles if the value should be parsed as a number .
* /
prepareSingleValue ( filterName , variableName = null , useVariableName = null , isNumber = false ) {
if ( variableName === null ) {
variableName = filterName
}
2020-09-26 21:02:37 +00:00
let found = false
for ( const i in this . params . filter _by ) {
if ( this . params . filter _by [ i ] === filterName ) {
found = i
break
}
}
2020-12-21 23:13:39 +00:00
if ( found === false && useVariableName !== null ) {
2020-09-26 21:02:37 +00:00
this . filters [ useVariableName ] = false
return
}
if ( isNumber ) {
this . filters [ variableName ] = Number ( this . params . filter _value [ found ] )
} else {
this . filters [ variableName ] = this . params . filter _value [ found ]
}
2020-12-21 23:13:39 +00:00
if ( useVariableName !== null ) {
this . filters [ useVariableName ] = true
}
2020-09-26 21:02:37 +00:00
} ,
prepareDone ( ) {
// Set filters.done based on params
if ( typeof this . params . filter _by === 'undefined' ) {
return
}
2021-11-13 19:48:06 +00:00
this . filters . done = this . params . filter _by . some ( ( f ) => f === 'done' ) === false
2020-09-26 21:02:37 +00:00
} ,
2021-10-11 17:37:20 +00:00
async prepareRelatedObjectFilter ( kind , filterName = null , servicePrefix = null ) {
2020-12-21 23:13:39 +00:00
if ( filterName === null ) {
filterName = kind
}
if ( servicePrefix === null ) {
servicePrefix = kind
}
this . prepareSingleValue ( filterName )
2021-10-11 17:37:20 +00:00
if ( typeof this . filters [ filterName ] === 'undefined' || this . filters [ filterName ] === '' ) {
return
2020-12-21 23:13:39 +00:00
}
2021-10-11 17:37:20 +00:00
this [ kind ] = await this [ ` ${ servicePrefix } Service ` ] . getAll ( { } , { s : this . filters [ filterName ] } )
2020-12-21 23:13:39 +00:00
} ,
2020-09-26 21:02:37 +00:00
setDoneFilter ( ) {
if ( this . filters . done ) {
this . removePropertyFromFilter ( 'done' )
} else {
this . params . filter _by . push ( 'done' )
this . params . filter _comparator . push ( 'equals' )
this . params . filter _value . push ( 'false' )
}
this . change ( )
} ,
setFilterConcat ( ) {
if ( this . filters . requireAllFilters ) {
this . params . filter _concat = 'and'
} else {
this . params . filter _concat = 'or'
}
} ,
setPriority ( ) {
this . setSingleValueFilter ( 'priority' , 'priority' , 'usePriority' )
} ,
setPercentDoneFilter ( ) {
this . setSingleValueFilter ( 'percent_done' , 'percentDone' , 'usePercentDone' )
} ,
2020-12-21 23:13:39 +00:00
clear ( kind ) {
2021-08-19 19:35:38 +00:00
this [ ` found ${ kind } ` ] = [ ]
2020-09-26 21:02:37 +00:00
} ,
2021-10-11 17:37:20 +00:00
async find ( kind , query ) {
2020-12-19 21:39:25 +00:00
2020-12-20 12:41:47 +00:00
if ( query === '' ) {
2020-12-21 23:13:39 +00:00
this . clear ( kind )
2020-12-19 21:39:25 +00:00
}
2021-10-11 17:37:20 +00:00
const response = await this [ ` ${ kind } Service ` ] . getAll ( { } , { s : query } )
// Filter users from the results who are already assigned
this [ ` found ${ kind } ` ] = response . filter ( ( { id } ) => ! includesById ( this [ kind ] , id ) )
2020-12-19 21:39:25 +00:00
} ,
2020-12-21 23:13:39 +00:00
add ( kind , filterName ) {
2020-12-19 21:39:25 +00:00
this . $nextTick ( ( ) => {
2020-12-21 23:13:39 +00:00
this . changeMultiselectFilter ( kind , filterName )
2020-12-19 21:39:25 +00:00
} )
} ,
2020-12-21 23:13:39 +00:00
remove ( kind , filterName ) {
2020-12-19 21:39:25 +00:00
this . $nextTick ( ( ) => {
2020-12-21 23:13:39 +00:00
this . changeMultiselectFilter ( kind , filterName )
2020-12-19 21:39:25 +00:00
} )
} ,
2020-12-21 23:13:39 +00:00
changeMultiselectFilter ( kind , filterName ) {
if ( this [ kind ] . length === 0 ) {
this . removePropertyFromFilter ( filterName )
2020-12-19 21:39:25 +00:00
this . change ( )
return
}
2020-12-21 23:13:39 +00:00
let ids = [ ]
this [ kind ] . forEach ( u => {
ids . push ( u . id )
2020-12-19 21:39:25 +00:00
} )
2021-08-19 19:35:38 +00:00
this . filters [ filterName ] = ids . join ( ',' )
2020-12-21 23:13:39 +00:00
this . setSingleValueFilter ( filterName , filterName , '' , 'in' )
2020-12-19 21:39:25 +00:00
} ,
2020-12-20 12:41:47 +00:00
findLabels ( query ) {
2021-06-03 20:23:04 +00:00
this . labelQuery = query
2020-12-20 12:41:47 +00:00
} ,
addLabel ( ) {
this . $nextTick ( ( ) => {
this . changeLabelFilter ( )
} )
} ,
removeLabel ( label ) {
this . $nextTick ( ( ) => {
for ( const l in this . labels ) {
if ( this . labels [ l ] . id === label . id ) {
this . labels . splice ( l , 1 )
}
break
}
this . changeLabelFilter ( )
} )
} ,
changeLabelFilter ( ) {
if ( this . labels . length === 0 ) {
this . removePropertyFromFilter ( 'labels' )
this . change ( )
return
}
let labelIDs = [ ]
this . labels . forEach ( u => {
labelIDs . push ( u . id )
} )
2021-08-19 19:35:38 +00:00
this . filters . labels = labelIDs . join ( ',' )
2020-12-20 12:41:47 +00:00
this . setSingleValueFilter ( 'labels' , 'labels' , '' , 'in' )
} ,
2020-09-05 20:35:52 +00:00
} ,
}
2020-06-11 15:34:13 +00:00
< / script >
2020-09-26 21:02:37 +00:00
2022-02-06 18:38:36 +00:00
< style lang = "scss" scoped >
2020-09-26 21:02:37 +00:00
. single - value - control {
display : flex ;
align - items : center ;
. fancycheckbox {
margin - left : .5 rem ;
}
}
2022-01-09 16:27:28 +00:00
2022-02-06 18:38:36 +00:00
: deep ( . datepicker - with - range - container . popup ) {
2022-01-09 16:27:28 +00:00
right : 0 ;
}
2020-09-26 21:02:37 +00:00
< / style >