Multiple UX fixes for filters [SCI-6525] (#3858)

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

app/assets/javascripts/repositories/show.js

@@ -202,6 +202,10 @@
       $('#modalSaveRepositoryTableFilter #repository_table_filter_name').val('');
     });
 
+    $('#modalSaveRepositoryTableFilter').on('shown.bs.modal', function() {
+      $('#repository_table_filter_name').focus();
+    });
+
     $(document).on('click', '#overwriteFilterLink', function() {
       var $modal = $('#modalSaveRepositoryTableFilter');
 
@@ -213,6 +217,7 @@
         $modal.removeData('overwrite');
       });
 
+
       $('#modalSaveRepositoryTableFilter #repository_table_filter_name')
         .val($modal.data('repositoryTableFilterName'));
     });

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -520,6 +520,7 @@ var dropdownSelector = (function() {
       var customStyle = selector2.data('config').optionStyle;
       return $(`
         <div class="dropdown-option ${customClass}" style="${customStyle ? customStyle(option) : ''}"
+          title="${(option.params && option.params.tooltip) || ''}"
           data-params='${JSON.stringify(option.params || {})}'
           data-label="${option.label}"
           data-group="${group ? group.value : ''}"
@@ -600,7 +601,7 @@ var dropdownSelector = (function() {
         // For simple options we only draw them
         $.each(data, function(oi, option) {
           var optionElement;
-          if (option.delimiter) {
+          if (option.delimiter || (option.params && option.params.delimiter)) {
             drawDelimiter().appendTo(container.find('.dropdown-container'));
             return;
           }
@@ -706,7 +707,7 @@ var dropdownSelector = (function() {
       // Add new tag before search field
       var tag = $(`<div class="${tagAppearance} ${customClass}" style="${customStyle ? customStyle(data) : ''}" >
                   <div class="tag-label"
-                    title="${$('<span>' + label + '</span>').text()}"
+                    title="${(data.params && data.params.tooltip) || $('<span>' + label + '</span>').text().trim()}"
                     data-ds-tag-group="${data.group}"
                     data-ds-tag-id="${data.value}">
                   </div>

app/assets/stylesheets/repository/filters.scss

@@ -6,15 +6,22 @@
     position: relative;
 
     &::after {
-      background: $brand-accent;
+      background: $brand-danger;
       border-radius: 50%;
+      border: 2px solid $color-white;
       content: "";
       display: block;
-      height: 8px;
+      height: 10px;
       position: absolute;
       right: .3em;
       top: .3em;
-      width: 8px;
+      width: 10px;
+    }
+
+    &:hover {
+      &::after {
+        border-color: $color-concrete;
+      }
     }
   }
 
@@ -129,7 +136,7 @@
     .filters-list {
       flex-grow: 1;
       overflow-y: auto;
-      padding: .5em;
+      padding: .5em 1em;
     }
 
     .filter-container {
@@ -150,11 +157,31 @@
         grid-auto-flow: column;
         grid-template-columns: min-content auto;
 
+        .between-delimiter {
+          align-self: center;
+
+          &.vertical {
+            background-color: $color-silver-chalice;
+            height: 12px;
+            margin: auto;
+            width: 2px;
+          }
+        }
+
+        .number-range-selector {
+          align-items: center;
+          display: grid;
+          gap: .5em;
+          grid-auto-flow: column;
+        }
+
         .dropdown-selector-container {
           width: 100%;
         }
 
         .operator-selector {
+          height: 2em;
+
           .dropdown-selector-container {
             width: 120px;
           }
@@ -183,6 +210,14 @@
 
       .filter-remove {
         margin-left: auto;
+
+        .icon-btn {
+          color: $color-silver-chalice;
+
+          &:hover {
+            color: $color-black;
+          }
+        }
       }
     }
   }
@@ -195,3 +230,24 @@
     padding-left: 1.5em;
   }
 }
+
+
+#saveRepositoryFilters {
+  .dropdown-menu {
+    width: 320px;
+
+    .overwrite-link {
+      align-items: center;
+      display: flex;
+
+      .fa-save {
+        flex-shrink: 0;
+        margin-right: .25em;
+      }
+
+      .overwrite-title {
+        white-space: normal;
+      }
+    }
+  }
+}

app/javascript/vue/repository_filter/container.vue

