Update experiments filters [SCI-11794]

app/javascript/vue/experiments/list.vue

@@ -113,7 +113,12 @@ export default {
       moveModalObject: null,
       duplicateModalObject: null,
       descriptionModalObject: null,
-      reloadingTable: false
+      reloadingTable: false,
+      statusesList: [
+        ['not_started', this.i18n.t('experiments.table.column.status.not_started')],
+        ['started', this.i18n.t('experiments.table.column.status.started')],
+        ['completed', this.i18n.t('experiments.table.column.status.completed')]
+      ]
     };
   },
   computed: {
@@ -138,6 +143,9 @@ export default {
           headerName: this.i18n.t('experiments.table.column.status_html'),
           sortable: true,
           cellRenderer: StatusRenderer,
+          cellRendererParams: {
+            statusesList: this.statusesList
+          },
           minWidth: 200
         },
         {
@@ -238,14 +246,28 @@ export default {
           type: 'Text'
         },
         {
-          key: 'created_at',
+          key: 'start_on',
           type: 'DateRange',
-          label: this.i18n.t('filters_modal.created_on.label')
+          label: this.i18n.t('filters_modal.created_on.label'),
+          mode: 'date'
+        },
+        {
+          key: 'due_date',
+          type: 'DateRange',
+          label: this.i18n.t('filters_modal.due_date.label'),
+          mode: 'date'
         },
         {
           key: 'updated_on',
           type: 'DateRange',
           label: this.i18n.t('filters_modal.updated_on.label')
+        },
+        {
+          key: 'statuses',
+          type: 'Select',
+          options: this.statusesList,
+          label: this.i18n.t('experiments.index.filters.status'),
+          placeholder: this.i18n.t('experiments.index.filters.status_placeholder')
         }
       ];
 

app/javascript/vue/experiments/renderers/status.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="params.data.status_cell.editable" class="py-0.5">
     <SelectDropdown
-      :options="statuses"
+      :options="params.statusesList"
       :value="params.data.status_cell.status"
       @change="changeStatus"
       size="xs"
@@ -33,15 +33,6 @@ export default {
       required: true
     }
   },
-  data() {
-    return {
-      statuses: [
-        ['not_started', this.i18n.t('experiments.table.column.status.not_started')],
-        ['started', this.i18n.t('experiments.table.column.status.started')],
-        ['completed', this.i18n.t('experiments.table.column.status.completed')]
-      ]
-    };
-  },
   methods: {
     statusColor(status) {
       let color = 'bg-sn-grey-500';

app/javascript/vue/shared/filters/inputs/date_range_filter.vue

@@ -8,6 +8,7 @@
           class="w-full"
           @change="updateDateFrom"
           @cleared="updateDateFrom"
+          :mode="this.filter.mode || 'datetime'"
           :clearable="true"
           :placeholder="i18n.t('From')"
           :dateOnly="true"
@@ -20,6 +21,7 @@
           class="w-full"
           @change="updateDateTo"
           @cleared="updateDateTo"
+          :mode="this.filter.mode || 'datetime'"
           :clearable="true"
           :placeholder="i18n.t('To')"
           :dateOnly="true"

app/services/lists/experiments_service.rb

@@ -45,13 +45,14 @@ module Lists
         )
       end
 
-      if @filters[:created_at_from].present?
-        @records = @records.where('experiments.created_at > ?', @filters[:created_at_from])
-      end
-      if @filters[:created_at_to].present?
-        @records = @records.where('experiments.created_at < ?',
-                                @filters[:created_at_to])
-      end
+      @records = @records.where('experiments.start_on >= ?', @filters[:start_on_from]) if @filters[:start_on_from].present?
+
+      @records = @records.where('experiments.start_on <= ?', @filters[:start_on_to]) if @filters[:start_on_to].present?
+
+      @records = @records.where('experiments.due_date >= ?', @filters[:due_date_from]) if @filters[:due_date_from].present?
+
+      @records = @records.where('experiments.due_date <= ?', @filters[:due_date_to]) if @filters[:due_date_to].present?
+
       if @filters[:updated_on_from].present?
         @records = @records.where('experiments.updated_at > ?', @filters[:updated_on_from])
       end
@@ -68,6 +69,18 @@ module Lists
         @records = @records.where('COALESCE(experiments.archived_on, projects.archived_on) < ?',
                                 @filters[:archived_on_to])
       end
+
+      if @filters[:statuses].present?
+        scopes = {
+          'not_started' => @records.not_started,
+          'started' => @records.started,
+          'completed' => @records.completed
+        }
+
+        selected_scopes = @filters[:statuses].values.filter_map { |status| scopes[status] }
+
+        @records = selected_scopes.reduce(@records.none, :or) if selected_scopes.any?
+      end
     end
 
     def sortable_columns

config/locales/en.yml

@@ -1737,6 +1737,9 @@ en:
       experiment_access: "Access"
       details_modal:
         description: "%{name} description"
+      filters:
+        status: "Status"
+        status_placeholder: "Select experiment status"
     new:
       create: 'New Experiment'
       modal_title: 'Create new experiment'
@@ -4796,9 +4799,11 @@ en:
     created_on:
       label: "Start date"
     updated_on:
-      label: "Modified date"
+      label: "Updated date"
     archived_on:
       label: "Archived on"
+    due_date:
+      label: "Due date"
     recent_searches_label: "Recent searches"
     show_btn:
      one: "Show results"