scinote-web/app/javascript/vue/label_template/insert_field_dropdown.vue

<template>
  <div ref="dropdown" class="insert-field-dropdown dropdown">
    <a class="open-dropdown-button collapsed" role="button" data-toggle="dropdown" id="fieldsContainer" aria-expanded="false">
      {{ i18n.t('label_templates.show.insert_dropdown.button') }}
      <i class="fas fa-chevron-down"></i>
    </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="fieldsContainer">
      <div class="search-container sci-input-container">
        <label>
          {{ i18n.t('label_templates.show.insert_dropdown.button') }}
        </label>
        <a class="close-dropdown hover:cursor-pointer" data-toggle="dropdown">{{ i18n.t('general.cancel')}}</a>
        <input v-model="searchValue"
               type="text"
               class="sci-input-field insert-field-dropdown autofocus" autofocus="true"
               :placeholder="i18n.t('label_templates.show.insert_dropdown.search_placeholder')" />
        <i class="fas fa-search relative left-60 bottom-7"></i>
      </div>
      <div class="fields-container">
        <div :key="`default_${index}`" v-for="(field, index) in filteredFields.default"
            data-toggle="tooltip"
            data-placement="right"
            :data-template="tooltipTemplate"
            class="field-element"
            :title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})"
            @click="insertTag(field)"
        >
          {{ field.key }}
          <i class="sn-icon sn-icon-plus-square"></i>
        </div>
        <div v-if="filteredFields.common.length" class="block-title">
          {{ i18n.t('label_templates.show.insert_dropdown.common_fields') }}
        </div>
        <div :key="`common_${index}`" v-for="(field, index) in filteredFields.common"
            data-toggle="tooltip"
            data-placement="right"
            :data-template="tooltipTemplate"
            class="field-element"
            :title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})"
            @click="insertTag(field)"
        >
          <i v-if="field.icon" :class="field.icon"></i>
          {{ field.key }}
          <i class="sn-icon sn-icon-plus-square"></i>
        </div>
        <div v-for="(repository, index) in filteredFields.repositories" :key="`repository_${index}`">
          <div class="block-title">
            {{ repository.repository_name }}
          </div>
          <div v-for="(field, index1) in repository.tags" :key="`repository_${index}_${index1}`"
            data-toggle="tooltip"
            data-placement="right"
            :data-template="tooltipTemplate"
            class="field-element"
            :title="i18n.t('label_templates.show.insert_dropdown.field_code', {code: field.tag})"
            @click="insertTag(field)"
          >
            {{ field.key }}
            <i class="sn-icon sn-icon-plus-square"></i>
          </div>
        </div>
        <div class="no-results" v-if="this.noResults">
          {{ i18n.t('label_templates.show.insert_dropdown.nothing_found') }}
        </div>
      </div>
    </div>
    <LogoInsertModal v-if="openLogoModal"
                     :unit="labelTemplate.attributes.unit"
                     :density="labelTemplate.attributes.density"
                     :dimension="logoDimension"
                     @insert:tag="insertTag"
                     @cancel="openLogoModal = false"/>
  </div>
</template>

<script>
  import LogoInsertModal from './components/logo_insert_modal.vue'

  export default {
    name: 'InsertFieldDropdown',
    props: {
      labelTemplate: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        fields: {
          default: [],
          common: [],
          repositories: []
        },
        openLogoModal: false,
        logoDimension: null,
        searchValue: ''
      }
    },
    components: {LogoInsertModal},
    computed: {
      tooltipTemplate() {
        return `<div class="tooltip" role="tooltip">
                  <div class="tooltip-arrow"></div>
                  <div class="tooltip-body">
                    <div class="tooltip-inner"></div>
                  </div>
                </div>`
      },
      filteredFields() {
        this.$nextTick(() => {
          $('.tooltip').remove();
          $('[data-toggle="tooltip"]').tooltip();
        });

        if (this.searchValue.length == 0) {
          return this.fields;
        } else {
          return {
            default: this.filterArray(this.fields.default, 'key'),
            common: this.filterArray(this.fields.common, 'key'),
            repositories: this.filterArray(this.fields.repositories, 'repository_name').map((repo) => {
              return { ...repo, tags: this.filterArray(repo.tags, 'key') };
            })
          };
        }
      },
      noResults() {
        return this.filteredFields.default.concat(this.filteredFields.common, this.filteredFields.repositories).length === 0;
      }
    },
    mounted() {
      $.get(this.labelTemplate.attributes.urls.fields, (result) => {
        result.default.map((value) =>  {
          value.key = this.i18n.t(`label_templates.default_columns.${value.key}`)
          return value;
        });

        this.fields = result;
        this.$nextTick(() => {
          $('[data-toggle="tooltip"]').tooltip();
        });
      });
      this.$nextTick(() => {
        $(this.$refs.dropdown).on('show.bs.dropdown', () => {
          this.$nextTick(() => {
            $('.insert-field-dropdown')[1].focus()
          });
          this.searchValue = '';
        });
      });
    },
    methods: {
      insertTag(field) {
        if (field.id == 'logo') {
          this.logoDimension = field.dimension
          this.openLogoModal = true
          return
        }
        this.$emit('insertTag', field.tag)
      },
      filterArray(array, key) {
        return array.filter(field => {
          return (
            field[key].toLowerCase().indexOf(this.searchValue.toLowerCase()) !== -1 ||
            field.tags
          );
        });
      }
    }
  }
</script>