TagsSelector.vue 2.4 KB
Newer Older
1
2
3
4
<template>
  <div ref="dropdown" class="ui multiple search selection dropdown">
    <input type="hidden">
    <i class="dropdown icon"></i>
5
    <input id="tags-search" type="text" class="search">
6
    <div class="default text">
jovuit's avatar
jovuit committed
7
      <translate translate-context="*/Dropdown/Placeholder/Verb">Search…</translate>
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    </div>
  </div>
</template>
<script>
import $ from 'jquery'

import lodash from '@/lodash'
export default {
  props: ['value'],
  mounted () {
    this.$nextTick(() => {
      this.initDropdown()

    })
  },
  methods: {
    initDropdown () {
      let self = this
      let handleUpdate = () => {
        let value = $(self.$refs.dropdown).dropdown('get value').split(',')
        self.$emit('input', value)
        return value
      }
      let settings = {
32
33
34
35
        keys : {
          delimiter  : 32,
        },
        forceSelection: false,
36
37
        saveRemoteData: false,
        filterRemoteData: true,
38
        preserveHTML : false,
39
40
41
        apiSettings: {
          url: this.$store.getters['instance/absoluteUrl']('/api/v1/tags/?name__startswith={query}&ordering=length&page_size=5'),
          beforeXHR: function (xhrObject) {
42
43
44
45

            if (self.$store.state.auth.oauth.accessToken) {
              xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
            }
46
47
            return xhrObject
          },
48
49
50
51
52
53
54
55
56
57
58
          onResponse(response) {
            let currentSearch = $(self.$refs.dropdown).dropdown('get query')
            response = {
              results: [],
              ...response,
            }
            if (currentSearch) {
              response.results = [{name: currentSearch}, ...response.results]
            }
            return response
          }
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
        },
        fields: {
          remoteValues: 'results',
          value: 'name'
        },
        allowAdditions: true,
        minCharacters: 1,
        onAdd: handleUpdate,
        onRemove: handleUpdate,
        onLabelRemove: handleUpdate,
        onChange: handleUpdate,
      }
      $(this.$refs.dropdown).dropdown(settings)
      $(this.$refs.dropdown).dropdown('set exactly', this.value)
    }
  },
  watch: {
    value: {
      handler (v) {
        let current = $(this.$refs.dropdown).dropdown('get value').split(',').sort()
        if (!lodash.isEqual([...v].sort(), current)) {
          $(this.$refs.dropdown).dropdown('set exactly', v)
        }
      },
      deep: true
    }
  }
}
</script>