index.js 5.68 KB
Newer Older
1 2 3 4 5 6
// This is a true violation of @gitlab/no-runtime-template-compiler, as it
// relies on app/views/shared/boards/_show.html.haml for its
// template.
/* eslint-disable @gitlab/no-runtime-template-compiler */
import Vue from 'vue';
import VueApollo from 'vue-apollo';
7
import { mapActions, mapState } from 'vuex';
8

9
import { transformBoardConfig } from 'ee_component/boards/boards_util';
10 11 12
import BoardSidebar from 'ee_component/boards/components/board_sidebar';
import toggleLabels from 'ee_component/boards/toggle_labels';

13
import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
14
import BoardContent from '~/boards/components/board_content.vue';
15
import BoardAddIssuesModal from '~/boards/components/modal/index.vue';
16
import boardConfigToggle from '~/boards/config_toggle';
17
import { issuableTypes } from '~/boards/constants';
18 19
import mountMultipleBoardsSwitcher from '~/boards/mount_multiple_boards_switcher';
import store from '~/boards/stores';
20 21 22 23
import createDefaultClient from '~/lib/graphql';

import '~/boards/filters/due_date_filters';
import { NavigationType, parseBoolean } from '~/lib/utils/common_utils';
24
import { updateHistory } from '~/lib/utils/url_utility';
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

Vue.use(VueApollo);

const apolloProvider = new VueApollo({
  defaultClient: createDefaultClient(),
});

export default () => {
  const $boardApp = document.getElementById('board-app');

  // check for browser back and trigger a hard reload to circumvent browser caching.
  window.addEventListener('pageshow', (event) => {
    const isNavTypeBackForward =
      window.performance && window.performance.navigation.type === NavigationType.TYPE_BACK_FORWARD;

    if (event.persisted || isNavTypeBackForward) {
      window.location.reload();
    }
  });

45 46 47 48 49 50 51 52
  if (gon?.features?.boardsFilteredSearch) {
    import('ee/boards/epic_filtered_search')
      .then(({ default: initFilteredSearch }) => {
        initFilteredSearch();
      })
      .catch(() => {});
  }

53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
  // eslint-disable-next-line no-new
  new Vue({
    el: $boardApp,
    components: {
      BoardContent,
      BoardSidebar,
      BoardAddIssuesModal,
      BoardSettingsSidebar: () => import('~/boards/components/board_settings_sidebar.vue'),
    },
    provide: {
      boardId: $boardApp.dataset.boardId,
      groupId: parseInt($boardApp.dataset.groupId, 10),
      rootPath: $boardApp.dataset.rootPath,
      currentUserId: gon.current_user_id || null,
      canUpdate: $boardApp.dataset.canUpdate,
      labelsFetchPath: $boardApp.dataset.labelsFetchPath,
      labelsManagePath: $boardApp.dataset.labelsManagePath,
      labelsFilterBasePath: $boardApp.dataset.labelsFilterBasePath,
      timeTrackingLimitToHours: parseBoolean($boardApp.dataset.timeTrackingLimitToHours),
      weightFeatureAvailable: parseBoolean($boardApp.dataset.weightFeatureAvailable),
      boardWeight: $boardApp.dataset.boardWeight
        ? parseInt($boardApp.dataset.boardWeight, 10)
        : null,
      scopedLabelsAvailable: parseBoolean($boardApp.dataset.scopedLabels),
77 78 79
      milestoneListsAvailable: false,
      assigneeListsAvailable: false,
      iterationListsAvailable: false,
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
    },
    store,
    apolloProvider,
    data() {
      return {
        state: {},
        loading: 0,
        boardsEndpoint: $boardApp.dataset.boardsEndpoint,
        recentBoardsEndpoint: $boardApp.dataset.recentBoardsEndpoint,
        listsEndpoint: $boardApp.dataset.listsEndpoint,
        disabled: parseBoolean($boardApp.dataset.disabled),
        bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
        parent: $boardApp.dataset.parent,
        detailIssueVisible: false,
      };
    },
96 97 98
    computed: {
      ...mapState(['boardConfig']),
    },
99 100 101 102 103 104
    created() {
      this.setInitialBoardData({
        boardId: $boardApp.dataset.boardId,
        fullPath: $boardApp.dataset.fullPath,
        boardType: this.parent,
        disabled: this.disabled,
105
        issuableType: issuableTypes.epic,
106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
        boardConfig: {
          milestoneId: parseInt($boardApp.dataset.boardMilestoneId, 10),
          milestoneTitle: $boardApp.dataset.boardMilestoneTitle || '',
          iterationId: parseInt($boardApp.dataset.boardIterationId, 10),
          iterationTitle: $boardApp.dataset.boardIterationTitle || '',
          assigneeId: $boardApp.dataset.boardAssigneeId,
          assigneeUsername: $boardApp.dataset.boardAssigneeUsername,
          labels: $boardApp.dataset.labels ? JSON.parse($boardApp.dataset.labels) : [],
          labelIds: $boardApp.dataset.labelIds ? JSON.parse($boardApp.dataset.labelIds) : [],
          weight: $boardApp.dataset.boardWeight
            ? parseInt($boardApp.dataset.boardWeight, 10)
            : null,
        },
      });
    },
121
    mounted() {
122 123 124 125 126 127 128
      const boardConfigPath = transformBoardConfig(this.boardConfig);
      if (boardConfigPath !== '') {
        const filterPath = window.location.search ? `${window.location.search}&` : '?';
        updateHistory({
          url: `${filterPath}${transformBoardConfig(this.boardConfig)}`,
        });
      }
129 130
      this.performSearch();
    },
131
    methods: {
132
      ...mapActions(['setInitialBoardData', 'performSearch']),
133 134 135 136 137 138
      getNodes(data) {
        return data[this.parent]?.board?.lists.nodes;
      },
    },
  });

139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
  const createColumnTriggerEl = document.querySelector('.js-create-column-trigger');
  if (createColumnTriggerEl) {
    // eslint-disable-next-line no-new
    new Vue({
      el: createColumnTriggerEl,
      components: {
        BoardAddNewColumnTrigger,
      },
      store,
      render(createElement) {
        return createElement(BoardAddNewColumnTrigger);
      },
    });
  }

154
  toggleLabels();
155
  boardConfigToggle();
156 157 158 159 160 161

  mountMultipleBoardsSwitcher({
    fullPath: $boardApp.dataset.fullPath,
    rootPath: $boardApp.dataset.boardsEndpoint,
  });
};