<commit_before><template>
  <div>
    <q-field
      :icon="icon"
      :label="label"
      :helper="helper"
      :error-label="errorLabel"
      :label-width="labelWidth"
      :error="hasError"
    >
      <div class="row justify-between items-center">
        <div class="col-4">
          <k-autocomplete ref="search" :services="services" :process-results="processResults" @changed="onTagAdded" />
        </div>
        <div class="col-7" v-if="tags.length > 0">
          <template v-for="(tag, index) in tags">
            <q-chip
              class="tag-chip"
              :key="tag.value + '-' + index " 
              :icon="tag.icon.name" 
              :color="tag.icon.color" 
              @close="onTagRemoved(tag)" 
              @click="onTagClicked(tag)" 
              closable>
              {{tag.value}}
            </q-chip>
          </template>
        </div>
      </div>
    </q-field>
    <k-icon-chooser ref="iconChooser" @icon-choosed="onIconChoosed" />
  </div>
</template>

<script>
import { QField, QChip, QIcon } from 'quasar'
import { KAutocomplete, KIconChooser } from '../input'
import mixins from '../../mixins'

export default {
  name: 'k-tag-field',
  components: {
    QField,
    QChip,
    QIcon,
    KAutocomplete,
    KIconChooser
  },
  mixins: [mixins.baseField],
  data () {
    return {
      services: [{
        service: 'tags',
        baseQuery: { scope: this.properties.scope },
        field: 'value',
        icon: { name: 'label', color: 'faded' }
      }],
      tags: []
    }
  },
  methods: {
    emptyModel () {
      return []
    },
    fill (value) {
      this.model = value
      // Update tags as well
      this.tags = this.model.slice()
    },
    processResults(pattern, results) {
      // We always add first an entry to create a new tag
      if (_.findIndex(results, result => result.value === pattern) === -1) {
        results.unshift({
          label: 'Add "' + pattern + '" tag',
          icon: 'label',
          value: pattern,
          data: { 
            value: pattern, 
            scope: this.properties.scope, 
            icon: { name: 'label', color: 'dark' }
          }
        })
      }
    },
    onTagAdded (newTag) {
      if (typeof newTag === 'string') return
      if(_.findIndex(this.tags, tag => tag.value === newTag.value) === -1) {
        // Filter the tag data and transform the icon provided by the autocomplete into an icon object<commit_msg>Chnaged icon for adding a tag (Unifed with quasar send icon)<commit_after><template>
  <div>
    <q-field
      :icon="icon"
      :label="label"
      :helper="helper"
      :error-label="errorLabel"
      :label-width="labelWidth"
      :error="hasError"
    >
      <div class="row justify-between items-center">
        <div class="col-4">
          <k-autocomplete ref="search" :services="services" :process-results="processResults" @changed="onTagAdded" />
        </div>
        <div class="col-7" v-if="tags.length > 0">
          <template v-for="(tag, index) in tags">
            <q-chip
              class="tag-chip"
              :key="tag.value + '-' + index " 
              :icon="tag.icon.name" 
              :color="tag.icon.color" 
              @close="onTagRemoved(tag)" 
              @click="onTagClicked(tag)" 
              closable>
              {{tag.value}}
            </q-chip>
          </template>
        </div>
      </div>
    </q-field>
    <k-icon-chooser ref="iconChooser" @icon-choosed="onIconChoosed" />
  </div>
</template>

<script>
import { QField, QChip, QIcon } from 'quasar'
import { KAutocomplete, KIconChooser } from '../input'
import mixins from '../../mixins'

export default {
  name: 'k-tag-field',
  components: {
    QField,
    QChip,
    QIcon,
    KAutocomplete,
    KIconChooser
  },
  mixins: [mixins.baseField],
  data () {
    return {
      services: [{
        service: 'tags',
        baseQuery: { scope: this.properties.scope },
        field: 'value',
        icon: { name: 'label', color: 'faded' }
      }],
      tags: []
    }
  },
  methods: {
    emptyModel () {
      return []
    },
    fill (value) {
      this.model = value
      // Update tags as well
      this.tags = this.model.slice()
    },
    processResults(pattern, results) {
      // We always add first an entry to create a new tag
      if (_.findIndex(results, result => result.value === pattern) === -1) {
        results.unshift({
          label: 'Add "' + pattern + '" tag',
          icon: 'send',
          value: pattern,
          data: { 
            value: pattern, 
            scope: this.properties.scope, 
            icon: { name: 'label', color: 'dark' }
          }
        })
      }
    },
    onTagAdded (newTag) {
      if (typeof newTag === 'string') return
      if(_.findIndex(this.tags, tag => tag.value === newTag.value) === -1) {
        // Filter the tag data and transform the icon provided by the autocomplete into an icon object
{'fraction_non_alphanumeric': 0.1539701733172108, 'fraction_numerical': 0.002015316404675534, 'mean_word_length': 1.853939045428407, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1547252', 'n_tokens_mistral': 1575, 'n_tokens_neox': 1536, 'n_words': 355}