2020-06-11 15:34:13 +00:00
< template >
< div class = "card filters" >
< div class = "card-content" >
2020-09-26 21:02:37 +00:00
< fancycheckbox v-model ="params.filter_include_nulls" >
Include Tasks which don ' t have a value set
< / fancycheckbox >
< fancycheckbox
v - model = "filters.requireAllFilters"
@ change = "setFilterConcat()"
>
Require all filters to be true for a task to show up
< / fancycheckbox >
2020-06-11 15:34:13 +00:00
< div class = "field" >
< label class = "label" > Show Done Tasks < / label >
< div class = "control" >
< fancycheckbox @change ="setDoneFilter" v-model ="filters.done" >
Show Done Tasks
< / fancycheckbox >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Due Date < / label >
< div class = "control" >
< flat -pickr
2020-09-05 20:35:52 +00:00
: config = "flatPickerConfig"
@ on - close = "setDueDateFilter"
class = "input"
placeholder = "Due Date Range"
v - model = "filters.dueDate"
2020-06-11 15:34:13 +00:00
/ >
< / div >
< / div >
2020-09-26 21:02:37 +00:00
< div class = "field" >
< label class = "label" > Priority < / label >
< div class = "control single-value-control" >
< priority -select
: disabled = "!filters.usePriority"
v - model . number = "filters.priority"
@ change = "setPriority"
/ >
< fancycheckbox
v - model = "filters.usePriority"
@ change = "setPriority"
>
Enable Filter By Priority
< / fancycheckbox >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Start Date < / label >
< div class = "control" >
< flat -pickr
: config = "flatPickerConfig"
@ on - close = "setStartDateFilter"
class = "input"
placeholder = "Start Date Range"
v - model = "filters.startDate"
/ >
< / div >
< / div >
< div class = "field" >
< label class = "label" > End Date < / label >
< div class = "control" >
< flat -pickr
: config = "flatPickerConfig"
@ on - close = "setEndDateFilter"
class = "input"
placeholder = "End Date Range"
v - model = "filters.endDate"
/ >
< / div >
< / div >
< div class = "field" >
< label class = "label" > Percent Done < / label >
< div class = "control single-value-control" >
< percent -done -select
v - model . number = "filters.percentDone"
@ change = "setPercentDoneFilter"
: disabled = "!filters.usePercentDone"
/ >
< fancycheckbox
v - model = "filters.usePercentDone"
@ change = "setPercentDoneFilter"
>
Enable Filter By Percent Done
< / fancycheckbox >
< / div >
< / div >
2020-06-11 15:34:13 +00:00
< / div >
< / div >
< / template >
< script >
2020-09-05 20:35:52 +00:00
import Fancycheckbox from '../../input/fancycheckbox'
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
2020-06-11 15:34:13 +00:00
2020-09-26 21:02:37 +00:00
import { formatISO } from 'date-fns'
import PrioritySelect from '@/components/tasks/partials/prioritySelect'
import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect'
2020-09-05 20:35:52 +00:00
export default {
name : 'filters' ,
components : {
2020-09-26 21:02:37 +00:00
PrioritySelect ,
2020-09-05 20:35:52 +00:00
Fancycheckbox ,
flatPickr ,
2020-09-26 21:02:37 +00:00
PercentDoneSelect ,
2020-09-05 20:35:52 +00:00
} ,
data ( ) {
return {
params : {
sort _by : [ ] ,
order _by : [ ] ,
filter _by : [ ] ,
filter _value : [ ] ,
filter _comparator : [ ] ,
2020-09-26 21:02:37 +00:00
filter _include _nulls : true ,
filter _concat : 'or' ,
2020-09-05 20:35:52 +00:00
} ,
filters : {
done : false ,
dueDate : '' ,
2020-09-26 21:02:37 +00:00
requireAllFilters : false ,
priority : 0 ,
usePriority : false ,
startDate : '' ,
endDate : '' ,
percentDone : 0 ,
usePercentDone : false ,
2020-09-05 20:35:52 +00:00
} ,
flatPickerConfig : {
altFormat : 'j M Y H:i' ,
altInput : true ,
dateFormat : 'Y-m-d H:i' ,
enableTime : true ,
time _24hr : true ,
mode : 'range' ,
} ,
}
} ,
mounted ( ) {
this . params = this . value
2020-09-26 21:02:37 +00:00
this . filters . requireAllFilters = this . params . filter _concat === 'and'
this . prepareFilters ( )
2020-09-05 20:35:52 +00:00
} ,
props : {
value : {
required : true ,
2020-06-11 15:34:13 +00:00
} ,
2020-09-05 20:35:52 +00:00
} ,
watch : {
value ( newVal ) {
this . $set ( this , 'params' , newVal )
2020-09-26 21:02:37 +00:00
this . prepareFilters ( )
2020-06-11 15:34:13 +00:00
} ,
2020-09-05 20:35:52 +00:00
} ,
methods : {
change ( ) {
this . $emit ( 'input' , this . params )
this . $emit ( 'change' , this . params )
2020-06-11 15:34:13 +00:00
} ,
2020-09-26 21:02:37 +00:00
prepareFilters ( ) {
this . prepareDone ( )
this . prepareDueDate ( )
this . prepareStartDate ( )
this . prepareEndDate ( )
this . preparePriority ( )
this . preparePercentDone ( )
2020-09-05 20:35:52 +00:00
} ,
2020-09-26 21:02:37 +00:00
removePropertyFromFilter ( propertyName ) {
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
}
} ,
2020-09-26 21:02:37 +00:00
setDateFilter ( filterName , variableName ) {
2020-09-05 20:35:52 +00:00
// Only filter if we have a start and end due date
2020-09-26 21:02:37 +00:00
if ( this . filters [ variableName ] !== '' ) {
2020-06-11 15:34:13 +00:00
2020-09-26 21:02:37 +00:00
const parts = this . filters [ variableName ] . split ( ' to ' )
2020-06-11 15:34:13 +00:00
2020-09-05 20:35:52 +00:00
if ( parts . length < 2 ) {
return
}
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
2020-09-26 21:02:37 +00:00
this . $set ( this . params . filter _value , i , formatISO ( new Date ( parts [ 0 ] ) ) )
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
2020-09-26 21:02:37 +00:00
this . $set ( this . params . filter _value , i , formatISO ( new Date ( parts [ 1 ] ) ) )
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' )
2020-09-26 21:02:37 +00:00
this . params . filter _value . push ( formatISO ( new Date ( parts [ 0 ] ) ) )
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' )
2020-09-26 21:02:37 +00:00
this . params . filter _value . push ( formatISO ( new Date ( parts [ 1 ] ) ) )
2020-09-05 20:35:52 +00:00
}
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 ( ) } `
}
} ,
setSingleValueFilter ( filterName , variableName , useVariableName ) {
if ( ! this . filters [ useVariableName ] ) {
this . removePropertyFromFilter ( filterName )
return
}
let found = false
this . params . filter _by . forEach ( ( f , i ) => {
if ( f === filterName ) {
found = true
this . $set ( this . params . filter _value , i , this . filters [ variableName ] )
}
} )
if ( ! found ) {
this . params . filter _by . push ( filterName )
this . params . filter _comparator . push ( 'equals' )
this . params . filter _value . push ( this . filters [ variableName ] )
}
this . change ( )
} ,
prepareSingleValue ( filterName , variableName , useVariableName , isNumber = false ) {
let found = false
for ( const i in this . params . filter _by ) {
if ( this . params . filter _by [ i ] === filterName ) {
found = i
break
}
}
if ( found === false ) {
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 ]
}
this . filters [ useVariableName ] = true
} ,
prepareDone ( ) {
// Set filters.done based on params
if ( typeof this . params . filter _by === 'undefined' ) {
return
}
let foundDone = false
this . params . filter _by . forEach ( ( f , i ) => {
if ( f === 'done' ) {
foundDone = i
}
} )
if ( foundDone === false ) {
this . $set ( this . filters , 'done' , true )
}
} ,
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'
}
} ,
setDueDateFilter ( ) {
this . setDateFilter ( 'due_date' , 'dueDate' )
} ,
setPriority ( ) {
this . setSingleValueFilter ( 'priority' , 'priority' , 'usePriority' )
} ,
setStartDateFilter ( ) {
this . setDateFilter ( 'start_date' , 'startDate' )
} ,
setEndDateFilter ( ) {
this . setDateFilter ( 'end_date' , 'endDate' )
} ,
setPercentDoneFilter ( ) {
this . setSingleValueFilter ( 'percent_done' , 'percentDone' , 'usePercentDone' )
} ,
prepareDueDate ( ) {
this . prepareDate ( 'due_date' , 'dueDate' )
} ,
preparePriority ( ) {
this . prepareSingleValue ( 'priority' , 'priority' , 'usePriority' , true )
} ,
prepareStartDate ( ) {
this . prepareDate ( 'start_date' , 'startDate' )
} ,
prepareEndDate ( ) {
this . prepareDate ( 'end_date' , 'endDate' )
} ,
preparePercentDone ( ) {
this . prepareSingleValue ( 'percent_done' , 'percentDone' , 'usePercentDone' , true )
} ,
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
< style lang = "scss" >
. single - value - control {
display : flex ;
align - items : center ;
. fancycheckbox {
margin - left : .5 rem ;
}
}
< / style >