diff options
author | Phil Hughes <me@iamphill.com> | 2018-06-01 23:09:24 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-06-06 13:19:03 +0300 |
commit | 03820e9b03fb25c94263231aaee30fec0b6468f4 (patch) | |
tree | 45cc6ecad9d55be25b62c53deb2f43c3d070c63b /app/assets/javascripts | |
parent | 0b278a93f96ca4dd760c069e42d5485460d7b738 (diff) |
fetch both created & assigned
show badges for both
[ci skip]
Diffstat (limited to 'app/assets/javascripts')
13 files changed, 128 insertions, 93 deletions
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index e99305d0bc0..631c995b59e 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -38,6 +38,7 @@ export default { data() { return { showTooltip: false, + showMergeRequestsDropdown: false, }; }, computed: { @@ -67,6 +68,23 @@ export default { this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth; }); }, + showMergeRequestsDropdown() { + if (this.showMergeRequestsDropdown) { + document.addEventListener('click', this.hideMergeRequestDropdown); + } else { + document.removeEventListener('click', this.hideMergeRequestDropdown); + } + }, + }, + methods: { + hideMergeRequestDropdown(e) { + if (this.$refs.mergeRequestDropdown.contains(e.target)) return; + + this.showMergeRequestsDropdown = false; + }, + toggleMergeRequestDropdown() { + this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown; + }, }, }; </script> @@ -91,12 +109,17 @@ export default { </div> </template> <template v-else> - <div class="context-header ide-context-header dropdown"> + <div + class="context-header ide-context-header dropdown" + :class="{ + show: showMergeRequestsDropdown + }" + ref="mergeRequestDropdown" + > <a href="#" role="button" - @click.prevent - data-toggle="dropdown" + @click.prevent="toggleMergeRequestDropdown" > <div v-if="currentProject.avatar_url" @@ -148,7 +171,10 @@ export default { name="chevron-down" /> </a> - <merge-request-dropdown /> + <merge-request-dropdown + v-if="showMergeRequestsDropdown" + @hide="toggleMergeRequestDropdown" + /> </div> <div class="multi-file-commit-panel-inner-scroll"> <component 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 }} diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js index 5ec9bd661bb..edb20ff96fc 100644 --- a/app/assets/javascripts/ide/stores/actions/merge_request.js +++ b/app/assets/javascripts/ide/stores/actions/merge_request.js @@ -17,9 +17,7 @@ export const getMergeRequestData = ( mergeRequestId, mergeRequest: data, }); - if (!state.currentMergeRequestId) { - commit(types.SET_CURRENT_MERGE_REQUEST, mergeRequestId); - } + commit(types.SET_CURRENT_MERGE_REQUEST, mergeRequestId); resolve(data); }) .catch(() => { diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js index 2b32c0c0b55..83b5b93d3a8 100644 --- a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js @@ -1,27 +1,28 @@ import { __ } from '../../../../locale'; import Api from '../../../../api'; import flash from '../../../../flash'; +import { scopes } from './constants'; import * as types from './mutation_types'; -export const requestMergeRequests = ({ commit }) => commit(types.REQUEST_MERGE_REQUESTS); -export const receiveMergeRequestsError = ({ commit }) => { +export const requestMergeRequests = ({ commit }, type) => + commit(types.REQUEST_MERGE_REQUESTS, type); +export const receiveMergeRequestsError = ({ commit }, type) => { flash(__('Error loading merge requests.')); - commit(types.RECEIVE_MERGE_REQUESTS_ERROR); + commit(types.RECEIVE_MERGE_REQUESTS_ERROR, type); }; -export const receiveMergeRequestsSuccess = ({ commit }, data) => - commit(types.RECEIVE_MERGE_REQUESTS_SUCCESS, data); +export const receiveMergeRequestsSuccess = ({ commit }, { type, data }) => + commit(types.RECEIVE_MERGE_REQUESTS_SUCCESS, { type, data }); -export const fetchMergeRequests = ({ dispatch, state: { scope, state } }, search = '') => { - dispatch('requestMergeRequests'); - dispatch('resetMergeRequests'); +export const fetchMergeRequests = ({ dispatch, state: { state } }, { type, search = '' }) => { + const scope = scopes[type]; + dispatch('requestMergeRequests', type); + dispatch('resetMergeRequests', type); Api.mergeRequests({ scope, state, search }) - .then(({ data }) => dispatch('receiveMergeRequestsSuccess', data)) - .catch(() => dispatch('receiveMergeRequestsError')); + .then(({ data }) => dispatch('receiveMergeRequestsSuccess', { type, data })) + .catch(() => dispatch('receiveMergeRequestsError', type)); }; -export const resetMergeRequests = ({ commit }) => commit(types.RESET_MERGE_REQUESTS); - -export const setScope = ({ commit }, scope) => commit(types.SET_SCOPE, scope); +export const resetMergeRequests = ({ commit }, type) => commit(types.RESET_MERGE_REQUESTS, type); export default () => {}; diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/constants.js b/app/assets/javascripts/ide/stores/modules/merge_requests/constants.js index 64b7763f257..a7085c7d04c 100644 --- a/app/assets/javascripts/ide/stores/modules/merge_requests/constants.js +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/constants.js @@ -1,6 +1,6 @@ export const scopes = { - assignedToMe: 'assigned-to-me', - createdByMe: 'created-by-me', + assigned: 'assigned-to-me', + created: 'created-by-me', }; export const states = { diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/getters.js b/app/assets/javascripts/ide/stores/modules/merge_requests/getters.js new file mode 100644 index 00000000000..8e2b234be8d --- /dev/null +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/getters.js @@ -0,0 +1,4 @@ +export const getData = state => type => state[type]; + +export const assignedData = state => state.assigned; +export const createdData = state => state.created; diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/index.js b/app/assets/javascripts/ide/stores/modules/merge_requests/index.js index 04e7e0f08f1..2e6dfb420f4 100644 --- a/app/assets/javascripts/ide/stores/modules/merge_requests/index.js +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/index.js @@ -1,5 +1,6 @@ import state from './state'; import * as actions from './actions'; +import * as getters from './getters'; import mutations from './mutations'; export default { @@ -7,4 +8,5 @@ export default { state: state(), actions, mutations, + getters, }; diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/mutation_types.js b/app/assets/javascripts/ide/stores/modules/merge_requests/mutation_types.js index 6d163491209..0badddcbae7 100644 --- a/app/assets/javascripts/ide/stores/modules/merge_requests/mutation_types.js +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/mutation_types.js @@ -3,5 +3,3 @@ export const RECEIVE_MERGE_REQUESTS_ERROR = 'RECEIVE_MERGE_REQUESTS_ERROR'; export const RECEIVE_MERGE_REQUESTS_SUCCESS = 'RECEIVE_MERGE_REQUESTS_SUCCESS'; export const RESET_MERGE_REQUESTS = 'RESET_MERGE_REQUESTS'; - -export const SET_SCOPE = 'SET_SCOPE'; diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js b/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js index 5c0c502b0d1..971da0806bd 100644 --- a/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/mutations.js @@ -2,15 +2,15 @@ import * as types from './mutation_types'; export default { - [types.REQUEST_MERGE_REQUESTS](state) { - state.isLoading = true; + [types.REQUEST_MERGE_REQUESTS](state, type) { + state[type].isLoading = true; }, - [types.RECEIVE_MERGE_REQUESTS_ERROR](state) { - state.isLoading = false; + [types.RECEIVE_MERGE_REQUESTS_ERROR](state, type) { + state[type].isLoading = false; }, - [types.RECEIVE_MERGE_REQUESTS_SUCCESS](state, data) { - state.isLoading = false; - state.mergeRequests = data.map(mergeRequest => ({ + [types.RECEIVE_MERGE_REQUESTS_SUCCESS](state, { type, data }) { + state[type].isLoading = false; + state[type].mergeRequests = data.map(mergeRequest => ({ id: mergeRequest.id, iid: mergeRequest.iid, title: mergeRequest.title, @@ -20,10 +20,7 @@ export default { .replace(`/merge_requests/${mergeRequest.iid}`, ''), })); }, - [types.RESET_MERGE_REQUESTS](state) { - state.mergeRequests = []; - }, - [types.SET_SCOPE](state, scope) { - state.scope = scope; + [types.RESET_MERGE_REQUESTS](state, type) { + state[type].mergeRequests = []; }, }; diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/state.js b/app/assets/javascripts/ide/stores/modules/merge_requests/state.js index 64ca24b1af6..57eb6b04283 100644 --- a/app/assets/javascripts/ide/stores/modules/merge_requests/state.js +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/state.js @@ -1,8 +1,13 @@ -import { scopes, states } from './constants'; +import { states } from './constants'; export default () => ({ - isLoading: false, - mergeRequests: [], - scope: scopes.createdByMe, + created: { + isLoading: false, + mergeRequests: [], + }, + assigned: { + isLoading: false, + mergeRequests: [], + }, state: states.opened, }); diff --git a/app/assets/javascripts/vue_shared/components/tabs/tab.vue b/app/assets/javascripts/vue_shared/components/tabs/tab.vue index 2a35d6bc151..0ec7a0199fe 100644 --- a/app/assets/javascripts/vue_shared/components/tabs/tab.vue +++ b/app/assets/javascripts/vue_shared/components/tabs/tab.vue @@ -26,6 +26,9 @@ export default { created() { this.isTab = true; }, + updated() { + this.$parent.$forceUpdate(); + }, }; </script> diff --git a/app/assets/javascripts/vue_shared/components/tabs/tabs.js b/app/assets/javascripts/vue_shared/components/tabs/tabs.js index 8497c3e851f..4b2996f76d5 100644 --- a/app/assets/javascripts/vue_shared/components/tabs/tabs.js +++ b/app/assets/javascripts/vue_shared/components/tabs/tabs.js @@ -29,8 +29,6 @@ export default { this.tabs[index].localActive = true; this.currentIndex = index; - - this.$emit('changed', this.currentIndex); }, }, render(h) { |