Various fixes for BMT search [SCI-6077] (#3673)

* Various fixes for BMT search [SCI-6077]

* Add vue linter support [SCI-6077]

app/javascript/.eslintrc.json

@@ -6,7 +6,7 @@
     "node": true
   },
   "plugins": ["flowtype", "react", "prettier"],
-  "extends": ["airbnb", "prettier", "prettier/react"],
+  "extends": ["airbnb", "prettier", "prettier/react", "plugin:vue/base"],
   "parser": "babel-eslint",
   "parserOptions": {
     "sourceType": "module",

app/javascript/vue/bmt_filter/container.vue

@@ -134,7 +134,8 @@
       },
       fetchAdditionalDataAttributes() {
         $.get(this.bmtApiBaseUrl + '/admin/macromolecules/attributes', (data) => {
-          this.additionalDataAttributes = data
+          // Cid filter works as a special filter, not as additional data
+          this.additionalDataAttributes = data.filter((a) => a.name != 'Cid')
         });
       },
       loadFilters(filters) {

app/javascript/vue/bmt_filter/filter.vue

@@ -3,7 +3,6 @@
     <b class='filter-title'>Filter</b>
     <div class="filter-element">
       <div class="form-group filter-action">
-
         <div class="sci-input-container">
           <DropdownSelector
             :options="typeOptions"
@@ -29,6 +28,7 @@
 </template>
 
 <script>
+  // Filter types
   import additionalDataFilter from 'vue/bmt_filter/filters/additionalDataFilter.vue'
   import entityTypeFilter from 'vue/bmt_filter/filters/entityTypeFilter.vue'
   import monomerTypeFilter from 'vue/bmt_filter/filters/monomerTypeFilter.vue'
@@ -36,6 +36,9 @@
   import variantSequenceFilter from 'vue/bmt_filter/filters/variantSequenceFilter.vue'
   import fullsequenceFilter from 'vue/bmt_filter/filters/fullsequenceFilter.vue'
   import monomerSubstructureSearchFilter from 'vue/bmt_filter/filters/monomerSubstructureSearchFilter.vue'
+  import cidFilter from 'vue/bmt_filter/filters/cidFilter.vue'
+
+  // Other components
   import DropdownSelector from 'vue/shared/dropdown_selector.vue'
 
   export default {
@@ -52,7 +55,8 @@
           'subsequenceFilter',
           'variantSequenceFilter',
           'fullsequenceFilter',
-          'monomerSubstructureSearchFilter'
+          'monomerSubstructureSearchFilter',
+          'cidFilter'
         ]
       }
     },
@@ -64,6 +68,7 @@
       variantSequenceFilter,
       fullsequenceFilter,
       monomerSubstructureSearchFilter,
+      cidFilter,
       DropdownSelector
     },
     computed: {
@@ -83,12 +88,12 @@
           }
         );
       },
-      updateFilter(value) {
+      updateFilter(data) {
         this.$emit(
           'filter:update',
           {
             id: this.filter.id,
-            data: value
+            data: data
           }
         );
       }

app/javascript/vue/bmt_filter/filters/cidFilter.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="filter-form">
+    <input
+      @input="updateFilterData"
+      class="form-control"
+      type="text"
+      name="cid"
+      v-model="cid"
+      :placeholder="i18n.t('repositories.show.bmt_search.filters.types.cidFilter.placeholder')"
+    />
+  </div>
+</template>
+
+<script>
+  import FilterMixin from 'vue/bmt_filter/mixins/filter.js'
+  export default {
+    name: 'cidFilter',
+    mixins: [FilterMixin],
+    data() {
+      return {
+        cid: ""
+      }
+    }
+  }
+</script>

config/locales/en.yml

@@ -1502,6 +1502,9 @@ en:
             monomerSubstructureSearchFilter:
               name: "Monomere substructure"
               placeholder: "Enter substructure"
+            cidFilter:
+              name: "Cid"
+              placeholder: "Enter Cid"
     table:
       id: 'ID'
       external_id: 'External ID'