Filter.vue 5.23 KB
Newer Older
Eliot Berriot's avatar
Eliot Berriot committed
1
2
3
4
5
<template>
  <tr>
    <td>{{ filter.label }}</td>
    <td>
      <div class="ui toggle checkbox">
Georg Krause's avatar
Georg Krause committed
6
7
8
9
10
11
12
13
14
15
16
        <input
          id="exclude-filter"
          v-model="exclude"
          name="public"
          type="checkbox"
          @change="$emit('update-config', index, 'not', exclude)"
        >
        <label
          for="exclude-filter"
          class="visually-hidden"
        >
17
18
          <translate translate-context="Popup/Radio/Title/Noun">Exclude</translate>
        </label>
Eliot Berriot's avatar
Eliot Berriot committed
19
20
21
22
      </div>
    </td>
    <td>
      <div
Georg Krause's avatar
Georg Krause committed
23
24
25
        v-for="f in filter.fields"
        :key="f.name"
        :ref="f.name"
Eliot Berriot's avatar
Eliot Berriot committed
26
        class="ui field"
Georg Krause's avatar
Georg Krause committed
27
      >
Agate's avatar
Agate committed
28
        <div :class="['ui', 'search', 'selection', 'dropdown', {'autocomplete': f.autocomplete}, {'multiple': f.type === 'list'}]">
Georg Krause's avatar
Georg Krause committed
29
30
31
32
33
34
35
36
37
38
39
40
41
42
          <i class="dropdown icon" />
          <div class="default text">
            {{ f.placeholder }}
          </div>
          <input
            v-if="f.type === 'list' && config[f.name]"
            :id="f.name"
            :value="config[f.name].join(',')"
            type="hidden"
          >
          <div
            v-if="config[f.name]"
            class="ui menu"
          >
Agate's avatar
Agate committed
43
            <div
Georg Krause's avatar
Georg Krause committed
44
              v-for="(v, i) in config[f.name]"
Georg Krause's avatar
Georg Krause committed
45
              :key="v"
Agate's avatar
Agate committed
46
              class="ui item"
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
47
              :data-value="v"
Georg Krause's avatar
Georg Krause committed
48
49
            >
              <template v-if="config.names">
Georg Krause's avatar
Georg Krause committed
50
                {{ config.names[i] }}
Georg Krause's avatar
Georg Krause committed
51
52
53
54
              </template>
              <template v-else>
                {{ v }}
              </template>
Eliot Berriot's avatar
Eliot Berriot committed
55
56
57
            </div>
          </div>
        </div>
Agate's avatar
Agate committed
58
      </div>
Eliot Berriot's avatar
Eliot Berriot committed
59
60
    </td>
    <td>
Agate's avatar
Agate committed
61
      <a
Georg Krause's avatar
Georg Krause committed
62
        v-if="checkResult"
Agate's avatar
Agate committed
63
        href=""
Georg Krause's avatar
Georg Krause committed
64
        :class="['ui', {'success': checkResult.candidates.count > 10}, 'label']"
Agate's avatar
Agate committed
65
        @click.prevent="showCandidadesModal = !showCandidadesModal"
Georg Krause's avatar
Georg Krause committed
66
      >
Eliot Berriot's avatar
Eliot Berriot committed
67
        {{ checkResult.candidates.count }} tracks matching filter
Agate's avatar
Agate committed
68
      </a>
Georg Krause's avatar
Georg Krause committed
69
70
71
72
      <modal
        v-if="checkResult"
        :show.sync="showCandidadesModal"
      >
73
        <h4 class="header">
Georg Krause's avatar
Georg Krause committed
74
75
76
          <translate translate-context="Popup/Radio/Title/Noun">
            Tracks matching filter
          </translate>
77
        </h4>
Eliot Berriot's avatar
Eliot Berriot committed
78
79
        <div class="content">
          <div class="description">
Georg Krause's avatar
Georg Krause committed
80
81
82
83
            <track-table
              v-if="checkResult.candidates.count > 0"
              :tracks="checkResult.candidates.sample"
            />
Eliot Berriot's avatar
Eliot Berriot committed
84
85
86
          </div>
        </div>
        <div class="actions">
87
          <button class="ui deny button">
Georg Krause's avatar
Georg Krause committed
88
89
90
            <translate translate-context="*/*/Button.Label/Verb">
              Cancel
            </translate>
