diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_column.vue')
| -rw-r--r-- | app/assets/javascripts/boards/components/board_column.vue | 254 |
1 files changed, 15 insertions, 239 deletions
diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue index fb854616a04..0ed7579e8e1 100644 --- a/app/assets/javascripts/boards/components/board_column.vue +++ b/app/assets/javascripts/boards/components/board_column.vue @@ -1,33 +1,22 @@ <script> -import $ from 'jquery'; import Sortable from 'sortablejs'; -import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui'; import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits'; -import { s__, __, sprintf } from '~/locale'; import Tooltip from '~/vue_shared/directives/tooltip'; import EmptyComponent from '~/vue_shared/components/empty_component'; -import AccessorUtilities from '../../lib/utils/accessor'; import BoardBlankState from './board_blank_state.vue'; -import BoardDelete from './board_delete'; +import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue'; import BoardList from './board_list.vue'; -import IssueCount from './issue_count.vue'; import boardsStore from '../stores/boards_store'; +import eventHub from '../eventhub'; import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options'; import { ListType } from '../constants'; -import { isScopedLabel } from '~/lib/utils/common_utils'; export default { components: { BoardPromotionState: EmptyComponent, BoardBlankState, - BoardDelete, + BoardListHeader, BoardList, - GlButtonGroup, - IssueCount, - GlDeprecatedButton, - GlLabel, - GlTooltip, - GlIcon, }, directives: { Tooltip, @@ -70,42 +59,9 @@ export default { return { detailIssue: boardsStore.detail, filter: boardsStore.filter, - weightFeatureAvailable: false, }; }, computed: { - isLoggedIn() { - return Boolean(gon.current_user_id); - }, - showListHeaderButton() { - return ( - !this.disabled && - this.list.type !== ListType.closed && - this.list.type !== ListType.blank && - this.list.type !== ListType.promotion - ); - }, - issuesTooltip() { - const { issuesSize } = this.list; - - return sprintf(__('%{issuesSize} issues'), { issuesSize }); - }, - // Only needed to make karma pass. - weightCountToolTip() {}, // eslint-disable-line vue/return-in-computed-property - caretTooltip() { - return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand'); - }, - isNewIssueShown() { - return this.list.type === ListType.backlog || this.showListHeaderButton; - }, - isSettingsShown() { - return ( - this.list.type !== ListType.backlog && - this.showListHeaderButton && - this.list.isExpanded && - this.isWipLimitsOn - ); - }, showBoardListAndBoardInfo() { return this.list.type !== ListType.blank && this.list.type !== ListType.promotion; }, @@ -151,41 +107,9 @@ export default { Sortable.create(this.$el.parentNode, sortableOptions); }, - created() { - if ( - this.list.isExpandable && - AccessorUtilities.isLocalStorageAccessSafe() && - !this.isLoggedIn - ) { - const isCollapsed = localStorage.getItem(`${this.uniqueKey}.expanded`) === 'false'; - - this.list.isExpanded = !isCollapsed; - } - }, methods: { - showScopedLabels(label) { - return boardsStore.scopedLabels.enabled && isScopedLabel(label); - }, - - showNewIssueForm() { - this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm; - }, - toggleExpanded() { - if (this.list.isExpandable) { - this.list.isExpanded = !this.list.isExpanded; - - if (AccessorUtilities.isLocalStorageAccessSafe() && !this.isLoggedIn) { - localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded); - } - - if (this.isLoggedIn) { - this.list.update(); - } - - // When expanding/collapsing, the tooltip on the caret button sometimes stays open. - // Close all tooltips manually to prevent dangling tooltips. - $('.tooltip').tooltip('hide'); - } + showListNewIssueForm(listId) { + eventHub.$emit('showForm', listId); }, }, }; @@ -200,166 +124,18 @@ export default { 'board-type-assignee': list.type === 'assignee', }" :data-id="list.id" - class="board h-100 px-2 align-top ws-normal" + class="board gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal" data-qa-selector="board_list" > - <div class="board-inner d-flex flex-column position-relative h-100 rounded"> - <header - :class="{ - 'has-border': list.label && list.label.color, - 'position-relative': list.isExpanded, - 'position-absolute position-top-0 position-left-0 w-100 h-100': !list.isExpanded, - }" - :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }" - class="board-header" - data-qa-selector="board_list_header" - > - <h3 - :class="{ - 'user-can-drag': !disabled && !list.preset, - 'border-bottom-0': !list.isExpanded, - }" - class="board-title m-0 d-flex js-board-handle" - > - <div - v-if="list.isExpandable" - v-tooltip="" - :aria-label="caretTooltip" - :title="caretTooltip" - aria-hidden="true" - class="board-title-caret no-drag" - data-placement="bottom" - @click="toggleExpanded" - > - <i - :class="{ 'fa-caret-right': list.isExpanded, 'fa-caret-down': !list.isExpanded }" - class="fa fa-fw" - ></i> - </div> - <!-- The following is only true in EE and if it is a milestone --> - <span - v-if="list.type === 'milestone' && list.milestone" - aria-hidden="true" - class="append-right-5 milestone-icon" - > - <gl-icon name="timer" /> - </span> - - <a - v-if="list.type === 'assignee'" - :href="list.assignee.path" - class="user-avatar-link js-no-trigger" - > - <img - :alt="list.assignee.name" - :src="list.assignee.avatar" - class="avatar s20 has-tooltip" - height="20" - width="20" - /> - </a> - <div class="board-title-text"> - <span - v-if="list.type !== 'label'" - :class="{ - 'has-tooltip': !['backlog', 'closed'].includes(list.type), - 'd-block': list.type === 'milestone', - }" - :title="(list.label && list.label.description) || list.title || ''" - class="board-title-main-text block-truncated" - data-container="body" - > - {{ list.title }} - </span> - <span - v-if="list.type === 'assignee'" - :title="(list.assignee && list.assignee.username) || ''" - class="board-title-sub-text prepend-left-5 has-tooltip" - > - @{{ list.assignee.username }} - </span> - <gl-label - v-if="list.type === 'label'" - :background-color="list.label.color" - :description="list.label.description" - :scoped="showScopedLabels(list.label)" - :size="!list.isExpanded ? 'sm' : ''" - :title="list.label.title" - tooltip-placement="bottom" - /> - </div> - <board-delete - v-if="canAdminList && !list.preset && list.id" - :list="list" - inline-template="true" - > - <button - :class="{ 'd-none': !list.isExpanded }" - :aria-label="__(`Delete list`)" - class="board-delete no-drag p-0 border-0 has-tooltip float-right" - data-placement="bottom" - title="Delete list" - type="button" - @click.stop="deleteBoard" - > - <i aria-hidden="true" data-hidden="true" class="fa fa-trash"></i> - </button> - </board-delete> - <div - v-if="showBoardListAndBoardInfo" - class="issue-count-badge pr-0 no-drag text-secondary" - > - <span class="d-inline-flex"> - <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltip" /> - <span ref="issueCount" class="issue-count-badge-count"> - <gl-icon class="mr-1" name="issues" /> - <issue-count :issues-size="list.issuesSize" :max-issue-count="list.maxIssueCount" /> - </span> - <!-- The following is only true in EE. --> - <template v-if="weightFeatureAvailable"> - <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" /> - <span ref="weightTooltip" class="d-inline-flex ml-2"> - <gl-icon class="mr-1" name="weight" /> - {{ list.totalWeight }} - </span> - </template> - </span> - </div> - <gl-button-group - v-if="isNewIssueShown || isSettingsShown" - class="board-list-button-group pl-2" - > - <gl-deprecated-button - v-if="isNewIssueShown" - ref="newIssueBtn" - :class="{ - 'd-none': !list.isExpanded, - 'rounded-right': isNewIssueShown && !isSettingsShown, - }" - :aria-label="__(`New issue`)" - class="issue-count-badge-add-button no-drag" - type="button" - @click="showNewIssueForm" - > - <i aria-hidden="true" data-hidden="true" class="fa fa-plus"></i> - </gl-deprecated-button> - <gl-tooltip :target="() => $refs.newIssueBtn">{{ __('New Issue') }}</gl-tooltip> - - <gl-deprecated-button - v-if="isSettingsShown" - ref="settingsBtn" - :aria-label="__(`List settings`)" - class="no-drag rounded-right js-board-settings-button" - title="List settings" - type="button" - @click="openSidebarSettings" - > - <gl-icon name="settings" /> - </gl-deprecated-button> - <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip> - </gl-button-group> - </h3> - </header> + <div + class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base" + > + <board-list-header + :can-admin-list="canAdminList" + :list="list" + :disabled="disabled" + :board-id="boardId" + /> <board-list v-if="showBoardListAndBoardInfo" ref="board-list" |