summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/ide/components/merge_requests
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/ide/components/merge_requests')
-rw-r--r--app/assets/javascripts/ide/components/merge_requests/dropdown.vue61
-rw-r--r--app/assets/javascripts/ide/components/merge_requests/list.vue44
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 }}