diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_settings_sidebar.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_settings_sidebar.vue | 30 |
1 files changed, 17 insertions, 13 deletions
diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue index 3149762ecdf..e2600883e89 100644 --- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue @@ -1,11 +1,12 @@ <script> import { GlDrawer, GlLabel } from '@gitlab/ui'; -import { mapActions, mapState } from 'vuex'; +import { mapActions, mapState, mapGetters } from 'vuex'; import { __ } from '~/locale'; import boardsStore from '~/boards/stores/boards_store'; import eventHub from '~/sidebar/event_hub'; import { isScopedLabel } from '~/lib/utils/common_utils'; -import { inactiveId } from '~/boards/constants'; +import { LIST } from '~/boards/constants'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; // NOTE: need to revisit how we handle headerHeight, because we have so many different header and footer options. export default { @@ -23,18 +24,20 @@ export default { BoardSettingsListTypes: () => import('ee_component/boards/components/board_settings_list_types.vue'), }, + mixins: [glFeatureFlagMixin()], computed: { - ...mapState(['activeId']), + ...mapGetters(['isSidebarOpen']), + ...mapState(['activeId', 'sidebarType', 'boardLists']), activeList() { /* Warning: Though a computed property it is not reactive because we are referencing a List Model class. Reactivity only applies to plain JS objects */ + if (this.glFeatures.graphqlBoardLists) { + return this.boardLists.find(({ id }) => id === this.activeId); + } return boardsStore.state.lists.find(({ id }) => id === this.activeId); }, - isSidebarOpen() { - return this.activeId !== inactiveId; - }, activeListLabel() { return this.activeList.label; }, @@ -44,18 +47,18 @@ export default { listTypeTitle() { return this.$options.labelListText; }, + showSidebar() { + return this.sidebarType === LIST; + }, }, created() { - eventHub.$on('sidebar.closeAll', this.closeSidebar); + eventHub.$on('sidebar.closeAll', this.unsetActiveId); }, beforeDestroy() { - eventHub.$off('sidebar.closeAll', this.closeSidebar); + eventHub.$off('sidebar.closeAll', this.unsetActiveId); }, methods: { - ...mapActions(['setActiveId']), - closeSidebar() { - this.setActiveId(inactiveId); - }, + ...mapActions(['unsetActiveId']), showScopedLabels(label) { return boardsStore.scopedLabels.enabled && isScopedLabel(label); }, @@ -65,10 +68,11 @@ export default { <template> <gl-drawer + v-if="showSidebar" class="js-board-settings-sidebar" :open="isSidebarOpen" :header-height="$options.headerHeight" - @close="closeSidebar" + @close="unsetActiveId" > <template #header>{{ $options.listSettingsText }}</template> <template v-if="isSidebarOpen"> |