diff options
Diffstat (limited to 'app/assets/javascripts/boards')
16 files changed, 586 insertions, 337 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" diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue new file mode 100644 index 00000000000..f0497ea0b64 --- /dev/null +++ b/app/assets/javascripts/boards/components/board_content.vue @@ -0,0 +1,82 @@ +<script> +import { mapState } from 'vuex'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import BoardColumn from 'ee_else_ce/boards/components/board_column.vue'; +import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue'; + +export default { + components: { + BoardColumn, + EpicsSwimlanes, + }, + mixins: [glFeatureFlagMixin()], + props: { + lists: { + type: Array, + required: true, + }, + canAdminList: { + type: Boolean, + required: true, + }, + groupId: { + type: Number, + required: false, + default: null, + }, + disabled: { + type: Boolean, + required: true, + }, + issueLinkBase: { + type: String, + required: true, + }, + rootPath: { + type: String, + required: true, + }, + boardId: { + type: String, + required: true, + }, + }, + computed: { + ...mapState(['isShowingEpicsSwimlanes']), + isSwimlanesOn() { + return this.glFeatures.boardsWithSwimlanes && this.isShowingEpicsSwimlanes; + }, + }, +}; +</script> + +<template> + <div> + <div + v-if="!isSwimlanesOn" + class="boards-list w-100 py-3 px-2 text-nowrap" + data-qa-selector="boards_list" + > + <board-column + v-for="list in lists" + :key="list.id" + ref="board" + :can-admin-list="canAdminList" + :group-id="groupId" + :list="list" + :disabled="disabled" + :issue-link-base="issueLinkBase" + :root-path="rootPath" + :board-id="boardId" + /> + </div> + <epics-swimlanes + v-else + ref="swimlanes" + :lists="lists" + :can-admin-list="canAdminList" + :disabled="disabled" + :board-id="boardId" + /> + </div> +</template> diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js index cc15dc82db9..b74234a2e3c 100644 --- a/app/assets/javascripts/boards/components/board_delete.js +++ b/app/assets/javascripts/boards/components/board_delete.js @@ -1,8 +1,15 @@ import $ from 'jquery'; import Vue from 'vue'; +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; export default Vue.extend({ + components: { + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { list: { type: Object, diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index c4e2c398d45..4270ad5783d 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/app/assets/javascripts/boards/components/board_list.vue @@ -104,7 +104,7 @@ export default { }, }, created() { - eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm); + eventHub.$on(`toggle-issue-form-${this.list.id}`, this.toggleForm); eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop); }, mounted() { @@ -381,7 +381,7 @@ export default { this.$refs.list.addEventListener('scroll', this.onScroll); }, beforeDestroy() { - eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm); + eventHub.$off(`toggle-issue-form-${this.list.id}`, this.toggleForm); eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop); this.$refs.list.removeEventListener('scroll', this.onScroll); }, diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue new file mode 100644 index 00000000000..eb12617a66e --- /dev/null +++ b/app/assets/javascripts/boards/components/board_list_header.vue @@ -0,0 +1,291 @@ +<script> +import { + GlButton, + GlButtonGroup, + GlLabel, + GlTooltip, + GlIcon, + GlTooltipDirective, +} from '@gitlab/ui'; +import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits'; +import { s__, __, sprintf } from '~/locale'; +import AccessorUtilities from '../../lib/utils/accessor'; +import BoardDelete from './board_delete'; +import IssueCount from './issue_count.vue'; +import boardsStore from '../stores/boards_store'; +import eventHub from '../eventhub'; +import { ListType } from '../constants'; +import { isScopedLabel } from '~/lib/utils/common_utils'; + +export default { + components: { + BoardDelete, + GlButtonGroup, + GlButton, + GlLabel, + GlTooltip, + GlIcon, + IssueCount, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + mixins: [isWipLimitsOn], + props: { + list: { + type: Object, + default: () => ({}), + required: false, + }, + disabled: { + type: Boolean, + required: true, + }, + boardId: { + type: String, + required: true, + }, + canAdminList: { + type: Boolean, + required: false, + default: false, + }, + isSwimlanesHeader: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + weightFeatureAvailable: false, + }; + }, + computed: { + isLoggedIn() { + return Boolean(gon.current_user_id); + }, + listType() { + return this.list.type; + }, + listAssignee() { + return this.list?.assignee?.username || ''; + }, + listTitle() { + return this.list?.label?.description || this.list.title || ''; + }, + showListHeaderButton() { + return ( + !this.disabled && + this.listType !== ListType.closed && + this.listType !== ListType.blank && + this.listType !== ListType.promotion + ); + }, + issuesTooltip() { + const { issuesSize } = this.list; + + return sprintf(__('%{issuesSize} issues'), { issuesSize }); + }, + chevronTooltip() { + return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand'); + }, + chevronIcon() { + return this.list.isExpanded ? 'chevron-right' : 'chevron-down'; + }, + isNewIssueShown() { + return this.listType === ListType.backlog || this.showListHeaderButton; + }, + isSettingsShown() { + return ( + this.listType !== ListType.backlog && + this.showListHeaderButton && + this.list.isExpanded && + this.isWipLimitsOn + ); + }, + showBoardListAndBoardInfo() { + return this.listType !== ListType.blank && this.listType !== ListType.promotion; + }, + uniqueKey() { + // eslint-disable-next-line @gitlab/require-i18n-strings + return `boards.${this.boardId}.${this.listType}.${this.list.id}`; + }, + }, + methods: { + showScopedLabels(label) { + return boardsStore.scopedLabels.enabled && isScopedLabel(label); + }, + + showNewIssueForm() { + eventHub.$emit(`toggle-issue-form-${this.list.id}`); + }, + 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. + this.$root.$emit('bv::hide::tooltip'); + } + }, + }, +}; +</script> + +<template> + <header + :class="{ + 'has-border': list.label && list.label.color, + 'gl-relative': list.isExpanded, + 'gl-h-full': !list.isExpanded, + 'board-inner gl-rounded-base gl-border-b-0': isSwimlanesHeader, + }" + :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }" + class="board-header gl-relative" + data-qa-selector="board_list_header" + data-testid="board-list-header" + > + <h3 + :class="{ + 'user-can-drag': !disabled && !list.preset, + 'gl-border-b-0': !list.isExpanded, + }" + class="board-title gl-m-0 gl-display-flex js-board-handle" + > + <gl-button + v-if="list.isExpandable" + v-gl-tooltip.hover + :aria-label="chevronTooltip" + :title="chevronTooltip" + :icon="chevronIcon" + class="board-title-caret no-drag" + variant="link" + @click="toggleExpanded" + /> + <!-- 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="gl-mr-2 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 + v-gl-tooltip.hover.bottom + :title="listAssignee" + :alt="list.assignee.name" + :src="list.assignee.avatar" + class="avatar s20" + height="20" + width="20" + /> + </a> + <div class="board-title-text"> + <span + v-if="list.type !== 'label'" + v-gl-tooltip.hover + :class="{ + 'gl-display-inline-block': list.type === 'milestone', + }" + :title="listTitle" + class="board-title-main-text block-truncated" + > + {{ list.title }} + </span> + <span v-if="list.type === 'assignee'" class="board-title-sub-text gl-ml-2"> + @{{ list.assignee.username }} + </span> + <gl-label + v-if="list.type === 'label'" + v-gl-tooltip.hover.bottom + :background-color="list.label.color" + :description="list.label.description" + :scoped="showScopedLabels(list.label)" + :size="!list.isExpanded ? 'sm' : ''" + :title="list.label.title" + /> + </div> + <board-delete + v-if="canAdminList && !list.preset && list.id" + :list="list" + inline-template="true" + > + <gl-button + v-gl-tooltip.hover.bottom + :class="{ 'gl-display-none': !list.isExpanded }" + :aria-label="__('Delete list')" + class="board-delete no-drag gl-pr-0 gl-shadow-none gl-mr-3" + :title="__('Delete list')" + icon="remove" + size="small" + @click.stop="deleteBoard" + /> + </board-delete> + <div + v-if="showBoardListAndBoardInfo" + class="issue-count-badge gl-pr-0 no-drag text-secondary" + > + <span class="gl-display-inline-flex"> + <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltip" /> + <span ref="issueCount" class="issue-count-badge-count"> + <gl-icon class="gl-mr-2" 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="gl-display-inline-flex gl-ml-3"> + <gl-icon class="gl-mr-2" name="weight" /> + {{ list.totalWeight }} + </span> + </template> + </span> + </div> + <gl-button-group + v-if="isNewIssueShown || isSettingsShown" + class="board-list-button-group pl-2" + > + <gl-button + v-if="isNewIssueShown" + ref="newIssueBtn" + v-gl-tooltip.hover + :class="{ + 'gl-display-none': !list.isExpanded, + }" + :aria-label="__('New issue')" + :title="__('New issue')" + class="issue-count-badge-add-button no-drag" + icon="plus" + @click="showNewIssueForm" + /> + + <gl-button + v-if="isSettingsShown" + ref="settingsBtn" + v-gl-tooltip.hover + :aria-label="__('List settings')" + class="no-drag js-board-settings-button" + :title="__('List settings')" + icon="settings" + @click="openSidebarSettings" + /> + <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip> + </gl-button-group> + </h3> + </header> +</template> diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue index deebe122109..c72fb7b30f9 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.vue +++ b/app/assets/javascripts/boards/components/board_new_issue.vue @@ -92,7 +92,7 @@ export default { }, cancel() { this.title = ''; - eventHub.$emit(`hide-issue-form-${this.list.id}`); + eventHub.$emit(`toggle-issue-form-${this.list.id}`); }, setSelectedProject(selectedProject) { this.selectedProject = selectedProject; diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js index c8953158811..056a7b48212 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js +++ b/app/assets/javascripts/boards/components/board_sidebar.js @@ -54,7 +54,7 @@ export default Vue.extend({ return this.issue.milestone ? this.issue.milestone.title : __('No milestone'); }, canRemove() { - return !this.list.preset; + return !this.list?.preset; }, hasLabels() { return this.issue.labels && this.issue.labels.length; diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index a589fb325b2..f2e198eaedb 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -147,7 +147,7 @@ export default { <template> <div> <div class="d-flex board-card-header" dir="auto"> - <h4 class="board-card-title append-bottom-0 prepend-top-0"> + <h4 class="board-card-title gl-mb-0 gl-mt-0"> <icon v-if="issue.blocked" v-gl-tooltip @@ -169,7 +169,7 @@ export default { }}</a> </h4> </div> - <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap"> + <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 d-flex flex-wrap"> <template v-for="label in orderedLabels"> <gl-label :key="label.id" @@ -188,7 +188,7 @@ export default { > <span v-if="issue.referencePath" - class="board-card-number overflow-hidden d-flex append-right-8 prepend-top-8" + class="board-card-number overflow-hidden d-flex gl-mr-3 gl-mt-3" > <tooltip-on-truncate v-if="issueReferencePath" @@ -199,7 +199,7 @@ export default { > #{{ issue.iid }} </span> - <span class="board-info-items prepend-top-8 d-inline-block"> + <span class="board-info-items gl-mt-3 d-inline-block"> <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" /> <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" /> <issue-card-weight diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js index 9ff7575ae09..a882cd1cdfa 100644 --- a/app/assets/javascripts/boards/index.js +++ b/app/assets/javascripts/boards/index.js @@ -1,12 +1,15 @@ import $ from 'jquery'; import Vue from 'vue'; +import { mapActions } from 'vuex'; import 'ee_else_ce/boards/models/issue'; import 'ee_else_ce/boards/models/list'; +import BoardContent from '~/boards/components/board_content.vue'; import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar'; import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown'; import boardConfigToggle from 'ee_else_ce/boards/config_toggle'; import toggleLabels from 'ee_else_ce/boards/toggle_labels'; +import toggleEpicsSwimlanes from 'ee_else_ce/boards/toggle_epics_swimlanes'; import { setPromotionState, setWeigthFetchingState, @@ -76,6 +79,7 @@ export default () => { issueBoardsApp = new Vue({ el: $boardApp, components: { + BoardContent, Board: () => window?.gon?.features?.sfcIssueBoards ? import('ee_else_ce/boards/components/board_column.vue') @@ -114,14 +118,16 @@ export default () => { }, }, created() { - boardsStore.setEndpoints({ + const endpoints = { boardsEndpoint: this.boardsEndpoint, recentBoardsEndpoint: this.recentBoardsEndpoint, listsEndpoint: this.listsEndpoint, bulkUpdatePath: this.bulkUpdatePath, boardId: this.boardId, fullPath: $boardApp.dataset.fullPath, - }); + }; + this.setEndpoints(endpoints); + boardsStore.setEndpoints(endpoints); boardsStore.rootPath = this.boardsEndpoint; eventHub.$on('updateTokens', this.updateTokens); @@ -192,6 +198,7 @@ export default () => { } }, methods: { + ...mapActions(['setEndpoints']), updateTokens() { this.filterManager.updateTokens(); }, @@ -371,5 +378,6 @@ export default () => { toggleFocusMode(ModalStore, boardsStore); toggleLabels(); + toggleEpicsSwimlanes(); mountMultipleBoardsSwitcher(); }; diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js index 878f49cc6be..98eac35b2ed 100644 --- a/app/assets/javascripts/boards/models/issue.js +++ b/app/assets/javascripts/boards/models/issue.js @@ -30,56 +30,43 @@ class ListIssue { } addLabel(label) { - if (!this.findLabel(label)) { - this.labels.push(new ListLabel(label)); - } + boardsStore.addIssueLabel(this, label); } findLabel(findLabel) { - return this.labels.find(label => label.id === findLabel.id); + return boardsStore.findIssueLabel(this, findLabel); } removeLabel(removeLabel) { - if (removeLabel) { - this.labels = this.labels.filter(label => removeLabel.id !== label.id); - } + boardsStore.removeIssueLabel(this, removeLabel); } removeLabels(labels) { - labels.forEach(this.removeLabel.bind(this)); + boardsStore.removeIssueLabels(this, labels); } addAssignee(assignee) { - if (!this.findAssignee(assignee)) { - this.assignees.push(new ListAssignee(assignee)); - } + boardsStore.addIssueAssignee(this, assignee); } findAssignee(findAssignee) { - return this.assignees.find(assignee => assignee.id === findAssignee.id); + return boardsStore.findIssueAssignee(this, findAssignee); } removeAssignee(removeAssignee) { - if (removeAssignee) { - this.assignees = this.assignees.filter(assignee => assignee.id !== removeAssignee.id); - } + boardsStore.removeIssueAssignee(this, removeAssignee); } removeAllAssignees() { - this.assignees = []; + boardsStore.removeAllIssueAssignees(this); } addMilestone(milestone) { - const miletoneId = this.milestone ? this.milestone.id : null; - if (IS_EE && milestone.id !== miletoneId) { - this.milestone = new ListMilestone(milestone); - } + boardsStore.addIssueMilestone(this, milestone); } removeMilestone(removeMilestone) { - if (IS_EE && removeMilestone && removeMilestone.id === this.milestone.id) { - this.milestone = {}; - } + boardsStore.removeIssueMilestone(this, removeMilestone); } getLists() { @@ -87,15 +74,15 @@ class ListIssue { } updateData(newData) { - Object.assign(this, newData); + boardsStore.updateIssueData(this, newData); } setFetchingState(key, value) { - this.isFetching[key] = value; + boardsStore.setIssueFetchingState(this, key, value); } setLoadingState(key, value) { - this.isLoading[key] = value; + boardsStore.setIssueLoadingState(this, key, value); } update() { diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js index 31c372b7a75..0bd606c6297 100644 --- a/app/assets/javascripts/boards/models/list.js +++ b/app/assets/javascripts/boards/models/list.js @@ -1,4 +1,4 @@ -/* eslint-disable no-underscore-dangle, class-methods-use-this, consistent-return */ +/* eslint-disable no-underscore-dangle, class-methods-use-this */ import ListIssue from 'ee_else_ce/boards/models/issue'; import { __ } from '~/locale'; @@ -8,8 +8,6 @@ import flash from '~/flash'; import boardsStore from '../stores/boards_store'; import ListMilestone from './milestone'; -const PER_PAGE = 20; - const TYPES = { backlog: { isPreset: true, @@ -83,30 +81,15 @@ class List { } destroy() { - const index = boardsStore.state.lists.indexOf(this); - boardsStore.state.lists.splice(index, 1); - boardsStore.updateNewListDropdown(this.id); - - boardsStore.destroyList(this.id).catch(() => { - // TODO: handle request error - }); + boardsStore.destroy(this); } update() { - const collapsed = !this.isExpanded; - return boardsStore.updateList(this.id, this.position, collapsed).catch(() => { - // TODO: handle request error - }); + return boardsStore.updateListFunc(this); } nextPage() { - if (this.issuesSize > this.issues.length) { - if (this.issues.length / PER_PAGE >= 1) { - this.page += 1; - } - - return this.getIssues(false); - } + return boardsStore.goToNextPage(this); } getIssues(emptyIssues = true) { @@ -114,13 +97,7 @@ class List { } newIssue(issue) { - this.addIssue(issue, null, 0); - this.issuesSize += 1; - - return boardsStore - .newIssue(this.id, issue) - .then(res => res.data) - .then(data => this.onNewIssueResponse(issue, data)); + return boardsStore.newListIssue(this, issue); } createIssues(data) { @@ -138,12 +115,7 @@ class List { } moveIssue(issue, oldIndex, newIndex, moveBeforeId, moveAfterId) { - this.issues.splice(oldIndex, 1); - this.issues.splice(newIndex, 0, issue); - - boardsStore.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId).catch(() => { - // TODO: handle request error - }); + boardsStore.moveListIssues(this, issue, oldIndex, newIndex, moveBeforeId, moveAfterId); } moveMultipleIssues({ issues, oldIndicies, newIndex, moveBeforeId, moveAfterId }) { @@ -182,35 +154,15 @@ class List { } findIssue(id) { - return this.issues.find(issue => issue.id === id); + return boardsStore.findListIssue(this, id); } removeMultipleIssues(removeIssues) { - const ids = removeIssues.map(issue => issue.id); - - this.issues = this.issues.filter(issue => { - const matchesRemove = ids.includes(issue.id); - - if (matchesRemove) { - this.issuesSize -= 1; - issue.removeLabel(this.label); - } - - return !matchesRemove; - }); + return boardsStore.removeListMultipleIssues(this, removeIssues); } removeIssue(removeIssue) { - this.issues = this.issues.filter(issue => { - const matchesRemove = removeIssue.id === issue.id; - - if (matchesRemove) { - this.issuesSize -= 1; - issue.removeLabel(this.label); - } - - return !matchesRemove; - }); + return boardsStore.removeListIssues(this, removeIssue); } getTypeInfo(type) { diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js index 34598d66f45..08fedb14dff 100644 --- a/app/assets/javascripts/boards/stores/actions.js +++ b/app/assets/javascripts/boards/stores/actions.js @@ -1,11 +1,13 @@ +import * as types from './mutation_types'; + const notImplemented = () => { /* eslint-disable-next-line @gitlab/require-i18n-strings */ throw new Error('Not implemented!'); }; export default { - setEndpoints: () => { - notImplemented(); + setEndpoints: ({ commit }, endpoints) => { + commit(types.SET_ENDPOINTS, endpoints); }, fetchLists: () => { diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js index fdbd7e89bfb..a930f39189e 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js +++ b/app/assets/javascripts/boards/stores/boards_store.js @@ -1,4 +1,4 @@ -/* eslint-disable no-shadow, no-param-reassign */ +/* eslint-disable no-shadow, no-param-reassign,consistent-return */ /* global List */ import $ from 'jquery'; @@ -22,6 +22,7 @@ import ListLabel from '../models/label'; import ListAssignee from '../models/assignee'; import ListMilestone from '../models/milestone'; +const PER_PAGE = 20; const boardsStore = { disabled: false, timeTracking: { @@ -42,6 +43,7 @@ const boardsStore = { }, detail: { issue: {}, + list: {}, }, moving: { issue: {}, @@ -73,6 +75,7 @@ const boardsStore = { this.filter.path = getUrlParamsArray().join('&'); this.detail = { issue: {}, + list: {}, }; }, showPage(page) { @@ -133,6 +136,21 @@ const boardsStore = { path: '', }); }, + + findIssueLabel(issue, findLabel) { + return issue.labels.find(label => label.id === findLabel.id); + }, + + goToNextPage(list) { + if (list.issuesSize > list.issues.length) { + if (list.issues.length / PER_PAGE >= 1) { + list.page += 1; + } + + return list.getIssues(false); + } + }, + addListIssue(list, issue, listFrom, newIndex) { let moveBeforeId = null; let moveAfterId = null; @@ -177,6 +195,10 @@ const boardsStore = { } } }, + findListIssue(list, id) { + return list.issues.find(issue => issue.id === id); + }, + welcomeIsHidden() { return parseBoolean(Cookies.get('issue_board_welcome_hidden')); }, @@ -243,6 +265,33 @@ const boardsStore = { } }, + removeListIssues(list, removeIssue) { + list.issues = list.issues.filter(issue => { + const matchesRemove = removeIssue.id === issue.id; + + if (matchesRemove) { + list.issuesSize -= 1; + issue.removeLabel(list.label); + } + + return !matchesRemove; + }); + }, + removeListMultipleIssues(list, removeIssues) { + const ids = removeIssues.map(issue => issue.id); + + list.issues = list.issues.filter(issue => { + const matchesRemove = ids.includes(issue.id); + + if (matchesRemove) { + list.issuesSize -= 1; + issue.removeLabel(list.label); + } + + return !matchesRemove; + }); + }, + startMoving(list, issue) { Object.assign(this.moving, { list, issue }); }, @@ -516,9 +565,25 @@ const boardsStore = { }); }, + updateListFunc(list) { + const collapsed = !list.isExpanded; + return this.updateList(list.id, list.position, collapsed).catch(() => { + // TODO: handle request error + }); + }, + destroyList(id) { return axios.delete(`${this.state.endpoints.listsEndpoint}/${id}`); }, + destroy(list) { + const index = this.state.lists.indexOf(list); + this.state.lists.splice(index, 1); + this.updateNewListDropdown(list.id); + + this.destroyList(list.id).catch(() => { + // TODO: handle request error + }); + }, saveList(list) { const entity = list.label || list.assignee || list.milestone; @@ -591,6 +656,15 @@ const boardsStore = { }); }, + moveListIssues(list, issue, oldIndex, newIndex, moveBeforeId, moveAfterId) { + list.issues.splice(oldIndex, 1); + list.issues.splice(newIndex, 0, issue); + + this.moveIssue(issue.id, null, null, moveBeforeId, moveAfterId).catch(() => { + // TODO: handle request error + }); + }, + moveMultipleIssues({ ids, fromListId, toListId, moveBeforeId, moveAfterId }) { return axios.put(this.generateMultiDragPath(this.state.endpoints.boardId), { from_list_id: fromListId, @@ -607,6 +681,15 @@ const boardsStore = { }); }, + newListIssue(list, issue) { + list.addIssue(issue, null, 0); + list.issuesSize += 1; + + return this.newIssue(list.id, issue) + .then(res => res.data) + .then(data => list.onNewIssueResponse(issue, data)); + }, + getBacklog(data) { return axios.get( mergeUrlParams( @@ -615,6 +698,21 @@ const boardsStore = { ), ); }, + removeIssueLabel(issue, removeLabel) { + if (removeLabel) { + issue.labels = issue.labels.filter(label => removeLabel.id !== label.id); + } + }, + + addIssueAssignee(issue, assignee) { + if (!issue.findAssignee(assignee)) { + issue.assignees.push(new ListAssignee(assignee)); + } + }, + + removeIssueLabels(issue, labels) { + labels.forEach(issue.removeLabel.bind(issue)); + }, bulkUpdate(issueIds, extraData = {}) { const data = { @@ -682,10 +780,49 @@ const boardsStore = { ...this.multiSelect.list.slice(index + 1), ]; }, + removeIssueAssignee(issue, removeAssignee) { + if (removeAssignee) { + issue.assignees = issue.assignees.filter(assignee => assignee.id !== removeAssignee.id); + } + }, + + findIssueAssignee(issue, findAssignee) { + return issue.assignees.find(assignee => assignee.id === findAssignee.id); + }, clearMultiSelect() { this.multiSelect.list = []; }, + + removeAllIssueAssignees(issue) { + issue.assignees = []; + }, + + addIssueMilestone(issue, milestone) { + const miletoneId = issue.milestone ? issue.milestone.id : null; + if (IS_EE && milestone.id !== miletoneId) { + issue.milestone = new ListMilestone(milestone); + } + }, + + setIssueLoadingState(issue, key, value) { + issue.isLoading[key] = value; + }, + + updateIssueData(issue, newData) { + Object.assign(issue, newData); + }, + + setIssueFetchingState(issue, key, value) { + issue.isFetching[key] = value; + }, + + removeIssueMilestone(issue, removeMilestone) { + if (IS_EE && removeMilestone && removeMilestone.id === issue.milestone.id) { + issue.milestone = {}; + } + }, + refreshIssueData(issue, obj) { issue.id = obj.id; issue.iid = obj.iid; @@ -718,6 +855,11 @@ const boardsStore = { issue.assignees = obj.assignees.map(a => new ListAssignee(a)); } }, + addIssueLabel(issue, label) { + if (!issue.findLabel(label)) { + issue.labels.push(new ListLabel(label)); + } + }, updateIssue(issue) { const data = { issue: { diff --git a/app/assets/javascripts/boards/stores/mutations.js b/app/assets/javascripts/boards/stores/mutations.js index 7a287400265..e4459cdcc07 100644 --- a/app/assets/javascripts/boards/stores/mutations.js +++ b/app/assets/javascripts/boards/stores/mutations.js @@ -6,8 +6,8 @@ const notImplemented = () => { }; export default { - [mutationTypes.SET_ENDPOINTS]: () => { - notImplemented(); + [mutationTypes.SET_ENDPOINTS]: (state, endpoints) => { + state.endpoints = endpoints; }, [mutationTypes.REQUEST_ADD_LIST]: () => { diff --git a/app/assets/javascripts/boards/stores/state.js b/app/assets/javascripts/boards/stores/state.js index 10aac2f649e..aca93c4d7c6 100644 --- a/app/assets/javascripts/boards/stores/state.js +++ b/app/assets/javascripts/boards/stores/state.js @@ -1,6 +1,7 @@ import { inactiveListId } from '~/boards/constants'; export default () => ({ + endpoints: {}, isShowingLabels: true, activeListId: inactiveListId, }); diff --git a/app/assets/javascripts/boards/toggle_epics_swimlanes.js b/app/assets/javascripts/boards/toggle_epics_swimlanes.js new file mode 100644 index 00000000000..2d1ec238274 --- /dev/null +++ b/app/assets/javascripts/boards/toggle_epics_swimlanes.js @@ -0,0 +1 @@ +export default () => {}; |