91
          </button>
Eliot Berriot's avatar
Eliot Berriot committed
92
93
94
95
        </div>
      </modal>
    </td>
    <td>
Georg Krause's avatar
Georg Krause committed
96
97
98
99
100
101
102
103
      <button
        class="ui danger button"
        @click="$emit('delete', index)"
      >
        <translate translate-context="Content/Radio/Button.Label/Verb">
          Remove
        </translate>
      </button>
Eliot Berriot's avatar
Eliot Berriot committed
104
105
106
107
    </td>
  </tr>
</template>
<script>
Eliot Berriot's avatar
Eliot Berriot committed
108
import axios from 'axios'
Eliot Berriot's avatar
Eliot Berriot committed
109
import $ from 'jquery'
110
import _ from '@/lodash'
Eliot Berriot's avatar
Eliot Berriot committed
111
112
113
114
115
116
117
118
119
120

import Modal from '@/components/semantic/Modal'
import TrackTable from '@/components/audio/track/Table'

export default {
  components: {
    TrackTable,
    Modal
  },
  props: {
Georg Krause's avatar
Georg Krause committed
121
122
123
    filter: { type: Object, required: true },
    config: { type: Object, required: true },
    index: { type: Number, required: true }
Eliot Berriot's avatar
Eliot Berriot committed
124
125
126
127
128
  },
  data: function () {
    return {
      checkResult: null,
      showCandidadesModal: false,
129
      exclude: this.config.not
Eliot Berriot's avatar
Eliot Berriot committed
130
131
    }
  },
Georg Krause's avatar
Georg Krause committed
132
133
134
135
136
  watch: {
    exclude: function () {
      this.fetchCandidates()
    }
  },
Eliot Berriot's avatar
Eliot Berriot committed
137
  mounted: function () {
Georg Krause's avatar
Georg Krause committed
138
    const self = this
Eliot Berriot's avatar
Eliot Berriot committed
139
    this.filter.fields.forEach(f => {
Georg Krause's avatar
Georg Krause committed
140
141
      const selector = ['.dropdown']
      const settings = {
Eliot Berriot's avatar
Eliot Berriot committed
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
        onChange: function (value, text, $choice) {
          value = $(this).dropdown('get value').split(',')
          if (f.type === 'list' && f.subtype === 'number') {
            value = value.map(e => {
              return parseInt(e)
            })
          }
          self.value = value
          self.$emit('update-config', self.index, f.name, value)
          self.fetchCandidates()
        }
      }
      if (f.type === 'list') {
        selector.push('.multiple')
      }
      if (f.autocomplete) {
        selector.push('.autocomplete')
        settings.fields = f.autocomplete_fields
        settings.minCharacters = 1
        settings.apiSettings = {
162
          url: self.$store.getters['instance/absoluteUrl'](f.autocomplete + '?' + f.autocomplete_qs),
Eliot Berriot's avatar
Eliot Berriot committed
163
          beforeXHR: function (xhrObject) {
164
165
166
            if (self.$store.state.auth.oauth.accessToken) {
              xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
            }
Eliot Berriot's avatar
Eliot Berriot committed
167
168
169
170
171
172
            return xhrObject
          },
          onResponse: function (initialResponse) {
            if (settings.fields.remoteValues) {
              return initialResponse
            }
Georg Krause's avatar
Georg Krause committed
173
            return { results: initialResponse.results }
Eliot Berriot's avatar
Eliot Berriot committed
174
175
176
177
178
179
180
181
          }
        }
      }
      $(self.$el).find(selector.join('')).dropdown(settings)
    })
  },
  methods: {
    fetchCandidates: function () {
Georg Krause's avatar
Georg Krause committed
182
183
      const self = this
      const url = 'radios/radios/validate/'
Eliot Berriot's avatar
Eliot Berriot committed
184
185
      let final = _.clone(this.config)
      final.type = this.filter.type
Georg Krause's avatar
Georg Krause committed
186
      final = { filters: [final] }
Eliot Berriot's avatar
Eliot Berriot committed
187
      axios.post(url, final).then((response) => {
Eliot Berriot's avatar
Eliot Berriot committed
188
189
190
191
192
193
        self.checkResult = response.data.filters[0]
      })
    }
  }
}
</script>