fetch both created & assigned

show badges for both [ci skip]
2018-06-01 21:09:24 +01:00 · 2018-06-01 21:09:24 +01:00 · 03820e9b03
commit 03820e9b03
parent 0b278a93f9
13 changed files with 128 additions and 93 deletions
--- 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
--- 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>
--- 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 }}
--- 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(() => {
--- 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 () => {};
--- 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 = {
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/getters.js
+++ 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;
--- 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,
 };
--- 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';
--- 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 = [];
  },
 };
--- 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,
 });
--- 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>

--- 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) {