diff options
Diffstat (limited to 'app/assets/javascripts/boards/components')
4 files changed, 57 insertions, 69 deletions
diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue index 858aabb0f05..af753151be8 100644 --- a/app/assets/javascripts/boards/components/board_app.vue +++ b/app/assets/javascripts/boards/components/board_app.vue @@ -1,5 +1,6 @@ <script> -import { mapActions, mapGetters } from 'vuex'; +import { mapGetters } from 'vuex'; +import { refreshCurrentPage } from '~/lib/utils/url_utility'; import BoardContent from '~/boards/components/board_content.vue'; import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue'; import BoardTopBar from '~/boards/components/board_top_bar.vue'; @@ -14,11 +15,11 @@ export default { computed: { ...mapGetters(['isSidebarOpen']), }, - mounted() { - this.performSearch(); + created() { + window.addEventListener('popstate', refreshCurrentPage); }, - methods: { - ...mapActions(['performSearch']), + destroyed() { + window.removeEventListener('popstate', refreshCurrentPage); }, }; </script> diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue index 9d972860d06..9f359a25234 100644 --- a/app/assets/javascripts/boards/components/board_form.vue +++ b/app/assets/javascripts/boards/components/board_form.vue @@ -1,7 +1,8 @@ <script> import { GlModal, GlAlert } from '@gitlab/ui'; import { mapGetters, mapActions, mapState } from 'vuex'; -import { getParameterByName, visitUrl } from '~/lib/utils/url_utility'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { visitUrl, updateHistory, getParameterByName } from '~/lib/utils/url_utility'; import { __, s__ } from '~/locale'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { formType } from '../constants'; @@ -170,17 +171,7 @@ export default { } }, methods: { - ...mapActions(['setError', 'unsetError']), - boardCreateResponse(data) { - return data.createBoard.board.webPath; - }, - boardUpdateResponse(data) { - const path = data.updateBoard.board.webPath; - const param = getParameterByName('group_by') - ? `?group_by=${getParameterByName('group_by')}` - : ''; - return `${path}${param}`; - }, + ...mapActions(['setError', 'unsetError', 'setBoard']), cancel() { this.$emit('cancel'); }, @@ -191,10 +182,10 @@ export default { }); if (!this.board.id) { - return this.boardCreateResponse(response.data); + return response.data.createBoard.board; } - return this.boardUpdateResponse(response.data); + return response.data.updateBoard.board; }, async deleteBoard() { await this.$apollo.mutate({ @@ -218,8 +209,14 @@ export default { } } else { try { - const url = await this.createOrUpdateBoard(); - visitUrl(url); + const board = await this.createOrUpdateBoard(); + this.setBoard(board); + this.cancel(); + + const param = getParameterByName('group_by') + ? `?group_by=${getParameterByName('group_by')}` + : ''; + updateHistory({ url: `${this.boardBaseUrl}/${getIdFromGraphQLId(board.id)}${param}` }); } catch { this.setError({ message: this.$options.i18n.saveErrorMessage }); } finally { diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue index a4298eb2544..a65269de743 100644 --- a/app/assets/javascripts/boards/components/board_list_header.vue +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -45,9 +45,6 @@ export default { }, mixins: [Tracking.mixin(), glFeatureFlagMixin()], inject: { - boardId: { - default: '', - }, weightFeatureAvailable: { default: false, }, @@ -78,7 +75,7 @@ export default { }, }, computed: { - ...mapState(['activeId', 'filterParams']), + ...mapState(['activeId', 'filterParams', 'boardId']), ...mapGetters(['isEpicBoard', 'isSwimlanesOn']), isLoggedIn() { return Boolean(this.currentUserId); @@ -155,6 +152,12 @@ export default { isLoading() { return this.$apollo.queries.boardList.loading; }, + totalWeight() { + return this.boardList?.totalWeight; + }, + canShowTotalWeight() { + return this.weightFeatureAvailable && !this.isLoading; + }, }, apollo: { boardList: { @@ -359,7 +362,7 @@ export default { <div v-if="weightFeatureAvailable && !isLoading"> • <gl-sprintf :message="__('%{totalWeight} total weight')"> - <template #totalWeight>{{ boardList.totalWeight }}</template> + <template #totalWeight>{{ totalWeight }}</template> </gl-sprintf> </div> </gl-tooltip> @@ -384,11 +387,11 @@ export default { /> </span> <!-- EE start --> - <template v-if="weightFeatureAvailable && !isEpicBoard && !isLoading"> + <template v-if="canShowTotalWeight"> <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" /> - <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3"> + <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3" data-testid="weight"> <gl-icon class="gl-mr-2" name="weight" /> - {{ boardList.totalWeight }} + {{ totalWeight }} </span> </template> <!-- EE end --> diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue index 2951eda1112..eaf3facb450 100644 --- a/app/assets/javascripts/boards/components/boards_selector.vue +++ b/app/assets/javascripts/boards/components/boards_selector.vue @@ -14,15 +14,16 @@ import { mapActions, mapGetters, mapState } from 'vuex'; import BoardForm from 'ee_else_ce/boards/components/board_form.vue'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { isMetaKey } from '~/lib/utils/common_utils'; +import { updateHistory } from '~/lib/utils/url_utility'; import { s__ } from '~/locale'; import eventHub from '../eventhub'; import groupBoardsQuery from '../graphql/group_boards.query.graphql'; import projectBoardsQuery from '../graphql/project_boards.query.graphql'; -import groupBoardQuery from '../graphql/group_board.query.graphql'; -import projectBoardQuery from '../graphql/project_board.query.graphql'; import groupRecentBoardsQuery from '../graphql/group_recent_boards.query.graphql'; import projectRecentBoardsQuery from '../graphql/project_recent_boards.query.graphql'; +import { fullBoardId } from '../boards_util'; const MIN_BOARDS_TO_VIEW_RECENT = 10; @@ -69,48 +70,15 @@ export default { maxPosition: 0, filterTerm: '', currentPage: '', - board: {}, }; }, - apollo: { - board: { - query() { - return this.currentBoardQuery; - }, - variables() { - return { - fullPath: this.fullPath, - boardId: this.fullBoardId, - }; - }, - update(data) { - const board = data.workspace?.board; - this.setBoardConfig(board); - return { - ...board, - labels: board?.labels?.nodes, - }; - }, - error() { - this.setError({ message: this.$options.i18n.errorFetchingBoard }); - }, - }, - }, + computed: { - ...mapState(['boardType', 'fullBoardId']), + ...mapState(['boardType', 'board', 'isBoardLoading']), ...mapGetters(['isGroupBoard', 'isProjectBoard']), parentType() { return this.boardType; }, - currentBoardQueryCE() { - return this.isGroupBoard ? groupBoardQuery : projectBoardQuery; - }, - currentBoardQuery() { - return this.currentBoardQueryCE; - }, - isBoardLoading() { - return this.$apollo.queries.board.loading; - }, loading() { return this.loadingRecentBoards || Boolean(this.loadingBoards); }, @@ -147,6 +115,9 @@ export default { this.scrollFadeInitialized = false; this.$nextTick(this.setScrollFade); }, + board(newBoard) { + document.title = newBoard.name; + }, }, created() { eventHub.$on('showBoardModal', this.showPage); @@ -155,7 +126,7 @@ export default { eventHub.$off('showBoardModal', this.showPage); }, methods: { - ...mapActions(['setError', 'setBoardConfig']), + ...mapActions(['setError', 'fetchBoard', 'unsetActiveId']), showPage(page) { this.currentPage = page; }, @@ -231,6 +202,22 @@ export default { this.hasScrollFade = this.isScrolledUp(); }, + fetchCurrentBoard(boardId) { + this.fetchBoard({ + fullPath: this.fullPath, + fullBoardId: fullBoardId(boardId), + boardType: this.boardType, + }); + }, + async switchBoard(boardId, e) { + if (isMetaKey(e)) { + window.open(`${this.boardBaseUrl}/${boardId}`, '_blank'); + } else { + this.unsetActiveId(); + this.fetchCurrentBoard(boardId); + updateHistory({ url: `${this.boardBaseUrl}/${boardId}` }); + } + }, }, i18n: { errorFetchingBoard: s__('Board|An error occurred while fetching the board, please try again.'), @@ -277,8 +264,8 @@ export default { <gl-dropdown-item v-for="recentBoard in recentBoards" :key="`recent-${recentBoard.id}`" - :href="`${boardBaseUrl}/${recentBoard.id}`" data-testid="dropdown-item" + @click.prevent="switchBoard(recentBoard.id, $event)" > {{ recentBoard.name }} </gl-dropdown-item> @@ -293,8 +280,8 @@ export default { <gl-dropdown-item v-for="otherBoard in filteredBoards" :key="otherBoard.id" - :href="`${boardBaseUrl}/${otherBoard.id}`" data-testid="dropdown-item" + @click.prevent="switchBoard(otherBoard.id, $event)" > {{ otherBoard.name }} </gl-dropdown-item> |