Add basic structure for text filter [SCI-6213][SCI-6214] (#3710)

* Add basic structure for text filter [SCI-6213]

* Add actions for text filter [SCI-6213]

* Add mixins and i18n [SCI-6213]

* Add number filters [SCI-6214]

* Fix operator values

Co-authored-by: Anton <anton@scinote.net>

app/javascript/packs/vue/repository_filter.js

@@ -21,6 +21,9 @@ window.initRepositoryFilter = () => {
       'filter-container': FilterContainer
     },
     methods: {
+      updateFilters(filters) {
+        this.filters = filters;
+      }
     }
   });
 

app/javascript/vue/repository_filter/filter.vue

@@ -21,23 +21,25 @@
 <script>
   // filter types
   import RepositoryAssetValue from 'vue/repository_filter/filters/repositoryAssetValue.vue'
-
+  import RepositoryTextValue from 'vue/repository_filter/filters/repositoryTextValue.vue'
+  import RepositoryNumberValue from 'vue/repository_filter/filters/repositoryNumberValue.vue'
   import DropdownSelector from 'vue/shared/dropdown_selector.vue'
 
+
   export default {
     name: "FilterElement",
     props: {
       filter: Object,
     },
-    data() {
-      return {}
-    },
     components: {
       DropdownSelector,
-      RepositoryAssetValue
+      RepositoryAssetValue,
+      RepositoryTextValue,
+      RepositoryNumberValue
     },
     methods: {
       updateFilter(value) {
+        console.log(value);
         this.$emit('filter:update', value)
       }
     }

app/javascript/vue/repository_filter/filters/repositoryNumberValue.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="filter-attributes">
+    <DropdownSelector
+      :disableSearch="true"
+      :options="this.operators"
+      :selectorId="`OperatorSelector${this.filter.id}`"
+      @dropdown:changed="updateOperator"
+    />
+    <div v-if="operator !== 'between'" class="sci-input-container">
+      <input
+        @input="updateFilter"
+        class="sci-input-field"
+        type="number"
+        name="value"
+        v-model="value"
+        :placeholder= "this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.input_placeholder',{name: this.filter.column.name})"
+      />
+    </div>
+    <div v-else class="range-selector">
+      <div class="sci-input-container">
+        <input
+          @input="updateRange"
+          class="sci-input-field"
+          type="number"
+          name="from"
+          v-model="from"
+
+        />
+      </div>
+      -
+      <div class="sci-input-container">
+        <input
+          @input="updateRange"
+          class="sci-input-field"
+          type="number"
+          name="to"
+          v-model="to"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  export default {
+    name: 'RepositoryNumberValue',
+    mixins: [FilterMixin],
+    data() {
+      return {
+        operators: [
+          { value: 'equal_to', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.operators.equal')},
+          { value: 'unequal_to', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.operators.not_equal') },
+          { value: 'greater_than', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.operators.greater') },
+          { value: 'less_than', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.operators.less') },
+          { value: 'less_than_or_equal_to', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.operators.less_equal') },
+          { value: 'between', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.operators.between') }
+        ],
+        operator: 'equal_to',
+        value: '',
+        from: '',
+        to: ''
+      }
+    },
+    components: {
+      DropdownSelector
+    },
+    methods: {
+      updateRange(value) {
+        this.value = {
+          from: this.from,
+          to: this.to
+        }
+        this.updateFilter();
+      }
+    },
+    watch: {
+      operator() {
+        if(this.operator !== 'between' && !(typeof this.value === 'string')) this.value = '';
+        if(this.operator === 'between') this.value = {to: '', from: ''};
+
+      }
+    },
+    computed: {
+      isBlank(){
+        return this.operator == 'equal' && !this.value;
+      }
+    }
+  }
+</script>

app/javascript/vue/repository_filter/filters/repositoryTextValue.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="filter-attributes">
+    <DropdownSelector
+      :disableSearch="true"
+      :options="this.operators"
+      :selectorId="`OperatorSelector${this.filter.id}`"
+      @dropdown:changed="updateOperator"
+    />
+    <div class="sci-input-container">
+      <input
+        @input="updateFilter"
+        class="sci-input-field"
+        type="text"
+        name="value"
+        v-model="value"
+        :placeholder= "this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryNumberValue.input_placeholder',{name: this.filter.column.name})"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  export default {
+    name: 'RepositoryTextValue',
+    mixins: [FilterMixin],
+    data() {
+      return {
+        operators: [
+          { value: 'contains', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryTextValue.operators.contain') },
+          { value: 'doesnt_contain', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryTextValue.operators.not_contain') },
+          { value: 'empty', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryTextValue.operators.empty') }
+        ],
+        operator: 'contains',
+        value: ''
+      }
+    },
+    components: {
+      DropdownSelector
+    },
+    computed: {
+      isBlank(){
+        return this.operator == 'contains' && !this.value;
+      }
+    }
+  }
+</script>

config/locales/en.yml

@@ -1385,6 +1385,7 @@ en:
         archived_by: "by"
       filter_inventory_items: "Filter items"
       no_items: "No items here"
+
       no_items_matched: "No items matched your search request"
       no_archived_items: "No archived items here"
       no_archived_items_matched: "No archived items matched your search request"
@@ -1403,6 +1404,21 @@ en:
                   file_contains: "File contains"
                   file_attached: "File is attached"
                   file_not_attached: "File is not attached"
+              RepositoryTextValue:
+                input_placeholder: "Enter %{name}"
+                operators:
+                  contain: "Contains"
+                  not_contain: "Doesn't contain"
+                  empty: "Is empty"
+              RepositoryNumberValue:
+                 input_placeholder: "Enter %{name}"
+                 operators:
+                   equal: "Equal to"
+                   not_equal: "Not equal to"
+                   greater: "Greater than"
+                   less: "Less than"
+                   less_equal: "Less than or equal to"
+                   between: "Between"
       bmt_search:
         bmt_filter: "Biomolecule filter"
         save_filters: "Save filters"