diff options
Diffstat (limited to 'app/assets/javascripts/boards')
7 files changed, 111 insertions, 33 deletions
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue index 5e8b80cd959..8b44ccfd276 100644 --- a/app/assets/javascripts/boards/components/boards_selector.vue +++ b/app/assets/javascripts/boards/components/boards_selector.vue @@ -10,6 +10,11 @@ import { } from '@gitlab/ui'; import httpStatusCodes from '~/lib/utils/http_status'; + +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import projectQuery from '../queries/project_boards.query.graphql'; +import groupQuery from '../queries/group_boards.query.graphql'; + import boardsStore from '../stores/boards_store'; import BoardForm from './board_form.vue'; @@ -88,8 +93,9 @@ export default { }, data() { return { - loading: true, hasScrollFade: false, + loadingBoards: 0, + loadingRecentBoards: false, scrollFadeInitialized: false, boards: [], recentBoards: [], @@ -102,6 +108,12 @@ export default { }; }, computed: { + parentType() { + return this.groupId ? 'group' : 'project'; + }, + loading() { + return this.loadingRecentBoards && this.loadingBoards; + }, currentPage() { return this.state.currentPage; }, @@ -147,49 +159,71 @@ export default { return; } - const recentBoardsPromise = new Promise((resolve, reject) => - boardsStore - .recentBoards() - .then(resolve) - .catch(err => { - /** - * If user is unauthorized we'd still want to resolve the - * request to display all boards. - */ - if (err.response.status === httpStatusCodes.UNAUTHORIZED) { - resolve({ data: [] }); // recent boards are empty - return; - } - reject(err); - }), - ); + this.$apollo.addSmartQuery('boards', { + variables() { + return { fullPath: this.state.endpoints.fullPath }; + }, + query() { + return this.groupId ? groupQuery : projectQuery; + }, + loadingKey: 'loadingBoards', + update(data) { + if (!data?.[this.parentType]) { + return []; + } + return data[this.parentType].boards.edges.map(({ node }) => ({ + id: getIdFromGraphQLId(node.id), + name: node.name, + })); + }, + }); - Promise.all([boardsStore.allBoards(), recentBoardsPromise]) - .then(([allBoards, recentBoards]) => [allBoards.data, recentBoards.data]) - .then(([allBoardsJson, recentBoardsJson]) => { - this.loading = false; - this.boards = allBoardsJson; - this.recentBoards = recentBoardsJson; + this.loadingRecentBoards = true; + boardsStore + .recentBoards() + .then(res => { + this.recentBoards = res.data; + }) + .catch(err => { + /** + * If user is unauthorized we'd still want to resolve the + * request to display all boards. + */ + if (err?.response?.status === httpStatusCodes.UNAUTHORIZED) { + this.recentBoards = []; // recent boards are empty + return; + } + throw err; }) .then(() => this.$nextTick()) // Wait for boards list in DOM .then(() => { this.setScrollFade(); }) - .catch(() => { - this.loading = false; + .catch(() => {}) + .finally(() => { + this.loadingRecentBoards = false; }); }, isScrolledUp() { const { content } = this.$refs; + + if (!content) { + return false; + } + const currentPosition = this.contentClientHeight + content.scrollTop; - return content && currentPosition < this.maxPosition; + return currentPosition < this.maxPosition; }, initScrollFade() { - this.scrollFadeInitialized = true; - const { content } = this.$refs; + if (!content) { + return; + } + + this.scrollFadeInitialized = true; + this.contentClientHeight = content.clientHeight; this.maxPosition = content.scrollHeight; }, diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js index f1b481fc386..f72fc8d54b3 100644 --- a/app/assets/javascripts/boards/index.js +++ b/app/assets/javascripts/boards/index.js @@ -98,6 +98,7 @@ export default () => { listsEndpoint: this.listsEndpoint, bulkUpdatePath: this.bulkUpdatePath, boardId: this.boardId, + fullPath: $boardApp.dataset.fullPath, }); boardsStore.rootPath = this.boardsEndpoint; diff --git a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js index 8d22f009784..73d37459bfe 100644 --- a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js +++ b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js @@ -1,7 +1,15 @@ import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; import { parseBoolean } from '~/lib/utils/common_utils'; import BoardsSelector from '~/boards/components/boards_selector.vue'; +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + export default () => { const boardsSwitcherElement = document.getElementById('js-multiple-boards-switcher'); return new Vue({ @@ -9,6 +17,7 @@ export default () => { components: { BoardsSelector, }, + apolloProvider, data() { const { dataset } = boardsSwitcherElement; diff --git a/app/assets/javascripts/boards/queries/board.fragment.graphql b/app/assets/javascripts/boards/queries/board.fragment.graphql new file mode 100644 index 00000000000..48f55e899bf --- /dev/null +++ b/app/assets/javascripts/boards/queries/board.fragment.graphql @@ -0,0 +1,4 @@ +fragment BoardFragment on Board { + id, + name +} diff --git a/app/assets/javascripts/boards/queries/group_boards.query.graphql b/app/assets/javascripts/boards/queries/group_boards.query.graphql new file mode 100644 index 00000000000..74c224add7d --- /dev/null +++ b/app/assets/javascripts/boards/queries/group_boards.query.graphql @@ -0,0 +1,13 @@ +#import "ee_else_ce/boards/queries/board.fragment.graphql" + +query group_boards($fullPath: ID!) { + group(fullPath: $fullPath) { + boards { + edges { + node { + ...BoardFragment + } + } + } + } +} diff --git a/app/assets/javascripts/boards/queries/project_boards.query.graphql b/app/assets/javascripts/boards/queries/project_boards.query.graphql new file mode 100644 index 00000000000..a1326bd5eff --- /dev/null +++ b/app/assets/javascripts/boards/queries/project_boards.query.graphql @@ -0,0 +1,13 @@ +#import "ee_else_ce/boards/queries/board.fragment.graphql" + +query project_boards($fullPath: ID!) { + project(fullPath: $fullPath) { + boards { + edges { + node { + ...BoardFragment + } + } + } + } +} diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js index 2a5571543fb..2a2cff3d07d 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js +++ b/app/assets/javascripts/boards/stores/boards_store.js @@ -45,7 +45,14 @@ const boardsStore = { }, multiSelect: { list: [] }, - setEndpoints({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId, recentBoardsEndpoint }) { + setEndpoints({ + boardsEndpoint, + listsEndpoint, + bulkUpdatePath, + boardId, + recentBoardsEndpoint, + fullPath, + }) { const listsEndpointGenerate = `${listsEndpoint}/generate.json`; this.state.endpoints = { boardsEndpoint, @@ -53,6 +60,7 @@ const boardsStore = { listsEndpoint, listsEndpointGenerate, bulkUpdatePath, + fullPath, recentBoardsEndpoint: `${recentBoardsEndpoint}.json`, }; }, @@ -542,10 +550,6 @@ const boardsStore = { return axios.post(endpoint); }, - allBoards() { - return axios.get(this.generateBoardsPath()); - }, - recentBoards() { return axios.get(this.state.endpoints.recentBoardsEndpoint); }, |