Merge branch '4949-replace-tablesorter-with-vue' into 'master'

Port Group member contribution analytics table to Vue

Closes #4949

See merge request gitlab-org/gitlab-ee!5269

app/assets/javascripts/commons/jquery.js

@@ -8,6 +8,3 @@ import 'vendor/jquery.atwho';
 import 'vendor/jquery.scrollTo';
 import 'jquery.waitforimages';
 import 'select2/select2';
-
-// EE-only
-import 'vendor/jquery.tablesorter';

ee/app/assets/javascripts/group_member_contributions/components/app.vue

+<script>
+import { __ } from '~/locale';
+import Flash from '~/flash';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+
+import COLUMNS from '../constants';
+
+import TableHeader from './table_header.vue';
+import TableBody from './table_body.vue';
+
+export default {
+  columns: COLUMNS,
+  components: {
+    LoadingIcon,
+    TableHeader,
+    TableBody,
+  },
+  props: {
+    store: {
+      type: Object,
+      required: true,
+    },
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoading: true,
+    };
+  },
+  computed: {
+    members() {
+      return this.store.members;
+    },
+    sortOrders() {
+      return this.store.sortOrders;
+    },
+  },
+  mounted() {
+    this.fetchContributedMembers();
+  },
+  methods: {
+    fetchContributedMembers() {
+      this.service
+        .getContributedMembers()
+        .then(res => res.data)
+        .then(members => {
+          this.store.setColumns(this.$options.columns);
+          this.store.setMembers(members);
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
+          Flash(__('Something went wrong while fetching group member contributions'));
+        });
+    },
+    handleColumnClick(columnName) {
+      this.store.sortMembers(columnName);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="group-member-contributions-container">
+    <h3>{{ __('Contributions per group member') }}</h3>
+    <loading-icon
+      class="loading-animation prepend-top-20 append-bottom-20"
+      size="2"
+      v-if="isLoading"
+      :label="__('Loading contribution stats for group members')"
+    />
+    <table
+      v-else
+      class="table gl-sortable"
+    >
+      <table-header
+        :columns="$options.columns"
+        :sort-orders="sortOrders"
+        @onColumnClick="handleColumnClick"
+      />
+      <table-body
+        :rows="members"
+      />
+    </table>
+  </div>
+</template>

ee/app/assets/javascripts/group_member_contributions/components/table_body.vue

+<script>
+export default {
+  props: {
+    rows: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <tbody>
+    <tr
+      v-for="(row, index) of rows"
+      :key="index"
+    >
+      <td>
+        <strong>
+          <a :href="row.userWebUrl">{{ row.fullname }}</a>
+        </strong>
+      </td>
+      <td>{{ row.push }}</td>
+      <td>{{ row.issuesCreated }}</td>
+      <td>{{ row.issuesClosed }}</td>
+      <td>{{ row.mergeRequestsCreated }}</td>
+      <td>{{ row.mergeRequestsMerged }}</td>
+      <td>{{ row.totalEvents }}</td>
+    </tr>
+  </tbody>
+</template>

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

+<script>
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  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"
+        class="header"
+        :title="getColumnSortTooltip(column.name)"
+        @click="onColumnClick(column.name)"
+      >
+        {{ column.text }}
+        <icon
+          :size="12"
+          :name="getColumnSortIcon(column.name)"
+        />
+      </th>
+    </tr>
+  </thead>
+</template>

ee/app/assets/javascripts/group_member_contributions/constants.js

+import { __ } from '~/locale';
+
+const COLUMNS = [
+  { name: 'fullname', text: __('Name') },
+  { name: 'push', text: __('Pushed') },
+  { name: 'issuesCreated', text: __('Opened issues') },
+  { name: 'issuesClosed', text: __('Closed issues') },
+  { name: 'mergeRequestsCreated', text: __('Opened MR') },
+  { name: 'mergeRequestsMerged', text: __('Accepted MR') },
+  { name: 'totalEvents', text: __('Total Contributions') },
+];
+
+export default COLUMNS;

ee/app/assets/javascripts/group_member_contributions/index.js

+import Vue from 'vue';
+
+import Translate from '~/vue_shared/translate';
+
+import GroupMemberStore from './store/group_member_store';
+import GroupMemberService from './service/group_member_service';
+
+import GroupMemberContributionsApp from './components/app.vue';
+
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-group-member-contributions');
+
+  if (!el) {
+    return false;
+  }
+
+  return new Vue({
+    el,
+    components: {
+      GroupMemberContributionsApp,
+    },
+    data() {
+      const { memberContributionsPath } = el.dataset;
+      const store = new GroupMemberStore();
+      const service = new GroupMemberService(memberContributionsPath);
+
+      return {
+        store,
+        service,
+      };
+    },
+    render(createElement) {
+      return createElement('group-member-contributions-app', {
+        props: {
+          store: this.store,
+          service: this.service,
+        },
+      });
+    },
+  });
+};

ee/app/assets/javascripts/group_member_contributions/service/group_member_service.js

+import axios from '~/lib/utils/axios_utils';
+
+export default class GroupMemberService {
+  constructor(memberContributionsPath) {
+    this.memberContributionsPath = memberContributionsPath;
+  }
+
+  getContributedMembers() {
+    return axios.get(this.memberContributionsPath);
+  }
+}

ee/app/assets/javascripts/group_member_contributions/store/group_member_store.js

+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+export default class GroupMemberStore {
+  constructor() {
+    this.state = {};
+    this.state.members = [];
+    this.state.columns = [];
+    this.state.sortOrders = {};
+    this.state.currentSortedColumn = '';
+  }
+
+  get members() {
+    return this.state.members;
+  }
+
+  get sortOrders() {
+    return this.state.sortOrders;
+  }
+
+  setColumns(columns) {
+    this.state.columns = columns;
+    this.state.sortOrders = this.state.columns.reduce(
+      (acc, column) => ({ ...acc, [column.name]: 1 }),
+      {},
+    );
+  }
+
+  setMembers(rawMembers) {
+    this.state.members = rawMembers.map(rawMember => GroupMemberStore.formatMember(rawMember));
+  }
+
+  sortMembers(sortByColumn) {
+    if (sortByColumn) {
+      this.state.currentSortedColumn = sortByColumn;
+      this.state.sortOrders[sortByColumn] = this.state.sortOrders[sortByColumn] * -1;
+
+      const currentColumnOrder = this.state.sortOrders[sortByColumn] || 1;
+      const members = this.state.members.slice().sort((a, b) => {
+        let delta = -1;
+        const columnOrderA = a[sortByColumn];
+        const columnOrderB = b[sortByColumn];
+
+        if (columnOrderA === columnOrderB) {
+          delta = 0;
+        } else if (columnOrderA > columnOrderB) {
+          delta = 1;
+        }
+
+        return delta * currentColumnOrder;
+      });
+
+      this.state.members = members;
+    }
+  }
+
+  static formatMember(rawMember) {
+    return convertObjectPropsToCamelCase(rawMember);
+  }
+}

ee/app/assets/javascripts/pages/groups/analytics/show/index.js

-import $ from 'jquery';
 import Chart from 'chart.js';
+import initGroupMemberContributions from 'ee/group_member_contributions';
 
 document.addEventListener('DOMContentLoaded', () => {
   const dataEl = document.getElementById('js-analytics-data');
@@ -32,6 +32,6 @@ document.addEventListener('DOMContentLoaded', () => {
       );
     });
 
-    $('#event-stats').tablesorter();
+    initGroupMemberContributions();
   }
 });

ee/app/assets/stylesheets/framework/sortable.scss

@@ -20,3 +20,18 @@
     color: $black;
   }
 }