@@ -143,6 +143,7 @@
       },
       toggleSavedFilters(e) {
         e.stopPropagation();
+        $('.saved-filters-list').scrollTo(0);
         if (this.savedFilterScrollbar) {
           this.savedFilterScrollbar.update();
         } else {

app/javascript/vue/repository_filter/filters/repositoryDateRangeValue.vue

@@ -11,6 +11,7 @@
     <div class="filter-datepicker-input">
       <DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" :onlyDate="true" />
     </div>
+    <span class="between-delimiter">—</span>
     <div class="filter-datepicker-to-input">
       <DateTimePicker @change="updateDateTo" :selectorId="`DatePickerTo${filter.id}`" :onlyDate="true" />
     </div>

app/javascript/vue/repository_filter/filters/repositoryDateTimeRangeValue.vue

@@ -12,6 +12,7 @@
       <div class="filter-datepicker-input">
         <DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" />
       </div>
+      <div class="between-delimiter vertical"></div>
       <div class="filter-datepicker-to-input">
         <DateTimePicker @change="updateDateTo" :selectorId="`DatePickerTo${filter.id}`" />
       </div>

app/javascript/vue/repository_filter/filters/repositoryDateTimeValue.vue

@@ -13,6 +13,7 @@
         <div class="filter-datepicker-input">
           <DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" />
         </div>
+        <div class="between-delimiter vertical" v-if="operator == 'between'"></div>
         <div class="filter-datepicker-to-input">
           <DateTimePicker @change="updateDateTo" v-if="operator == 'between'" :selectorId="`DatePickerTo${filter.id}`" />
         </div>
@@ -34,12 +35,25 @@
       return {
         timeType: 'datetime',
         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: 'today', label: this.i18n.t('repositories.show.repository_filter.filters.operators.today'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.today')
+          } },
+          { value: 'yesterday', label: this.i18n.t('repositories.show.repository_filter.filters.operators.yesterday'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.yesterday')
+          } },
+          { value: 'last_week', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_week'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_week')
+          } },
+          { value: 'this_month', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_month'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_month')
+          } },
+          { value: 'this_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_year'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_year')
+          } },
+          { value: 'last_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_year'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_year')
+          } },
+          { value: '', label: '', params: { delimiter: true } },
           { value: 'equal_to', label: this.i18n.t('repositories.show.repository_filter.filters.operators.equal_to') },
           { value: 'unequal_to', 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') },

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

@@ -12,6 +12,7 @@
       <div class="filter-datepicker-input">
         <DateTimePicker @change="updateDate" :selectorId="`DatePicker${filter.id}`" :onlyDate="true" />
       </div>
+      <span class="between-delimiter" v-if="operator == 'between'">—</span>
       <div class="filter-datepicker-to-input" v-if="operator == 'between'">
         <DateTimePicker @change="updateDateTo" :selectorId="`DatePickerTo${filter.id}`" :onlyDate="true" />
       </div>
@@ -32,12 +33,25 @@
       return {
         timeType: 'date',
         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: 'today', label: this.i18n.t('repositories.show.repository_filter.filters.operators.today'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.today')
+          } },
+          { value: 'yesterday', label: this.i18n.t('repositories.show.repository_filter.filters.operators.yesterday'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.yesterday')
+          } },
+          { value: 'last_week', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_week'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_week')
+          } },
+          { value: 'this_month', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_month'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_month')
+          } },
+          { value: 'this_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.this_year'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.this_year')
+          } },
+          { value: 'last_year', label: this.i18n.t('repositories.show.repository_filter.filters.operators.last_year'), params: {
+            tooltip: this.i18n.t('repositories.show.repository_filter.filters.operators.tooltips.last_year')
+          } },
+          { value: '', label: '', params: { delimiter: true } },
           { value: 'equal_to', label: this.i18n.t('repositories.show.repository_filter.filters.operators.equal_to') },
           { value: 'unequal_to', 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') },

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

@@ -18,23 +18,21 @@
         :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 v-else class="number-range-selector">
       <div class="sci-input-container">
         <input
-          @input="updateRange"
           class="sci-input-field"
-          type="number"
+          type="text"
           name="from"
           v-model="from"
 
         />
       </div>
-      -
+      <span class="between-delimiter">—</span>
       <div class="sci-input-container">
         <input
-          @input="updateRange"
           class="sci-input-field"
-          type="number"
+          type="text"
           name="to"
           v-model="to"
         />
@@ -60,7 +58,6 @@
           { value: 'less_than_or_equal_to', 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') }
         ],
-        numberRegexp: /[^0-9.]/g,
         operator: 'equal_to',
         value: '',
         from: '',
@@ -71,29 +68,24 @@
       DropdownSelector
     },
     methods: {
-      updateRange() {
-        this.value = {
-          from: this.from,
-          to: this.to
-        };
+      validateNumber(number) {
+        return number.replace(/[^0-9.]/g, '').match(/^\d*(\.\d{0,10})?/)[0]
       },
     },
     watch: {
-      operator() {
-        if(this.operator !== 'between' && !(typeof this.value === 'string')) this.value = '';
-        if(this.operator === 'between') this.value = {to: '', from: ''};
-      },
       value() {
-        if (this.operator === 'between') {
-          this.value = {
-            from: this.from.replace(this.numberRegexp, '').match(/^\d*(\.\d{0,10})?/)[0],
-            to: this.to.replace(this.numberRegexp, '').match(/^\d*(\.\d{0,10})?/)[0]
-          };
-          this.parameters = this.value;
-        } else {
-          this.value = this.value.replace(this.numberRegexp, '').match(/^\d*(\.\d{0,10})?/)[0]
-          this.parameters = { number: this.value }
-        }
+        this.value = this.validateNumber(this.value)
+        this.parameters = { number: this.value }
+        this.updateFilter();
+      },
+      to() {
+        this.to = this.validateNumber(this.to)
+        this.parameters = {from: this.from, to: this.to}
+        this.updateFilter();
+      },
+      from() {
+        this.from = this.validateNumber(this.from)
+        this.parameters = {from: this.from, to: this.to}
         this.updateFilter();
       }
     },

app/javascript/vue/repository_filter/filters/repositoryTimeRangeValue.vue

@@ -11,6 +11,7 @@
     <div class="filter-datepicker-input">
       <DateTimePicker @change="updateDate" :selectorId="`TimePicker${filter.id}`" :timeOnly="true" />
     </div>
+    <span class="between-delimiter">—</span>
     <div class="filter-datepicker-to-input">
       <DateTimePicker @change="updateDateTo" :selectorId="`TimePickerTo${filter.id}`" :timeOnly="true" />
     </div>

app/javascript/vue/repository_filter/filters/repositoryTimeValue.vue

@@ -12,6 +12,7 @@
       <div class="filter-datepicker-input">
         <DateTimePicker @change="updateDate" :selectorId="`TimePicker${filter.id}`" :timeOnly="true" />
       </div>
+      <span class="between-delimiter" v-if="operator == 'between'">—</span>
       <div class="filter-datepicker-to-input" v-if="operator == 'between'">
         <DateTimePicker @change="updateDateTo" :selectorId="`TimePickerTo${filter.id}`" :timeOnly="true" />
       </div>

app/views/repositories/_save_repository_filter_modal.html.erb

@@ -11,7 +11,7 @@
         <input type="hidden" id="repository_table_filter_elements_json">
         <div class="sci-input-container">
           <label for="repository_table_filter_name"><%= t('repositories.show.name') %></label>
-          <input type="text" id="repository_table_filter_name" class="sci-input-field" >
+          <input type="text" id="repository_table_filter_name" class="sci-input-field" autofocus>
         </div>
       </div>
 

app/views/repositories/_toolbar_buttons.html.erb

@@ -24,7 +24,7 @@
         <span class="hidden-xs"><%= t("repositories.show.filters.save_filters") %></span>
         <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu pull-right">
+      <ul class="dropdown-menu">
         <li id="newFilterLink" data-view-mode="active">
           <a href="#" data-toggle="modal" data-target="#modalSaveRepositoryTableFilter">
             <span class="fas fa-plus"></span>
@@ -32,10 +32,12 @@
           </a>
         </li>
         <li id="overwriteFilterLink" class="hidden" data-view-mode="active">
-          <a href="#" data-toggle="modal" data-target="#modalSaveRepositoryTableFilter">
+          <a href="#" data-toggle="modal" class="overwrite-link" data-target="#modalSaveRepositoryTableFilter">
             <span class="fas fa-save"></span>
-            <%= t('repositories.show.filters.overwrite_filter') %>
-            <span id="currentFilterName"></span>
+            <span class="overwrite-title">
+              <%= t('repositories.show.filters.overwrite_filter') %>
+              <span id="currentFilterName"></span>
+            </span>
           </a>
         </li>
       </ul>

config/locales/en.yml

@@ -1440,6 +1440,13 @@ en:
               file_contains: "File contains"
               file_attached: "File is attached"
               file_not_attached: "File is not attached"
+              tooltips:
+                today: "Today from midnight to midnight"
+                yesterday: "The previous 24 hour day"
+                last_week: "The previous calendar week beginning of Monday to end of Sunday"
+                this_month: "The current calendar month from beginning of first day to the end of the last day"
+                this_year: "The current calendar year from beginning of 1st January to  the end of 31st December"
+                last_year: "The last calendar year from beginning of 1st January to the end of 31st December"
             types:
               RepositoryAssetValue:
                 input_placeholder: "Enter text"