All files / ee/app/assets/javascripts/group_member_contributions/components table_header.vue

100% Statements 13/13
100% Branches 4/4
100% Functions 7/7
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  2x 2x                               9x 9x 81x             9x       85x 85x           100x     100x     2x 2x           138x                              
<script>
import { GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
 
export default {
  components: {
    GlIcon,
  },
  props: {
    columns: {
      type: Array,
      required: true,
    },
    sortOrders: {
      type: Object,
      required: true,
    },
  },
  data() {
    const columnIconMeta = this.columns.reduce(
      (acc, column) => ({
        ...acc,
        [column.name]: this.getColumnIconMeta(column.name, this.sortOrders),
      }),
      {},
    );
 
    return { columnIconMeta };
  },
  methods: {
    getColumnIconMeta(columnName, sortOrders) {
      const isAsc = sortOrders[columnName] > 0;
      return {
        sortIcon: isAsc ? 'angle-up' : 'angle-down',
        iconTooltip: isAsc ? __('Ascending') : __('Descending'),
      };
    },
    getColumnSortIcon(columnName) {
      return this.columnIconMeta[columnName].sortIcon;
    },
    getColumnSortTooltip(columnName) {
      return this.columnIconMeta[columnName].iconTooltip;
    },
    onColumnClick(columnName) {
      this.$emit('onColumnClick', columnName);
      this.columnIconMeta[columnName] = this.getColumnIconMeta(columnName, this.sortOrders);
    },
  },
};
</script>
 
<template>
  <thead>
    <tr>
      <th
        v-for="(column, index) in columns"
        :key="index"
        :title="getColumnSortTooltip(column.name)"
        class="header"
        @click="onColumnClick(column.name)"
      >
        {{ column.text }} <gl-icon :size="12" :name="getColumnSortIcon(column.name)" />
      </th>
    </tr>
  </thead>
</template>