+
+.gl-sortable {
+  .header {
+    user-select: none;
+
+    &:hover {
+      cursor: pointer;
+      background-color: $theme-gray-100;
+    }
+
+    &:focus {
+      outline: 1px solid $focus-border-color;
+    }
+  }
+}

ee/app/controllers/groups/analytics_controller.rb

 class Groups::AnalyticsController < Groups::ApplicationController
   before_action :group
   before_action :check_contribution_analytics_available!
+  before_action :load_events
 
   layout 'group'
 
   def show
-    @users = @group.users.select(:id, :name, :username).reorder(:id)
-    @start_date = params[:start_date] || Date.today - 1.week
-    @events = Event.contributions
-      .where("created_at > ?", @start_date)
-      .where(project_id: @group.projects)
-
+    respond_to do |format|
+      format.html do
         @stats = {}
+        @stats[:push] = count_by_user(event_totals[:push])
+        @stats[:merge_requests_created] = count_by_user(event_totals[:merge_requests_created])
+        @stats[:issues_closed] = count_by_user(event_totals[:issues_closed])
+      end
 
-    @stats[:total_events] = count_by_user(@events.totals_by_author)
-    @stats[:push] = count_by_user(@events.code_push.totals_by_author)
-    @stats[:merge_requests_created] = count_by_user(@events.merge_requests.created.totals_by_author)
-    @stats[:merge_requests_merged] = count_by_user(@events.merge_requests.merged.totals_by_author)
-    @stats[:issues_created] = count_by_user(@events.issues.created.totals_by_author)
-    @stats[:issues_closed] = count_by_user(@events.issues.closed.totals_by_author)
+      format.json do
+        render json: GroupAnalyticsSerializer
+                 .new(events: event_totals)
+                 .represent(users), status: 200
+      end
+    end
   end
 
   private
 
   def count_by_user(data)
-    user_ids.map { |id| data.fetch(id, 0) }
+    users.map { |user| data.fetch(user.id, 0) }
+  end
+
+  def users
+    @users ||= @group.users.select(:id, :name, :username).reorder(:id)
+  end
+
+  def load_events
+    @start_date = params[:start_date] || Date.today - 1.week
+    @events = Event.contributions
+                .where("created_at > ?", @start_date)
+                .where(project_id: @group.projects)
   end
 
-  def user_ids
-    @user_ids ||= @users.map(&:id)
+  def event_totals
+    @event_totals ||= {
+      push: @events.code_push.totals_by_author,
+      issues_created: @events.issues.created.totals_by_author,
+      issues_closed: @events.issues.closed.totals_by_author,
+      merge_requests_created: @events.merge_requests.created.totals_by_author,
+      merge_requests_merged: @events.merge_requests.merged.totals_by_author,
+      total_events: @events.totals_by_author
+    }
   end
 
   def check_contribution_analytics_available!

ee/app/serializers/group_analytics_serializer.rb

+class GroupAnalyticsSerializer < BaseSerializer
+  entity UserAnalyticsEntity
+end

ee/app/serializers/user_analytics_entity.rb

+class UserAnalyticsEntity < Grape::Entity
+  include RequestAwareEntity
+
+  EVENT_TYPES = [:push, :issues_created, :issues_closed, :merge_requests_created,
+                 :merge_requests_merged, :total_events].freeze
+
+  expose :username
+
+  expose :name, as: :fullname
+
+  expose :user_web_url do |user|
+    user_path(user)
+  end
+
+  EVENT_TYPES.each do |event_type|
+    expose event_type do |user|
+      request.events[event_type].fetch(user.id, 0)
+    end
+  end
+end

ee/app/views/groups/analytics/show.html.haml

 - page_title "Contribution Analytics"
-- header_title group_title(@group, "Contribution Analytics", group_analytics_path(@group))
 
 - if @group.feature_available?(:contribution_analytics)
   .sub-header-block
@@ -76,48 +75,7 @@
         %p.light Issues closed per group member
         %canvas#issues_closed{ height: 250 }
 
-  .gray-content-block
-    .oneline
-      Contributions per group member
-
-  .table-holder
-    %table.table.sortable-table#event-stats
-      %thead
-        %tr
-          %th.sortable
-            Name
-            = icon('sort')
-          %th.sortable
-            Pushed
-            = icon('sort')
-          %th.sortable
-            Opened issues
-            = icon('sort')
-          %th.sortable
-            Closed issues
-            = icon('sort')
-          %th.sortable
-            Opened MR
-            = icon('sort')
-          %th.sortable
-            Accepted MR
-            = icon('sort')
-          %th.sortable
-            Total Contributions
-            = icon('sort')
-      %tbody
-        - @users.each_with_index do |user, index|
-          %tr
-            %td
-              %strong
-                = link_to user.name, user
-            %td= @stats[:push][index]
-            %td= @stats[:issues_created][index]
-            %td= @stats[:issues_closed][index]
-            %td= @stats[:merge_requests_created][index]
-            %td= @stats[:merge_requests_merged][index]
-            %td= @stats[:total_events][index]
-
+  #js-group-member-contributions{ data: { member_contributions_path: group_analytics_path(@group, { start_date: @start_date, format: :json }) } }
   -# haml-lint:disable InlineJavaScript
   %script#js-analytics-data{ type: "application/json" }
     - data = {}

ee/changelogs/unreleased/4949-replace-tablesorter-with-vue.yml

+---
+title: Port Group member contribution analytics table to Vue
+merge_request: 5269
+author:
+type: performance

ee/spec/controllers/groups/analytics_controller_spec.rb

@@ -72,13 +72,41 @@ describe Groups::AnalyticsController do
     stats = assigns[:stats]
 
     # NOTE: The array ordering matters! The view references them all by index
-    expect(stats[:total_events]).to eq([2, 2, 2])
-    expect(stats[:merge_requests_merged]).to eq([0, 0, 0])
     expect(stats[:merge_requests_created]).to eq([0, 1, 1])
     expect(stats[:issues_closed]).to eq([1, 1, 0])
     expect(stats[:push]).to eq([1, 0, 1])
   end
 
+  it "returns member contributions JSON when format is JSON" do
+    get :show, group_id: group.path, format: :json
+
+    expect(json_response.length).to eq(3)
+
+    first_user = json_response.at(0)
+    expect(first_user["username"]).to eq(user.username)
+    expect(first_user["user_web_url"]).to eq("/#{user.username}")
+    expect(first_user["fullname"]).to eq(user.name)
+    expect(first_user["push"]).to eq(1)
+    expect(first_user["issues_created"]).to eq(0)
+    expect(first_user["issues_closed"]).to eq(1)
+    expect(first_user["merge_requests_created"]).to eq(0)
+    expect(first_user["merge_requests_merged"]).to eq(0)
+    expect(first_user["total_events"]).to eq(2)
+  end
+
+  it 'does not cause N+1 queries when the format is JSON' do
+    control_count = ActiveRecord::QueryRecorder.new do
+      get :show, group_id: group.path, format: :json
+    end
+
+    controller.instance_variable_set(:@group, nil)
+    user4 = create(:user)
+    group.add_user(user4, GroupMember::DEVELOPER)
+
+    expect { get :show, group_id: group.path, format: :json }
+      .not_to exceed_query_limit(control_count)
+  end
+
   describe 'with views' do
     render_views
 

ee/spec/serializers/user_analytics_entity_spec.rb

