From ac8fdb95d6574f08dd1e937e00cf23dd89fae394 Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Wed, 15 Dec 2021 12:31:32 +0100
Subject: [PATCH] Add filters for checklist and status [SCI-6225][SCI-6226]
 (#3732)

Co-authored-by: Anton <anton@scinote.net>
---
 .../vue/repository_filter/filter.vue          |  6 +-
 .../filters/repositoryChecklistValue.vue      | 58 +++++++++++++++++++
 .../filters/repositoryListValue.vue           |  4 +-
 .../filters/repositoryMyModuleValue.vue       |  4 +-
 .../filters/repositoryStatusValue.vue         | 57 ++++++++++++++++++
 config/locales/en.yml                         | 15 +++++
 6 files changed, 139 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
 create mode 100644 app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue

diff --git a/app/javascript/vue/repository_filter/filter.vue b/app/javascript/vue/repository_filter/filter.vue
index 2ba058d83..37f5a5ccb 100644
--- a/app/javascript/vue/repository_filter/filter.vue
+++ b/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) {
diff --git a/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue b/app/javascript/vue/repository_filter/filters/repositoryChecklistValue.vue
new file mode 100644
index 000000000..eafe06925
--- /dev/null
+++ b/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>
diff --git a/app/javascript/vue/repository_filter/filters/repositoryListValue.vue b/app/javascript/vue/repository_filter/filters/repositoryListValue.vue
index c5f8c2ca9..fe895b754 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryListValue.vue
+++ b/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;
       }
     }
   }
diff --git a/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue b/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
index d5db6ccfe..c6e3611e1 100644
--- a/app/javascript/vue/repository_filter/filters/repositoryMyModuleValue.vue
+++ b/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;
       }
     }
   }
diff --git a/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue b/app/javascript/vue/repository_filter/filters/repositoryStatusValue.vue
new file mode 100644
index 000000000..0b7d3d447
--- /dev/null
+++ b/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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4b10986dc..2b75eefdd 100644
--- a/config/locales/en.yml
+++ b/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"