diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-06-21 14:24:09 +0000 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-06-21 14:24:09 +0000 |
commit | e00e040d23ba52a2bfe3528f1dc05358c69dd210 (patch) | |
tree | 2bf985e8443f90ecb62602becd5bdae43e9ffb90 | |
parent | 58894435c02db862a0db5ca5064ed6c6e0251430 (diff) | |
download | gitlab-ce-36234-nav-add-groups-dropdown.tar.gz |
simplify view states36234-nav-add-groups-dropdown
9 files changed, 62 insertions, 153 deletions
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue index 22ddcdec418..7e620059544 100644 --- a/app/assets/javascripts/frequent_items/components/app.vue +++ b/app/assets/javascripts/frequent_items/components/app.vue @@ -1,5 +1,5 @@ <script> -import { mapState, mapActions } from 'vuex'; +import { mapState, mapActions, mapGetters } from 'vuex'; import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; import eventHub from '../event_hub'; import store from '../store/'; @@ -7,7 +7,6 @@ import { STORAGE_KEY } from '../constants'; import { isMobile } from '../utils'; import FrequentItemsSearchInput from './frequent_items_search_input.vue'; import FrequentItemsList from './frequent_items_list.vue'; -import FrequentItemsSearchList from './frequent_items_search_list.vue'; import frequentItemsMixin from './frequent_items_mixin'; export default { @@ -16,7 +15,6 @@ export default { LoadingIcon, FrequentItemsSearchInput, FrequentItemsList, - FrequentItemsSearchList, }, mixins: [frequentItemsMixin], props: { @@ -30,16 +28,8 @@ export default { }, }, computed: { - ...mapState([ - 'searchQuery', - 'isLoadingItems', - 'isItemsListVisible', - 'isSearchListVisible', - 'isLocalStorageFailed', - 'isSearchFailed', - 'frequentItems', - 'searchedItems', - ]), + ...mapState(['searchQuery', 'isLoadingItems', 'isFetchFailed', 'items']), + ...mapGetters(['isSearch']), translations() { return this.getTranslations(['loadingMessage', 'header']); }, @@ -60,17 +50,9 @@ export default { eventHub.$off(`${this.namespace}-dropdownOpen`, this.dropdownOpenHandler); }, methods: { - ...mapActions([ - 'logItemAccess', - 'setNamespace', - 'setStorageKey', - 'fetchFrequentItems', - 'toggleVisibility', - ]), + ...mapActions(['logItemAccess', 'setNamespace', 'setStorageKey', 'fetchFrequentItems']), dropdownOpenHandler() { - if (this.searchQuery && !isMobile()) { - this.toggleVisibility('isSearchListVisible'); - } else { + if (this.searchQuery === '' || isMobile()) { this.fetchFrequentItems(); } }, @@ -91,22 +73,17 @@ export default { /> <div class="section-header" - v-if="isItemsListVisible" + v-if="!isLoadingItems && !isSearch" > {{ translations.header }} </div> <frequent-items-list - v-if="isItemsListVisible" - :local-storage-failed="isLocalStorageFailed" - :items="frequentItems" + v-if="!isLoadingItems" + :items="items" :namespace="namespace" - /> - <frequent-items-search-list - v-if="isSearchListVisible" - :search-failed="isSearchFailed" + :is-search="isSearch" + :is-fetch-failed="isFetchFailed" :matcher="searchQuery" - :items="searchedItems" - :namespace="namespace" /> </div> </template> diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue index 9f764c76342..3b85e6b95db 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_list.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_list.vue @@ -12,37 +12,53 @@ export default { type: Array, required: true, }, - localStorageFailed: { + isSearch: { type: Boolean, required: true, }, + isFetchFailed: { + type: Boolean, + required: true, + }, + matcher: { + type: String, + required: true, + }, }, computed: { translations() { - return this.getTranslations(['itemListErrorMessage', 'itemListEmptyMessage']); + return this.getTranslations([ + 'itemListEmptyMessage', + 'itemListErrorMessage', + 'searchListEmptyMessage', + 'searchListErrorMessage', + ]); }, isListEmpty() { return this.items.length === 0; }, listEmptyMessage() { - return this.localStorageFailed - ? this.translations.itemListErrorMessage - : this.translations.itemListEmptyMessage; + if (this.isSearch) { + return this.isFetchFailed + ? this.translations.searchListErrorMessage + : this.translations.searchListEmptyMessage; + } else { + return this.isFetchFailed + ? this.translations.itemListErrorMessage + : this.translations.itemListEmptyMessage; + } }, }, }; </script> <template> - <div - class="frequent-items-list-container" - > - <ul - class="list-unstyled" - > + <div class="frequent-items-list-container"> + <ul class="list-unstyled"> <li class="section-empty" v-if="isListEmpty" + :class="{ 'section-failure': isFetchFailed }" > {{ listEmptyMessage }} </li> @@ -55,6 +71,7 @@ export default { :namespace="item.namespace" :web-url="item.webUrl" :avatar-url="item.avatarUrl" + :matcher="matcher" /> </ul> </div> diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_list.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_list.vue deleted file mode 100644 index 51b381e212b..00000000000 --- a/app/assets/javascripts/frequent_items/components/frequent_items_search_list.vue +++ /dev/null @@ -1,67 +0,0 @@ -<script> -import FrequentItemsListItem from './frequent_items_list_item.vue'; -import frequentItemsMixin from './frequent_items_mixin'; - -export default { - components: { - FrequentItemsListItem, - }, - mixins: [frequentItemsMixin], - props: { - matcher: { - type: String, - required: true, - }, - items: { - type: Array, - required: true, - }, - searchFailed: { - type: Boolean, - required: true, - }, - }, - computed: { - translations() { - return this.getTranslations(['searchListErrorMessage', 'searchListEmptyMessage']); - }, - isListEmpty() { - return this.items.length === 0; - }, - listEmptyMessage() { - return this.searchFailed - ? this.translations.searchListErrorMessage - : this.translations.searchListEmptyMessage; - }, - }, -}; -</script> - -<template> - <div - class="frequent-items-search-container" - > - <ul - class="list-unstyled" - > - <li - v-if="isListEmpty" - :class="{ 'section-failure': searchFailed }" - class="section-empty" - > - {{ listEmptyMessage }} - </li> - <frequent-items-list-item - v-else - v-for="(item, index) in items" - :key="index" - :item-id="item.id" - :item-name="item.name" - :namespace="item.namespace" - :web-url="item.webUrl" - :avatar-url="item.avatarUrl" - :matcher="matcher" - /> - </ul> - </div> -</template> diff --git a/app/assets/javascripts/frequent_items/store/actions.js b/app/assets/javascripts/frequent_items/store/actions.js index ea7e71939ee..b483f181a02 100644 --- a/app/assets/javascripts/frequent_items/store/actions.js +++ b/app/assets/javascripts/frequent_items/store/actions.js @@ -11,10 +11,6 @@ export const setStorageKey = ({ commit }, key) => { commit(types.SET_STORAGE_KEY, key); }; -export const toggleVisibility = ({ commit }, viewToDisplay) => { - commit(types.TOGGLE_VISIBILITY, viewToDisplay); -}; - export const requestFrequentItems = ({ commit }) => { commit(types.REQUEST_FREQUENT_ITEMS); }; @@ -76,6 +72,8 @@ export const setSearchQuery = ({ commit, dispatch }, query) => { if (query) { dispatch('fetchSearchedItems', query); + } else { + dispatch('fetchFrequentItems', query); } }; diff --git a/app/assets/javascripts/frequent_items/store/getters.js b/app/assets/javascripts/frequent_items/store/getters.js new file mode 100644 index 00000000000..b3f35c08138 --- /dev/null +++ b/app/assets/javascripts/frequent_items/store/getters.js @@ -0,0 +1,4 @@ +export const isSearch = state => state.searchQuery !== ''; + +// prevent babel-plugin-rewire from generating an invalid default during karma tests +export default () => {}; diff --git a/app/assets/javascripts/frequent_items/store/index.js b/app/assets/javascripts/frequent_items/store/index.js index 3b66386dacf..2bebffc19ab 100644 --- a/app/assets/javascripts/frequent_items/store/index.js +++ b/app/assets/javascripts/frequent_items/store/index.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions'; +import * as getters from './getters'; import mutations from './mutations'; import createState from './state'; @@ -9,6 +10,7 @@ Vue.use(Vuex); export default () => new Vuex.Store({ actions, + getters, mutations, state: createState(), }); diff --git a/app/assets/javascripts/frequent_items/store/mutation_types.js b/app/assets/javascripts/frequent_items/store/mutation_types.js index e89a111562a..cbe2c9401ad 100644 --- a/app/assets/javascripts/frequent_items/store/mutation_types.js +++ b/app/assets/javascripts/frequent_items/store/mutation_types.js @@ -1,7 +1,6 @@ export const SET_NAMESPACE = 'SET_NAMESPACE'; export const SET_STORAGE_KEY = 'SET_STORAGE_KEY'; export const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY'; -export const TOGGLE_VISIBILITY = 'TOGGLE_VISIBILITY'; export const REQUEST_FREQUENT_ITEMS = 'REQUEST_FREQUENT_ITEMS'; export const RECEIVE_FREQUENT_ITEMS_SUCCESS = 'RECEIVE_FREQUENT_ITEMS_SUCCESS'; export const RECEIVE_FREQUENT_ITEMS_ERROR = 'RECEIVE_FREQUENT_ITEMS_ERROR'; diff --git a/app/assets/javascripts/frequent_items/store/mutations.js b/app/assets/javascripts/frequent_items/store/mutations.js index 4bce4bcaa62..feadd26d9fb 100644 --- a/app/assets/javascripts/frequent_items/store/mutations.js +++ b/app/assets/javascripts/frequent_items/store/mutations.js @@ -11,61 +11,45 @@ export default { storageKey, }); }, - [types.TOGGLE_VISIBILITY](state, viewToDisplay) { - const newViewStates = {}; - const views = ['isLoadingItems', 'isItemsListVisible', 'isSearchListVisible']; - - views.forEach(view => { - newViewStates[view] = view === viewToDisplay; - }); - - Object.assign(state, { - ...newViewStates, - }); - }, [types.SET_SEARCH_QUERY](state, searchQuery) { const hasSearchQuery = searchQuery !== ''; Object.assign(state, { searchQuery, - isLoadingItems: hasSearchQuery, - isItemsListVisible: !hasSearchQuery, - isSearchListVisible: false, + isLoadingItems: true, + isSearch: hasSearchQuery, }); }, [types.REQUEST_FREQUENT_ITEMS](state) { Object.assign(state, { isLoadingItems: true, - isItemsListVisible: false, - isSearchListVisible: false, + isSearch: false, }); }, [types.RECEIVE_FREQUENT_ITEMS_SUCCESS](state, rawItems) { Object.assign(state, { - frequentItems: rawItems, + items: rawItems, isLoadingItems: false, - isItemsListVisible: true, - isSearchListVisible: false, + isSearch: false, + isFetchFailed: false, }); }, [types.RECEIVE_FREQUENT_ITEMS_ERROR](state) { Object.assign(state, { - isLocalStorageFailed: true, isLoadingItems: false, - isItemsListVisible: true, - isSearchListVisible: false, + isSearch: false, + isFetchFailed: true, }); }, [types.REQUEST_SEARCHED_ITEMS](state) { Object.assign(state, { isLoadingItems: true, - isItemsListVisible: false, - isSearchListVisible: false, + isSearch: true, }); }, [types.RECEIVE_SEARCHED_ITEMS_SUCCESS](state, rawItems) { Object.assign(state, { - searchedItems: rawItems.map(rawItem => ({ + items: rawItems.map(rawItem => ({ id: rawItem.id, name: rawItem.name, namespace: rawItem.name_with_namespace || rawItem.full_name, @@ -73,16 +57,15 @@ export default { avatarUrl: rawItem.avatar_url, })), isLoadingItems: false, - isItemsListVisible: false, - isSearchListVisible: true, + isSearch: true, + isFetchFailed: false, }); }, [types.RECEIVE_SEARCHED_ITEMS_ERROR](state) { Object.assign(state, { - isSearchFailed: true, isLoadingItems: false, - isItemsListVisible: false, - isSearchListVisible: true, + isSearch: true, + isFetchFailed: true, }); }, }; diff --git a/app/assets/javascripts/frequent_items/store/state.js b/app/assets/javascripts/frequent_items/store/state.js index c78a6008e2a..75b04febee4 100644 --- a/app/assets/javascripts/frequent_items/store/state.js +++ b/app/assets/javascripts/frequent_items/store/state.js @@ -2,11 +2,7 @@ export default () => ({ namespace: '', storageKey: '', searchQuery: '', - isLocalStorageFailed: false, - isSearchFailed: false, isLoadingItems: false, - isItemsListVisible: true, - isSearchListVisible: false, - frequentItems: [], - searchedItems: [], + isFetchFailed: false, + items: [], }); |