+require 'spec_helper'
+
+describe UserAnalyticsEntity do
+  let(:user) { build_stubbed(:user) }
+  let(:events) do
+    {
+      push: {},
+      issues_created: {},
+      issues_closed: {},
+      merge_requests_created: {},
+      merge_requests_merged: {},
+      total_events: {}
+    }
+  end
+  let(:request) { double('request') }
+
+  subject(:json) { described_class.new(user, request: request).as_json }
+
+  before do
+    allow(request).to receive(:events).and_return(events)
+  end
+
+  it 'has all the user attributes' do
+    is_expected.to include(:username, :fullname, :user_web_url)
+  end
+
+  [:push, :issues_created, :issues_closed, :merge_requests_created,
+   :merge_requests_merged, :total_events].each do |event_type|
+    it "fetches #{event_type} events for the user from the request" do
+      events[event_type] = { user.id => 42 }
+
+      expect(json[event_type]).to eq(42)
+    end
+  end
+
+  it 'sets 0 as the total when there were no events for a type' do
+    expect(json[:total_events]).to eq(0)
+  end
+end

spec/javascripts/group_member_contributions/components/app_spec.js

+import Vue from 'vue';
+
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+import AppComponent from 'ee/group_member_contributions/components/app.vue';
+import GroupMemberStore from 'ee/group_member_contributions/store/group_member_store';
+import GroupMemberService from 'ee/group_member_contributions/service/group_member_service';
+import { contributionsPath, rawMembers } from '../mock_data';
+
+const createComponent = () => {
+  const Component = Vue.extend(AppComponent);
+
+  const store = new GroupMemberStore();
+  const service = new GroupMemberService(contributionsPath);
+
+  return mountComponent(Component, {
+    store,
+    service,
+  });
+};
+
+describe('AppComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('methods', () => {
+    describe('fetchContributedMembers', () => {
+      let mock;
+
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
+        document.body.innerHTML += '<div class="flash-container"></div>';
+      });
+
+      afterEach(() => {
+        mock.restore();
+        document.querySelector('.flash-container').remove();
+      });
+
+      it('calls service.getContributedMembers and sets response to the store on success', done => {
+        mock.onGet(vm.service.memberContributionsPath).reply(200, rawMembers);
+        spyOn(vm.store, 'setColumns');
+        spyOn(vm.store, 'setMembers');
+
+        vm.fetchContributedMembers();
+        expect(vm.isLoading).toBe(true);
+        setTimeout(() => {
+          expect(vm.isLoading).toBe(false);
+          expect(vm.store.setColumns).toHaveBeenCalledWith(jasmine.any(Object));
+          expect(vm.store.setMembers).toHaveBeenCalledWith(rawMembers);
+          done();
+        }, 0);
+      });
+
+      it('calls service.getContributedMembers and sets `isLoading` to false and shows flash message if request failed', done => {
+        mock.onGet(vm.service.memberContributionsPath).reply(500, {});
+
+        vm.fetchContributedMembers();
+        expect(vm.isLoading).toBe(true);
+        setTimeout(() => {
+          expect(vm.isLoading).toBe(false);
+          expect(document.querySelector('.flash-text').innerText.trim()).toBe(
+            'Something went wrong while fetching group member contributions',
+          );
+          done();
+        }, 0);
+      });
+    });
+
+    describe('handleColumnClick', () => {
+      it('calls store.sortMembers with columnName param', () => {
+        spyOn(vm.store, 'sortMembers');
+
+        const columnName = 'fullname';
+        vm.handleColumnClick(columnName);
+        expect(vm.store.sortMembers).toHaveBeenCalledWith(columnName);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `group-member-contributions-container`', () => {
+      expect(vm.$el.classList.contains('group-member-contributions-container')).toBe(true);
+    });
+
+    it('renders header title element within component containe', () => {
+      expect(vm.$el.querySelector('h3').innerText.trim()).toBe('Contributions per group member');
+    });
+
+    it('shows loading icon when isLoading prop is true', done => {
+      vm.isLoading = true;
+      vm
+        .$nextTick()
+        .then(() => {
+          const loadingEl = vm.$el.querySelector('.loading-animation');
+          expect(loadingEl).not.toBeNull();
+          expect(loadingEl.querySelector('i').getAttribute('aria-label')).toBe(
+            'Loading contribution stats for group members',
+          );
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('renders table container element', done => {
+      vm.isLoading = false;
+      vm
+        .$nextTick()
+        .then(() => {
+          expect(vm.$el.querySelector('table.table.gl-sortable')).not.toBeNull();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});

spec/javascripts/group_member_contributions/components/table_body_spec.js

+import Vue from 'vue';
+
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+import TableBodyComponent from 'ee/group_member_contributions/components/table_body.vue';
+import GroupMemberStore from 'ee/group_member_contributions/store/group_member_store';
+
+import { rawMembers } from '../mock_data';
+
+const createComponent = () => {
+  const Component = Vue.extend(TableBodyComponent);
+
+  const store = new GroupMemberStore();
+  store.setMembers(rawMembers);
+  const rows = store.members;
+
+  return mountComponent(Component, { rows });
+};
+
+describe('TableBodyComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('template', () => {
+    it('renders row item element', () => {
+      const rowEl = vm.$el.querySelector('tr');
+      expect(rowEl).not.toBeNull();
+      expect(rowEl.querySelectorAll('td').length).toBe(7);
+    });
+
+    it('renders username row cell element', () => {
+      const cellEl = vm.$el.querySelector('td strong');
+      expect(cellEl).not.toBeNull();
+      expect(cellEl.querySelector('a').getAttribute('href')).toBe(rawMembers[0].user_web_url);
+    });
+  });
+});

spec/javascripts/group_member_contributions/components/table_header_spec.js

+import Vue from 'vue';
+
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+import TableHeaderComponent from 'ee/group_member_contributions/components/table_header.vue';
+import defaultColumns from 'ee/group_member_contributions/constants';
+
+import { mockSortOrders } from '../mock_data';
+
+const createComponent = (columns = defaultColumns, sortOrders = mockSortOrders) => {
+  const Component = Vue.extend(TableHeaderComponent);
+
+  return mountComponent(Component, { columns, sortOrders });
+};
+
+describe('TableHeaderComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('data', () => {
+    it('returns data with columnIconMeta prop initialized', () => {
+      defaultColumns.forEach(column => {
+        expect(vm.columnIconMeta[column.name].sortIcon).toBe('angle-up');
+        expect(vm.columnIconMeta[column.name].iconTooltip).toBe('Ascending');
+      });
+    });
+  });
+
+  describe('methods', () => {
+    const columnName = 'fullname';
+
+    describe('getColumnIconMeta', () => {
+      it('returns `angle-up` and `Ascending` for sortIcon and iconTooltip respectively when provided columnName in sortOrders has value greater than 0', () => {
+        const iconMeta = vm.getColumnIconMeta(columnName, { fullname: 1 });
+        expect(iconMeta.sortIcon).toBe('angle-up');
+        expect(iconMeta.iconTooltip).toBe('Ascending');
+      });
+
+      it('returns `angle-down` and `Descending` for sortIcon and iconTooltip respectively when provided columnName in sortOrders has value less than 0', () => {
+        const iconMeta = vm.getColumnIconMeta(columnName, { fullname: -1 });
+        expect(iconMeta.sortIcon).toBe('angle-down');
+        expect(iconMeta.iconTooltip).toBe('Descending');
+      });
+    });
+
+    describe('getColumnSortIcon', () => {
+      it('returns value of sortIcon for provided columnName', () => {
+        expect(vm.getColumnSortIcon(columnName)).toBe('angle-up');
+      });
+    });
+
+    describe('getColumnSortTooltip', () => {
+      it('returns value of iconTooltip for provided columnName', () => {
+        expect(vm.getColumnSortTooltip(columnName)).toBe('Ascending');
+      });
+    });
+
+    describe('onColumnClick', () => {
+      it('emits `onColumnClick` event with columnName param on component instance', () => {
+        spyOn(vm, '$emit');
+        vm.onColumnClick(columnName);
+        expect(vm.$emit).toHaveBeenCalledWith('onColumnClick', columnName);
+      });
+
+      it('updates columnIconMeta prop for provided columnName', () => {
+        spyOn(vm, 'getColumnIconMeta');
+        vm.onColumnClick(columnName);
+        expect(vm.getColumnIconMeta).toHaveBeenCalledWith(columnName, vm.sortOrders);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders table column header with sort order icon', () => {
+      const headerItemEl = vm.$el.querySelector('tr th');
+      expect(headerItemEl).not.toBeNull();
+      expect(headerItemEl.innerText.trim()).toBe('Name');
+      expect(headerItemEl.querySelector('svg use').getAttribute('xlink:href')).toContain(
+        'angle-up',
+      );
+    });
+  });
+});

spec/javascripts/group_member_contributions/mock_data.js

+export const contributionsPath = '/foo/analytics.json';
+
+export const rawMembers = [
+  {
+    username: 'root',
+    fullname: 'Administrator',
+    user_web_url: '/root',
+    push: 0,
+    issues_created: 9,
+    issues_closed: 4,
+    merge_requests_created: 2,
+    merge_requests_merged: 0,
+    total_events: 51,
+  },
+  {
+    username: 'monserrate.gleichner',
+    fullname: 'Terrell Graham',
+    user_web_url: '/monserrate.gleichner',
+    push: 0,
+    issues_created: 7,
+    issues_closed: 1,
+    merge_requests_created: 5,
+    merge_requests_merged: 0,
+    total_events: 49,
+  },
+  {
+    username: 'melynda',
+    fullname: 'Bryce Turcotte',
+    user_web_url: '/melynda',
+    push: 0,
+    issues_created: 6,
+    issues_closed: 1,
+    merge_requests_created: 1,
+    merge_requests_merged: 0,
+    total_events: 44,
+  },
+];
+
+export const mockSortOrders = {
+  fullname: 1,
+  issuesClosed: 1,
+  issuesCreated: 1,
+  mergeRequestsCreated: 1,
+  mergeRequestsMerged: 1,
+  push: 1,
+  totalEvents: 1,
+};

spec/javascripts/group_member_contributions/service/group_member_service_spec.js

+import axios from '~/lib/utils/axios_utils';
+
+import GroupMemberService from 'ee/group_member_contributions/service/group_member_service';
+
+import { contributionsPath } from '../mock_data';
+
+describe('GroupMemberService', () => {
+  let service;
+
+  beforeEach(() => {
+    service = new GroupMemberService(contributionsPath);
+  });
+
+  describe('constructor', () => {
+    it('initializes default properties', () => {
+      expect(service.memberContributionsPath).toBe(contributionsPath);
+    });
+  });
+
+  describe('getContributedMembers', () => {
+    it('returns axios instance for memberContributionsPath', () => {
+      spyOn(axios, 'get').and.stub();
+      service.getContributedMembers();
+      expect(axios.get).toHaveBeenCalledWith(service.memberContributionsPath);
+    });
+  });
+});

spec/javascripts/group_member_contributions/store/group_member_store_spec.js

+import GroupMemberStore from 'ee/group_member_contributions/store/group_member_store';
+import defaultColumns from 'ee/group_member_contributions/constants';
+
+import { rawMembers } from '../mock_data';
+
+describe('GroupMemberStore', () => {
+  let store;
+
+  beforeEach(() => {
+    store = new GroupMemberStore();
+  });
+
+  describe('setColumns', () => {
+    beforeEach(() => {
+      store.setColumns(defaultColumns);
+    });
+
+    it('sets columns to store state', () => {
+      expect(store.state.columns).toBe(defaultColumns);
+    });
+
+    it('initializes sortOrders on store state', () => {
+      Object.keys(store.state.sortOrders).forEach(column => {
+        expect(store.state.sortOrders[column]).toBe(1);
+      });
+    });
+  });
+
+  describe('setMembers', () => {
+    it('sets members to store state', () => {
+      store.setMembers(rawMembers);
+      expect(store.state.members.length).toBe(rawMembers.length);
+    });
+  });
+
+  describe('sortMembers', () => {
+    it('sorts members list based on provided column name', () => {
+      store.setColumns(defaultColumns);
+      store.setMembers(rawMembers);
+
+      let firstMember = store.state.members[0];
+      expect(firstMember.fullname).toBe('Administrator');
+
+      store.sortMembers('fullname');
+      firstMember = store.state.members[0];
+      expect(firstMember.fullname).toBe('Terrell Graham');
+    });
+  });
+});

vendor/assets/javascripts/jquery.tablesorter.js

-/*
- * 
- * TableSorter 2.0 - Client-side table sorting with ease!
- * Version 2.0.5b
- * @requires jQuery v1.2.3
- * 
- * Copyright (c) 2007 Christian Bach
- * Examples and docs at: http://tablesorter.com
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- * 
- */
-/**
- * 
- * @description Create a sortable table with multi-column sorting capabilitys
- * 
- * @example $('table').tablesorter();
- * @desc Create a simple tablesorter interface.
- * 
- * @example $('table').tablesorter({ sortList:[[0,0],[1,0]] });
- * @desc Create a tablesorter interface and sort on the first and secound column column headers.
- * 
- * @example $('table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } });
- *          
- * @desc Create a tablesorter interface and disableing the first and second  column headers.
- *      
- * 
- * @example $('table').tablesorter({ headers: { 0: {sorter:"integer"}, 1: {sorter:"currency"} } });
- * 
- * @desc Create a tablesorter interface and set a column parser for the first
- *       and second column.
- * 
- * 
- * @param Object
- *            settings An object literal containing key/value pairs to provide
- *            optional settings.
- * 
- * 
- * @option String cssHeader (optional) A string of the class name to be appended
- *         to sortable tr elements in the thead of the table. Default value:
- *         "header"
- * 
- * @option String cssAsc (optional) A string of the class name to be appended to
- *         sortable tr elements in the thead on a ascending sort. Default value:
- *         "headerSortUp"
- * 
- * @option String cssDesc (optional) A string of the class name to be appended
- *         to sortable tr elements in the thead on a descending sort. Default
- *         value: "headerSortDown"
- * 
- * @option String sortInitialOrder (optional) A string of the inital sorting
- *         order can be asc or desc. Default value: "asc"
- * 
- * @option String sortMultisortKey (optional) A string of the multi-column sort
- *         key. Default value: "shiftKey"
- * 
- * @option String textExtraction (optional) A string of the text-extraction
- *         method to use. For complex html structures inside td cell set this
- *         option to "complex", on large tables the complex option can be slow.
- *         Default value: "simple"
- * 
- * @option Object headers (optional) An object of instructions for per-column
- *         controls in the format: headers: { 0: { option: setting }, ... }. For 
- *         example, to disable sorting on the first two columns of a table:
- *         headers: { 0: { sorter: false}, 1: {sorter: false} }.
- *         Default value: null.
- * 
- * @option Array sortList (optional) An array of instructions for per-column sorting 
- *         and direction in the format: [[columnIndex, sortDirection], ... ] where 
- *         columnIndex is a zero-based index for your columns left-to-right and 
- *         sortDirection is 0 for Ascending and 1 for Descending. A valid argument 
- *         that sorts ascending first by column 1 and then column 2 looks like: 
- *         [[0,0],[1,0]]. Default value: null.
- * 
- * @option Array sortForce (optional) An array containing forced sorting rules.
- *         Use to add an additional forced sort that will be appended to the dynamic
- *         selections by the user. For example, can be used to sort people alphabetically
- *         after some other user-selected sort that results in rows with the same value 
- *         like dates or money due. It can help prevent data from appearing as though it 
- *         has a random secondary sort. Default value: null.
- * 
- * @option Boolean sortLocaleCompare (optional) Boolean flag indicating whatever
- *         to use String.localeCampare method or not. Default set to true.
- * 
- * 
- * @option Array sortAppend (optional) An array containing forced sorting rules.
- *         This option let's you specify a default sorting rule, which is
- *         appended to user-selected rules. Default value: null
- * 
- * @option Boolean widthFixed (optional) Boolean flag indicating if tablesorter
- *         should apply fixed widths to the table columns. This is usefull when
- *         using the pager companion plugin. This options requires the dimension
- *         jquery plugin. Default value: false
- * 
- * @option Boolean cancelSelection (optional) Boolean flag indicating if
- *         tablesorter should cancel selection of the table headers text.
- *         Default value: true
- * 
- * @option Boolean debug (optional) Boolean flag indicating if tablesorter
- *         should display debuging information usefull for development.
- * 
- * @type jQuery
- * 
- * @name tablesorter
- * 
- * @cat Plugins/Tablesorter
- * 
- * @author Christian Bach/christian.bach@polyester.se
- */
-
-(function ($) {
-    $.extend({
-        tablesorter: new
-        function () {
-
-            var parsers = [],
-                widgets = [];
-
-            this.defaults = {
-                cssHeader: "header",
-                cssAsc: "headerSortUp",
-                cssDesc: "headerSortDown",
-                cssChildRow: "expand-child",
-                sortInitialOrder: "asc",
-                sortMultiSortKey: "shiftKey",
-                sortForce: null,
-                sortAppend: null,
-                sortLocaleCompare: true,
-                textExtraction: "simple",
-                parsers: {}, widgets: [],
-                widgetZebra: {
-                    css: ["even", "odd"]
-                }, headers: {}, widthFixed: false,
-                cancelSelection: true,
-                sortList: [],
-                headerList: [],
-                dateFormat: "us",
-                decimal: '/\.|\,/g',
-                onRenderHeader: null,
-                selectorHeaders: 'thead th',
-                debug: false
-            };
-
-            /* debuging utils */
-
-            function benchmark(s, d) {
-                log(s + "," + (new Date().getTime() - d.getTime()) + "ms");
-            }
-
-            this.benchmark = benchmark;
-
-            function log(s) {
-                if (typeof console != "undefined" && typeof console.debug != "undefined") {
-                    console.log(s);
-                } else {
-                    alert(s);
-                }
-            }
-
-            /* parsers utils */
-
-            function buildParserCache(table, $headers) {
-
-                if (table.config.debug) {
-                    var parsersDebug = "";
-                }
-
-                if (table.tBodies.length == 0) return; // In the case of empty tables
-                var rows = table.tBodies[0].rows;
-
-                if (rows[0]) {
-
-                    var list = [],
-                        cells = rows[0].cells,
-                        l = cells.length;
-
-                    for (var i = 0; i < l; i++) {
-
-                        var p = false;
-
-                        if ($.metadata && ($($headers[i]).metadata() && $($headers[i]).metadata().sorter)) {
-
-                            p = getParserById($($headers[i]).metadata().sorter);
-
-                        } else if ((table.config.headers[i] && table.config.headers[i].sorter)) {
-
-                            p = getParserById(table.config.headers[i].sorter);
-                        }
-                        if (!p) {
-
-                            p = detectParserForColumn(table, rows, -1, i);
-                        }
-
-                        if (table.config.debug) {
-                            parsersDebug += "column:" + i + " parser:" + p.id + "\n";
-                        }
-
-                        list.push(p);
-                    }
-                }
-
-                if (table.config.debug) {
-                    log(parsersDebug);
-                }
-
-                return list;
-            };
-
-            function detectParserForColumn(table, rows, rowIndex, cellIndex) {
-                var l = parsers.length,
-                    node = false,
-                    nodeValue = false,
-                    keepLooking = true;
-                while (nodeValue == '' && keepLooking) {
-                    rowIndex++;
-                    if (rows[rowIndex]) {
-                        node = getNodeFromRowAndCellIndex(rows, rowIndex, cellIndex);
-                        nodeValue = trimAndGetNodeText(table.config, node);
-                        if (table.config.debug) {
-                            log('Checking if value was empty on row:' + rowIndex);
-                        }
-                    } else {
-                        keepLooking = false;
-                    }
-                }
-                for (var i = 1; i < l; i++) {
-                    if (parsers[i].is(nodeValue, table, node)) {
-                        return parsers[i];
-                    }
-                }
-                // 0 is always the generic parser (text)
-                return parsers[0];
-            }
-
-            function getNodeFromRowAndCellIndex(rows, rowIndex, cellIndex) {
-                return rows[rowIndex].cells[cellIndex];
-            }
-
-            function trimAndGetNodeText(config, node) {
-                return $.trim(getElementText(config, node));
-            }
-
-            function getParserById(name) {
-                var l = parsers.length;
-                for (var i = 0; i < l; i++) {
-                    if (parsers[i].id.toLowerCase() == name.toLowerCase()) {
-                        return parsers[i];
-                    }
-                }
-                return false;
-            }
-
-            /* utils */
-
-            function buildCache(table) {
-
-                if (table.config.debug) {
-                    var cacheTime = new Date();
-                }
-
-                var totalRows = (table.tBodies[0] && table.tBodies[0].rows.length) || 0,
-                    totalCells = (table.tBodies[0].rows[0] && table.tBodies[0].rows[0].cells.length) || 0,
-                    parsers = table.config.parsers,
-                    cache = {
-                        row: [],
-                        normalized: []
-                    };
-
-                for (var i = 0; i < totalRows; ++i) {
-
-                    /** Add the table data to main data array */
-                    var c = $(table.tBodies[0].rows[i]),
-                        cols = [];
-
-                    // if this is a child row, add it to the last row's children and
-                    // continue to the next row
-                    if (c.hasClass(table.config.cssChildRow)) {
-                        cache.row[cache.row.length - 1] = cache.row[cache.row.length - 1].add(c);
-                        // go to the next for loop
-                        continue;
-                    }
-
-                    cache.row.push(c);
-
-                    for (var j = 0; j < totalCells; ++j) {
-                        cols.push(parsers[j].format(getElementText(table.config, c[0].cells[j]), table, c[0].cells[j]));
-                    }
-
-                    cols.push(cache.normalized.length); // add position for rowCache
-                    cache.normalized.push(cols);
-                    cols = null;
-                };
-
-                if (table.config.debug) {
-                    benchmark("Building cache for " + totalRows + " rows:", cacheTime);
-                }
-
-                return cache;
-            };
-
-            function getElementText(config, node) {
-            	
-                if (!node) return "";
-                
-		        var $node = $(node),
-		            data = $node.attr('data-sort-value');
-		        if (data !== undefined) return data;
-
-                var text = "";
-
-                if (!config.supportsTextContent) config.supportsTextContent = node.textContent || false;
-
-                if (config.textExtraction == "simple") {
-                    if (config.supportsTextContent) {
-                        text = node.textContent;
-                    } else {
-                        if (node.childNodes[0] && node.childNodes[0].hasChildNodes()) {
-                            text = node.childNodes[0].innerHTML;
-                        } else {
-                            text = node.innerHTML;
-                        }
-                    }
-                } else {
-                    if (typeof(config.textExtraction) == "function") {
-                        text = config.textExtraction(node);
-                    } else {
-                        text = $(node).text();
-                    }
-                }
-                return text;
-            }
-
-            function appendToTable(table, cache) {
-
-                if (table.config.debug) {
-                    var appendTime = new Date()
-                }
-
-                var c = cache,
-                    r = c.row,
-                    n = c.normalized,
-                    totalRows = n.length,
-                    checkCell = (n[0].length - 1),
-                    tableBody = $(table.tBodies[0]),
-                    rows = [];
-
-
-                for (var i = 0; i < totalRows; i++) {
-                    var pos = n[i][checkCell];
-
-                    rows.push(r[pos]);
-
-                    if (!table.config.appender) {
-
-                        //var o = ;
-                        var l = r[pos].length;
-                        for (var j = 0; j < l; j++) {
-                            tableBody[0].appendChild(r[pos][j]);
-                        }
-
-                        // 
-                    }
-                }
-
-
-
-                if (table.config.appender) {
-
-                    table.config.appender(table, rows);
-                }
-
-                rows = null;
-
-                if (table.config.debug) {
-                    benchmark("Rebuilt table:", appendTime);
-                }
-
-                // apply table widgets
-                applyWidget(table);
-
-                // trigger sortend
-                setTimeout(function () {
-                    $(table).trigger("sortEnd");
-                }, 0);
-
-            };
-
-            function buildHeaders(table) {
-
-                if (table.config.debug) {
-                    var time = new Date();
-                }
-
-                var meta = ($.metadata) ? true : false;
-                
-                var header_index = computeTableHeaderCellIndexes(table);
-
-                var $tableHeaders = $(table.config.selectorHeaders, table).each(function (index) {
-
-                    this.column = header_index[this.parentNode.rowIndex + "-" + this.cellIndex];
-                    // this.column = index;
-                    this.order = formatSortingOrder(table.config.sortInitialOrder);
-                    
-					
-					this.count = this.order;
-
-                    if (checkHeaderMetadata(this) || checkHeaderOptions(table, index)) this.sortDisabled = true;
-					if (checkHeaderOptionsSortingLocked(table, index)) this.order = this.lockedOrder = checkHeaderOptionsSortingLocked(table, index);
-
-                    if (!this.sortDisabled) {
-                        var $th = $(this).addClass(table.config.cssHeader);
-                        if (table.config.onRenderHeader) table.config.onRenderHeader.apply($th);
-                    }
-
-                    // add cell to headerList
-                    table.config.headerList[index] = this;
-                });
-
-                if (table.config.debug) {
-                    benchmark("Built headers:", time);
-                    log($tableHeaders);
-                }
-
-                return $tableHeaders;
-
-            };
-
-            // from:
-            // http://www.javascripttoolbox.com/lib/table/examples.php
-            // http://www.javascripttoolbox.com/temp/table_cellindex.html
-
-
-            function computeTableHeaderCellIndexes(t) {
-                var matrix = [];
-                var lookup = {};
-                var thead = t.getElementsByTagName('THEAD')[0];
-                var trs = thead.getElementsByTagName('TR');
-
-                for (var i = 0; i < trs.length; i++) {
-                    var cells = trs[i].cells;
-                    for (var j = 0; j < cells.length; j++) {
-                        var c = cells[j];
-
-                        var rowIndex = c.parentNode.rowIndex;
-                        var cellId = rowIndex + "-" + c.cellIndex;
-                        var rowSpan = c.rowSpan || 1;
-                        var colSpan = c.colSpan || 1
-                        var firstAvailCol;
-                        if (typeof(matrix[rowIndex]) == "undefined") {
-                            matrix[rowIndex] = [];
-                        }
-                        // Find first available column in the first row
-                        for (var k = 0; k < matrix[rowIndex].length + 1; k++) {
-                            if (typeof(matrix[rowIndex][k]) == "undefined") {
-                                firstAvailCol = k;
-                                break;
-                            }
-                        }
-                        lookup[cellId] = firstAvailCol;
-                        for (var k = rowIndex; k < rowIndex + rowSpan; k++) {
-                            if (typeof(matrix[k]) == "undefined") {
-                                matrix[k] = [];
-                            }
-                            var matrixrow = matrix[k];
-                            for (var l = firstAvailCol; l < firstAvailCol + colSpan; l++) {
-                                matrixrow[l] = "x";
-                            }
-                        }
-                    }
-                }
-                return lookup;
-            }
-
-            function checkCellColSpan(table, rows, row) {
-                var arr = [],
-                    r = table.tHead.rows,
-                    c = r[row].cells;
-
-                for (var i = 0; i < c.length; i++) {
-                    var cell = c[i];
-
-                    if (cell.colSpan > 1) {
-                        arr = arr.concat(checkCellColSpan(table, headerArr, row++));
-                    } else {
-                        if (table.tHead.length == 1 || (cell.rowSpan > 1 || !r[row + 1])) {
-                            arr.push(cell);
-                        }
-                        // headerArr[row] = (i+row);
-                    }
-                }
-                return arr;
-            };
-
-            function checkHeaderMetadata(cell) {
-                if (($.metadata) && ($(cell).metadata().sorter === false)) {
-                    return true;
-                };
-                return false;
-            }
-
-            function checkHeaderOptions(table, i) {
-                if ((table.config.headers[i]) && (table.config.headers[i].sorter === false)) {
-                    return true;
-                };
-                return false;
-            }
-			
-			 function checkHeaderOptionsSortingLocked(table, i) {
-                if ((table.config.headers[i]) && (table.config.headers[i].lockedOrder)) return table.config.headers[i].lockedOrder;
-                return false;
-            }
-			
-            function applyWidget(table) {
-                var c = table.config.widgets;
-                var l = c.length;
-                for (var i = 0; i < l; i++) {
-
-                    getWidgetById(c[i]).format(table);
-                }
-
-            }
-
-            function getWidgetById(name) {
-                var l = widgets.length;
-                for (var i = 0; i < l; i++) {
-                    if (widgets[i].id.toLowerCase() == name.toLowerCase()) {
-                        return widgets[i];
-                    }
-                }
-            };
-
-            function formatSortingOrder(v) {
-                if (typeof(v) != "Number") {
-                    return (v.toLowerCase() == "desc") ? 1 : 0;
-                } else {
-                    return (v == 1) ? 1 : 0;
-                }
-            }
-
-            function isValueInArray(v, a) {
-                var l = a.length;
-                for (var i = 0; i < l; i++) {
-                    if (a[i][0] == v) {
-                        return true;
-                    }
-                }
-                return false;
-            }
-
-            function setHeadersCss(table, $headers, list, css) {
-                // remove all header information
-                $headers.removeClass(css[0]).removeClass(css[1]);
-
-                var h = [];
-                $headers.each(function (offset) {
-                    if (!this.sortDisabled) {
-                        h[this.column] = $(this);
-                    }
-                });
-
-                var l = list.length;
-                for (var i = 0; i < l; i++) {
-                    h[list[i][0]].addClass(css[list[i][1]]);
-                }
-            }
-
-            function fixColumnWidth(table, $headers) {
-                var c = table.config;
-                if (c.widthFixed) {
-                    var colgroup = $('<colgroup>');
-                    $("tr:first td", table.tBodies[0]).each(function () {
-                        colgroup.append($('<col>').css('width', $(this).width()));
-                    });
-                    $(table).prepend(colgroup);
-                };
-            }
-
-            function updateHeaderSortCount(table, sortList) {
-                var c = table.config,
-                    l = sortList.length;
-                for (var i = 0; i < l; i++) {
-                    var s = sortList[i],
-                        o = c.headerList[s[0]];
-                    o.count = s[1];
-                    o.count++;
-                }
-            }
-
-            /* sorting methods */
-            
-            var sortWrapper;
-
-            function multisort(table, sortList, cache) {
-
-                if (table.config.debug) {
-                    var sortTime = new Date();
-                }
-
-                var dynamicExp = "sortWrapper = function(a,b) {",
-                    l = sortList.length;
-
-                // TODO: inline functions.
-                for (var i = 0; i < l; i++) {
-
-                    var c = sortList[i][0];
-                    var order = sortList[i][1];
-                    // var s = (getCachedSortType(table.config.parsers,c) == "text") ?
-                    // ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ?
-                    // "sortNumeric" : "sortNumericDesc");
-                    // var s = (table.config.parsers[c].type == "text") ? ((order == 0)
-                    // ? makeSortText(c) : makeSortTextDesc(c)) : ((order == 0) ?
-                    // makeSortNumeric(c) : makeSortNumericDesc(c));
-                    var s = (table.config.parsers[c].type == "text") ? ((order == 0) ? makeSortFunction("text", "asc", c) : makeSortFunction("text", "desc", c)) : ((order == 0) ? makeSortFunction("numeric", "asc", c) : makeSortFunction("numeric", "desc", c));
-                    var e = "e" + i;
-
-                    dynamicExp += "var " + e + " = " + s; // + "(a[" + c + "],b[" + c
-                    // + "]); ";
-                    dynamicExp += "if(" + e + ") { return " + e + "; } ";
-                    dynamicExp += "else { ";
-
-                }
-
-                // if value is the same keep orignal order
-                var orgOrderCol = cache.normalized[0].length - 1;
-                dynamicExp += "return a[" + orgOrderCol + "]-b[" + orgOrderCol + "];";
-
-                for (var i = 0; i < l; i++) {
-                    dynamicExp += "}; ";
-                }
-
-                dynamicExp += "return 0; ";
-                dynamicExp += "}; ";
-
-                if (table.config.debug) {
-                    benchmark("Evaling expression:" + dynamicExp, new Date());
-                }
-
-                eval(dynamicExp);
-
-                cache.normalized.sort(sortWrapper);
-
-                if (table.config.debug) {
-                    benchmark("Sorting on " + sortList.toString() + " and dir " + order + " time:", sortTime);
-                }
-
-                return cache;
-            };
-
-            function makeSortFunction(type, direction, index) {
-                var a = "a[" + index + "]",
-                    b = "b[" + index + "]";
-                if (type == 'text' && direction == 'asc') {
-                    return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + a + " < " + b + ") ? -1 : 1 )));";
-                } else if (type == 'text' && direction == 'desc') {
-                    return "(" + a + " == " + b + " ? 0 : (" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : (" + b + " < " + a + ") ? -1 : 1 )));";
-                } else if (type == 'numeric' && direction == 'asc') {
-                    return "(" + a + " === null && " + b + " === null) ? 0 :(" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : " + a + " - " + b + "));";
-                } else if (type == 'numeric' && direction == 'desc') {
-                    return "(" + a + " === null && " + b + " === null) ? 0 :(" + a + " === null ? Number.POSITIVE_INFINITY : (" + b + " === null ? Number.NEGATIVE_INFINITY : " + b + " - " + a + "));";
-                }
-            };
-
-            function makeSortText(i) {
-                return "((a[" + i + "] < b[" + i + "]) ? -1 : ((a[" + i + "] > b[" + i + "]) ? 1 : 0));";
-            };
-
-            function makeSortTextDesc(i) {
-                return "((b[" + i + "] < a[" + i + "]) ? -1 : ((b[" + i + "] > a[" + i + "]) ? 1 : 0));";
-            };
-
-            function makeSortNumeric(i) {
-                return "a[" + i + "]-b[" + i + "];";
-            };
-
-            function makeSortNumericDesc(i) {
-                return "b[" + i + "]-a[" + i + "];";
-            };
-
-            function sortText(a, b) {
-                if (table.config.sortLocaleCompare) return a.localeCompare(b);
-                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
-            };
-
-            function sortTextDesc(a, b) {
-                if (table.config.sortLocaleCompare) return b.localeCompare(a);
-                return ((b < a) ? -1 : ((b > a) ? 1 : 0));
-            };
-
-            function sortNumeric(a, b) {
-                return a - b;
-            };
-
-            function sortNumericDesc(a, b) {
-                return b - a;
-            };
-
-            function getCachedSortType(parsers, i) {
-                return parsers[i].type;
-            }; /* public methods */
-            this.construct = function (settings) {
-                return this.each(function () {
-                    // if no thead or tbody quit.
-                    if (!this.tHead || !this.tBodies) return;
-                    // declare
-                    var $this, $document, $headers, cache, config, shiftDown = 0,
-                        sortOrder;
-                    // new blank config object
-                    this.config = {};
-                    // merge and extend.
-                    config = $.extend(this.config, $.tablesorter.defaults, settings);
-                    // store common expression for speed
-                    $this = $(this);
-                    // save the settings where they read
-                    $.data(this, "tablesorter", config);
-                    // build headers
-                    $headers = buildHeaders(this);
-                    // try to auto detect column type, and store in tables config
-                    this.config.parsers = buildParserCache(this, $headers);
-                    // build the cache for the tbody cells
-                    cache = buildCache(this);
-                    // get the css class names, could be done else where.
-                    var sortCSS = [config.cssDesc, config.cssAsc];
-                    // fixate columns if the users supplies the fixedWidth option
-                    fixColumnWidth(this);
-                    // apply event handling to headers
-                    // this is to big, perhaps break it out?
-                    $headers.click(
-
-                    function (e) {
-                        var totalRows = ($this[0].tBodies[0] && $this[0].tBodies[0].rows.length) || 0;
-                        if (!this.sortDisabled && totalRows > 0) {
-                            // Only call sortStart if sorting is
-                            // enabled.
-                            $this.trigger("sortStart");
-                            // store exp, for speed
-                            var $cell = $(this);
-                            // get current column index
-                            var i = this.column;
-                            // get current column sort order
-                            this.order = this.count++ % 2;
-							// always sort on the locked order.
-							if(this.lockedOrder) this.order = this.lockedOrder;
-							
-							// user only whants to sort on one
-                            // column
-                            if (!e[config.sortMultiSortKey]) {
-                                // flush the sort list
-                                config.sortList = [];
-                                if (config.sortForce != null) {
-                                    var a = config.sortForce;
-                                    for (var j = 0; j < a.length; j++) {
-                                        if (a[j][0] != i) {
-                                            config.sortList.push(a[j]);
-                                        }
-                                    }
-                                }
-                                // add column to sort list
-                                config.sortList.push([i, this.order]);
-                                // multi column sorting
-                            } else {
-                                // the user has clicked on an all
-                                // ready sortet column.
-                                if (isValueInArray(i, config.sortList)) {
-                                    // revers the sorting direction
-                                    // for all tables.
-                                    for (var j = 0; j < config.sortList.length; j++) {
-                                        var s = config.sortList[j],
-                                            o = config.headerList[s[0]];
-                                        if (s[0] == i) {
-                                            o.count = s[1];
-                                            o.count++;
-                                            s[1] = o.count % 2;
-                                        }
-                                    }
-                                } else {
-                                    // add column to sort list array
-                                    config.sortList.push([i, this.order]);
-                                }
-                            };
-                            setTimeout(function () {
-                                // set css for headers
-                                setHeadersCss($this[0], $headers, config.sortList, sortCSS);
-                                appendToTable(
-	                                $this[0], multisort(
-	                                $this[0], config.sortList, cache)
-								);
-                            }, 1);
-                            // stop normal event by returning false
-                            return false;
-                        }
-                        // cancel selection
-                    }).mousedown(function () {
-                        if (config.cancelSelection) {
-                            this.onselectstart = function () {
-                                return false
-                            };
-                            return false;
-                        }
-                    });
-                    // apply easy methods that trigger binded events
-                    $this.bind("update", function () {
-                        var me = this;
-                        setTimeout(function () {
-                            // rebuild parsers.
-                            me.config.parsers = buildParserCache(
-                            me, $headers);
-                            // rebuild the cache map
-                            cache = buildCache(me);
-                        }, 1);
-                    }).bind("updateCell", function (e, cell) {
-                        var config = this.config;
-                        // get position from the dom.
-                        var pos = [(cell.parentNode.rowIndex - 1), cell.cellIndex];
-                        // update cache
-                        cache.normalized[pos[0]][pos[1]] = config.parsers[pos[1]].format(
-                        getElementText(config, cell), cell);
-                    }).bind("sorton", function (e, list) {
-                        $(this).trigger("sortStart");
-                        config.sortList = list;
-                        // update and store the sortlist
-                        var sortList = config.sortList;
-                        // update header count index
-                        updateHeaderSortCount(this, sortList);
-                        // set css for headers
-                        setHeadersCss(this, $headers, sortList, sortCSS);
-                        // sort the table and append it to the dom
-                        appendToTable(this, multisort(this, sortList, cache));
-                    }).bind("appendCache", function () {
-                        appendToTable(this, cache);
-                    }).bind("applyWidgetId", function (e, id) {
-                        getWidgetById(id).format(this);
-                    }).bind("applyWidgets", function () {
-                        // apply widgets
-                        applyWidget(this);
-                    });
-                    if ($.metadata && ($(this).metadata() && $(this).metadata().sortlist)) {
-                        config.sortList = $(this).metadata().sortlist;
-                    }
-                    // if user has supplied a sort list to constructor.
-                    if (config.sortList.length > 0) {
-                        $this.trigger("sorton", [config.sortList]);
-                    }
-                    // apply widgets
-                    applyWidget(this);
-                });
-            };
-            this.addParser = function (parser) {
-                var l = parsers.length,
-                    a = true;
-                for (var i = 0; i < l; i++) {
-                    if (parsers[i].id.toLowerCase() == parser.id.toLowerCase()) {
-                        a = false;
-                    }
-                }
-                if (a) {
-                    parsers.push(parser);
-                };
-            };
-            this.addWidget = function (widget) {
-                widgets.push(widget);
-            };
-            this.formatFloat = function (s) {
-                var i = parseFloat(s);
-                return (isNaN(i)) ? 0 : i;
-            };
-            this.formatInt = function (s) {
-                var i = parseInt(s);
-                return (isNaN(i)) ? 0 : i;
-            };
-            this.isDigit = function (s, config) {
-                // replace all an wanted chars and match.
-                return /^[-+]?\d*$/.test($.trim(s.replace(/[,.']/g, '')));
-            };
-            this.clearTableBody = function (table) {
-                if ($.browser.msie) {
-                    while (table.tBodies[0].firstChild) {
-                        table.tBodies[0].removeChild(table.tBodies[0].firstChild);
-                    }
-                } else {
-                    table.tBodies[0].innerHTML = "";
-                }
-            };
-        }
-    });
-
-    // extend plugin scope
-    $.fn.extend({
-        tablesorter: $.tablesorter.construct
-    });
-
-    // make shortcut
-    var ts = $.tablesorter;
-
-    // add default parsers
-    ts.addParser({
-        id: "text",
-        is: function (s) {
-            return true;
-        }, format: function (s) {
-            return $.trim(s.toLocaleLowerCase());
-        }, type: "text"
-    });
-
-    ts.addParser({
-        id: "digit",
-        is: function (s, table) {
-            var c = table.config;
-            return $.tablesorter.isDigit(s, c);
-        }, format: function (s) {
-            return $.tablesorter.formatFloat(s);
-        }, type: "numeric"
-    });
-
-    ts.addParser({
-        id: "currency",
-        is: function (s) {
-            return /^[£$€?.]/.test(s);
-        }, format: function (s) {
-            return $.tablesorter.formatFloat(s.replace(new RegExp(/[£$€]/g), ""));
-        }, type: "numeric"
-    });
-
-    ts.addParser({
-        id: "ipAddress",
-        is: function (s) {
-            return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
-        }, format: function (s) {
-            var a = s.split("."),
-                r = "",
-                l = a.length;
-            for (var i = 0; i < l; i++) {
-                var item = a[i];
-                if (item.length == 2) {
-                    r += "0" + item;
-                } else {
-                    r += item;
-                }
-            }
-            return $.tablesorter.formatFloat(r);
-        }, type: "numeric"
-    });
-
-    ts.addParser({
-        id: "url",
-        is: function (s) {
-            return /^(https?|ftp|file):\/\/$/.test(s);
-        }, format: function (s) {
-            return jQuery.trim(s.replace(new RegExp(/(https?|ftp|file):\/\//), ''));
-        }, type: "text"
-    });
-
-    ts.addParser({
-        id: "isoDate",
-        is: function (s) {
-            return /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(s);
-        }, format: function (s) {
-            return $.tablesorter.formatFloat((s != "") ? new Date(s.replace(
-            new RegExp(/-/g), "/")).getTime() : "0");
-        }, type: "numeric"
-    });
-
-    ts.addParser({
-        id: "percent",
-        is: function (s) {
-            return /\%$/.test($.trim(s));
-        }, format: function (s) {
-            return $.tablesorter.formatFloat(s.replace(new RegExp(/%/g), ""));
-        }, type: "numeric"
-    });
-
-    ts.addParser({
-        id: "usLongDate",
-        is: function (s) {
-            return s.match(new RegExp(/^[A-Za-z]{3,10}\.? [0-9]{1,2}, ([0-9]{4}|'?[0-9]{2}) (([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(AM|PM)))$/));
-        }, format: function (s) {
-            return $.tablesorter.formatFloat(new Date(s).getTime());
-        }, type: "numeric"
-    });
-
-    ts.addParser({
-        id: "shortDate",
-        is: function (s) {
-            return /\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/.test(s);
-        }, format: function (s, table) {
-            var c = table.config;
-            s = s.replace(/\-/g, "/");
-            if (c.dateFormat == "us") {
-                // reformat the string in ISO format
-                s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$1/$2");
-            }    
-            if (c.dateFormat == "pt") {
-                s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");   
-            } else if (c.dateFormat == "uk") {
-                // reformat the string in ISO format
-                s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
-            } else if (c.dateFormat == "dd/mm/yy" || c.dateFormat == "dd-mm-yy") {
-                s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2})/, "$1/$2/$3");
-            }
-            return $.tablesorter.formatFloat(new Date(s).getTime());
-        }, type: "numeric"
-    });
-    ts.addParser({
-        id: "time",
-        is: function (s) {
-            return /^(([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(am|pm)))$/.test(s);
-        }, format: function (s) {
-            return $.tablesorter.formatFloat(new Date("2000/01/01 " + s).getTime());
-        }, type: "numeric"
-    });
-    ts.addParser({
-        id: "metadata",
-        is: function (s) {
-            return false;
-        }, format: function (s, table, cell) {
-            var c = table.config,
-                p = (!c.parserMetadataName) ? 'sortValue' : c.parserMetadataName;
-            return $(cell).metadata()[p];
-        }, type: "numeric"
-    });
-    // add default widgets
-    ts.addWidget({
-        id: "zebra",
-        format: function (table) {
-            if (table.config.debug) {
-                var time = new Date();
-            }
-            var $tr, row = -1,
-                odd;
-            // loop through the visible rows
-            $("tr:visible", table.tBodies[0]).each(function (i) {
-                $tr = $(this);
-                // style children rows the same way the parent
-                // row was styled
-                if (!$tr.hasClass(table.config.cssChildRow)) row++;
-                odd = (row % 2 == 0);
-                $tr.removeClass(
-                table.config.widgetZebra.css[odd ? 0 : 1]).addClass(
-                table.config.widgetZebra.css[odd ? 1 : 0])
-            });
-            if (table.config.debug) {
-                $.tablesorter.benchmark("Applying Zebra widget", time);
-            }
-        }
-    });
-})(jQuery);