You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
wiki/client/components/common/criterias-item.vue

212 lines
6.0 KiB

<template lang="pug">
.criterias-item
//- Type
v-select(
solo
:items='filteredCriteriaTypes'
v-model='item.type'
placeholder='Rule Type'
ref='typeSelect'
hide-details
)
template(slot='item', slot-scope='data')
v-list-tile-avatar
v-avatar(:color='data.item.color', size='40', tile): v-icon(color='white') {{ data.item.icon }}
v-list-tile-content
v-list-tile-title(v-html='data.item.text')
v-list-tile-sub-title.caption(v-html='data.item.description')
//- Operator
v-select(
solo
:items='filteredCriteriaOperators'
v-model='item.operator'
placeholder='Operator'
:disabled='!item.type'
:class='!item.type ? "blue-grey lighten-4" : ""'
hide-details
)
template(slot='item', slot-scope='data')
v-list-tile-avatar
v-avatar.white--text(color='blue', size='30', tile) {{ data.item.icon }}
v-list-tile-content
v-list-tile-title(v-html='data.item.text')
//- Value
v-select(
v-if='item.type === "country"'
solo
:items='countries'
v-model='item.value'
placeholder='Countries...'
multiple
item-text='name'
item-value='code'
hide-details
)
v-text-field(
v-else-if='item.type === "path"'
solo
v-model='item.value'
label='Path (e.g. /section)'
hide-details
)
v-text-field(
v-else-if='item.type === "date"'
solo
@click.native.stop='dateActivator = true'
v-model='item.value'
label='YYYY-MM-DD'
readonly
hide-details
)
v-text-field(
v-else-if='item.type === "time"'
solo
@click.native.stop='timeActivator = true'
v-model='item.value'
label='HH:MM'
readonly
hide-details
)
v-select(
v-else-if='item.type === "group"'
solo
:items='groups'
v-model='item.value'
placeholder='Group...'
item-text='name'
item-value='id'
hide-details
)
v-text-field.blue-grey.lighten-4(
v-else
solo
disabled
hide-details
)
v-dialog(lazy, v-model='dateActivator', width='290px', ref='dateDialog')
v-date-picker(v-model='item.value', scrollable, color='primary')
v-btn(flat, color='primary' @click='$refs.dateDialog.save(date)', block) ok
v-dialog(lazy, v-model='timeActivator', width='300px', ref='timeDialog')
v-time-picker(v-model='item.value', scrollable, color='primary')
v-btn(flat, color='primary' @click='$refs.timeDialog.save(time)', block) ok
v-btn(icon, @click='remove'): v-icon(color='blue-grey') clear
</template>
<script>
import _ from 'lodash'
// import countriesQuery from 'gql/upsells-query-countries.gql'
export default {
inject: ['allowedCriteriaTypes'],
props: {
value: {
type: Object,
default() { return {} }
},
groupIndex: {
type: Number,
default() { return 0 }
},
itemIndex: {
type: Number,
default() { return 0 }
}
},
data() {
return {
item: {
operator: '',
type: '',
value: ''
},
dateActivator: false,
dateDialog: false,
timeActivator: false,
timeDialog: false,
countries: [],
groups: [],
criteriaTypes: [
{ text: 'Path', value: 'path', icon: 'space_bar', color: 'blue', description: 'Match the path of the document being viewed.' },
{ text: 'Date', value: 'date', icon: 'date_range', color: 'blue', description: 'Match the current calendar day.' },
{ text: 'Time', value: 'time', icon: 'access_time', color: 'blue', description: 'Match the current time of day.' },
{ text: 'User Country', value: 'country', icon: 'public', color: 'red', description: `Match the user's country.` },
{ text: 'User Group', value: 'group', icon: 'group', color: 'orange', description: 'Match the user group assignments.' }
],
criteriaOperators: {
country: [
{ text: 'In', value: 'in', icon: '[...]' },
{ text: 'Not In', value: 'notIn', icon: '[ x ]' }
],
path: [
{ text: 'Matches Exactly', value: 'eq', icon: '=' },
{ text: 'NOT Matches Exactly', value: 'ne', icon: '!=' },
{ text: 'Starts With', value: 'sw', icon: 'x...' },
{ text: 'NOT Starts With', value: 'nsw', icon: '!x...' },
{ text: 'Ends With', value: 'ew', icon: '...x' },
{ text: 'NOT Ends With', value: 'new', icon: '!...x' },
{ text: 'Matches Regex', value: 'regexp', icon: '^x$' }
],
date: [
{ text: 'On or After', value: 'gte', icon: '>=' },
{ text: 'On or Before', value: 'lte', icon: '<=' }
],
time: [
{ text: 'At or Later Than', value: 'gte', icon: '>=' },
{ text: 'At or Before', value: 'lte', icon: '<=' }
],
group: [
{ text: 'Is Part Of', value: 'in', icon: '[...]' },
{ text: 'Is Not Part Of', value: 'notIn', icon: '[ x ]' }
]
}
}
},
computed: {
filteredCriteriaOperators() {
return _.get(this.criteriaOperators, this.item.type, [])
},
filteredCriteriaTypes() {
console.info(this.allowedCriteriaTypes)
return _.filter(this.criteriaTypes, c => _.includes(this.allowedCriteriaTypes, c.value))
},
itemType() {
return this.item.type
}
},
watch: {
itemType(newValue, oldValue) {
this.item.operator = _.head(this.criteriaOperators[newValue]).value
this.item.value = ''
},
item: {
handler(newValue, oldValue) {
this.$emit('update', this.groupIndex, this.itemIndex, this.item)
},
deep: true
}
},
mounted() {
if (!this.item.type) {
this.$refs.typeSelect.showMenu()
}
},
methods: {
remove() {
this.$emit('remove', this.groupIndex, this.itemIndex)
}
}
// apollo: {
// countries: {
// query: countriesQuery,
// update: (data) => data.location.countries
// }
// }
}
</script>