Move EE differences for `app/assets/javascripts/boards/index.js`
The file app/assets/javascripts/boards/index.js
has differences between CE and EE.
Diferences
diff --git a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/boards/index.js b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/boards/index.js
index f88e9b55988..1a328689d03 100644
--- a/home/yorickpeterse/Projects/gitlab/gdk-ce/gitlab/app/assets/javascripts/boards/index.js
+++ b/home/yorickpeterse/Projects/gitlab/gdk-ee/gitlab/app/assets/javascripts/boards/index.js
@@ -10,26 +10,33 @@ import '~/vue_shared/models/assignee';
import FilteredSearchBoards from './filtered_search_boards';
import eventHub from './eventhub';
import sidebarEventHub from '~/sidebar/event_hub';
-import './models/issue';
-import './models/list';
import './models/milestone';
import './models/project';
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 './filters/due_date_filters';
-import Board from './components/board';
-import BoardSidebar from './components/board_sidebar';
+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 './components/modal/index.vue';
+import BoardAddIssuesModal from 'ee/boards/components/modal/index';
import '~/vue_shared/vue_resource_interceptor';
import { NavigationType, parseBoolean } from '~/lib/utils/common_utils';
+import 'ee/boards/models/list';
+import 'ee/boards/models/issue';
+import 'ee/boards/models/project';
+import BoardService from 'ee/boards/services/board_service';
+import BoardsSelector from 'ee/boards/components/boards_selector.vue';
+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 issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
// check for browser back and trigger a hard reload to circumvent browser caching.
window.addEventListener('pageshow', event => {
@@ -114,6 +121,7 @@ export default () => {
this.state.lists = _.sortBy(this.state.lists, 'position');
boardsStore.addBlankState();
+ boardsStore.addPromotionState();
this.loading = false;
})
.catch(() => {
@@ -128,16 +136,23 @@ export default () => {
const { sidebarInfoEndpoint } = newIssue;
if (sidebarInfoEndpoint && newIssue.subscribed === undefined) {
newIssue.setFetchingState('subscriptions', true);
+ newIssue.setFetchingState('weight', true);
+ newIssue.setFetchingState('epic', true);
BoardService.getIssueInfo(sidebarInfoEndpoint)
.then(res => res.data)
.then(data => {
newIssue.setFetchingState('subscriptions', false);
+ newIssue.setFetchingState('weight', false);
+ newIssue.setFetchingState('epic', false);
newIssue.updateData({
subscribed: data.subscribed,
+ weight: data.weight,
+ epic: data.epic,
});
})
.catch(() => {
newIssue.setFetchingState('subscriptions', false);
+ newIssue.setFetchingState('weight', false);
Flash(__('An error occurred while fetching sidebar data'));
});
}
@@ -172,12 +187,56 @@ export default () => {
el: document.getElementById('js-add-list'),
data: {
filters: boardsStore.state.filters,
+ milestoneTitle: $boardApp.dataset.boardMilestoneTitle,
},
mounted() {
initNewListDropdown();
},
});
+ const configEl = document.querySelector('.js-board-config');
+
+ if (configEl) {
+ gl.boardConfigToggle = new Vue({
+ el: configEl,
+ directives: {
+ tooltip,
+ },
+ data() {
+ return {
+ canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
+ hasScope: this.$options.el.hasAttribute('data-has-scope'),
+ state: boardsStore.state,
+ };
+ },
+ computed: {
+ buttonText() {
+ return this.canAdminList ? 'Edit board' : 'View scope';
+ },
+ tooltipTitle() {
+ return this.hasScope ? __("This board's scope is reduced") : '';
+ },
+ },
+ methods: {
+ showPage: page => boardsStore.showPage(page),
+ },
+ template: `
+ <div class="prepend-left-10">
+ <button
+ v-tooltip
+ :title="tooltipTitle"
+ class="btn btn-inverted"
+ :class="{ 'dot-highlight': hasScope }"
+ type="button"
+ @click.prevent="showPage('edit')"
+ >
+ {{ buttonText }}
+ </button>
+ </div>
+ `,
+ });
+ }
+
const issueBoardsModal = document.getElementById('js-add-issues-btn');
if (issueBoardsModal) {
@@ -189,6 +248,8 @@ export default () => {
return {
modal: ModalStore.store,
store: boardsStore.state,
+ isFullscreen: false,
+ focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
};
},
@@ -251,4 +312,78 @@ export default () => {
`,
});
}
+
+ // eslint-disable-next-line no-new
+ new Vue({
+ el: document.getElementById('js-toggle-focus-btn'),
+ data: {
+ modal: ModalStore.store,
+ store: boardsStore.state,
+ isFullscreen: false,
+ focusModeAvailable: $boardApp.hasAttribute('data-focus-mode-available'),
+ },
+ methods: {
+ toggleFocusMode() {
+ if (!this.focusModeAvailable) {
+ return;
+ }
+
+ $(this.$refs.toggleFocusModeButton).tooltip('hide');
+ issueBoardsContent.classList.toggle('is-focused');
+
+ this.isFullscreen = !this.isFullscreen;
+ },
+ },
+ template: `
+ <div class="board-extra-actions">
+ <a
+ href="#"
+ class="btn btn-default has-tooltip prepend-left-10 js-focus-mode-btn"
+ role="button"
+ aria-label="Toggle focus mode"
+ title="Toggle focus mode"
+ ref="toggleFocusModeButton"
+ v-if="focusModeAvailable"
+ @click="toggleFocusMode">
+ <span v-show="isFullscreen">
+ ${collapseIcon}
+ </span>
+ <span v-show="!isFullscreen">
+ ${expandIcon}
+ </span>
+ </a>
+ </div>
+ `,
+ });
+
+ const boardsSwitcherElement = document.getElementById('js-multiple-boards-switcher');
+ // eslint-disable-next-line no-new
+ new Vue({
+ el: boardsSwitcherElement,
+ components: {
+ BoardsSelector,
+ },
+ data() {
+ const { dataset } = boardsSwitcherElement;
+
+ const boardsSelectorProps = {
+ ...dataset,
+ currentBoard: JSON.parse(dataset.currentBoard),
+ hasMissingBoards: parseBoolean(dataset.hasMissingBoards),
+ canAdminBoard: parseBoolean(dataset.canAdminBoard),
+ multipleIssueBoardsAvailable: parseBoolean(dataset.multipleIssueBoardsAvailable),
+ projectId: Number(dataset.projectId),
+ groupId: Number(dataset.groupId),
+ scopedIssueBoardFeatureEnabled: parseBoolean(dataset.scopedIssueBoardFeatureEnabled),
+ weights: JSON.parse(dataset.weights),
+ };
+
+ return { boardsSelectorProps };
+ },
+ render(createElement) {
+ return createElement(BoardsSelector, {
+ props: this.boardsSelectorProps,
+ });
+ },
+ });
};
What needs to be done
- Create a EE version of this file