Skip to content

G
gitlab-ce
Commit 5d0a829d authored by Mike Greiling's avatar Mike Greiling Committed by Fatih Acet
Browse files
Options

EE Port of "Convert remaining issue board components into ES module syntax"

parent 27aedd8b
Hide whitespace changes
Inline Side-by-side
Showing with 440 additions and 460 deletions
app/assets/javascripts/boards/components/board.js
View file @ 5d0a829d
......@@ -4,20 +4,17 @@ import { n__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import Tooltip from '~/vue_shared/directives/tooltip';
import AccessorUtilities from '../../lib/utils/accessor';
import boardList from './board_list.vue';
import BoardBlankState from './board_blank_state.vue';
import './board_delete';
import BoardDelete from './board_delete';
import BoardList from './board_list.vue';
import boardsStore from '../stores/boards_store';
import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.Board = Vue.extend({
export default Vue.extend({
components: {
boardList,
'board-delete': gl.issueBoards.BoardDelete,
BoardBlankState,
BoardDelete,
BoardList,
Icon,
},
directives: {
......@@ -47,8 +44,8 @@ gl.issueBoards.Board = Vue.extend({
},
data () {
return {
detailIssue: Store.detail,
filter: Store.filter,
detailIssue: boardsStore.detail,
filter: boardsStore.filter,
};
},
computed: {
......@@ -70,20 +67,20 @@ gl.issueBoards.Board = Vue.extend({
}
},
mounted () {
this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
this.sortableOptions = getBoardSortableDefaultOptions({
disabled: this.disabled,
group: 'boards',
draggable: '.is-draggable',
handle: '.js-board-handle',
onEnd: (e) => {
gl.issueBoards.onEnd();
sortableEnd();
if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
const order = this.sortable.toArray();
const list = Store.findList('id', parseInt(e.item.dataset.id, 10));
const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
this.$nextTick(() => {
Store.moveList(list, order);
boardsStore.moveList(list, order);
});
}
}
......
app/assets/javascripts/boards/components/board_blank_state.vue
View file @ 5d0a829d
......@@ -2,8 +2,7 @@
/* global ListLabel */
import _ from 'underscore';
import Cookies from 'js-cookie';
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '../stores/boards_store';
export default {
data() {
......@@ -19,7 +18,7 @@ export default {
this.clearBlankState();
this.predefinedLabels.forEach((label, i) => {
Store.addList({
boardsStore.addList({
title: label.title,
position: i,
list_type: 'label',
......@@ -30,14 +29,14 @@ export default {
});
});
Store.state.lists = _.sortBy(Store.state.lists, 'position');
boardsStore.state.lists = _.sortBy(boardsStore.state.lists, 'position');
// Save the labels
gl.boardService.generateDefaultLists()
.then(res => res.data)
.then((data) => {
data.forEach((listObj) => {
const list = Store.findList('title', listObj.title);
const list = boardsStore.findList('title', listObj.title);
list.id = listObj.id;
list.label.id = listObj.label.id;
......@@ -48,14 +47,14 @@ export default {
});
})
.catch(() => {
Store.removeList(undefined, 'label');
boardsStore.removeList(undefined, 'label');
Cookies.remove('issue_board_welcome_hidden', {
path: '',
});
Store.addBlankState();
boardsStore.addBlankState();
});
},
clearBlankState: Store.removeBlankState.bind(Store),
clearBlankState: boardsStore.removeBlankState.bind(boardsStore),
},
};
......
app/assets/javascripts/boards/components/board_card.vue
View file @ 5d0a829d
......@@ -2,8 +2,7 @@
/* eslint-disable vue/require-default-prop */
import IssueCardInner from './issue_card_inner.vue';
import eventHub from '../eventhub';
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '../stores/boards_store';
export default {
name: 'BoardsIssueCard',
......@@ -42,7 +41,7 @@
data() {
return {
showDetail: false,
detailIssue: Store.detail,
detailIssue: boardsStore.detail,
};
},
computed: {
......@@ -63,11 +62,11 @@
if (this.showDetail) {
this.showDetail = false;
if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
if (boardsStore.detail.issue && boardsStore.detail.issue.id === this.issue.id) {
eventHub.$emit('clearDetailIssue');
} else {
eventHub.$emit('newDetailIssue', this.issue);
Store.detail.list = this.list;
boardsStore.detail.list = this.list;
}
}
},
......
app/assets/javascripts/boards/components/board_delete.js
View file @ 5d0a829d
/* eslint-disable no-alert */
import $ from 'jquery';
import Vue from 'vue';
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardDelete = Vue.extend({
export default Vue.extend({
props: {
list: {
type: Object,
......@@ -14,12 +9,13 @@ gl.issueBoards.BoardDelete = Vue.extend({
},
},
methods: {
deleteBoard () {
deleteBoard() {
$(this.$el).tooltip('hide');
// eslint-disable-next-line no-alert
if (window.confirm('Are you sure you want to delete this list?')) {
this.list.destroy();
}
}
}
},
},
});
app/assets/javascripts/boards/components/board_list.vue
View file @ 5d0a829d
......@@ -3,8 +3,8 @@ import Sortable from 'sortablejs';
import boardNewIssue from './board_new_issue.vue';
import boardCard from './board_card.vue';
import eventHub from '../eventhub';
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '../stores/boards_store';
import { getBoardSortableDefaultOptions, sortableStart } from '../mixins/sortable_default_options';
export default {
name: 'BoardList',
......@@ -46,7 +46,7 @@ export default {
data() {
return {
scrollOffset: 250,
filters: Store.state.filters,
filters: boardsStore.state.filters,
showCount: false,
showIssueForm: false,
};
......@@ -61,13 +61,14 @@ export default {
},
issues() {
this.$nextTick(() => {
if (this.scrollHeight() <= this.listHeight() &&
this.list.issuesSize > this.list.issues.length) {
if (
this.scrollHeight() <= this.listHeight() &&
this.list.issuesSize > this.list.issues.length
) {
this.list.page += 1;
this.list.getIssues(false)
.catch(() => {
// TODO: handle request error
});
this.list.getIssues(false).catch(() => {
// TODO: handle request error
});
}
if (this.scrollHeight() > Math.ceil(this.listHeight())) {
......@@ -83,7 +84,7 @@ export default {
eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
},
mounted() {
const options = gl.issueBoards.getBoardSortableDefaultOptions({
const options = getBoardSortableDefaultOptions({
scroll: true,
disabled: this.disabled,
filter: '.board-list-count, .is-disabled',
......@@ -108,7 +109,8 @@ export default {
// So from there, we can get reference to actual container
// and thus the container type to enable Copy or Move
if (e.target) {
const containerEl = e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
const containerEl =
e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
const toBoardType = containerEl.dataset.boardType;
const cloneActions = {
label: ['milestone', 'assignee'],
......@@ -120,8 +122,9 @@ export default {
const fromBoardType = this.list.type;
// For each list we check if the destination list is
// a the list were we should clone the issue
const shouldClone = Object.entries(cloneActions).some(entry => (
fromBoardType === entry[0] && entry[1].includes(toBoardType)));
const shouldClone = Object.entries(cloneActions).some(
entry => fromBoardType === entry[0] && entry[1].includes(toBoardType),
);
if (shouldClone) {
return 'clone';
......@@ -133,28 +136,36 @@ export default {
},
revertClone: true,
},
onStart: (e) => {
onStart: e => {
const card = this.$refs.issue[e.oldIndex];
card.showDetail = false;
Store.moving.list = card.list;
Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
boardsStore.moving.list = card.list;
boardsStore.moving.issue = boardsStore.moving.list.findIssue(+e.item.dataset.issueId);
gl.issueBoards.onStart();
sortableStart();
},
onAdd: (e) => {
gl.issueBoards.BoardsStore
.moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
onAdd: e => {
boardsStore.moveIssueToList(
boardsStore.moving.list,
this.list,
boardsStore.moving.issue,
e.newIndex,
);
this.$nextTick(() => {
e.item.remove();
});
},
onUpdate: (e) => {
const sortedArray = this.sortable.toArray()
.filter(id => id !== '-1');
gl.issueBoards.BoardsStore
.moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
onUpdate: e => {
const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
boardsStore.moveIssueInList(
this.list,
boardsStore.moving.issue,
e.oldIndex,
e.newIndex,
sortedArray,
);
},
onMove(e) {
return !e.related.classList.contains('board-list-count');
......@@ -192,16 +203,14 @@ export default {
if (getIssues) {
this.list.loadingMore = true;
getIssues
.then(loadingDone)
.catch(loadingDone);
getIssues.then(loadingDone).catch(loadingDone);
}
},
toggleForm() {
this.showIssueForm = !this.showIssueForm;
},
onScroll() {
if (!this.list.loadingMore && (this.scrollTop() > this.scrollHeight() - this.scrollOffset)) {
if (!this.list.loadingMore && this.scrollTop() > this.scrollHeight() - this.scrollOffset) {
this.loadNextPage();
}
},
......
app/assets/javascripts/boards/components/board_new_issue.vue
View file @ 5d0a829d
......@@ -4,8 +4,7 @@ import { Button } from '@gitlab-org/gitlab-ui';
import eventHub from '../eventhub';
import ProjectSelect from './project_select.vue';
import ListIssue from '../models/issue';
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '../stores/boards_store';
export default {
name: 'BoardNewIssue',
......@@ -71,8 +70,8 @@ export default {
// Need this because our jQuery very kindly disables buttons on ALL form submissions
$(this.$refs.submitButton).enable();
Store.detail.issue = issue;
Store.detail.list = this.list;
boardsStore.detail.issue = issue;
boardsStore.detail.list = this.list;
})
.catch(() => {
// Need this because our jQuery very kindly disables buttons on ALL form submissions
......
app/assets/javascripts/boards/components/board_sidebar.js
View file @ 5d0a829d
......@@ -15,13 +15,9 @@ import IssuableContext from '../../issuable_context';
import LabelsSelect from '../../labels_select';
import Subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
import MilestoneSelect from '../../milestone_select';
import boardsStore from '../stores/boards_store';
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardSidebar = Vue.extend({
export default Vue.extend({
components: {
AssigneeTitle,
Assignees,
......@@ -37,7 +33,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
},
data() {
return {
detail: Store.detail,
detail: boardsStore.detail,
issue: {},
list: {},
loadingAssignees: false,
......@@ -119,18 +115,18 @@ gl.issueBoards.BoardSidebar = Vue.extend({
this.saveAssignees();
},
removeAssignee (a) {
gl.issueBoards.BoardsStore.detail.issue.removeAssignee(a);
boardsStore.detail.issue.removeAssignee(a);
},
addAssignee (a) {
gl.issueBoards.BoardsStore.detail.issue.addAssignee(a);
boardsStore.detail.issue.addAssignee(a);
},
removeAllAssignees () {
gl.issueBoards.BoardsStore.detail.issue.removeAllAssignees();
boardsStore.detail.issue.removeAllAssignees();
},
saveAssignees () {
this.loadingAssignees = true;
gl.issueBoards.BoardsStore.detail.issue.update()
boardsStore.detail.issue.update()
.then(() => {
this.loadingAssignees = false;
})
......
app/assets/javascripts/boards/components/issue_card_inner.vue
View file @ 5d0a829d
......@@ -4,8 +4,7 @@
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import eventHub from '../eventhub';
import tooltip from '../../vue_shared/directives/tooltip';
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '../stores/boards_store';
export default {
components: {
......@@ -112,7 +111,7 @@
filterByLabel(label, e) {
if (!this.updateFilters) return;
const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
const filterPath = boardsStore.filter.path.split('&');
const labelTitle = encodeURIComponent(label.title);
const param = `label_name[]=${labelTitle}`;
const labelIndex = filterPath.indexOf(param);
......@@ -124,9 +123,9 @@
filterPath.splice(labelIndex, 1);
}
gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
boardsStore.filter.path = filterPath.join('&');
Store.updateFiltersUrl();
boardsStore.updateFiltersUrl();
eventHub.$emit('updateTokens');
},
......
app/assets/javascripts/boards/components/modal/footer.vue
View file @ 5d0a829d
......@@ -5,6 +5,7 @@ import ListsDropdown from './lists_dropdown.vue';
import { pluralize } from '../../../lib/utils/text_utility';
import ModalStore from '../../stores/modal_store';
import modalMixin from '../../mixins/modal_mixins';
import boardsStore from '../../stores/boards_store';
export default {
components: {
......@@ -14,7 +15,7 @@ export default {
data() {
return {
modal: ModalStore.store,
state: gl.issueBoards.BoardsStore.state,
state: boardsStore.state,
};
},
computed: {
......
app/assets/javascripts/boards/components/modal/lists_dropdown.vue
View file @ 5d0a829d
<script>
import { Link } from '@gitlab-org/gitlab-ui';
import ModalStore from '../../stores/modal_store';
import boardsStore from '../../stores/boards_store';
export default {
components: {
......@@ -9,7 +10,7 @@ export default {
data() {
return {
modal: ModalStore.store,
state: gl.issueBoards.BoardsStore.state,
state: boardsStore.state,
};
},
computed: {
......
app/assets/javascripts/boards/components/new_list_dropdown.js
View file @ 5d0a829d
......@@ -4,16 +4,12 @@ import $ from 'jquery';
import axios from '~/lib/utils/axios_utils';
import _ from 'underscore';
import CreateLabelDropdown from '../../create_label';
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '../stores/boards_store';
$(document).off('created.label').on('created.label', (e, label) => {
Store.new({
boardsStore.new({
title: label.title,
position: Store.state.lists.length - 2,
position: boardsStore.state.lists.length - 2,
list_type: 'label',
label: {
id: label.id,
......@@ -23,7 +19,7 @@ $(document).off('created.label').on('created.label', (e, label) => {
});
});
gl.issueBoards.newListDropdownInit = () => {
export default function initNewListDropdown() {
$('.js-new-board-list').each(function () {
const $this = $(this);
new CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespacePath'), $this.data('projectPath'));
......@@ -36,7 +32,7 @@ gl.issueBoards.newListDropdownInit = () => {
});
},
renderRow (label) {
const active = Store.findList('title', label.title);
const active = boardsStore.findList('title', label.title);
const $li = $('<li />');
const $a = $('<a />', {
class: (active ? `is-active js-board-list-${active.id}` : ''),
......@@ -62,10 +58,10 @@ gl.issueBoards.newListDropdownInit = () => {
const label = options.selectedObj;
e.preventDefault();
if (!Store.findList('title', label.title)) {
Store.new({
if (!boardsStore.findList('title', label.title)) {
boardsStore.new({
title: label.title,
position: Store.state.lists.length - 2,
position: boardsStore.state.lists.length - 2,
list_type: 'label',
label: {
id: label.id,
......@@ -74,9 +70,9 @@ gl.issueBoards.newListDropdownInit = () => {
},
});
Store.state.lists = _.sortBy(Store.state.lists, 'position');
boardsStore.state.lists = _.sortBy(boardsStore.state.lists, 'position');
}
},
});
});
};
}
app/assets/javascripts/boards/components/sidebar/remove_issue.vue
View file @ 5d0a829d
......@@ -2,8 +2,7 @@
import Vue from 'vue';
import Flash from '../../../flash';
import { __ } from '../../../locale';
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '../../stores/boards_store';
export default Vue.extend({
props: {
......@@ -49,7 +48,7 @@
list.removeIssue(issue);
});
Store.detail.issue = {};
boardsStore.detail.issue = {};
},
/**
* Build the default patch request.
......
app/assets/javascripts/boards/filtered_search_boards.js
View file @ 5d0a829d
import IssuesFilteredSearchTokenKeysEE from 'ee/filtered_search/issues_filtered_search_token_keys';
import FilteredSearchContainer from '../filtered_search/container';
import FilteredSearchManager from '../filtered_search/filtered_search_manager';
import boardsStore from './stores/boards_store';
export default class FilteredSearchBoards extends FilteredSearchManager {
constructor(store, updateUrl = false, cantEdit = []) {
......@@ -26,7 +27,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
this.store.path = path.substr(1);
if (this.updateUrl) {
gl.issueBoards.BoardsStore.updateFiltersUrl();
boardsStore.updateFiltersUrl();
}
}
......
app/assets/javascripts/boards/index.js
View file @ 5d0a829d
......@@ -12,15 +12,14 @@ import eventHub from './eventhub';
import sidebarEventHub from '~/sidebar/event_hub';
import './models/milestone';
import './models/project';
import './stores/boards_store';
import boardsStore from './stores/boards_store';
import ModalStore from './stores/modal_store';
import modalMixin from './mixins/modal_mixins';
import './mixins/sortable_default_options';
import './filters/due_date_filters';
import './components/board';
import './components/board_sidebar';
import './components/new_list_dropdown';
import BoardAddIssuesModal from './components/modal/index.vue';
import Board from 'ee/boards/components/board';
import BoardSidebar from 'ee/boards/components/board_sidebar';
import initNewListDropdown from './components/new_list_dropdown';
import BoardAddIssuesModal from 'ee/boards/components/modal/index';
import '~/vue_shared/vue_resource_interceptor';
import { NavigationType } from '~/lib/utils/common_utils';
......@@ -28,21 +27,17 @@ import 'ee/boards/models/list';
import 'ee/boards/models/issue';
import 'ee/boards/models/project';
import BoardService from 'ee/boards/services/board_service';
import 'ee/boards/components/board_sidebar';
import 'ee/boards/components/board';
import 'ee/boards/components/modal/index';
import 'ee/boards/components/boards_selector';
import BoardsSelector from 'ee/boards/components/boards_selector';
import collapseIcon from 'ee/boards/icons/fullscreen_collapse.svg';
import expandIcon from 'ee/boards/icons/fullscreen_expand.svg';
import tooltip from '~/vue_shared/directives/tooltip';
let issueBoardsApp;
export default () => {
const $boardApp = document.getElementById('board-app');
const Store = gl.issueBoards.BoardsStore;
const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
window.gl = window.gl || {};
// check for browser back and trigger a hard reload to circumvent browser caching.
window.addEventListener('pageshow', (event) => {
const isNavTypeBackForward = window.performance &&
......@@ -53,25 +48,21 @@ export default () => {
}
});
if (gl.IssueBoardsApp) {
gl.IssueBoardsApp.$destroy(true);
if (issueBoardsApp) {
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);
boardsStore.create();
gl.IssueBoardsApp = new Vue({
issueBoardsApp = new Vue({
el: $boardApp,
components: {
board: gl.issueBoards.Board,
'board-sidebar': gl.issueBoards.BoardSidebar,
Board,
BoardSidebar,
BoardAddIssuesModal,
},
data: {
state: Store.state,
state: boardsStore.state,
loading: true,
boardsEndpoint: $boardApp.dataset.boardsEndpoint,
listsEndpoint: $boardApp.dataset.listsEndpoint,
......@@ -80,7 +71,7 @@ export default () => {
issueLinkBase: $boardApp.dataset.issueLinkBase,
rootPath: $boardApp.dataset.rootPath,
bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
detailIssue: Store.detail,
detailIssue: boardsStore.detail,
defaultAvatar: $boardApp.dataset.defaultAvatar,
},
computed: {
......@@ -95,7 +86,7 @@ export default () => {
bulkUpdatePath: this.bulkUpdatePath,
boardId: this.boardId,
});
Store.rootPath = this.boardsEndpoint;
boardsStore.rootPath = this.boardsEndpoint;
eventHub.$on('updateTokens', this.updateTokens);
eventHub.$on('newDetailIssue', this.updateDetailIssue);
......@@ -109,16 +100,16 @@ export default () => {
sidebarEventHub.$off('toggleSubscription', this.toggleSubscription);
},
mounted() {
this.filterManager = new FilteredSearchBoards(Store.filter, true, Store.cantEdit);
this.filterManager = new FilteredSearchBoards(boardsStore.filter, true, boardsStore.cantEdit);
this.filterManager.setup();
Store.disabled = this.disabled;
boardsStore.disabled = this.disabled;
gl.boardService
.all()
.then(res => res.data)
.then(data => {
data.forEach(board => {
const list = Store.addList(board, this.defaultAvatar);
const list = boardsStore.addList(board, this.defaultAvatar);
if (list.type === 'closed') {
list.position = Infinity;
......@@ -129,8 +120,8 @@ export default () => {
this.state.lists = _.sortBy(this.state.lists, 'position');
Store.addBlankState();
Store.addPromotionState();
boardsStore.addBlankState();
boardsStore.addPromotionState();
this.loading = false;
})
.catch(() => {
......@@ -166,13 +157,13 @@ export default () => {
});
}
Store.detail.issue = newIssue;
boardsStore.detail.issue = newIssue;
},
clearDetailIssue() {
Store.detail.issue = {};
boardsStore.detail.issue = {};
},
toggleSubscription(id) {
const { issue } = Store.detail;
const { issue } = boardsStore.detail;
if (issue.id === id && issue.toggleSubscriptionEndpoint) {
issue.setFetchingState('subscriptions', true);
BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
......@@ -191,14 +182,15 @@ export default () => {
},
});
gl.IssueBoardsSearch = new Vue({
// eslint-disable-next-line no-new
new Vue({
el: document.getElementById('js-add-list'),
data: {
filters: Store.state.filters,
filters: boardsStore.state.filters,
milestoneTitle: $boardApp.dataset.boardMilestoneTitle,
},
mounted() {
gl.issueBoards.newListDropdownInit();
initNewListDropdown();
},
});
......@@ -214,7 +206,7 @@ export default () => {
return {
canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
hasScope: this.$options.el.hasAttribute('data-has-scope'),
state: Store.state,
state: boardsStore.state,
};
},
computed: {
......@@ -226,7 +218,7 @@ export default () => {
},
},
methods: {
showPage: page => gl.issueBoards.BoardsStore.showPage(page),
showPage: page => boardsStore.showPage(page),
},
template: `
<div class="prepend-left-10">
......@@ -248,13 +240,14 @@ export default () => {
const issueBoardsModal = document.getElementById('js-add-issues-btn');
if (issueBoardsModal) {
gl.IssueBoardsModalAddBtn = new Vue({
// eslint-disable-next-line no-new
new Vue({
el: issueBoardsModal,
mixins: [modalMixin],
data() {
return {
modal: ModalStore.store,
store: Store.state,
store: boardsStore.state,
isFullscreen: false,
focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
......@@ -320,11 +313,12 @@ export default () => {
});
}
gl.IssueBoardsToggleFocusBtn = new Vue({
// eslint-disable-next-line no-new
new Vue({
el: document.getElementById('js-toggle-focus-btn'),
data: {
modal: ModalStore.store,
store: Store.state,
store: boardsStore.state,
isFullscreen: false,
focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
},
......@@ -362,10 +356,11 @@ export default () => {
`,
});
gl.IssueboardsSwitcher = new Vue({
// eslint-disable-next-line no-new
new Vue({
el: '#js-multiple-boards-switcher',
components: {
'boards-selector': gl.issueBoards.BoardsSelector,
BoardsSelector,
},
});
};
app/assets/javascripts/boards/mixins/sortable_default_options.js
View file @ 5d0a829d
......@@ -3,32 +3,29 @@
import $ from 'jquery';
import sortableConfig from 'ee/sortable/sortable_config';
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.onStart = () => {
export function sortableStart() {
$('.has-tooltip').tooltip('hide')
.tooltip('disable');
document.body.classList.add('is-dragging');
};
}
gl.issueBoards.onEnd = () => {
export function sortableEnd() {
$('.has-tooltip').tooltip('enable');
document.body.classList.remove('is-dragging');
};
}
gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
export function getBoardSortableDefaultOptions(obj) {
const touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
const defaultSortOptions = Object.assign({}, sortableConfig, {
filter: '.board-delete, .btn',
delay: gl.issueBoards.touchEnabled ? 100 : 0,
scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
delay: touchEnabled ? 100 : 0,
scrollSensitivity: touchEnabled ? 60 : 100,
scrollSpeed: 20,
onStart: gl.issueBoards.onStart,
onEnd: gl.issueBoards.onEnd,
onStart: sortableStart,
onEnd: sortableEnd,
});
Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
return defaultSortOptions;
};
}
app/assets/javascripts/boards/models/issue.js
View file @ 5d0a829d
......@@ -6,6 +6,7 @@
import Vue from 'vue';
import '~/vue_shared/models/label';
import IssueProject from './project';
import boardsStore from '../stores/boards_store';
class ListIssue {
constructor (obj, defaultAvatar) {
......@@ -99,7 +100,7 @@ class ListIssue {
}
getLists () {
return gl.issueBoards.BoardsStore.state.lists.filter(list => list.findIssue(this.id));
return boardsStore.state.lists.filter(list => list.findIssue(this.id));
}
updateData(newData) {
......
app/assets/javascripts/boards/models/list.js
View file @ 5d0a829d
......@@ -5,6 +5,7 @@ import { __ } from '~/locale';
import ListLabel from '~/vue_shared/models/label';
import ListAssignee from '~/vue_shared/models/assignee';
import { urlParamsToObject } from '~/lib/utils/common_utils';
import boardsStore from '../stores/boards_store';
import ListMilestone from './milestone';
const PER_PAGE = 20;
......@@ -95,9 +96,9 @@ class List {
}
destroy() {
const index = gl.issueBoards.BoardsStore.state.lists.indexOf(this);
gl.issueBoards.BoardsStore.state.lists.splice(index, 1);
gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
const index = boardsStore.state.lists.indexOf(this);
boardsStore.state.lists.splice(index, 1);
boardsStore.updateNewListDropdown(this.id);
gl.boardService.destroyList(this.id).catch(() => {
// TODO: handle request error
......@@ -122,7 +123,7 @@ class List {
getIssues(emptyIssues = true) {
const data = {
...urlParamsToObject(gl.issueBoards.BoardsStore.filter.path),
...urlParamsToObject(boardsStore.filter.path),
page: this.page,
};
......
app/assets/javascripts/boards/stores/boards_store.js
View file @ 5d0a829d
......@@ -3,14 +3,12 @@
import $ from 'jquery';
import _ from 'underscore';
import Vue from 'vue';
import Cookies from 'js-cookie';
import boardsStoreEE from 'ee/boards/stores/boards_store_ee';
import BoardsStoreEE from 'ee/boards/stores/boards_store_ee';
import { getUrlParamsArray } from '~/lib/utils/common_utils';
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardsStore = {
const boardsStore = {
disabled: false,
filter: {
path: '',
......@@ -186,4 +184,17 @@ gl.issueBoards.BoardsStore = {
}
};
boardsStoreEE.initEESpecific(gl.issueBoards.BoardsStore);
BoardsStoreEE.initEESpecific(boardsStore);
// hacks added in order to allow milestone_select to function properly
// TODO: remove these
export function boardStoreIssueSet(...args) {
Vue.set(boardsStore.detail.issue, ...args);
}
export function boardStoreIssueDelete(...args) {
Vue.delete(boardsStore.detail.issue, ...args);
}
export default boardsStore;
app/assets/javascripts/due_date_select.js
View file @ 5d0a829d
......@@ -5,6 +5,7 @@ import { __ } from '~/locale';
import axios from './lib/utils/axios_utils';
import { timeFor } from './lib/utils/datetime_utility';
import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
import boardsStore from './boards/stores/boards_store';
class DueDateSelect {
constructor({ $dropdown, $loading } = {}) {
......@@ -58,7 +59,7 @@ class DueDateSelect {
$dueDateInput.val(calendar.toString(dateText));
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
boardsStore.detail.issue.dueDate = $dueDateInput.val();
this.updateIssueBoardIssue();
} else {
this.saveDueDate(true);
......@@ -79,7 +80,7 @@ class DueDateSelect {
calendar.setDate(null);
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
boardsStore.detail.issue.dueDate = '';
this.updateIssueBoardIssue();
} else {
$(`input[name='${this.fieldName}']`).val('');
......@@ -123,7 +124,7 @@ class DueDateSelect {
this.$loading.fadeOut();
};
gl.issueBoards.BoardsStore.detail.issue
boardsStore.detail.issue
.update(this.$dropdown.attr('data-issue-update'))
.then(fadeOutLoader)
.catch(fadeOutLoader);
......
app/assets/javascripts/labels_select.js
View file @ 5d0a829d
......@@ -11,6 +11,7 @@ import DropdownUtils from './filtered_search/dropdown_utils';
import CreateLabelDropdown from './create_label';
import flash from './flash';
import ModalStore from './boards/stores/modal_store';
import boardsStore from './boards/stores/boards_store';
export default class LabelsSelect {
constructor(els, options = {}) {
......@@ -378,7 +379,7 @@ export default class LabelsSelect {
}
else if ($dropdown.hasClass('js-issue-board-sidebar')) {
if ($el.hasClass('is-active')) {
gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
boardsStore.detail.issue.labels.push(new ListLabel({
id: label.id,
title: label.title,
color: label.color[0],
......@@ -386,16 +387,16 @@ export default class LabelsSelect {
}));
}
else {
var { labels } = gl.issueBoards.BoardsStore.detail.issue;
var { labels } = boardsStore.detail.issue;
labels = labels.filter(function (selectedLabel) {
return selectedLabel.id !== label.id;
});
gl.issueBoards.BoardsStore.detail.issue.labels = labels;
boardsStore.detail.issue.labels = labels;
}
$loading.fadeIn();
gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
boardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
.then(fadeOutLoader)
.catch(fadeOutLoader);
}
......
app/assets/javascripts/milestone_select.js
View file @ 5d0a829d
......@@ -9,6 +9,7 @@ import '~/gl_dropdown';
import axios from './lib/utils/axios_utils';
import { timeFor } from './lib/utils/datetime_utility';
import ModalStore from './boards/stores/modal_store';
import boardsStore, { boardStoreIssueSet, boardStoreIssueDelete } from './boards/stores/boards_store';
export default class MilestoneSelect {
constructor(currentProject, els, options = {}) {
......@@ -187,7 +188,7 @@ export default class MilestoneSelect {
return $dropdown.closest('form').submit();
} else if ($dropdown.hasClass('js-issue-board-sidebar')) {
if (selected.id !== -1 && isSelecting) {
gl.issueBoards.boardStoreIssueSet(
boardStoreIssueSet(
'milestone',
new ListMilestone({
id: selected.id,
......@@ -195,13 +196,13 @@ export default class MilestoneSelect {
}),
);
} else {
gl.issueBoards.boardStoreIssueDelete('milestone');
boardStoreIssueDelete('milestone');
}
$dropdown.trigger('loading.gl.dropdown');
$loading.removeClass('hidden').fadeIn();
gl.issueBoards.BoardsStore.detail.issue
boardsStore.detail.issue
.update($dropdown.attr('data-issue-update'))
.then(() => {
$dropdown.trigger('loaded.gl.dropdown');
......
ee/app/assets/javascripts/boards/components/board.js
View file @ 5d0a829d
import '~/boards/components/board';
import Board from '~/boards/components/board';
import { __, n__, sprintf } from '~/locale';
import boardsStore from '~/boards/stores/boards_store';
import boardPromotionState from 'ee/boards/components/board_promotion_state';
const Store = gl.issueBoards.BoardsStore;
const base = gl.issueBoards.Board;
gl.issueBoards.Board = base.extend({
export default Board.extend({
data() {
return {
weightFeatureAvailable: Store.weightFeatureAvailable,
weightFeatureAvailable: boardsStore.weightFeatureAvailable,
};
},
components: {
......@@ -18,7 +16,7 @@ gl.issueBoards.Board = base.extend({
counterTooltip() {
if (!this.weightFeatureAvailable) {
// call computed property from base component (CE board.js)
return base.options.computed.counterTooltip.call(this);
return Board.options.computed.counterTooltip.call(this);
}
const { issuesSize, totalWeight } = this.list;
......
ee/app/assets/javascripts/boards/components/board_form.vue
View file @ 5d0a829d
......@@ -8,11 +8,8 @@ import { visitUrl } from '~/lib/utils/url_utility';
import BoardMilestoneSelect from './milestone_select.vue';
import BoardWeightSelect from './weight_select.vue';
import AssigneeSelect from './assignee_select.vue';
import boardsStore from '~/boards/stores/boards_store';
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
const Store = gl.issueBoards.BoardsStore;
const boardDefaults = {
id: false,
name: '',
......@@ -70,8 +67,8 @@ export default {
board: { ...boardDefaults, ...this.currentBoard },
expanded: false,
issue: {},
currentBoard: Store.state.currentBoard,
currentPage: Store.state.currentPage,
currentBoard: boardsStore.state.currentBoard,
currentPage: boardsStore.state.currentPage,
milestones: [],
milestoneDropdownOpen: false,
isLoading: false,
......@@ -168,7 +165,7 @@ export default {
gl.boardService
.deleteBoard(this.currentBoard)
.then(() => {
visitUrl(Store.rootPath);
visitUrl(boardsStore.rootPath);
})
.catch(() => {
Flash('Failed to delete board. Please try again.');
......@@ -188,7 +185,7 @@ export default {
}
},
cancel() {
Store.state.currentPage = '';
boardsStore.state.currentPage = '';
},
resetFormState() {
if (this.isNewForm) {
......
ee/app/assets/javascripts/boards/components/board_promotion_state.js
View file @ 5d0a829d
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '~/boards/stores/boards_store';
export default {
template: '#js-board-promotion',
methods: {
clearPromotionState: Store.removePromotionState.bind(Store),
clearPromotionState: boardsStore.removePromotionState.bind(boardsStore),
},
};
ee/app/assets/javascripts/boards/components/board_sidebar.js
View file @ 5d0a829d
import '~/boards/components/board_sidebar';
import BoardSidebar from '~/boards/components/board_sidebar';
import RemoveBtn from './sidebar/remove_issue';
const base = gl.issueBoards.BoardSidebar;
gl.issueBoards.BoardSidebar = base.extend({
export default BoardSidebar.extend({
components: {
RemoveBtn,
},
......
ee/app/assets/javascripts/boards/components/boards_list_selector/index.js
View file @ 5d0a829d
......@@ -3,7 +3,7 @@ import _ from 'underscore';
import { __, sprintf } from '~/locale';
import Flash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import boardsStore from '~/boards/stores/boards_store';
import ListContainer from './list_container.vue';
export default Vue.extend({
......@@ -23,7 +23,7 @@ export default Vue.extend({
data() {
return {
loading: true,
store: gl.issueBoards.BoardsStore,
store: boardsStore,
};
},
mounted() {
......
ee/app/assets/javascripts/boards/components/boards_selector.js
View file @ 5d0a829d
import Vue from 'vue';
import $ from 'jquery';
import { throttle } from 'underscore';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import BoardForm from './board_form.vue';
import AssigneeList from './assignees_list_slector';
import MilestoneList from './milestone_list_selector';
(() => {
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
const Store = gl.issueBoards.BoardsStore;
Store.createNewListDropdownData();
gl.issueBoards.BoardsSelector = Vue.extend({
name: 'BoardsSelector',
components: {
BoardForm,
},
props: {
currentBoard: {
type: Object,
required: true,
},
milestonePath: {
type: String,
required: true,
export default Vue.extend({
name: 'BoardsSelector',
components: {
BoardForm,
},
props: {
currentBoard: {
type: Object,
required: true,
},
milestonePath: {
type: String,
required: true,
},
throttleDuration: {
type: Number,
default: 200,
},
},
data() {
return {
open: false,
loading: true,
hasScrollFade: false,
hasAssigneesListMounted: false,
hasMilestoneListMounted: false,
scrollFadeInitialized: false,
boards: [],
state: boardsStore.state,
throttledSetScrollFade: throttle(this.setScrollFade, this.throttleDuration),
contentClientHeight: 0,
maxPosition: 0,
store: boardsStore,
};
},
computed: {
currentPage() {
return this.state.currentPage;
},
reload: {
get() {
return this.state.reload;
},
throttleDuration: {
type: Number,
default: 200,
set(newValue) {
this.state.reload = newValue;
},
},
data() {
board() {
return this.state.currentBoard;
},
showDelete() {
return this.boards.length > 1;
},
scrollFadeClass() {
return {
open: false,
loading: true,
hasScrollFade: false,
hasAssigneesListMounted: false,
hasMilestoneListMounted: false,
scrollFadeInitialized: false,
boards: [],
state: Store.state,
throttledSetScrollFade: throttle(this.setScrollFade, this.throttleDuration),
contentClientHeight: 0,
maxPosition: 0,
store: gl.issueBoards.BoardsStore,
'fade-out': !this.hasScrollFade,
};
},
computed: {
currentPage() {
return this.state.currentPage;
},
reload: {
get() {
return this.state.reload;
},
set(newValue) {
this.state.reload = newValue;
},
},
board() {
return this.state.currentBoard;
},
showDelete() {
return this.boards.length > 1;
},
scrollFadeClass() {
return {
'fade-out': !this.hasScrollFade,
};
},
},
watch: {
reload() {
if (this.reload) {
this.boards = [];
this.loading = true;
this.reload = false;
},
watch: {
reload() {
if (this.reload) {
this.boards = [];
this.loading = true;
this.reload = false;
this.loadBoards(false);
}
},
this.loadBoards(false);
}
},
created() {
this.state.currentBoard = this.currentBoard;
Store.state.assignees = [];
Store.state.milestones = [];
$('#js-add-list').on('hide.bs.dropdown', this.handleDropdownHide);
$('.js-new-board-list-tabs').on('click', this.handleDropdownTabClick);
},
methods: {
showPage(page) {
this.state.reload = false;
this.state.currentPage = page;
},
toggleDropdown() {
this.open = !this.open;
},
loadBoards(toggleDropdown = true) {
if (toggleDropdown) {
this.toggleDropdown();
}
},
created() {
this.state.currentBoard = this.currentBoard;
boardsStore.state.assignees = [];
boardsStore.state.milestones = [];
$('#js-add-list').on('hide.bs.dropdown', this.handleDropdownHide);
$('.js-new-board-list-tabs').on('click', this.handleDropdownTabClick);
},
methods: {
showPage(page) {
this.state.reload = false;
this.state.currentPage = page;
},
toggleDropdown() {
this.open = !this.open;
},
loadBoards(toggleDropdown = true) {
if (toggleDropdown) {
this.toggleDropdown();
}
if (this.open && !this.boards.length) {
gl.boardService
.allBoards()
.then(res => res.data)
.then(json => {
this.loading = false;
this.boards = json;
})
.then(() => this.$nextTick()) // Wait for boards list in DOM
.then(this.setScrollFade)
.catch(() => {
this.loading = false;
});
}
},
isScrolledUp() {
const { content } = this.$refs;
const currentPosition = this.contentClientHeight + content.scrollTop;
if (this.open && !this.boards.length) {
gl.boardService
.allBoards()
.then(res => res.data)
.then(json => {
this.loading = false;
this.boards = json;
})
.then(() => this.$nextTick()) // Wait for boards list in DOM
.then(this.setScrollFade)
.catch(() => {
this.loading = false;
});
}
},
isScrolledUp() {
const { content } = this.$refs;
const currentPosition = this.contentClientHeight + content.scrollTop;
return content && currentPosition < this.maxPosition;
},
initScrollFade() {
this.scrollFadeInitialized = true;
return content && currentPosition < this.maxPosition;
},
initScrollFade() {
this.scrollFadeInitialized = true;
const { content } = this.$refs;
const { content } = this.$refs;
this.contentClientHeight = content.clientHeight;
this.maxPosition = content.scrollHeight;
},
setScrollFade() {
if (!this.scrollFadeInitialized) this.initScrollFade();
this.contentClientHeight = content.clientHeight;
this.maxPosition = content.scrollHeight;
},
setScrollFade() {
if (!this.scrollFadeInitialized) this.initScrollFade();
this.hasScrollFade = this.isScrolledUp();
},
handleDropdownHide(e) {
const $currTarget = $(e.currentTarget);
if ($currTarget.data('preventClose')) {
e.preventDefault();
}
$currTarget.removeData('preventClose');
},
handleDropdownTabClick(e) {
const $addListEl = $('#js-add-list');
$addListEl.data('preventClose', true);
if (e.target.dataset.action === 'tab-assignees' &&
!this.hasAssigneesListMounted) {
this.assigneeList = AssigneeList();
this.hasAssigneesListMounted = true;
}
this.hasScrollFade = this.isScrolledUp();
},
handleDropdownHide(e) {
const $currTarget = $(e.currentTarget);
if ($currTarget.data('preventClose')) {
e.preventDefault();
}
$currTarget.removeData('preventClose');
},
handleDropdownTabClick(e) {
const $addListEl = $('#js-add-list');
$addListEl.data('preventClose', true);
if (e.target.dataset.action === 'tab-assignees' &&
!this.hasAssigneesListMounted) {
this.assigneeList = AssigneeList();
this.hasAssigneesListMounted = true;
}
if (e.target.dataset.action === 'tab-milestones' && !this.hasMilestoneListMounted) {
this.milstoneList = MilestoneList();
this.hasMilestoneListMounted = true;
}
},
if (e.target.dataset.action === 'tab-milestones' && !this.hasMilestoneListMounted) {
this.milstoneList = MilestoneList();
this.hasMilestoneListMounted = true;
}
},
});
})();
},
});
ee/app/assets/javascripts/boards/components/modal/index.js
View file @ 5d0a829d
import Vue from 'vue';
import base from '~/boards/components/modal/index.vue';
import BoardAddIssuesModal from '~/boards/components/modal/index.vue';
import ModalFooter from './footer';
gl.issueBoards.IssuesModal = Vue.extend(base, {
export default Vue.extend(BoardAddIssuesModal, {
components: {
ModalFooter,
},
......
ee/app/assets/javascripts/boards/components/sidebar/remove_issue.js
View file @ 5d0a829d
import base from '~/boards/components/sidebar/remove_issue.vue';
const Store = gl.issueBoards.BoardsStore;
import boardsStore from '~/boards/stores/boards_store';
export default base.extend({
methods: {
seedPatchRequest(issue, req) {
/* eslint-disable no-param-reassign */
const board = Store.state.currentBoard;
const board = boardsStore.state.currentBoard;
const boardLabelIds = board.labels.map(label => label.id);
req.label_ids = req.label_ids.filter(id => !boardLabelIds.includes(id));
......
ee/spec/javascripts/boards/components/assignee_select_spec.js
View file @ 5d0a829d
......@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
import axios from '~/lib/utils/axios_utils';
import '~/boards/services/board_service';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import IssuableContext from '~/issuable_context';
import AssigneeSelect from 'ee/boards/components/assignee_select.vue';
import { boardObj, mockBoardService } from 'spec/boards/mock_data';
......@@ -33,7 +33,7 @@ describe('Assignee select component', () => {
beforeEach((done) => {
setFixtures('<div class="test-container"></div>');
gl.boardService = mockBoardService();
gl.issueBoards.BoardsStore.create();
boardsStore.create();
// eslint-disable-next-line no-new
new IssuableContext();
......
ee/spec/javascripts/boards/components/board_form_spec.js
View file @ 5d0a829d
import $ from 'jquery';
import Vue from 'vue';
import boardsStore from '~/boards/stores/boards_store';
import boardForm from 'ee/boards/components/board_form.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('board_form.vue', () => {
......@@ -15,7 +14,7 @@ describe('board_form.vue', () => {
beforeEach(() => {
spyOn($, 'ajax');
gl.issueBoards.BoardsStore.state.currentPage = 'edit';
boardsStore.state.currentPage = 'edit';
const Component = Vue.extend(boardForm);
vm = mountComponent(Component, props);
});
......@@ -62,7 +61,7 @@ describe('board_form.vue', () => {
Vue.nextTick()
.then(() => {
expect(gl.issueBoards.BoardsStore.state.currentPage).toBe('');
expect(boardsStore.state.currentPage).toBe('');
})
.then(done)
.catch(done.fail);
......
ee/spec/javascripts/boards/components/board_list_selector/board_list_selector_spec.js
View file @ 5d0a829d
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
......@@ -21,8 +21,8 @@ describe('BoardListSelectorComponent', () => {
let vm;
let mock;
gl.issueBoards.BoardsStore.create();
gl.issueBoards.BoardsStore.state.assignees = [];
boardsStore.create();
boardsStore.state.assignees = [];
beforeEach(() => {
mock = new MockAdapter(axios);
......@@ -39,7 +39,7 @@ describe('BoardListSelectorComponent', () => {
describe('data', () => {
it('returns default data props', () => {
expect(vm.loading).toBe(true);
expect(vm.store).toBe(gl.issueBoards.BoardsStore);
expect(vm.store).toBe(boardsStore);
});
});
......@@ -47,7 +47,7 @@ describe('BoardListSelectorComponent', () => {
describe('loadList', () => {
it('calls axios.get and sets response to store.state.assignees', done => {
mock.onGet(dummyEndpoint).reply(200, mockAssigneesList);
gl.issueBoards.BoardsStore.state.assignees = [];
boardsStore.state.assignees = [];
vm
.loadList()
......@@ -61,7 +61,7 @@ describe('BoardListSelectorComponent', () => {
it('does not call axios.get when store.state.assignees is not empty', done => {
spyOn(axios, 'get');
gl.issueBoards.BoardsStore.state.assignees = mockAssigneesList;
boardsStore.state.assignees = mockAssigneesList;
vm
.loadList()
......@@ -74,7 +74,7 @@ describe('BoardListSelectorComponent', () => {
it('calls axios.get and shows Flash error when request fails', done => {
mock.onGet(dummyEndpoint).replyOnce(500, {});
gl.issueBoards.BoardsStore.state.assignees = [];
boardsStore.state.assignees = [];
vm
.loadList()
......
ee/spec/javascripts/boards/components/boards_selector_spec.js
View file @ 5d0a829d
import Vue from 'vue';
import BoardService from 'ee/boards/services/board_service';
import 'ee/boards/components/boards_selector';
import BoardsSelector from 'ee/boards/components/boards_selector';
import setTimeoutPromiseHelper from 'spec/helpers/set_timeout_promise_helper';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
......@@ -45,7 +45,7 @@ describe('BoardsSelector', () => {
spyOn(BoardService.prototype, 'allBoards').and.returnValue(boardServiceResponse);
vm = mountComponent(gl.issueBoards.BoardsSelector, {
vm = mountComponent(BoardsSelector, {
throttleDuration,
currentBoard: {},
milestonePath: '',
......
spec/javascripts/boards/board_blank_state_spec.js
View file @ 5d0a829d
import Vue from 'vue';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import BoardBlankState from '~/boards/components/board_blank_state.vue';
import { mockBoardService } from './mock_data';
......@@ -10,7 +10,7 @@ describe('Boards blank state', () => {
beforeEach((done) => {
const Comp = Vue.extend(BoardBlankState);
gl.issueBoards.BoardsStore.create();
boardsStore.create();
gl.boardService = mockBoardService();
spyOn(gl.boardService, 'generateDefaultLists').and.callFake(() => new Promise((resolve, reject) => {
......@@ -57,7 +57,7 @@ describe('Boards blank state', () => {
vm.$el.querySelector('.btn-default').click();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.welcomeIsHidden()).toBeTruthy();
expect(boardsStore.welcomeIsHidden()).toBeTruthy();
done();
});
......@@ -67,9 +67,9 @@ describe('Boards blank state', () => {
vm.$el.querySelector('.btn-success').click();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
expect(gl.issueBoards.BoardsStore.state.lists[0].title).toEqual('To Do');
expect(gl.issueBoards.BoardsStore.state.lists[1].title).toEqual('Doing');
expect(boardsStore.state.lists.length).toBe(2);
expect(boardsStore.state.lists[0].title).toEqual('To Do');
expect(boardsStore.state.lists[1].title).toEqual('Doing');
done();
});
......@@ -81,8 +81,8 @@ describe('Boards blank state', () => {
vm.$el.querySelector('.btn-success').click();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.welcomeIsHidden()).toBeFalsy();
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
expect(boardsStore.welcomeIsHidden()).toBeFalsy();
expect(boardsStore.state.lists.length).toBe(1);
done();
});
......
spec/javascripts/boards/board_card_spec.js
View file @ 5d0a829d
......@@ -10,7 +10,7 @@ import eventHub from '~/boards/eventhub';
import '~/vue_shared/models/label';
import '~/vue_shared/models/assignee';
import '~/boards/models/list';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import boardCard from '~/boards/components/board_card.vue';
import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
......@@ -23,8 +23,8 @@ describe('Board card', () => {
mock.onAny().reply(boardsMockInterceptor);
gl.boardService = mockBoardService();
gl.issueBoards.BoardsStore.create();
gl.issueBoards.BoardsStore.detail.issue = {};
boardsStore.create();
boardsStore.detail.issue = {};
const BoardCardComp = Vue.extend(boardCard);
const list = new List(listObj);
......@@ -62,7 +62,7 @@ describe('Board card', () => {
});
it('returns true when detailIssue is equal to card issue', () => {
gl.issueBoards.BoardsStore.detail.issue = vm.issue;
boardsStore.detail.issue = vm.issue;
expect(vm.issueDetailVisible).toBe(true);
});
......@@ -119,19 +119,19 @@ describe('Board card', () => {
});
it('does not set detail issue if showDetail is false', () => {
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
expect(boardsStore.detail.issue).toEqual({});
});
it('does not set detail issue if link is clicked', () => {
triggerEvent('mouseup', vm.$el.querySelector('a'));
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
expect(boardsStore.detail.issue).toEqual({});
});
it('does not set detail issue if button is clicked', () => {
triggerEvent('mouseup', vm.$el.querySelector('button'));
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
expect(boardsStore.detail.issue).toEqual({});
});
it('does not set detail issue if img is clicked', (done) => {
......@@ -145,7 +145,7 @@ describe('Board card', () => {
Vue.nextTick(() => {
triggerEvent('mouseup', vm.$el.querySelector('img'));
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
expect(boardsStore.detail.issue).toEqual({});
done();
});
......@@ -154,7 +154,7 @@ describe('Board card', () => {
it('does not set detail issue if showDetail is false after mouseup', () => {
triggerEvent('mouseup');
expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
expect(boardsStore.detail.issue).toEqual({});
});
it('sets detail issue to card issue on mouse up', () => {
......@@ -164,7 +164,7 @@ describe('Board card', () => {
triggerEvent('mouseup');
expect(eventHub.$emit).toHaveBeenCalledWith('newDetailIssue', vm.issue);
expect(gl.issueBoards.BoardsStore.detail.list).toEqual(vm.list);
expect(boardsStore.detail.list).toEqual(vm.list);
});
it('adds active class if detail issue is set', (done) => {
......@@ -181,7 +181,7 @@ describe('Board card', () => {
it('resets detail issue to empty if already set', () => {
spyOn(eventHub, '$emit');
gl.issueBoards.BoardsStore.detail.issue = vm.issue;
boardsStore.detail.issue = vm.issue;
triggerEvent('mousedown');
triggerEvent('mouseup');
......
spec/javascripts/boards/board_list_spec.js
View file @ 5d0a829d
/* global List */
/* global ListIssue */
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import Sortable from 'sortablejs';
import BoardList from '~/boards/components/board_list.vue';
import eventHub from '~/boards/eventhub';
import '~/boards/mixins/sortable_default_options';
import '~/boards/models/issue';
import '~/boards/models/list';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
window.Sortable = Sortable;
......@@ -25,8 +25,7 @@ describe('Board list component', () => {
mock = new MockAdapter(axios);
mock.onAny().reply(boardsMockInterceptor);
gl.boardService = mockBoardService();
gl.issueBoards.BoardsStore.create();
gl.IssueBoardsApp = new Vue();
boardsStore.create();
const BoardListComp = Vue.extend(BoardList);
const list = new List(listObj);
......
spec/javascripts/boards/board_new_issue_spec.js
View file @ 5d0a829d
......@@ -4,6 +4,7 @@ import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import boardNewIssue from '~/boards/components/board_new_issue.vue';
import boardsStore from '~/boards/stores/boards_store';
import '~/boards/models/list';
import { listObj, boardsMockInterceptor, mockBoardService } from './mock_data';
......@@ -36,8 +37,7 @@ describe('Issue boards new issue form', () => {
mock.onAny().reply(boardsMockInterceptor);
gl.boardService = mockBoardService();
gl.issueBoards.BoardsStore.create();
gl.IssueBoardsApp = new Vue();
boardsStore.create();
list = new List(listObj);
......@@ -148,13 +148,13 @@ describe('Issue boards new issue form', () => {
});
it('sets detail issue after submit', (done) => {
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe(undefined);
expect(boardsStore.detail.issue.title).toBe(undefined);
vm.title = 'submit issue';
Vue.nextTick()
.then(submitIssue)
.then(() => {
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
expect(boardsStore.detail.issue.title).toBe('submit issue');
})
.then(done)
.catch(done.fail);
......@@ -166,7 +166,7 @@ describe('Issue boards new issue form', () => {
Vue.nextTick()
.then(submitIssue)
.then(() => {
expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
expect(boardsStore.detail.list.id).toBe(list.id);
})
.then(done)
.catch(done.fail);
......
spec/javascripts/boards/boards_store_spec.js
View file @ 5d0a829d
......@@ -11,7 +11,7 @@ import '~/vue_shared/models/assignee';
import '~/boards/models/issue';
import '~/boards/models/list';
import '~/boards/services/board_service';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import { listObj, listObjDuplicate, boardsMockInterceptor, mockBoardService } from './mock_data';
describe('Store', () => {
......@@ -21,7 +21,7 @@ describe('Store', () => {
mock = new MockAdapter(axios);
mock.onAny().reply(boardsMockInterceptor);
gl.boardService = mockBoardService();
gl.issueBoards.BoardsStore.create();
boardsStore.create();
spyOn(gl.boardService, 'moveIssue').and.callFake(() => new Promise((resolve) => {
resolve();
......@@ -38,35 +38,35 @@ describe('Store', () => {
});
it('starts with a blank state', () => {
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
expect(boardsStore.state.lists.length).toBe(0);
});
describe('lists', () => {
it('creates new list without persisting to DB', () => {
gl.issueBoards.BoardsStore.addList(listObj);
boardsStore.addList(listObj);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
expect(boardsStore.state.lists.length).toBe(1);
});
it('finds list by ID', () => {
gl.issueBoards.BoardsStore.addList(listObj);
const list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
boardsStore.addList(listObj);
const list = boardsStore.findList('id', listObj.id);
expect(list.id).toBe(listObj.id);
});
it('finds list by type', () => {
gl.issueBoards.BoardsStore.addList(listObj);
const list = gl.issueBoards.BoardsStore.findList('type', 'label');
boardsStore.addList(listObj);
const list = boardsStore.findList('type', 'label');
expect(list).toBeDefined();
});
it('gets issue when new list added', (done) => {
gl.issueBoards.BoardsStore.addList(listObj);
const list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
boardsStore.addList(listObj);
const list = boardsStore.findList('id', listObj.id);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
expect(boardsStore.state.lists.length).toBe(1);
setTimeout(() => {
expect(list.issues.length).toBe(1);
......@@ -76,7 +76,7 @@ describe('Store', () => {
});
it('persists new list', (done) => {
gl.issueBoards.BoardsStore.new({
boardsStore.new({
title: 'Test',
list_type: 'label',
label: {
......@@ -86,10 +86,10 @@ describe('Store', () => {
description: 'testing;'
}
});
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
expect(boardsStore.state.lists.length).toBe(1);
setTimeout(() => {
const list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
const list = boardsStore.findList('id', listObj.id);
expect(list).toBeDefined();
expect(list.id).toBe(listObj.id);
expect(list.position).toBe(0);
......@@ -98,61 +98,61 @@ describe('Store', () => {
});
it('check for blank state adding', () => {
expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
expect(boardsStore.shouldAddBlankState()).toBe(true);
});
it('check for blank state not adding', () => {
gl.issueBoards.BoardsStore.addList(listObj);
expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(false);
boardsStore.addList(listObj);
expect(boardsStore.shouldAddBlankState()).toBe(false);
});
it('check for blank state adding when closed list exist', () => {
gl.issueBoards.BoardsStore.addList({
boardsStore.addList({
list_type: 'closed'
});
expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
expect(boardsStore.shouldAddBlankState()).toBe(true);
});
it('adds the blank state', () => {
gl.issueBoards.BoardsStore.addBlankState();
boardsStore.addBlankState();
const list = gl.issueBoards.BoardsStore.findList('type', 'blank', 'blank');
const list = boardsStore.findList('type', 'blank', 'blank');
expect(list).toBeDefined();
});
it('removes list from state', () => {
gl.issueBoards.BoardsStore.addList(listObj);
boardsStore.addList(listObj);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
expect(boardsStore.state.lists.length).toBe(1);
gl.issueBoards.BoardsStore.removeList(listObj.id, 'label');
boardsStore.removeList(listObj.id, 'label');
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
expect(boardsStore.state.lists.length).toBe(0);
});
it('moves the position of lists', () => {
const listOne = gl.issueBoards.BoardsStore.addList(listObj);
const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
const listOne = boardsStore.addList(listObj);
const listTwo = boardsStore.addList(listObjDuplicate);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
expect(boardsStore.state.lists.length).toBe(2);
gl.issueBoards.BoardsStore.moveList(listOne, [listObjDuplicate.id, listObj.id]);
boardsStore.moveList(listOne, [listObjDuplicate.id, listObj.id]);
expect(listOne.position).toBe(1);
});
it('moves an issue from one list to another', (done) => {
const listOne = gl.issueBoards.BoardsStore.addList(listObj);
const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
const listOne = boardsStore.addList(listObj);
const listTwo = boardsStore.addList(listObjDuplicate);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
expect(boardsStore.state.lists.length).toBe(2);
setTimeout(() => {
expect(listOne.issues.length).toBe(1);
expect(listTwo.issues.length).toBe(1);
gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(1));
boardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(1));
expect(listOne.issues.length).toBe(0);
expect(listTwo.issues.length).toBe(1);
......@@ -162,19 +162,19 @@ describe('Store', () => {
});
it('moves an issue from backlog to a list', (done) => {
const backlog = gl.issueBoards.BoardsStore.addList({
const backlog = boardsStore.addList({
...listObj,
list_type: 'backlog',
});
const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
const listTwo = boardsStore.addList(listObjDuplicate);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
expect(boardsStore.state.lists.length).toBe(2);
setTimeout(() => {
expect(backlog.issues.length).toBe(1);
expect(listTwo.issues.length).toBe(1);
gl.issueBoards.BoardsStore.moveIssueToList(backlog, listTwo, backlog.findIssue(1));
boardsStore.moveIssueToList(backlog, listTwo, backlog.findIssue(1));
expect(backlog.issues.length).toBe(0);
expect(listTwo.issues.length).toBe(1);
......@@ -184,10 +184,10 @@ describe('Store', () => {
});
it('moves issue to top of another list', (done) => {
const listOne = gl.issueBoards.BoardsStore.addList(listObj);
const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
const listOne = boardsStore.addList(listObj);
const listTwo = boardsStore.addList(listObjDuplicate);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
expect(boardsStore.state.lists.length).toBe(2);
setTimeout(() => {
listOne.issues[0].id = 2;
......@@ -195,7 +195,7 @@ describe('Store', () => {
expect(listOne.issues.length).toBe(1);
expect(listTwo.issues.length).toBe(1);
gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 0);
boardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 0);
expect(listOne.issues.length).toBe(0);
expect(listTwo.issues.length).toBe(2);
......@@ -207,10 +207,10 @@ describe('Store', () => {
});
it('moves issue to bottom of another list', (done) => {
const listOne = gl.issueBoards.BoardsStore.addList(listObj);
const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
const listOne = boardsStore.addList(listObj);
const listTwo = boardsStore.addList(listObjDuplicate);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
expect(boardsStore.state.lists.length).toBe(2);
setTimeout(() => {
listOne.issues[0].id = 2;
......@@ -218,7 +218,7 @@ describe('Store', () => {
expect(listOne.issues.length).toBe(1);
expect(listTwo.issues.length).toBe(1);
gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 1);
boardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(2), 1);
expect(listOne.issues.length).toBe(0);
expect(listTwo.issues.length).toBe(2);
......@@ -238,14 +238,14 @@ describe('Store', () => {
labels: [],
assignees: [],
});
const list = gl.issueBoards.BoardsStore.addList(listObj);
const list = boardsStore.addList(listObj);
setTimeout(() => {
list.addIssue(issue);
expect(list.issues.length).toBe(2);
gl.issueBoards.BoardsStore.moveIssueInList(list, issue, 0, 1, [1, 2]);
boardsStore.moveIssueInList(list, issue, 0, 1, [1, 2]);
expect(list.issues[0].id).toBe(2);
expect(gl.boardService.moveIssue).toHaveBeenCalledWith(2, null, null, 1, null);
......
spec/javascripts/boards/components/board_spec.js
View file @ 5d0a829d
import Vue from 'vue';
import '~/boards/services/board_service';
import '~/boards/components/board';
import Board from '~/boards/components/board';
import '~/boards/models/list';
import { mockBoardService } from 'spec/boards/mock_data';
......@@ -21,7 +21,7 @@ describe('Board component', () => {
boardId: 1,
});
vm = new gl.issueBoards.Board({
vm = new Board({
propsData: {
boardId: '1',
disabled: false,
......
spec/javascripts/boards/issue_card_spec.js
View file @ 5d0a829d
......@@ -9,7 +9,6 @@ import '~/vue_shared/models/label';
import '~/vue_shared/models/assignee';
import '~/boards/models/issue';
import '~/boards/models/list';
import '~/boards/stores/boards_store';
import IssueCardInner from '~/boards/components/issue_card_inner.vue';
import { listObj } from './mock_data';
......
spec/javascripts/boards/issue_spec.js
View file @ 5d0a829d
......@@ -6,7 +6,7 @@ import '~/vue_shared/models/assignee';
import '~/boards/models/issue';
import '~/boards/models/list';
import '~/boards/services/board_service';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import { mockBoardService } from './mock_data';
describe('Issue model', () => {
......@@ -14,7 +14,7 @@ describe('Issue model', () => {
beforeEach(() => {
gl.boardService = mockBoardService();
gl.issueBoards.BoardsStore.create();
boardsStore.create();
issue = new ListIssue({
title: 'Testing',
......
spec/javascripts/boards/list_spec.js
View file @ 5d0a829d
......@@ -9,7 +9,7 @@ import '~/vue_shared/models/assignee';
import '~/boards/models/issue';
import '~/boards/models/list';
import '~/boards/services/board_service';
import '~/boards/stores/boards_store';
import boardsStore from '~/boards/stores/boards_store';
import { listObj, listObjDuplicate, boardsMockInterceptor, mockBoardService } from './mock_data';
describe('List model', () => {
......@@ -22,7 +22,7 @@ describe('List model', () => {
gl.boardService = mockBoardService({
bulkUpdatePath: '/test/issue-boards/board/1/lists',
});
gl.issueBoards.BoardsStore.create();
boardsStore.create();
list = new List(listObj);
});
......@@ -58,13 +58,13 @@ describe('List model', () => {
});
it('destroys the list', (done) => {
gl.issueBoards.BoardsStore.addList(listObj);
list = gl.issueBoards.BoardsStore.findList('id', listObj.id);
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
boardsStore.addList(listObj);
list = boardsStore.findList('id', listObj.id);
expect(boardsStore.state.lists.length).toBe(1);
list.destroy();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
expect(boardsStore.state.lists.length).toBe(0);
done();
}, 0);
});
......
spec/javascripts/boards/mock_data.js
View file @ 5d0a829d
/* global BoardService */
import BoardService from '~/boards/services/board_service';
export const boardObj = {
id: 1,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7