From 790451c96f68b5ee29c7a03463a2505804fa6dc1 Mon Sep 17 00:00:00 2001
From: artoscinote <85488244+artoscinote@users.noreply.github.com>
Date: Tue, 25 Jan 2022 12:28:38 +0100
Subject: [PATCH] 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                 |  2 +-
 app/javascript/vue/bmt_filter/container.vue   |  3 ++-
 app/javascript/vue/bmt_filter/filter.vue      | 13 +++++++---
 .../vue/bmt_filter/filters/cidFilter.vue      | 25 +++++++++++++++++++
 config/locales/en.yml                         |  3 +++
 5 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/vue/bmt_filter/filters/cidFilter.vue

diff --git a/app/javascript/.eslintrc.json b/app/javascript/.eslintrc.json
index c3295ac1b..96fff080b 100644
--- a/app/javascript/.eslintrc.json
+++ b/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",
diff --git a/app/javascript/vue/bmt_filter/container.vue b/app/javascript/vue/bmt_filter/container.vue
index 2a289f26f..b21a7dd89 100644
--- a/app/javascript/vue/bmt_filter/container.vue
+++ b/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) {
diff --git a/app/javascript/vue/bmt_filter/filter.vue b/app/javascript/vue/bmt_filter/filter.vue
index d2aac3a55..3ad412b92 100644
--- a/app/javascript/vue/bmt_filter/filter.vue
+++ b/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
           }
         );
       }
diff --git a/app/javascript/vue/bmt_filter/filters/cidFilter.vue b/app/javascript/vue/bmt_filter/filters/cidFilter.vue
new file mode 100644
index 000000000..24b093042
--- /dev/null
+++ b/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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index df9e5476b..70b162bc1 100644
--- a/config/locales/en.yml
+++ b/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'