Filter fixes [SCI-6391]

app/javascript/vue/bmt_filter/container.vue

@@ -98,7 +98,7 @@
     methods: {
       addFilter() {
         const id = this.filters.length ? this.filters[this.filters.length - 1].id + 1 : 1
-        this.filters.push({ id: id, data: { type: "fullSequenceFilter" } });
+        this.filters.push({ id: id, data: { type: "fullsequenceFilter" } });
       },
       updateFilter(filter) {
         this.filters.find((f) => f.id === filter.id).data = filter.data;

app/javascript/vue/bmt_filter/filter.vue

@@ -1,18 +1,19 @@
 <template>
   <div class="filter-container">
-    <b class='filter-title'>Filter</b>  
+    <b class='filter-title'>Filter</b>
     <div class="filter-element">
       <div class="form-group filter-action">
-      
+
         <div class="sci-input-container">
           <DropdownSelector
-            :options="prepareTypesOptions()"
+            :options="typeOptions"
             :selectorId="`bmtFilter${this.filter.id}`"
-            @dropdown:changed="updateFilter"
+            @dropdown:changed="updateFilterType"
           />
         </div>
         <component
-          :is="type"
+          v-if="filter.data"
+          :is="filter.data.type"
           @filter:updateData="updateFilter"
           :additionalDataAttributes="additionalDataAttributes"
           :currentData="filter.data" />
@@ -24,7 +25,7 @@
       </div>
       <hr>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -33,7 +34,7 @@
   import monomerTypeFilter from 'vue/bmt_filter/filters/monomerTypeFilter.vue'
   import subsequenceFilter from 'vue/bmt_filter/filters/subsequenceFilter.vue'
   import variantSequenceFilter from 'vue/bmt_filter/filters/variantSequenceFilter.vue'
-  import fullSequenceFilter from 'vue/bmt_filter/filters/fullSequenceFilter.vue'
+  import fullsequenceFilter from 'vue/bmt_filter/filters/fullsequenceFilter.vue'
   import monomerSubstructureSearchFilter from 'vue/bmt_filter/filters/monomerSubstructureSearchFilter.vue'
   import DropdownSelector from 'vue/shared/dropdown_selector.vue'
 
@@ -44,17 +45,15 @@
     },
     data() {
       return {
-        type: this.filter.data.type,
         types: [
           'additionalDataFilter',
           'entityTypeFilter',
           'monomerTypeFilter',
           'subsequenceFilter',
           'variantSequenceFilter',
-          'fullSequenceFilter',
+          'fullsequenceFilter',
           'monomerSubstructureSearchFilter'
-        ],
-        additionaDataAttributes: []
+        ]
       }
     },
     components: {
@@ -63,25 +62,33 @@
       monomerTypeFilter,
       subsequenceFilter,
       variantSequenceFilter,
-      fullSequenceFilter,
+      fullsequenceFilter,
       monomerSubstructureSearchFilter,
       DropdownSelector
     },
-    methods: {
-      prepareTypesOptions() {
+    computed: {
+      typeOptions() {
         return this.types.map(option => {
           return {label: this.i18n.t(`repositories.show.bmt_search.filters.types.${option}.name`), value: option}
         })
-      },
-      updateFilter(value) {
-        this.type = value;
+      }
+    },
+    methods: {
+      updateFilterType(type) {
         this.$emit(
           'filter:update',
           {
             id: this.filter.id,
-            data: {
-              type: value
-            }
+            data: { type: type }
+          }
+        );
+      },
+      updateFilter(value) {
+        this.$emit(
+          'filter:update',
+          {
+            id: this.filter.id,
+            data: value
           }
         );
       }

app/javascript/vue/bmt_filter/filters/fullsequenceFilter.vue

@@ -6,7 +6,7 @@
       type="text"
       name="sequence"
       v-model="sequence"
-      :placeholder="i18n.t('repositories.show.bmt_search.filters.types.fullSequenceFilter.placeholder')"
+      :placeholder="i18n.t('repositories.show.bmt_search.filters.types.fullsequenceFilter.placeholder')"
     />
     <div>
       <label class="field-suboption">
@@ -20,7 +20,7 @@
           <label class="sci-checkbox-label"></label>
         </div>
         <span class="checkbox-label">
-          {{ i18n.t('repositories.show.bmt_search.filters.types.fullSequenceFilter.derivatives_included') }}
+          {{ i18n.t('repositories.show.bmt_search.filters.types.fullsequenceFilter.derivatives_included') }}
         </span>
       </label>
     </div>

config/locales/en.yml

@@ -1425,7 +1425,7 @@ en:
               distance_type: "Distance type"
               exact: "Exact"
               maximum: "Maximum"
-            fullSequenceFilter:
+            fullsequenceFilter:
               name: "Full sequence"
               placeholder: "Enter full sequence"
               derivatives_included: "Derivatives included"