Move smart search bar in a dedicated component mixin
This commit is contained in:
		
							parent
							
								
									47209ee5ae
								
							
						
					
					
						commit
						b1194e50de
					
				| 
						 | 
					@ -0,0 +1,55 @@
 | 
				
			||||||
 | 
					<script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import {normalizeQuery, parseTokens, compileTokens} from '@/search'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default {
 | 
				
			||||||
 | 
					  props: {
 | 
				
			||||||
 | 
					    defaultQuery: {type: String, default: '', required: false},
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  methods: {
 | 
				
			||||||
 | 
					    getTokenValue (key, fallback) {
 | 
				
			||||||
 | 
					      let matching = this.search.tokens.filter(t => {
 | 
				
			||||||
 | 
					        return t.field === key
 | 
				
			||||||
 | 
					      })
 | 
				
			||||||
 | 
					      if (matching.length > 0) {
 | 
				
			||||||
 | 
					        return matching[0].value
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      return fallback
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					    addSearchToken (key, value) {
 | 
				
			||||||
 | 
					      if (!value) {
 | 
				
			||||||
 | 
					        // we remove existing matching tokens, if any
 | 
				
			||||||
 | 
					        this.search.tokens = this.search.tokens.filter(t => {
 | 
				
			||||||
 | 
					          return t.field != key
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					      } else {
 | 
				
			||||||
 | 
					        let existing = this.search.tokens.filter(t => {
 | 
				
			||||||
 | 
					          return t.field === key
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        if (existing.length > 0) {
 | 
				
			||||||
 | 
					          // we replace the value in existing tokens, if any
 | 
				
			||||||
 | 
					          existing.forEach(t => {
 | 
				
			||||||
 | 
					            t.value = value
 | 
				
			||||||
 | 
					          })
 | 
				
			||||||
 | 
					        } else {
 | 
				
			||||||
 | 
					          // we add a new token
 | 
				
			||||||
 | 
					          this.search.tokens.push({field: key, value})
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  watch: {
 | 
				
			||||||
 | 
					    'search.query' (newValue) {
 | 
				
			||||||
 | 
					      this.search.tokens = parseTokens(normalizeQuery(newValue))
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					    'search.tokens': {
 | 
				
			||||||
 | 
					      handler (newValue) {
 | 
				
			||||||
 | 
					        this.search.query = compileTokens(newValue)
 | 
				
			||||||
 | 
					        this.page = 1
 | 
				
			||||||
 | 
					        this.fetchData()
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
 | 
					      deep: true
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
| 
						 | 
					@ -125,19 +125,19 @@
 | 
				
			||||||
import axios from 'axios'
 | 
					import axios from 'axios'
 | 
				
			||||||
import _ from '@/lodash'
 | 
					import _ from '@/lodash'
 | 
				
			||||||
import time from '@/utils/time'
 | 
					import time from '@/utils/time'
 | 
				
			||||||
import {normalizeQuery, parseTokens, compileTokens} from '@/search'
 | 
					import {normalizeQuery, parseTokens} from '@/search'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import Pagination from '@/components/Pagination'
 | 
					import Pagination from '@/components/Pagination'
 | 
				
			||||||
import ActionTable from '@/components/common/ActionTable'
 | 
					import ActionTable from '@/components/common/ActionTable'
 | 
				
			||||||
import OrderingMixin from '@/components/mixins/Ordering'
 | 
					import OrderingMixin from '@/components/mixins/Ordering'
 | 
				
			||||||
import TranslationsMixin from '@/components/mixins/Translations'
 | 
					import TranslationsMixin from '@/components/mixins/Translations'
 | 
				
			||||||
 | 
					import SmartSearchMixin from '@/components/mixins/SmartSearch'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
  mixins: [OrderingMixin, TranslationsMixin],
 | 
					  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
 | 
				
			||||||
  props: {
 | 
					  props: {
 | 
				
			||||||
    filters: {type: Object, required: false},
 | 
					    filters: {type: Object, required: false},
 | 
				
			||||||
    needsRefresh: {type: Boolean, required: false, default: false},
 | 
					    needsRefresh: {type: Boolean, required: false, default: false},
 | 
				
			||||||
    defaultQuery: {type: String, default: ''},
 | 
					 | 
				
			||||||
    customObjects: {type: Array, required: false, default: () => { return [] }}
 | 
					    customObjects: {type: Array, required: false, default: () => { return [] }}
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  components: {
 | 
					  components: {
 | 
				
			||||||
| 
						 | 
					@ -172,36 +172,6 @@ export default {
 | 
				
			||||||
    this.fetchData()
 | 
					    this.fetchData()
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  methods: {
 | 
					  methods: {
 | 
				
			||||||
    getTokenValue (key, fallback) {
 | 
					 | 
				
			||||||
      let matching = this.search.tokens.filter(t => {
 | 
					 | 
				
			||||||
        return t.field === key
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
      if (matching.length > 0) {
 | 
					 | 
				
			||||||
        return matching[0].value
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      return fallback
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    addSearchToken (key, value) {
 | 
					 | 
				
			||||||
      if (!value) {
 | 
					 | 
				
			||||||
        // we remove existing matching tokens, if any
 | 
					 | 
				
			||||||
        this.search.tokens = this.search.tokens.filter(t => {
 | 
					 | 
				
			||||||
          return t.field != key
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        let existing = this.search.tokens.filter(t => {
 | 
					 | 
				
			||||||
          return t.field === key
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        if (existing.length > 0) {
 | 
					 | 
				
			||||||
          // we replace the value in existing tokens, if any
 | 
					 | 
				
			||||||
          existing.forEach(t => {
 | 
					 | 
				
			||||||
            t.value = value
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          // we add a new token
 | 
					 | 
				
			||||||
          this.search.tokens.push({field: key, value})
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    fetchData () {
 | 
					    fetchData () {
 | 
				
			||||||
      this.$emit('fetch-start')
 | 
					      this.$emit('fetch-start')
 | 
				
			||||||
      let params = _.merge({
 | 
					      let params = _.merge({
 | 
				
			||||||
| 
						 | 
					@ -282,17 +252,6 @@ export default {
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  watch: {
 | 
					  watch: {
 | 
				
			||||||
    'search.query' (newValue) {
 | 
					 | 
				
			||||||
      this.search.tokens = parseTokens(normalizeQuery(newValue))
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    'search.tokens': {
 | 
					 | 
				
			||||||
      handler (newValue) {
 | 
					 | 
				
			||||||
        this.search.query = compileTokens(newValue)
 | 
					 | 
				
			||||||
        this.page = 1
 | 
					 | 
				
			||||||
        this.fetchData()
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      deep: true
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    orderingDirection: function () {
 | 
					    orderingDirection: function () {
 | 
				
			||||||
      this.page = 1
 | 
					      this.page = 1
 | 
				
			||||||
      this.fetchData()
 | 
					      this.fetchData()
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue