All files / ee/app/assets/javascripts/dependencies/components dependencies_actions.vue

100% Statements 11/11
25% Branches 1/4
100% Functions 11/11
100% Lines 11/11

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 87 88 89 90 91 92 93 94 95 96 97 98 99 100    2x                                                                   9x       9x     9x       9x     9x       9x     9x           9x           10x     1x                                                      
<script>
import { GlSorting } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapActions, mapState } from 'vuex';
import { omit } from 'lodash';
import { __ } from '~/locale';
import GroupDependenciesFilteredSearch from 'ee/dependencies/components/filtered_search/group_dependencies_filtered_search.vue';
import { NAMESPACE_PROJECT } from '../constants';
import { DEPENDENCY_LIST_TYPES } from '../store/constants';
import {
  SORT_FIELDS_PROJECT,
  SORT_FIELDS_GROUP,
  SORT_ASCENDING,
  SORT_FIELD_LICENSE,
} from '../store/modules/list/constants';
 
export default {
  i18n: {
    sortDirectionLabel: __('Sort direction'),
  },
  name: 'DependenciesActions',
  components: {
    GlSorting,
    GroupDependenciesFilteredSearch,
  },
  inject: ['namespaceType', 'belowGroupLimit'],
  props: {
    namespace: {
      type: String,
      required: true,
      validator: (value) =>
        Object.values(DEPENDENCY_LIST_TYPES).some(({ namespace }) => value === namespace),
    },
  },
  computed: {
    isSortAscending() {
      return this.sortOrder === SORT_ASCENDING;
    },
    ...mapState({
      sortField(state) {
        return state[this.namespace].sortField;
      },
      sortOrder(state) {
        return state[this.namespace].sortOrder;
      },
    }),
    sortFieldName() {
      return this.sortFields[this.sortField];
    },
    sortFields() {
      const groupFields = this.belowGroupLimit
        ? SORT_FIELDS_GROUP
        : omit(SORT_FIELDS_GROUP, SORT_FIELD_LICENSE);
 
      return this.isProjectNamespace ? SORT_FIELDS_PROJECT : groupFields;
    },
    sortOptions() {
      return Object.keys(this.sortFields).map((key) => ({
        text: this.sortFields[key],
        value: key,
      }));
    },
    isProjectNamespace() {
      return this.namespaceType === NAMESPACE_PROJECT;
    },
  },
  methods: {
    ...mapActions({
      setSortField(dispatch, field) {
        dispatch(`${this.namespace}/setSortField`, field);
      },
      toggleSortOrder(dispatch) {
        dispatch(`${this.namespace}/toggleSortOrder`);
      },
    }),
  },
};
</script>
 
<template>
  <div
    class="gl-display-flex gl-p-5 gl-bg-gray-10 gl-border-t-1 gl-border-t-solid gl-border-gray-100 gl-align-items-flex-start"
  >
    <group-dependencies-filtered-search
      v-if="!isProjectNamespace"
      class="gl-mr-3 gl-flex-grow-1 gl-min-w-0"
    />
    <gl-sorting
      :text="sortFieldName"
      :is-ascending="isSortAscending"
      :sort-direction-tool-tip="$options.i18n.sortDirectionLabel"
      :sort-options="sortOptions"
      :sort-by="sortField"
      class="gl-ml-auto"
      @sortDirectionChange="toggleSortOrder"
      @sortByChange="setSortField"
    />
  </div>
</template>