All files / ee/app/assets/javascripts/audit_events/components date_range_field.vue

100% Statements 13/13
90% Branches 9/10
100% Functions 6/6
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86  2x 2x 2x 2x 2x                                         12x     12x     12x         3x 1x   2x       2x                         46x                                                        
<script>
import { GlDaterangePicker } from '@gitlab/ui';
import { dateAtFirstDayOfMonth, getDateInPast } from '~/lib/utils/datetime_utility';
import { __, n__, sprintf } from '~/locale';
import { CURRENT_DATE, MAX_DATE_RANGE } from '../constants';
import DateRangeButtons from './date_range_buttons.vue';
 
export default {
  components: {
    DateRangeButtons,
    GlDaterangePicker,
  },
  props: {
    startDate: {
      type: Date,
      required: false,
      default: null,
    },
    endDate: {
      type: Date,
      required: false,
      default: null,
    },
  },
  computed: {
    defaultStartDate() {
      return this.startDate || dateAtFirstDayOfMonth(CURRENT_DATE);
    },
    defaultEndDate() {
      return this.endDate || CURRENT_DATE;
    },
    defaultDateRange() {
      return { startDate: this.defaultStartDate, endDate: this.defaultEndDate };
    },
  },
  methods: {
    onInput({ startDate, endDate }) {
      if (!startDate && endDate) {
        this.$emit('selected', { startDate: getDateInPast(endDate, 1), endDate });
      } else {
        this.$emit('selected', { startDate, endDate });
      }
    },
    daysSelectedMessage(daysSelected) {
      return n__('1 day selected', '%d days selected', daysSelected);
    },
  },
  CURRENT_DATE,
  MAX_DATE_RANGE,
  i18n: {
    dateRangeTooltip: sprintf(__('Date range limited to %{number} days'), {
      number: MAX_DATE_RANGE,
    }),
  },
};
</script>
 
<template>
  <div class="gl-display-flex gl-lg-flex-direction-row gl-flex-direction-column">
    <date-range-buttons
      :date-range="defaultDateRange"
      class="gl-lg-pr-5 gl-mb-5"
      @input="onInput"
    />
    <gl-daterange-picker
      class="daterange-picker gl-display-flex gl-pl-0"
      :default-start-date="defaultStartDate"
      :default-end-date="defaultEndDate"
      :default-max-date="$options.CURRENT_DATE"
      :max-date-range="$options.MAX_DATE_RANGE"
      :same-day-selection="true"
      :tooltip="$options.i18n.dateRangeTooltip"
      start-picker-class="gl-mb-5 gl-pr-3 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-flex-end"
      end-picker-class="gl-mb-5 gl-lg-mr-3 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-lg-align-items-flex-end"
      date-range-indicator-class="gl-mb-5 gl-white-space-nowrap"
      @input="onInput"
    >
      <template #default="{ daysSelected }">
        <template v-if="daysSelected > 0">
          {{ daysSelectedMessage(daysSelected) }}
        </template>
      </template>
    </gl-daterange-picker>
  </div>
</template>