Add filters for checklist and status [SCI-6225][SCI-6226] (#3732)

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

app/javascript/vue/repository_filter/filter.vue

@@ -29,6 +29,8 @@
   import RepositoryDateTimeValue from 'vue/repository_filter/filters/repositoryDateTimeValue.vue'
   import RepositoryTimeValue from 'vue/repository_filter/filters/repositoryTimeValue.vue'
   import RepositoryListValue from 'vue/repository_filter/filters/repositoryListValue.vue'
+  import RepositoryStatusValue from 'vue/repository_filter/filters/repositoryStatusValue.vue'
+  import RepositoryChecklistValue from 'vue/repository_filter/filters/repositoryChecklistValue.vue'
   import DropdownSelector from 'vue/shared/dropdown_selector.vue'
 
 
@@ -47,7 +49,9 @@
       RepositoryDateValue,
       RepositoryTimeValue,
       RepositoryDateTimeValue,
-      RepositoryListValue
+      RepositoryListValue,
+      RepositoryStatusValue,
+      RepositoryChecklistValue
     },
     methods: {
       updateFilter(value) {

app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="filter-attributes">
+    <DropdownSelector
+      :disableSearch="true"
+      :options="this.operators"
+      :selectorId="`OperatorSelector${this.filter.id}`"
+      @dropdown:changed="updateOperator"
+    />
+
+    <DropdownSelector
+      :optionClass="'checkbox-icon'"
+      :dataCombineTags="true"
+      :noEmptyOption="false"
+      :singleSelect="false"
+      :closeOnSelect="false"
+      :options="this.filter.column.items"
+      :dataSelectMultipleName="this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryChecklistValue.multiple_selected')"
+      :dataSelectMultipleAllSelected="this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryChecklistValue.all_selected')"
+      :selectorId="`ChecklistSelector${this.filter.id}`"
+      :placeholder="this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryChecklistValue.select_placeholder', {name: this.filter.column.name})"
+      @dropdown:changed="updateValue"
+    />
+  </div>
+</template>
+
+<script>
+  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  export default {
+    name: 'RepositoryChecklistValue',
+    mixins: [FilterMixin],
+    data() {
+      return {
+        operators: [
+          { value: 'any_of', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryChecklistValue.operators.any_of') },
+          { value: 'all_of', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryChecklistValue.operators.all_of') },
+          { value: 'none_of', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryChecklistValue.operators.none_of') }
+        ],
+        operator: 'any_of',
+        value: []
+      }
+    },
+    components: {
+      DropdownSelector
+    },
+    methods: {
+      updateValue(value) {
+        this.value = value
+        this.updateFilter();
+      }
+    },
+    computed: {
+      isBlank(){
+        return this.operator == 'any_of' && this.value.length == 0;
+      }
+    }
+  }
+</script>

app/javascript/vue/repository_filter/filters/repositoryListValue.vue

@@ -36,7 +36,7 @@
           { value: 'none_of', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryListValue.operators.none_of') }
         ],
         operator: 'any_of',
-        value: ''
+        value: []
       }
     },
     components: {
@@ -50,7 +50,7 @@
     },
     computed: {
       isBlank(){
-        return this.operator == 'any_of' && !this.value;
+        return this.operator == 'any_of' && this.value.length == 0;
       }
     }
   }

app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue

@@ -36,7 +36,7 @@
           { value: 'none_of', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryMyModuleValue.operators.none_of') }
         ],
         operator: 'any_of',
-        value: ''
+        value: []
       }
     },
     components: {
@@ -50,7 +50,7 @@
     },
     computed: {
       isBlank(){
-        return this.operator == 'any_of' && !this.value;
+        return this.operator == 'any_of' && this.value.length == 0;
       }
     }
   }

app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="filter-attributes">
+    <DropdownSelector
+      :disableSearch="true"
+      :options="this.operators"
+      :selectorId="`OperatorSelector${this.filter.id}`"
+      @dropdown:changed="updateOperator"
+    />
+
+    <DropdownSelector
+      :optionClass="'checkbox-icon'"
+      :dataCombineTags="true"
+      :noEmptyOption="false"
+      :singleSelect="false"
+      :closeOnSelect="false"
+      :options="this.filter.column.items"
+      :dataSelectMultipleName="this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryStatusValue.multiple_selected')"
+      :dataSelectMultipleAllSelected="this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryStatusValue.all_selected')"
+      :selectorId="`DropdownSelector${this.filter.id}`"
+      :placeholder="this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryStatusValue.select_placeholder', {name: this.filter.column.name})"
+      @dropdown:changed="updateValue"
+    />
+  </div>
+</template>
+
+<script>
+  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  export default {
+    name: 'RepositoryStatusValue',
+    mixins: [FilterMixin],
+    data() {
+      return {
+        operators: [
+          { value: 'any_of', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryStatusValue.operators.any_of') },
+          { value: 'none_of', label: this.i18n.t('repositories.show.repository_filter.filters.types.RepositoryStatusValue.operators.none_of') }
+        ],
+        operator: 'any_of',
+        value: []
+      }
+    },
+    components: {
+      DropdownSelector
+    },
+    methods: {
+      updateValue(value) {
+        this.value = value
+        this.updateFilter();
+      }
+    },
+    computed: {
+      isBlank(){
+        return this.operator == 'any_of' && this.value.length == 0;
+      }
+    }
+  }
+</script>

config/locales/en.yml

@@ -1443,6 +1443,21 @@ en:
                 operators:
                   any_of: "Any of"
                   none_of: "None of"
+              RepositoryStatusValue:
+                select_placeholder: "Select %{name}"
+                multiple_selected: "items selected"
+                all_selected: "All items selected"
+                operators:
+                  any_of: "Any of"
+                  none_of: "None of"
+              RepositoryChecklistValue:
+                select_placeholder: "Select %{name}"
+                multiple_selected: "items selected"
+                all_selected: "All items selected"
+                operators:
+                  any_of: "Any of"
+                  all_of: "All of"
+                  none_of: "None of"
 
       bmt_search:
         bmt_filter: "Biomolecule filter"