debian-mirror-gitlab/app/assets/javascripts/boards/index.js

384 lines
12 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-08-17 22:00:37 +05:30
import Vue from 'vue';
2020-06-23 00:09:42 +05:30
import { mapActions } from 'vuex';
2018-03-27 19:54:05 +05:30
2020-01-01 13:55:28 +05:30
import 'ee_else_ce/boards/models/issue';
import 'ee_else_ce/boards/models/list';
2020-06-23 00:09:42 +05:30
import BoardContent from '~/boards/components/board_content.vue';
2020-01-01 13:55:28 +05:30
import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
import toggleLabels from 'ee_else_ce/boards/toggle_labels';
2020-06-23 00:09:42 +05:30
import toggleEpicsSwimlanes from 'ee_else_ce/boards/toggle_epics_swimlanes';
2020-01-01 13:55:28 +05:30
import {
setPromotionState,
setWeigthFetchingState,
setEpicFetchingState,
getMilestoneTitle,
getBoardsModalData,
} from 'ee_else_ce/boards/ee_functions';
2020-05-24 23:13:21 +05:30
import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';
2018-03-27 19:54:05 +05:30
import Flash from '~/flash';
import { __ } from '~/locale';
2019-09-04 21:01:54 +05:30
import './models/label';
import './models/assignee';
2020-05-24 23:13:21 +05:30
import { BoardType } from './constants';
2018-03-27 19:54:05 +05:30
2020-05-24 23:13:21 +05:30
import toggleFocusMode from '~/boards/toggle_focus';
2019-09-30 21:07:59 +05:30
import FilteredSearchBoards from '~/boards/filtered_search_boards';
import eventHub from '~/boards/eventhub';
2018-12-05 23:21:45 +05:30
import sidebarEventHub from '~/sidebar/event_hub';
2019-09-30 21:07:59 +05:30
import '~/boards/models/milestone';
import '~/boards/models/project';
2019-12-26 22:10:19 +05:30
import store from '~/boards/stores';
2019-09-30 21:07:59 +05:30
import boardsStore from '~/boards/stores/boards_store';
import ModalStore from '~/boards/stores/modal_store';
import modalMixin from '~/boards/mixins/modal_mixins';
import '~/boards/filters/due_date_filters';
import BoardAddIssuesModal from '~/boards/components/modal/index.vue';
2019-07-31 22:56:46 +05:30
import {
NavigationType,
convertObjectPropsToCamelCase,
parseBoolean,
} from '~/lib/utils/common_utils';
2020-05-24 23:13:21 +05:30
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
2019-09-30 21:07:59 +05:30
import mountMultipleBoardsSwitcher from './mount_multiple_boards_switcher';
2020-05-24 23:13:21 +05:30
import projectBoardQuery from './queries/project_board.query.graphql';
import groupQuery from './queries/group_board.query.graphql';
Vue.use(VueApollo);
const apolloProvider = new VueApollo({
defaultClient: createDefaultClient(),
});
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
let issueBoardsApp;
2018-03-27 19:54:05 +05:30
export default () => {
2017-08-17 22:00:37 +05:30
const $boardApp = document.getElementById('board-app');
2018-12-05 23:21:45 +05:30
// check for browser back and trigger a hard reload to circumvent browser caching.
2018-12-13 13:39:08 +05:30
window.addEventListener('pageshow', event => {
const isNavTypeBackForward =
window.performance && window.performance.navigation.type === NavigationType.TYPE_BACK_FORWARD;
2018-12-05 23:21:45 +05:30
if (event.persisted || isNavTypeBackForward) {
window.location.reload();
}
});
2018-12-13 13:39:08 +05:30
if (issueBoardsApp) {
issueBoardsApp.$destroy(true);
2017-08-17 22:00:37 +05:30
}
2018-12-13 13:39:08 +05:30
boardsStore.create();
2019-09-30 21:07:59 +05:30
boardsStore.setTimeTrackingLimitToHours($boardApp.dataset.timeTrackingLimitToHours);
2017-08-17 22:00:37 +05:30
2018-12-13 13:39:08 +05:30
issueBoardsApp = new Vue({
2017-08-17 22:00:37 +05:30
el: $boardApp,
components: {
2020-06-23 00:09:42 +05:30
BoardContent,
2020-04-22 19:07:51 +05:30
Board: () =>
window?.gon?.features?.sfcIssueBoards
? import('ee_else_ce/boards/components/board_column.vue')
: /**
* Please have a look at, we are moving to the SFC soon:
* https://gitlab.com/gitlab-org/gitlab/-/issues/212300
* @deprecated
*/
import('ee_else_ce/boards/components/board'),
2018-12-13 13:39:08 +05:30
BoardSidebar,
2018-11-08 19:23:39 +05:30
BoardAddIssuesModal,
2020-01-01 13:55:28 +05:30
BoardSettingsSidebar: () =>
import('ee_component/boards/components/board_settings_sidebar.vue'),
2017-08-17 22:00:37 +05:30
},
2019-12-26 22:10:19 +05:30
store,
2020-05-24 23:13:21 +05:30
apolloProvider,
data() {
return {
state: boardsStore.state,
loading: 0,
boardsEndpoint: $boardApp.dataset.boardsEndpoint,
recentBoardsEndpoint: $boardApp.dataset.recentBoardsEndpoint,
listsEndpoint: $boardApp.dataset.listsEndpoint,
boardId: $boardApp.dataset.boardId,
disabled: parseBoolean($boardApp.dataset.disabled),
issueLinkBase: $boardApp.dataset.issueLinkBase,
rootPath: $boardApp.dataset.rootPath,
bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
detailIssue: boardsStore.detail,
parent: $boardApp.dataset.parent,
};
2017-08-17 22:00:37 +05:30
},
computed: {
2018-11-18 11:00:15 +05:30
detailIssueVisible() {
2017-08-17 22:00:37 +05:30
return Object.keys(this.detailIssue.issue).length;
},
},
2018-11-18 11:00:15 +05:30
created() {
2020-06-23 00:09:42 +05:30
const endpoints = {
2018-03-17 18:26:18 +05:30
boardsEndpoint: this.boardsEndpoint,
2019-07-07 11:18:12 +05:30
recentBoardsEndpoint: this.recentBoardsEndpoint,
2018-03-17 18:26:18 +05:30
listsEndpoint: this.listsEndpoint,
bulkUpdatePath: this.bulkUpdatePath,
boardId: this.boardId,
2020-04-08 14:13:33 +05:30
fullPath: $boardApp.dataset.fullPath,
2020-06-23 00:09:42 +05:30
};
this.setEndpoints(endpoints);
boardsStore.setEndpoints(endpoints);
2018-12-13 13:39:08 +05:30
boardsStore.rootPath = this.boardsEndpoint;
2017-08-17 22:00:37 +05:30
eventHub.$on('updateTokens', this.updateTokens);
2018-03-17 18:26:18 +05:30
eventHub.$on('newDetailIssue', this.updateDetailIssue);
eventHub.$on('clearDetailIssue', this.clearDetailIssue);
sidebarEventHub.$on('toggleSubscription', this.toggleSubscription);
2017-08-17 22:00:37 +05:30
},
beforeDestroy() {
eventHub.$off('updateTokens', this.updateTokens);
2018-03-17 18:26:18 +05:30
eventHub.$off('newDetailIssue', this.updateDetailIssue);
eventHub.$off('clearDetailIssue', this.clearDetailIssue);
sidebarEventHub.$off('toggleSubscription', this.toggleSubscription);
2017-08-17 22:00:37 +05:30
},
2018-11-18 11:00:15 +05:30
mounted() {
2018-12-13 13:39:08 +05:30
this.filterManager = new FilteredSearchBoards(boardsStore.filter, true, boardsStore.cantEdit);
2018-03-17 18:26:18 +05:30
this.filterManager.setup();
2018-12-13 13:39:08 +05:30
boardsStore.disabled = this.disabled;
2020-05-24 23:13:21 +05:30
if (gon.features.graphqlBoardLists) {
this.$apollo.addSmartQuery('lists', {
query() {
return this.parent === BoardType.group ? groupQuery : projectBoardQuery;
},
variables() {
return {
fullPath: this.state.endpoints.fullPath,
boardId: `gid://gitlab/Board/${this.boardId}`,
};
},
update(data) {
return this.getNodes(data);
},
result({ data, error }) {
if (error) {
throw error;
2017-08-17 22:00:37 +05:30
}
2020-05-24 23:13:21 +05:30
const lists = this.getNodes(data);
lists.forEach(list =>
boardsStore.addList({
...list,
id: getIdFromGraphQLId(list.id),
}),
);
2017-08-17 22:00:37 +05:30
2020-05-24 23:13:21 +05:30
boardsStore.addBlankState();
setPromotionState(boardsStore);
},
error() {
Flash(__('An error occurred while fetching the board lists. Please try again.'));
},
2018-03-17 18:26:18 +05:30
});
2020-05-24 23:13:21 +05:30
} else {
boardsStore
.all()
.then(res => res.data)
.then(lists => {
lists.forEach(list => boardsStore.addList(list));
boardsStore.addBlankState();
setPromotionState(boardsStore);
this.loading = false;
})
.catch(() => {
Flash(__('An error occurred while fetching the board lists. Please try again.'));
});
}
2017-08-17 22:00:37 +05:30
},
methods: {
2020-06-23 00:09:42 +05:30
...mapActions(['setEndpoints']),
2017-08-17 22:00:37 +05:30
updateTokens() {
this.filterManager.updateTokens();
2018-03-17 18:26:18 +05:30
},
2019-12-21 20:55:43 +05:30
updateDetailIssue(newIssue, multiSelect = false) {
2018-11-08 19:23:39 +05:30
const { sidebarInfoEndpoint } = newIssue;
2018-03-17 18:26:18 +05:30
if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
newIssue.setFetchingState('subscriptions', true);
2019-10-12 21:52:04 +05:30
setWeigthFetchingState(newIssue, true);
setEpicFetchingState(newIssue, true);
2020-01-01 13:55:28 +05:30
boardsStore
.getIssueInfo(sidebarInfoEndpoint)
2018-03-17 18:26:18 +05:30
.then(res => res.data)
2018-11-18 11:00:15 +05:30
.then(data => {
2019-07-31 22:56:46 +05:30
const {
subscribed,
totalTimeSpent,
timeEstimate,
humanTimeEstimate,
humanTotalTimeSpent,
weight,
epic,
2020-01-01 13:55:28 +05:30
assignees,
2019-07-31 22:56:46 +05:30
} = convertObjectPropsToCamelCase(data);
2018-03-17 18:26:18 +05:30
newIssue.setFetchingState('subscriptions', false);
2019-10-12 21:52:04 +05:30
setWeigthFetchingState(newIssue, false);
setEpicFetchingState(newIssue, false);
2018-03-17 18:26:18 +05:30
newIssue.updateData({
2019-07-31 22:56:46 +05:30
humanTimeSpent: humanTotalTimeSpent,
timeSpent: totalTimeSpent,
humanTimeEstimate,
timeEstimate,
subscribed,
weight,
epic,
2020-01-01 13:55:28 +05:30
assignees,
2018-03-17 18:26:18 +05:30
});
})
.catch(() => {
newIssue.setFetchingState('subscriptions', false);
2019-10-12 21:52:04 +05:30
setWeigthFetchingState(newIssue, false);
2018-03-17 18:26:18 +05:30
Flash(__('An error occurred while fetching sidebar data'));
});
}
2019-12-21 20:55:43 +05:30
if (multiSelect) {
boardsStore.toggleMultiSelect(newIssue);
if (boardsStore.detail.issue) {
boardsStore.clearDetailIssue();
return;
}
return;
}
2019-09-04 21:01:54 +05:30
boardsStore.setIssueDetail(newIssue);
2018-03-17 18:26:18 +05:30
},
2019-12-21 20:55:43 +05:30
clearDetailIssue(multiSelect = false) {
if (multiSelect) {
boardsStore.clearMultiSelect();
}
2019-09-04 21:01:54 +05:30
boardsStore.clearDetailIssue();
2018-03-17 18:26:18 +05:30
},
toggleSubscription(id) {
2018-12-13 13:39:08 +05:30
const { issue } = boardsStore.detail;
2018-03-17 18:26:18 +05:30
if (issue.id === id && issue.toggleSubscriptionEndpoint) {
issue.setFetchingState('subscriptions', true);
2020-01-01 13:55:28 +05:30
boardsStore
.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
2018-03-17 18:26:18 +05:30
.then(() => {
issue.setFetchingState('subscriptions', false);
issue.updateData({
subscribed: !issue.subscribed,
});
})
.catch(() => {
issue.setFetchingState('subscriptions', false);
Flash(__('An error occurred when toggling the notification subscription'));
});
}
2018-11-18 11:00:15 +05:30
},
2020-05-24 23:13:21 +05:30
getNodes(data) {
return data[this.parent]?.board?.lists.nodes;
},
2017-08-17 22:00:37 +05:30
},
});
2018-12-13 13:39:08 +05:30
// eslint-disable-next-line no-new
new Vue({
2017-08-17 22:00:37 +05:30
el: document.getElementById('js-add-list'),
data: {
2018-12-13 13:39:08 +05:30
filters: boardsStore.state.filters,
2019-10-12 21:52:04 +05:30
...getMilestoneTitle($boardApp),
2017-08-17 22:00:37 +05:30
},
2018-11-18 11:00:15 +05:30
mounted() {
2018-12-13 13:39:08 +05:30
initNewListDropdown();
2018-03-17 18:26:18 +05:30
},
2017-08-17 22:00:37 +05:30
});
2019-09-30 21:07:59 +05:30
boardConfigToggle(boardsStore);
2018-11-18 11:00:15 +05:30
const issueBoardsModal = document.getElementById('js-add-issues-btn');
if (issueBoardsModal) {
2018-12-13 13:39:08 +05:30
// eslint-disable-next-line no-new
new Vue({
2018-11-18 11:00:15 +05:30
el: issueBoardsModal,
mixins: [modalMixin],
data() {
return {
modal: ModalStore.store,
2018-12-13 13:39:08 +05:30
store: boardsStore.state,
2020-05-24 23:13:21 +05:30
...getBoardsModalData(),
2018-11-18 11:00:15 +05:30
canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
};
2017-08-17 22:00:37 +05:30
},
2018-11-18 11:00:15 +05:30
computed: {
disabled() {
if (!this.store) {
return true;
}
return !this.store.lists.filter(list => !list.preset).length;
},
tooltipTitle() {
if (this.disabled) {
2019-07-31 22:56:46 +05:30
return __('Please add a list to your board first');
2018-11-18 11:00:15 +05:30
}
2017-08-17 22:00:37 +05:30
2018-11-18 11:00:15 +05:30
return '';
},
2017-08-17 22:00:37 +05:30
},
2018-11-18 11:00:15 +05:30
watch: {
disabled() {
this.updateTooltip();
},
},
mounted() {
2018-03-17 18:26:18 +05:30
this.updateTooltip();
},
2018-11-18 11:00:15 +05:30
methods: {
updateTooltip() {
const $tooltip = $(this.$refs.addIssuesButton);
this.$nextTick(() => {
if (this.disabled) {
$tooltip.tooltip();
} else {
$tooltip.tooltip('dispose');
}
});
},
openModal() {
if (!this.disabled) {
this.toggleModal(true);
2017-08-17 22:00:37 +05:30
}
2018-11-18 11:00:15 +05:30
},
2017-08-17 22:00:37 +05:30
},
2018-11-18 11:00:15 +05:30
template: `
<div class="board-extra-actions">
<button
2018-12-05 23:21:45 +05:30
class="btn btn-success prepend-left-10"
2018-11-18 11:00:15 +05:30
type="button"
data-placement="bottom"
ref="addIssuesButton"
:class="{ 'disabled': disabled }"
:title="tooltipTitle"
:aria-disabled="disabled"
v-if="canAdminList"
@click="openModal">
Add issues
</button>
</div>
`,
});
}
2019-09-30 21:07:59 +05:30
2020-05-24 23:13:21 +05:30
toggleFocusMode(ModalStore, boardsStore);
2019-12-26 22:10:19 +05:30
toggleLabels();
2020-06-23 00:09:42 +05:30
toggleEpicsSwimlanes();
2019-09-30 21:07:59 +05:30
mountMultipleBoardsSwitcher();
2018-03-27 19:54:05 +05:30
};