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

100% Statements 9/9
100% Branches 2/2
100% Functions 5/5
100% Lines 9/9

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  2x 2x   2x 2x                                                 6x 18x         1x     12x               37x                            
<script>
import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
import { s__ } from '~/locale';
 
const SORTING_TITLE = s__('SortOptions|Sort by:');
const SORTING_OPTIONS = [
  {
    key: 'created_desc',
    text: s__('SortOptions|Last created'),
  },
  {
    key: 'created_asc',
    text: s__('SortOptions|Oldest created'),
  },
];
 
export default {
  components: {
    GlDropdown,
    GlDropdownSectionHeader,
    GlDropdownItem,
  },
  props: {
    sortBy: {
      type: String,
      required: false,
      default: null,
    },
  },
  computed: {
    selectedOption() {
      return SORTING_OPTIONS.find((option) => option.key === this.sortBy) || SORTING_OPTIONS[0];
    },
  },
  methods: {
    onItemClick(option) {
      this.$emit('selected', option);
    },
    isChecked(key) {
      return key === this.selectedOption.key;
    },
  },
  SORTING_TITLE,
  SORTING_OPTIONS,
};
</script>
 
<template>
  <gl-dropdown :text="selectedOption.text" class="gl-display-flex gl-mb-5">
    <gl-dropdown-section-header> {{ $options.SORTING_TITLE }}</gl-dropdown-section-header>
    <gl-dropdown-item
      v-for="option in $options.SORTING_OPTIONS"
      :key="option.key"
      :is-check-item="true"
      :is-checked="isChecked(option.key)"
      @click="onItemClick(option.key)"
    >
      {{ option.text }}
    </gl-dropdown-item>
  </gl-dropdown>
</template>