diff options
Diffstat (limited to 'app/assets/javascripts/boards/components/board_card.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/board_card.vue | 112 |
1 files changed, 22 insertions, 90 deletions
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 246d3b9dcd1..31050eef83d 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -1,6 +1,5 @@ <script> -/* eslint-disable vue/require-default-prop */ -import IssueCardInner from './issue_card_inner.vue'; +import BoardCardLayout from './board_card_layout.vue'; import eventHub from '../eventhub'; import sidebarEventHub from '~/sidebar/event_hub'; import boardsStore from '../stores/boards_store'; @@ -8,7 +7,7 @@ import boardsStore from '../stores/boards_store'; export default { name: 'BoardsIssueCard', components: { - IssueCardInner, + BoardCardLayout, }, props: { list: { @@ -21,80 +20,29 @@ export default { default: () => ({}), required: false, }, - issueLinkBase: { - type: String, - default: '', - required: false, - }, - disabled: { - type: Boolean, - default: false, - required: false, - }, - index: { - type: Number, - default: 0, - required: false, - }, - rootPath: { - type: String, - default: '', - required: false, - }, - groupId: { - type: Number, - required: false, - }, - }, - data() { - return { - showDetail: false, - detailIssue: boardsStore.detail, - multiSelect: boardsStore.multiSelect, - }; - }, - computed: { - issueDetailVisible() { - return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id; - }, - multiSelectVisible() { - return this.multiSelect.list.findIndex(issue => issue.id === this.issue.id) > -1; - }, - canMultiSelect() { - return gon.features && gon.features.multiSelectBoard; - }, }, methods: { - mouseDown() { - this.showDetail = true; + // These are methods instead of computed's, because boardsStore is not reactive. + isActive() { + return this.getActiveId() === this.issue.id; }, - mouseMove() { - this.showDetail = false; + getActiveId() { + return boardsStore.detail?.issue?.id; }, - showIssue(e) { - if (e.target.classList.contains('js-no-trigger')) return; - + showIssue({ isMultiSelect }) { // If no issues are opened, close all sidebars first - if (!boardsStore.detail?.issue?.id) { + if (!this.getActiveId()) { sidebarEventHub.$emit('sidebar.closeAll'); } + if (this.isActive()) { + eventHub.$emit('clearDetailIssue', isMultiSelect); - // If CMD or CTRL is clicked - const isMultiSelect = this.canMultiSelect && (e.ctrlKey || e.metaKey); - - if (this.showDetail || isMultiSelect) { - this.showDetail = false; - - if (boardsStore.detail.issue && boardsStore.detail.issue.id === this.issue.id) { - eventHub.$emit('clearDetailIssue', isMultiSelect); - - if (isMultiSelect) { - eventHub.$emit('newDetailIssue', this.issue, isMultiSelect); - } - } else { + if (isMultiSelect) { eventHub.$emit('newDetailIssue', this.issue, isMultiSelect); - boardsStore.setListDetail(this.list); } + } else { + eventHub.$emit('newDetailIssue', this.issue, isMultiSelect); + boardsStore.setListDetail(this.list); } }, }, @@ -102,28 +50,12 @@ export default { </script> <template> - <li - :class="{ - 'multi-select': multiSelectVisible, - 'user-can-drag': !disabled && issue.id, - 'is-disabled': disabled || !issue.id, - 'is-active': issueDetailVisible, - }" - :index="index" - :data-issue-id="issue.id" + <board-card-layout data-qa-selector="board_card" - class="board-card p-3 rounded" - @mousedown="mouseDown" - @mousemove="mouseMove" - @mouseup="showIssue($event)" - > - <issue-card-inner - :list="list" - :issue="issue" - :issue-link-base="issueLinkBase" - :group-id="groupId" - :root-path="rootPath" - :update-filters="true" - /> - </li> + :issue="issue" + :list="list" + :is-active="isActive()" + v-bind="$attrs" + @show="showIssue" + /> </template> |