summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
authorMike Greiling <mike@pixelcog.com>2018-10-10 17:08:43 +0000
committerFatih Acet <acetfatih@gmail.com>2018-10-10 17:08:43 +0000
commita01897446075beac31719ff44a9d742d81ce785d (patch)
treef6d7ac285f95c938283ce4d11097e31c98be30e7 /app/assets
parent62bd3045a3c0c3ad979f795ca891a7a641d4e478 (diff)
downloadgitlab-ce-a01897446075beac31719ff44a9d742d81ce785d.tar.gz
Convert remaining issue board components into ES module syntax
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/boards/components/board.js29
-rw-r--r--app/assets/javascripts/boards/components/board_blank_state.vue15
-rw-r--r--app/assets/javascripts/boards/components/board_card.vue9
-rw-r--r--app/assets/javascripts/boards/components/board_delete.js14
-rw-r--r--app/assets/javascripts/boards/components/board_list.vue67
-rw-r--r--app/assets/javascripts/boards/components/board_new_issue.vue7
-rw-r--r--app/assets/javascripts/boards/components/board_sidebar.js18
-rw-r--r--app/assets/javascripts/boards/components/issue_card_inner.vue9
-rw-r--r--app/assets/javascripts/boards/components/modal/footer.vue3
-rw-r--r--app/assets/javascripts/boards/components/modal/lists_dropdown.vue3
-rw-r--r--app/assets/javascripts/boards/components/new_list_dropdown.js24
-rw-r--r--app/assets/javascripts/boards/components/sidebar/remove_issue.vue5
-rw-r--r--app/assets/javascripts/boards/filtered_search_boards.js3
-rw-r--r--app/assets/javascripts/boards/index.js62
-rw-r--r--app/assets/javascripts/boards/mixins/sortable_default_options.js25
-rw-r--r--app/assets/javascripts/boards/models/issue.js3
-rw-r--r--app/assets/javascripts/boards/models/list.js9
-rw-r--r--app/assets/javascripts/boards/stores/boards_store.js19
-rw-r--r--app/assets/javascripts/due_date_select.js7
-rw-r--r--app/assets/javascripts/labels_select.js9
-rw-r--r--app/assets/javascripts/milestone_select.js7
21 files changed, 174 insertions, 173 deletions
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 1fc7a29f785..75477ebb3b3 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -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);
});
}
}
diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue
index cde22725a89..38aaec73d7d 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.vue
+++ b/app/assets/javascripts/boards/components/board_blank_state.vue
@@ -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),
},
};
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 0398102ad02..843498f0d06 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -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;
}
}
},
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
index 240d0911a31..a5f9d65e4d5 100644
--- a/app/assets/javascripts/boards/components/board_delete.js
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -1,12 +1,7 @@
-/* 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();
}
- }
- }
+ },
+ },
});
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 7ddb22ad824..4dc56c670f0 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -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();
}
},
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index f7ce5128964..030288a1c9d 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -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',
@@ -68,8 +67,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
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index df7efd3fa5c..62666954de0 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -14,13 +14,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,
@@ -35,7 +31,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
},
data() {
return {
- detail: Store.detail,
+ detail: boardsStore.detail,
issue: {},
list: {},
loadingAssignees: false,
@@ -117,18 +113,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;
})
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index 8b5536200e1..28956c2f3c5 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -3,8 +3,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: {
@@ -110,7 +109,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);
@@ -122,9 +121,9 @@
filterPath.splice(labelIndex, 1);
}
- gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
+ boardsStore.filter.path = filterPath.join('&');
- Store.updateFiltersUrl();
+ boardsStore.updateFiltersUrl();
eventHub.$emit('updateTokens');
},
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
index d4affc8c3de..268ca6bca13 100644
--- a/app/assets/javascripts/boards/components/modal/footer.vue
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -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: {
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index 4f23e5db35c..4622fd28220 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -1,6 +1,7 @@
<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: {
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 448ab9ed135..2c2045f8901 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -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');
}
},
});
});
-};
+}
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
index 90d4c710daf..b8f2e324d43 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
@@ -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.
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
index 46d61ebbf24..acf41e5689e 100644
--- a/app/assets/javascripts/boards/filtered_search_boards.js
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -1,5 +1,6 @@
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 = []) {
@@ -23,7 +24,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
this.store.path = path.substr(1);
if (this.updateUrl) {
- gl.issueBoards.BoardsStore.updateFiltersUrl();
+ boardsStore.updateFiltersUrl();
}
}
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index caa6ce84335..91861f2f9ee 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -14,24 +14,22 @@ import './models/issue';
import './models/list';
import './models/milestone';
import './models/project';
-import './stores/boards_store';
+import boardsStore from './stores/boards_store';
import ModalStore from './stores/modal_store';
import BoardService from './services/board_service';
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 Board from './components/board';
+import BoardSidebar from './components/board_sidebar';
+import initNewListDropdown from './components/new_list_dropdown';
import BoardAddIssuesModal from './components/modal/index.vue';
import '~/vue_shared/vue_resource_interceptor';
import { NavigationType } from '~/lib/utils/common_utils';
+let issueBoardsApp;
+
export default () => {
const $boardApp = document.getElementById('board-app');
- const Store = gl.issueBoards.BoardsStore;
-
- window.gl = window.gl || {};
// check for browser back and trigger a hard reload to circumvent browser caching.
window.addEventListener('pageshow', (event) => {
@@ -43,25 +41,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,
@@ -70,7 +64,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: {
@@ -85,7 +79,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);
@@ -99,16 +93,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;
@@ -119,7 +113,7 @@ export default () => {
this.state.lists = _.sortBy(this.state.lists, 'position');
- Store.addBlankState();
+ boardsStore.addBlankState();
this.loading = false;
})
.catch(() => {
@@ -148,13 +142,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)
@@ -173,26 +167,28 @@ 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,
},
mounted() {
- gl.issueBoards.newListDropdownInit();
+ initNewListDropdown();
},
});
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,
canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
};
},
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js b/app/assets/javascripts/boards/mixins/sortable_default_options.js
index a8df45fc473..c9cde4effb9 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js
@@ -3,32 +3,29 @@
import $ from 'jquery';
import sortableConfig from '../../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;
-};
+}
diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
index 609659bdf93..52d04389b88 100644
--- a/app/assets/javascripts/boards/models/issue.js
+++ b/app/assets/javascripts/boards/models/issue.js
@@ -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) {
@@ -86,7 +87,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) {
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index 58e423fbd44..3161f1da8c9 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -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';
const PER_PAGE = 20;
@@ -89,9 +90,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
@@ -116,7 +117,7 @@ class List {
getIssues(emptyIssues = true) {
const data = {
- ...urlParamsToObject(gl.issueBoards.BoardsStore.filter.path),
+ ...urlParamsToObject(boardsStore.filter.path),
page: this.page,
};
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index bd181807e1f..471955747fd 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -3,13 +3,11 @@
import $ from 'jquery';
import _ from 'underscore';
+import Vue from 'vue';
import Cookies from 'js-cookie';
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: '',
@@ -167,3 +165,16 @@ gl.issueBoards.BoardsStore = {
window.history.pushState(null, null, `?${this.filter.path}`);
}
};
+
+// 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;
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
index 8abd8bc581a..c7b5a35cc14 100644
--- a/app/assets/javascripts/due_date_select.js
+++ b/app/assets/javascripts/due_date_select.js
@@ -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);
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 68ae1ca6842..3c38d998b6c 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -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);
}
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 67c2d7909a2..42fb5c7177a 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -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');