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

248 lines
7.5 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-09-10 17:25:29 +05:30
import _ from 'underscore';
2017-08-17 22:00:37 +05:30
import Vue from 'vue';
2018-03-27 19:54:05 +05:30
import Flash from '~/flash';
import { __ } from '~/locale';
import '~/vue_shared/models/label';
2018-11-08 19:23:39 +05:30
import '~/vue_shared/models/assignee';
2018-03-27 19:54:05 +05:30
2017-08-17 22:00:37 +05:30
import FilteredSearchBoards from './filtered_search_boards';
import eventHub from './eventhub';
2018-03-27 19:54:05 +05:30
import sidebarEventHub from '~/sidebar/event_hub'; // eslint-disable-line import/first
2017-09-10 17:25:29 +05:30
import './models/issue';
import './models/list';
import './models/milestone';
2018-03-27 19:54:05 +05:30
import './models/project';
2017-09-10 17:25:29 +05:30
import './stores/boards_store';
2018-10-15 14:42:47 +05:30
import ModalStore from './stores/modal_store';
2018-03-17 18:26:18 +05:30
import BoardService from './services/board_service';
2018-10-15 14:42:47 +05:30
import modalMixin from './mixins/modal_mixins';
2017-09-10 17:25:29 +05:30
import './mixins/sortable_default_options';
import './filters/due_date_filters';
import './components/board';
import './components/board_sidebar';
import './components/new_list_dropdown';
2018-11-08 19:23:39 +05:30
import BoardAddIssuesModal from './components/modal/index.vue';
2018-03-27 19:54:05 +05:30
import '~/vue_shared/vue_resource_interceptor'; // eslint-disable-line import/first
2017-08-17 22:00:37 +05:30
2018-03-27 19:54:05 +05:30
export default () => {
2017-08-17 22:00:37 +05:30
const $boardApp = document.getElementById('board-app');
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {};
if (gl.IssueBoardsApp) {
gl.IssueBoardsApp.$destroy(true);
}
Store.create();
// hack to allow sidebar scripts like milestone_select manipulate the BoardsStore
gl.issueBoards.boardStoreIssueSet = (...args) => Vue.set(Store.detail.issue, ...args);
gl.issueBoards.boardStoreIssueDelete = (...args) => Vue.delete(Store.detail.issue, ...args);
gl.IssueBoardsApp = new Vue({
el: $boardApp,
components: {
2018-11-18 11:00:15 +05:30
board: gl.issueBoards.Board,
2017-08-17 22:00:37 +05:30
'board-sidebar': gl.issueBoards.BoardSidebar,
2018-11-08 19:23:39 +05:30
BoardAddIssuesModal,
2017-08-17 22:00:37 +05:30
},
data: {
state: Store.state,
loading: true,
2018-03-17 18:26:18 +05:30
boardsEndpoint: $boardApp.dataset.boardsEndpoint,
listsEndpoint: $boardApp.dataset.listsEndpoint,
2017-08-17 22:00:37 +05:30
boardId: $boardApp.dataset.boardId,
disabled: $boardApp.dataset.disabled === 'true',
issueLinkBase: $boardApp.dataset.issueLinkBase,
rootPath: $boardApp.dataset.rootPath,
bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
detailIssue: Store.detail,
defaultAvatar: $boardApp.dataset.defaultAvatar,
},
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() {
2018-03-17 18:26:18 +05:30
gl.boardService = new BoardService({
boardsEndpoint: this.boardsEndpoint,
listsEndpoint: this.listsEndpoint,
bulkUpdatePath: this.bulkUpdatePath,
boardId: this.boardId,
});
Store.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-03-27 19:54:05 +05:30
this.filterManager = new FilteredSearchBoards(Store.filter, true, Store.cantEdit);
2018-03-17 18:26:18 +05:30
this.filterManager.setup();
2017-08-17 22:00:37 +05:30
Store.disabled = this.disabled;
2018-11-18 11:00:15 +05:30
gl.boardService
.all()
2018-03-17 18:26:18 +05:30
.then(res => res.data)
2018-11-18 11:00:15 +05:30
.then(data => {
data.forEach(board => {
2017-08-17 22:00:37 +05:30
const list = Store.addList(board, this.defaultAvatar);
if (list.type === 'closed') {
list.position = Infinity;
2017-09-10 17:25:29 +05:30
} else if (list.type === 'backlog') {
list.position = -1;
2017-08-17 22:00:37 +05:30
}
});
this.state.lists = _.sortBy(this.state.lists, 'position');
Store.addBlankState();
this.loading = false;
2017-09-10 17:25:29 +05:30
})
2018-03-17 18:26:18 +05:30
.catch(() => {
Flash('An error occurred while fetching the board lists. Please try again.');
});
2017-08-17 22:00:37 +05:30
},
methods: {
updateTokens() {
this.filterManager.updateTokens();
2018-03-17 18:26:18 +05:30
},
updateDetailIssue(newIssue) {
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);
BoardService.getIssueInfo(sidebarInfoEndpoint)
.then(res => res.data)
2018-11-18 11:00:15 +05:30
.then(data => {
2018-03-17 18:26:18 +05:30
newIssue.setFetchingState('subscriptions', false);
newIssue.updateData({
subscribed: data.subscribed,
});
})
.catch(() => {
newIssue.setFetchingState('subscriptions', false);
Flash(__('An error occurred while fetching sidebar data'));
});
}
Store.detail.issue = newIssue;
},
clearDetailIssue() {
Store.detail.issue = {};
},
toggleSubscription(id) {
2018-11-08 19:23:39 +05:30
const { issue } = Store.detail;
2018-03-17 18:26:18 +05:30
if (issue.id === id && issue.toggleSubscriptionEndpoint) {
issue.setFetchingState('subscriptions', true);
BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
.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
},
2017-08-17 22:00:37 +05:30
},
});
gl.IssueBoardsSearch = new Vue({
el: document.getElementById('js-add-list'),
data: {
2018-03-17 18:26:18 +05:30
filters: Store.state.filters,
2017-08-17 22:00:37 +05:30
},
2018-11-18 11:00:15 +05:30
mounted() {
2017-08-17 22:00:37 +05:30
gl.issueBoards.newListDropdownInit();
2018-03-17 18:26:18 +05:30
},
2017-08-17 22:00:37 +05:30
});
2018-11-18 11:00:15 +05:30
const issueBoardsModal = document.getElementById('js-add-issues-btn');
if (issueBoardsModal) {
gl.IssueBoardsModalAddBtn = new Vue({
el: issueBoardsModal,
mixins: [modalMixin],
data() {
return {
modal: ModalStore.store,
store: Store.state,
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) {
return 'Please add a list to your board first';
}
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
class="btn btn-create prepend-left-10"
type="button"
data-placement="bottom"
ref="addIssuesButton"
:class="{ 'disabled': disabled }"
:title="tooltipTitle"
:aria-disabled="disabled"
v-if="canAdminList"
@click="openModal">
Add issues
</button>
</div>
`,
});
}
2018-03-27 19:54:05 +05:30
};