diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/releases_sort.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/releases_sort.vue | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/releases/components/releases_sort.vue b/app/assets/javascripts/releases/components/releases_sort.vue new file mode 100644 index 00000000000..50f6f3c19bd --- /dev/null +++ b/app/assets/javascripts/releases/components/releases_sort.vue @@ -0,0 +1,62 @@ +<script> +import { GlSorting, GlSortingItem } from '@gitlab/ui'; +import { mapState, mapActions } from 'vuex'; +import { ASCENDING_ODER, DESCENDING_ORDER, SORT_OPTIONS } from '../constants'; + +export default { + name: 'ReleasesSort', + components: { + GlSorting, + GlSortingItem, + }, + computed: { + ...mapState('list', { + orderBy: state => state.sorting.orderBy, + sort: state => state.sorting.sort, + }), + sortOptions() { + return SORT_OPTIONS; + }, + sortText() { + const option = this.sortOptions.find(s => s.orderBy === this.orderBy); + return option.label; + }, + isSortAscending() { + return this.sort === ASCENDING_ODER; + }, + }, + methods: { + ...mapActions('list', ['setSorting']), + onDirectionChange() { + const sort = this.isSortAscending ? DESCENDING_ORDER : ASCENDING_ODER; + this.setSorting({ sort }); + this.$emit('sort:changed'); + }, + onSortItemClick(item) { + this.setSorting({ orderBy: item }); + this.$emit('sort:changed'); + }, + isActiveSortItem(item) { + return this.orderBy === item; + }, + }, +}; +</script> + +<template> + <gl-sorting + :text="sortText" + :is-ascending="isSortAscending" + data-testid="releases-sort" + @sortDirectionChange="onDirectionChange" + > + <gl-sorting-item + v-for="item in sortOptions" + :key="item.orderBy" + :active="isActiveSortItem(item.orderBy)" + @click="onSortItemClick(item.orderBy)" + > + {{ item.label }} + </gl-sorting-item> + </gl-sorting> +</template> |