Implement date type filter [SCI-6216] (#3729)

Co-authored-by: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>

app/javascript/packs/vue/repository_filter.js

@@ -6,7 +6,7 @@ Vue.use(TurbolinksAdapter);
 Vue.prototype.i18n = window.I18n;
 
 window.initRepositoryFilter = () => {
-
+  Vue.prototype.dateFormat = $('#filterContainer').data('date-format')
   const defaultColumns = [
     { id: 'assigned', name: 'Assigned to task', data_type: 'RepositoryMyModuleValue' },
     { id: 'row_id', name: 'ID', data_type: 'RepositoryTextValue' },

app/javascript/vue/repository_filter/filter.vue

@@ -25,6 +25,7 @@
   import RepositoryTextValue from 'vue/repository_filter/filters/repositoryTextValue.vue'
   import RepositoryNumberValue from 'vue/repository_filter/filters/repositoryNumberValue.vue'
   import RepositoryMyModuleValue from 'vue/repository_filter/filters/repositoryMyModuleValue.vue'
+  import RepositoryDateValue from 'vue/repository_filter/filters/repositoryDateValue.vue'
   import RepositoryListValue from 'vue/repository_filter/filters/repositoryListValue.vue'
   import DropdownSelector from 'vue/shared/dropdown_selector.vue'
 
@@ -41,6 +42,7 @@
       RepositoryTextValue,
       RepositoryNumberValue,
       RepositoryMyModuleValue,
+      RepositoryDateValue
       RepositoryListValue
     },
     methods: {

app/javascript/vue/repository_filter/filters/repositoryDateValue.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="filter-attributes">
+    <div class="filter-operator-select">
+      <DropdownSelector
+      :disableSearch="true"
+      :options="operators"
+      :selectorId="`OperatorSelector${filter.id}`"
+      :selectedValue="operator"
+      @dropdown:changed="updateOperator" />
+    </div>
+    <template v-if="!isPreset">
+      <div class="filter-datepicker-input">
+        <DateTimePicker @change="updateDate" :selectorId="`DateTimePicker${filter.id}`" />
+      </div>
+      <div class="filter-datepicker-to-input">
+        <DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DateTimePickerTo${filter.id}`" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  import FilterMixin from 'vue/repository_filter/mixins/filter.js'
+  import DropdownSelector from 'vue/shared/dropdown_selector.vue'
+  import DateTimePicker from 'vue/shared/date_time_picker.vue'
+
+  export default {
+    name: 'RepositoryAssetValue',
+    mixins: [FilterMixin],
+    props: {
+      filter: Object
+    },
+    data() {
+      return {
+        operators: [
+          { value: 'today', label: this.i18n.t('repositories.show.repository_filter.filters.operators.today') },
+          { value: 'yesterday', label: this.i18n.t('repositories.show.repository_filter.filters.operators.yesterday') },
+          { value: 'last_week', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_week') },
+          { value: 'this_month', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_month') },
+          { value: 'this_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_year') },
+          { value: 'last_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_year') },
+          { value: 'equal', label: this.i18n.t('repositories.show.repository_filter.filters.operators.equal_to') },
+          { value: 'not_equal', label: this.i18n.t('repositories.show.repository_filter.filters.operators.unequal_to') },
+          { value: 'greater_than', label: this.i18n.t('repositories.show.repository_filter.filters.operators.greater_than') },
+          { value: 'greater_than_or_equal', label: this.i18n.t('repositories.show.repository_filter.filters.operators.greater_than_or_equal_to') },
+          { value: 'less_than', label: this.i18n.t('repositories.show.repository_filter.filters.operators.less_than') },
+          { value: 'less_than_or_equal', label: this.i18n.t('repositories.show.repository_filter.filters.operators.less_than_or_equal_to') },
+          { value: 'between', label: this.i18n.t('repositories.show.repository_filter.filters.operators.between') }
+        ],
+        operator: 'equal',
+        date: null,
+        dateTo: null,
+        value: null
+      }
+    },
+    components: {
+      DropdownSelector,
+      DateTimePicker
+    },
+    watch: {
+      operator() {
+        if(this.operator != 'between') {
+          this.dateTo = null;
+        }
+
+        let date = null;
+        let dateTo = null;
+
+        let today = new Date();
+
+        switch(this.operator) {
+          case "today":
+            date = today;
+            break;
+          case "yesterday":
+            date = new Date(new Date().setDate(today.getDate() - 1));
+            break;
+          case "last_week":
+            let monday = new Date(new Date().setDate(
+              today.getDate() - today.getDay() - (today.getDay() === 0 ? 6 : -1))
+            );
+            let lastWeekEnd = new Date(new Date().setDate(monday.getDate() - 1));
+            let lastWeekStart = new Date(new Date().setDate(monday.getDate() - 7));
+            date = lastWeekStart;
+            dateTo = lastWeekEnd;
+            break;
+          case "this_month":
+            date = new Date(today.getFullYear(), today.getMonth(), 1);
+            dateTo = today;
+            break;
+          case "this_year":
+            date = new Date(new Date().getFullYear(), 0, 1);
+            dateTo = today;
+            break;
+          case "last_year":
+            date = new Date(new Date().getFullYear() - 1, 0, 1);
+            dateTo = new Date(new Date().getFullYear() - 1, 11, 31);
+            break;
+        }
+
+        date && this.updateDate(date);
+        dateTo && this.updateDateTo(dateTo);
+      }
+    },
+    computed: {
+      isBlank(){
+        return !this.value;
+      },
+      isPreset() {
+        return [
+          "today",
+          "yesterday",
+          "last_week",
+          "this_month",
+          "this_year",
+          "last_year"
+        ].indexOf(this.operator) != -1
+      }
+    },
+    methods: {
+      formattedDate(date) {
+        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+      },
+      updateDate(date) {
+        date = date && this.formattedDate(date);
+        this.date = date;
+        if(this.dateTo) {
+          this.value = {
+            from_date: date,
+            to_date: this.dateTo
+          }
+        } else {
+          this.value = date
+        }
+
+        this.updateFilter();
+      },
+      updateDateTo(date) {
+        date = date && this.formattedDate(date);
+        this.dateTo = date;
+        this.value = {
+          from_date: this.date,
+          to_date: date
+        }
+
+        this.updateFilter();
+      }
+    }
+  }
+</script>

app/javascript/vue/shared/date_time_picker.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="datepicker">
+      <input @change="update" type="datetime" class="form-control calendar-input" :id="this.selectorId" placeholder="" />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DateTimePicker',
+    props: {
+      selectorId: { type: String, required: true },
+      useCurrent: { type: Boolean, default: true },
+      includeTime: { type: Boolean, default: false }
+    },
+    mounted() {
+      $("#" + this.selectorId).datetimepicker(
+        {
+          useCurrent: this.useCurrent,
+          ignoreReadonly: this.ignoreReadOnly,
+          locale: this.i18n.locale,
+          format: this.includeTime ? this.dateFormat + ' mm:ss' : this.dateFormat
+        }
+      );
+
+      $("#" + this.selectorId).on('dp.change', (e) => this.update(e.date))
+    },
+    methods: {
+      update(value) {
+        this.$emit('change', value.toDate());
+      }
+    }
+  }
+</script>

app/javascript/vue/shared/dropdown_selector.vue

@@ -14,7 +14,10 @@
       </optgroup>
       <option v-if="!groupSelector"
         v-for="option in this.options"
-        :key="option.label" :value="option.value">
+        :key="option.label"
+        :value="option.value"
+        :selected="option.value == selectedValue"
+        :data-selected="option.value == selectedValue">
           {{ option.label }}
       </option>
     </select>
@@ -39,6 +42,10 @@
         type: String,
         default: ''
       },
+      selectedValue: {
+        type: [String, Number, Boolean],
+        default: null
+      },
       singleSelect: {
         type: Boolean,
         default: true

app/views/repositories/_repository_filters.html.erb

@@ -14,6 +14,7 @@
       data-columns-url="<%= describe_all_repository_repository_columns_path(@repository) %>"
       data-my-modules-url="<%= assigned_my_modules_repository_path(@repository) %>"
       data-datatable-id="#repository-table-<%= @repository.id %>"
+      data-date-format="<%= current_user.date_format.gsub(/\%/, '').upcase %>"
     >
       <filter-container
         :columns.sync="columns"

config/locales/en.yml

@@ -1398,6 +1398,22 @@ en:
       repository_filter:
         enter_value: "Enter text"
         filters:
+            operators:
+              contains: "Contains"
+              does_not_contain: "Does not contain"
+              equal_to: "Equal to"
+              unequal_to: "Not equal to"
+              greater_than: "Greater than"
+              greater_than_or_equal_to: "Greater than or equal to"
+              less_than: "Less than"
+              less_than_or_equal_to: "Less than or equal to"
+              between: "Between"
+              today: "Today"
+              yesterday: "Yesterday"
+              last_week: "Last week"
+              this_month: "This month"
+              this_year: "This year"
+              last_year: "Last year"
             types:
               RepositoryAssetValue:
                 operators: