nocodb/packages/nc-gui/components/global/XAutoComplete.vue

<template>
  <div>
    <v-text-field
      v-bind="$attrs"
      ref="input"
      v-model="autocomplete"
      :style="styles"
      :class="[
        classNames,
        { 'env-valid': isEnvFound && isEnvUsageValid, 'env-invalid': isEnvFound && !isEnvUsageValid },
      ]"
      @input="onInput"
      @keydown.native="onKeyup"
    />

    <v-menu ref="autoMenu" v-model="show" :position-x="x" :position-y="y" dense :min-width="width">
      <v-list dense>
        <v-list-item
          v-for="(item, index) in envValues"
          :key="index"
          @click="onSelect(item)"
          @keyup.enter="onSelect(item)"
        >
          <v-list-item-title>{{ item }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
// http://jsfiddle.net/pranavcbalan/qg5xyko6/

export default {
  name: 'XAutoComplete',
  props: {
    value: String,
    env: String,
    styles: [Array, Object, String],
  },
  data() {
    return {
      show: false,
      x: 0,
      y: 0,
      activeValue: '',
      curPos: 0,
      input: null,
      el: null,
    };
  },
  computed: {
    // filtered list based on input
    items() {
      return this.envValues.filter(s => s.includes(this.activeValue));
    },
    // for setting menu width to textfield width
    width() {
      return this.input && this.input.clientWidth;
    },
    // extracting class names from root element
    classNames() {
      return this.el && this.el.className;
    },
    // v-model for the text filed
    autocomplete: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    //  extracting current env keys
    envValues() {
      const envObj = this.isDashboard
        ? this.$store.getters['project/GtrApiEnvironment']
        : this.$store.getters['project/GtrDefaultApiEnvironment'];
      return envObj && envObj[this.env] ? Object.keys(envObj[this.env]) : [];
    },
    isEnvFound() {
      return /{{\s*\w+\s*}}/.test(this.value);
    },
    isEnvUsageValid() {
      const re = /{{\s*(\w+)\s*}}/g;
      let m;
      // eslint-disable-next-line no-cond-assign
      while ((m = re.exec(this.value))) {
        if (!this.envValues.includes(m[1])) {
          return false;
        }
      }
      return true;
    },
  },
  mounted() {
    this.el = this.$el;
    // getting input element reference
    this.input = this.$refs.input && this.$refs.input.$el.querySelector('input');
  },
  created() {},
  methods: {
    // handling input event
    onInput(v) {
      this.curPos = this.input.selectionStart || 0;
      // extracting string from beginning to caret position
      // then using regex to check and extract certain pattern like
      // eg: {{ , {{ someWord,...
      const m = v.slice(0, this.curPos).match(/{{\s?(\w*)$/);
      if (m) {
        this.activeValue = m[1] || '';
        this.show = true;
        // calculate menu position relative to input element
        this.x = this.input.getBoundingClientRect().left; // + (this.curPos * 8) % this.$refs.input.$el.clientWidth;
        this.y = this.input.getBoundingClientRect().top + this.input.clientHeight;
      } else {
        this.show = false;
      }
    },
    onKeyup(e) {
      const menu = this.$refs.autoMenu;
      // handlig up and down keys
      if (this.show && (e.which === 40 || e.which === 38)) {
        e.preventDefault();
        menu.onKeyDown(e);
        return;
      }
      // handling enter and space
      if (this.show && (e.which === 13 || e.which === 32)) {
        menu.onKeyDown(e);
      }
    },
    onSelect(item) {
      // appending menu value to the input
      this.input.setRangeText(
        // add closing only when its necessary
        item.slice(this.activeValue.length) +
          (this.autocomplete.substr(this.input.selectionEnd, 2) === '}}' ? '' : '}}'),
        this.input.selectionStart,
        this.input.selectionEnd,
        'end'
      );
      // trigger input event to sync with vue model
      this.input.dispatchEvent(new Event('input'));
      this.show = false;
    },
  },
};
</script>

<style scoped>
/deep/ .env-valid input {
  color: var(--v-success-base) !important;
}

/deep/ .env-invalid input {
  color: var(--v-error-base) !important;
}
</style>
<!--
/**
 * @copyright Copyright (c) 2021, Xgene Cloud Ltd
 *
 * @author Naveen MR <oof1lab@gmail.com>
 * @author Pranav C Balan <pranavxc@gmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
-->