Skip to content

G
gitlab-ce
Commit 3ef9daf2 authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Kushal Pandya
Browse files
Options

Extract BoardScope component

parent 70088db2
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 121 deletions
ee/app/assets/javascripts/boards/components/board_form.vue
View file @ 3ef9daf2
<script>
/* global ListLabel */
import Flash from '~/flash';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import BoardLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
import BoardScope from './board_scope.vue';
import { visitUrl } from '~/lib/utils/url_utility';
import BoardMilestoneSelect from './milestone_select.vue';
import BoardWeightSelect from './weight_select.vue';
import AssigneeSelect from './assignee_select.vue';
import boardsStore from '~/boards/stores/boards_store';
const boardDefaults = {
......@@ -22,10 +17,7 @@ const boardDefaults = {
export default {
components: {
AssigneeSelect,
BoardLabelsSelect,
BoardMilestoneSelect,
BoardWeightSelect,
BoardScope,
DeprecatedModal,
},
props: {
......@@ -75,12 +67,8 @@ export default {
data() {
return {
board: { ...boardDefaults, ...this.currentBoard },
expanded: false,
issue: {},
currentBoard: boardsStore.state.currentBoard,
currentPage: boardsStore.state.currentPage,
milestones: [],
milestoneDropdownOpen: false,
isLoading: false,
};
},
......@@ -127,12 +115,6 @@ export default {
}
return 'Edit board';
},
expandButtonText() {
return this.expanded ? 'Collapse' : 'Expand';
},
collapseScope() {
return this.isNewForm;
},
readonly() {
return !this.canAdminBoard;
},
......@@ -147,24 +129,6 @@ export default {
}
},
methods: {
handleLabelClick(label) {
if (label.isAny) {
this.board.labels = [];
} else if (!this.board.labels.find(l => l.id === label.id)) {
this.board.labels.push(
new ListLabel({
id: label.id,
title: label.title,
color: label.color[0],
textColor: label.text_color,
}),
);
} else {
let { labels } = this.board;
labels = labels.filter(selected => selected.id !== label.id);
this.board.labels = labels;
}
},
submit() {
if (this.board.name.length === 0) return;
this.isLoading = true;
......@@ -233,56 +197,20 @@ export default {
@keyup.enter="submit"
/>
</div>
<div v-if="scopedIssueBoardFeatureEnabled">
<div v-if="canAdminBoard" class="media append-bottom-10">
<label class="form-section-title label-bold media-body"> Board scope </label>
<button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded">
{{ expandButtonText }}
</button>
</div>
<p class="text-secondary append-bottom-10">
Board scope affects which issues are displayed for anyone who visits this board
</p>
<div v-if="!collapseScope || expanded">
<board-milestone-select
:board="board"
:milestone-path="milestonePath"
:can-edit="canAdminBoard"
/>
<board-labels-select
:context="board"
:labels-path="labelsPath"
:can-edit="canAdminBoard"
:scoped-labels-documentation-link="scopedLabelsDocumentationLink"
:enable-scoped-labels="enableScopedLabels"
ability-name="issue"
@onLabelClick="handleLabelClick"
>
{{ __('Any Label') }}
</board-labels-select>
<assignee-select
:board="board"
:selected="board.assignee"
:can-edit="canAdminBoard"
:project-id="projectId"
:group-id="groupId"
any-user-text="Any assignee"
field-name="assignee_id"
label="Assignee"
placeholder-text="Select assignee"
wrapper-class="assignee"
/>
<board-weight-select
v-model="board.weight"
:board="board"
:weights="weights"
:can-edit="canAdminBoard"
/>
</div>
</div>
<board-scope
v-if="scopedIssueBoardFeatureEnabled"
:collapse-scope="isNewForm"
:board="board"
:can-admin-board="canAdminBoard"
:milestone-path="milestonePath"
:labels-path="labelsPath"
:scoped-labels-documentation-link="scopedLabelsDocumentationLink"
:enable-scoped-labels="enableScopedLabels"
:project-id="projectId"
:group-id="groupId"
:weights="weights"
/>
</form>
</template>
</deprecated-modal>
......
ee/app/assets/javascripts/boards/components/board_scope.vue 0 → 100644
View file @ 3ef9daf2
<script>
import ListLabel from '~/boards/models/label';
import BoardLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
import BoardMilestoneSelect from './milestone_select.vue';
import BoardWeightSelect from './weight_select.vue';
import AssigneeSelect from './assignee_select.vue';
export default {
components: {
AssigneeSelect,
BoardLabelsSelect,
BoardMilestoneSelect,
BoardWeightSelect,
},
props: {
collapseScope: {
type: Boolean,
required: true,
},
canAdminBoard: {
type: Boolean,
required: true,
},
board: {
type: Object,
required: true,
},
milestonePath: {
type: String,
required: true,
},
labelsPath: {
type: String,
required: true,
},
scopedLabelsDocumentationLink: {
type: String,
required: false,
default: '#',
},
enableScopedLabels: {
type: Boolean,
required: false,
default: false,
},
projectId: {
type: Number,
required: false,
default: 0,
},
groupId: {
type: Number,
required: false,
default: 0,
},
weights: {
type: Array,
required: false,
default: () => [],
},
},
data() {
return {
expanded: false,
};
},
computed: {
expandButtonText() {
return this.expanded ? 'Collapse' : 'Expand';
},
},
methods: {
handleLabelClick(label) {
if (label.isAny) {
this.board.labels = [];
} else if (!this.board.labels.find(l => l.id === label.id)) {
this.board.labels.push(
new ListLabel({
id: label.id,
title: label.title,
color: label.color[0],
textColor: label.text_color,
}),
);
} else {
let { labels } = this.board;
labels = labels.filter(selected => selected.id !== label.id);
this.board.labels = labels;
}
},
},
};
</script>
<template>
<div>
<div v-if="canAdminBoard" class="media append-bottom-10">
<label class="form-section-title label-bold media-body"> Board scope </label>
<button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded">
{{ expandButtonText }}
</button>
</div>
<p class="text-secondary append-bottom-10">
Board scope affects which issues are displayed for anyone who visits this board
</p>
<div v-if="!collapseScope || expanded">
<board-milestone-select
:board="board"
:milestone-path="milestonePath"
:can-edit="canAdminBoard"
/>
<board-labels-select
:context="board"
:labels-path="labelsPath"
:can-edit="canAdminBoard"
:scoped-labels-documentation-link="scopedLabelsDocumentationLink"
:enable-scoped-labels="enableScopedLabels"
ability-name="issue"
@onLabelClick="handleLabelClick"
>
{{ __('Any Label') }}
</board-labels-select>
<assignee-select
:board="board"
:selected="board.assignee"
:can-edit="canAdminBoard"
:project-id="projectId"
:group-id="groupId"
any-user-text="Any assignee"
field-name="assignee_id"
label="Assignee"
placeholder-text="Select assignee"
wrapper-class="assignee"
/>
<board-weight-select
v-model="board.weight"
:board="board"
:weights="weights"
:can-edit="canAdminBoard"
/>
</div>
</div>
</template>
ee/spec/frontend/boards/components/board_scope_spec.js 0 → 100644
View file @ 3ef9daf2
import { createLocalVue, mount } from '@vue/test-utils';
import BoardScope from 'ee/boards/components/board_scope.vue';
import { TEST_HOST } from 'helpers/test_constants';
describe('BoardScope', () => {
let wrapper;
let vm;
beforeEach(() => {
const localVue = createLocalVue();
const propsData = {
collapseScope: false,
canAdminBoard: false,
board: {
labels: [],
assignee: {},
},
milestonePath: `${TEST_HOST}/milestones`,
labelsPath: `${TEST_HOST}/labels`,
};
wrapper = mount(BoardScope, {
propsData,
localVue,
sync: false,
});
({ vm } = wrapper);
});
afterEach(() => {
wrapper.destroy();
});
describe('methods', () => {
describe('handleLabelClick', () => {
const label = {
id: 1,
title: 'Foo',
color: ['#BADA55'],
text_color: '#FFFFFF',
};
it('initializes `board.labels` as empty array when `label.isAny` is `true`', () => {
const labelIsAny = { isAny: true };
vm.handleLabelClick(labelIsAny);
expect(Array.isArray(vm.board.labels)).toBe(true);
expect(vm.board.labels.length).toBe(0);
});
it('adds provided `label` to board.labels', () => {
vm.handleLabelClick(label);
expect(vm.board.labels.length).toBe(1);
expect(vm.board.labels[0].id).toBe(label.id);
vm.handleLabelClick(label);
});
});
});
});
ee/spec/javascripts/boards/components/board_form_spec.js
View file @ 3ef9daf2
......@@ -24,40 +24,6 @@ describe('board_form.vue', () => {
});
describe('methods', () => {
describe('handleLabelClick', () => {
const label = {
id: 1,
title: 'Foo',
color: ['#BADA55'],
text_color: '#FFFFFF',
};
it('initializes `board.labels` as empty array when `label.isAny` is `true`', () => {
const labelIsAny = { isAny: true };
vm.handleLabelClick(labelIsAny);
expect(Array.isArray(vm.board.labels)).toBe(true);
expect(vm.board.labels.length).toBe(0);
});
it('adds provided `label` to board.labels', () => {
vm.handleLabelClick(label);
expect(vm.board.labels.length).toBe(1);
expect(vm.board.labels[0].id).toBe(label.id);
vm.handleLabelClick(label);
});
it('filters board.labels to exclude provided `label` if it is already present in `board.labels`', () => {
const label2 = Object.assign({}, label, { id: 2 });
vm.handleLabelClick(label);
vm.handleLabelClick(label2);
expect(vm.board.labels.length).toBe(1);
expect(vm.board.labels[0].id).toBe(label2.id);
});
});
describe('cancel', () => {
it('resets currentPage', done => {
vm.cancel();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7