diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/merge_requests')
-rw-r--r-- | app/assets/javascripts/ide/components/merge_requests/dropdown.vue | 61 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/merge_requests/list.vue | 44 |
2 files changed, 54 insertions, 51 deletions
diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue index 1bcd550c713..86186b48854 100644 --- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue +++ b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue @@ -1,9 +1,8 @@ <script> -import { mapActions, mapState } from 'vuex'; +import { mapGetters, mapState } from 'vuex'; import Tabs from '../../../vue_shared/components/tabs/tabs'; import Tab from '../../../vue_shared/components/tabs/tab.vue'; import List from './list.vue'; -import { scopes } from '../../stores/modules/merge_requests/constants'; export default { components: { @@ -11,28 +10,16 @@ export default { Tab, List, }, - data() { - return { - activeTabIndex: 0, - }; - }, computed: { - ...mapState('mergeRequests', ['isLoading', 'mergeRequests']), + ...mapGetters('mergeRequests', ['assignedData', 'createdData']), ...mapState(['currentMergeRequestId']), - tabScope() { - return this.activeTabIndex === 0 ? scopes.createdByMe : scopes.assignedToMe; + createdMergeRequestLength() { + return this.createdData.mergeRequests.length; }, }, - mounted() { - this.fetchMergeRequests(); - }, methods: { - ...mapActions('mergeRequests', ['fetchMergeRequests', 'setScope']), - updateActiveTab(index) { - this.activeTabIndex = index; - - this.setScope(this.tabScope); - this.fetchMergeRequests(); + hideDropdown() { + this.$emit('hide'); }, }, }; @@ -40,31 +27,33 @@ export default { <template> <div class="dropdown-menu ide-merge-requests-dropdown"> - <tabs - stop-propagation - @changed="updateActiveTab" - > - <tab - :title="__('Created by me')" - active - > + <tabs stop-propagation> + <tab active> + <template slot="title"> + {{ __('Created by me') }} + <span class="badge badge-pill"> + {{ createdMergeRequestLength }} + </span> + </template> <list - v-if="activeTabIndex === 0" - :is-loading="isLoading" - :items="mergeRequests" + type="created" :current-id="currentMergeRequestId" :empty-text="__('You have not created any merge requests')" - @search="fetchMergeRequests" + @hide="hideDropdown" /> </tab> - <tab :title="__('Assigned to me')"> + <tab> + <template slot="title"> + {{ __('Assigned to me') }} + <span class="badge badge-pill"> + {{ assignedData.mergeRequests.length }} + </span> + </template> <list - v-if="activeTabIndex === 1" - :is-loading="isLoading" - :items="mergeRequests" + type="assigned" :current-id="currentMergeRequestId" :empty-text="__('You do not have any assigned merge requests')" - @search="fetchMergeRequests" + @hide="hideDropdown" /> </tab> </tabs> diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue index 0d81da12246..829fe219603 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -1,4 +1,5 @@ <script> +import { mapActions, mapGetters } from 'vuex'; import _ from 'underscore'; import LoadingIcon from '../../../vue_shared/components/loading_icon.vue'; import Item from './item.vue'; @@ -9,12 +10,8 @@ export default { Item, }, props: { - isLoading: { - type: Boolean, - required: true, - }, - items: { - type: Array, + type: { + type: String, required: true, }, currentId: { @@ -32,24 +29,41 @@ export default { }; }, computed: { + ...mapGetters('mergeRequests', ['getData']), + data() { + return this.getData(this.type); + }, + isLoading() { + return this.data.isLoading; + }, + mergeRequests() { + return this.data.mergeRequests; + }, hasMergeRequests() { - return this.items.length !== 0; + return this.mergeRequests.length !== 0; }, hasNoSearchResults() { return this.search !== '' && !this.hasMergeRequests; }, }, - watch: { - isLoading() { - this.focusSearch(); - }, + mounted() { + this.loadMergeRequests(); }, methods: { + ...mapActions('mergeRequests', ['fetchMergeRequests']), + ...mapActions(['closeAllFiles']), + loadMergeRequests() { + this.fetchMergeRequests({ type: this.type, search: this.search }); + }, viewMergeRequest(item) { - this.$router.push(`/project/${item.projectPathWithNamespace}/merge_requests/${item.iid}`); + return this.closeAllFiles() + .then(() => { + this.$emit('hide'); + this.$router.push(`/project/${item.projectPathWithNamespace}/merge_requests/${item.iid}`); + }); }, searchMergeRequests: _.debounce(function debounceSearch() { - this.$emit('search', this.search); + this.loadMergeRequests(); }, 250), focusSearch() { if (!this.isLoading) { @@ -88,7 +102,7 @@ export default { <ul class="mb-3"> <template v-if="hasMergeRequests"> <li - v-for="item in items" + v-for="item in mergeRequests" :key="item.id" > <item @@ -103,7 +117,7 @@ export default { class="ide-merge-requests-empty d-flex align-items-center justify-content-center" > <template v-if="hasNoSearchResults"> - No merge requests found + {{ __('No merge requests found') }} </template> <template v-else> {{ emptyText }} |