diff options
Diffstat (limited to 'app/assets/javascripts/releases/components/releases_sort.vue')
-rw-r--r-- | app/assets/javascripts/releases/components/releases_sort.vue | 71 |
1 files changed, 50 insertions, 21 deletions
diff --git a/app/assets/javascripts/releases/components/releases_sort.vue b/app/assets/javascripts/releases/components/releases_sort.vue index d4210dad19c..0f14b579da0 100644 --- a/app/assets/javascripts/releases/components/releases_sort.vue +++ b/app/assets/javascripts/releases/components/releases_sort.vue @@ -1,7 +1,17 @@ <script> import { GlSorting, GlSortingItem } from '@gitlab/ui'; -import { mapState, mapActions } from 'vuex'; -import { ASCENDING_ORDER, DESCENDING_ORDER, SORT_OPTIONS } from '../constants'; +import { + ASCENDING_ORDER, + DESCENDING_ORDER, + SORT_OPTIONS, + RELEASED_AT, + CREATED_AT, + RELEASED_AT_ASC, + RELEASED_AT_DESC, + CREATED_ASC, + ALL_SORTS, + SORT_MAP, +} from '../constants'; export default { name: 'ReleasesSort', @@ -9,35 +19,54 @@ export default { GlSorting, GlSortingItem, }, + props: { + value: { + type: String, + required: true, + validator: (sort) => ALL_SORTS.includes(sort), + }, + }, computed: { - ...mapState('index', { - orderBy: (state) => state.sorting.orderBy, - sort: (state) => state.sorting.sort, - }), + orderBy() { + if (this.value === RELEASED_AT_ASC || this.value === RELEASED_AT_DESC) { + return RELEASED_AT; + } + + return CREATED_AT; + }, + direction() { + if (this.value === RELEASED_AT_ASC || this.value === CREATED_ASC) { + return ASCENDING_ORDER; + } + + return DESCENDING_ORDER; + }, sortOptions() { return SORT_OPTIONS; }, sortText() { - const option = this.sortOptions.find((s) => s.orderBy === this.orderBy); - return option.label; + return this.sortOptions.find((s) => s.orderBy === this.orderBy).label; }, - isSortAscending() { - return this.sort === ASCENDING_ORDER; + isDirectionAscending() { + return this.direction === ASCENDING_ORDER; }, }, methods: { - ...mapActions('index', ['setSorting']), onDirectionChange() { - const sort = this.isSortAscending ? DESCENDING_ORDER : ASCENDING_ORDER; - this.setSorting({ sort }); - this.$emit('sort:changed'); + const direction = this.isDirectionAscending ? DESCENDING_ORDER : ASCENDING_ORDER; + this.emitInputEventIfChanged(this.orderBy, direction); }, onSortItemClick(item) { - this.setSorting({ orderBy: item }); - this.$emit('sort:changed'); + this.emitInputEventIfChanged(item.orderBy, this.direction); }, isActiveSortItem(item) { - return this.orderBy === item; + return this.orderBy === item.orderBy; + }, + emitInputEventIfChanged(orderBy, direction) { + const newSort = SORT_MAP[orderBy][direction]; + if (newSort !== this.value) { + this.$emit('input', SORT_MAP[orderBy][direction]); + } }, }, }; @@ -46,15 +75,15 @@ export default { <template> <gl-sorting :text="sortText" - :is-ascending="isSortAscending" + :is-ascending="isDirectionAscending" data-testid="releases-sort" @sortDirectionChange="onDirectionChange" > <gl-sorting-item - v-for="item in sortOptions" + v-for="item of sortOptions" :key="item.orderBy" - :active="isActiveSortItem(item.orderBy)" - @click="onSortItemClick(item.orderBy)" + :active="isActiveSortItem(item)" + @click="onSortItemClick(item)" > {{ item.label }} </gl-sorting-item> |