Skip to content

G
gitlab-ce
Commit 88acf814 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Remove in favor of shared LabelsSelectComponent

parent 4e366502
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 306 deletions
ee/app/assets/javascripts/boards/components/labels_select.vue deleted 100644 → 0
View file @ 4e366502
<script>
/* global ListLabel */
import LabelsSelect from '~/labels_select';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
export default {
components: {
loadingIcon,
},
props: {
board: {
type: Object,
required: true,
},
labelsPath: {
type: String,
required: true,
},
canEdit: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
labelIds() {
return this.board.labels.map(label => label.id);
},
isEmpty() {
return this.board.labels.length === 0;
},
},
mounted() {
this.labelsDropdown = new LabelsSelect(this.$refs.dropdownButton, {
handleClick: this.handleClick,
});
},
methods: {
labelStyle(label) {
return {
color: label.textColor,
backgroundColor: label.color,
};
},
handleClick(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 = labels.filter(selected => selected.id !== label.id);
this.board.labels = labels;
}
},
},
};
</script>
<template>
<div class="block labels">
<div class="title append-bottom-10">
Labels
<button
v-if="canEdit"
type="button"
class="edit-link btn btn-blank pull-right"
>
Edit
</button>
</div>
<div class="value issuable-show-labels">
<span
v-if="isEmpty"
class="text-secondary"
>
Any Label
</span>
<a
v-else
href="#"
v-for="label in board.labels"
:key="label.id"
>
<span
class="label color-label"
:style="labelStyle(label)"
>
{{ label.title }}
</span>
</a>
</div>
<div
class="selectbox"
style="display: none"
>
<input
type="hidden"
name="label_id[]"
v-for="labelId in labelIds"
:key="labelId"
:value="labelId"
/>
<div class="dropdown">
<button
ref="dropdownButton"
:data-labels="labelsPath"
class="dropdown-menu-toggle wide js-label-select
js-multiselect js-extra-options js-board-config-modal"
data-field-name="label_id[]"
:data-show-any="true"
data-toggle="dropdown"
type="button"
>
<span class="dropdown-toggle-text">
Label
</span>
<i
aria-hidden="true"
class="fa fa-chevron-down"
data-hidden="true"
>
</i>
</button>
<div
class="dropdown-menu dropdown-select
dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable"
>
<div class="dropdown-input">
<input
autocomplete="off"
class="dropdown-input-field"
placeholder="Search"
type="search"
/>
<i
aria-hidden="true"
class="fa fa-search dropdown-input-search"
data-hidden="true"
>
</i>
<i
aria-hidden="true"
class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
data-hidden="true"
role="button"
>
</i>
</div>
<div class="dropdown-content"></div>
<div class="dropdown-loading">
<loading-icon />
</div>
</div>
</div>
</div>
</div>
</template>
spec/javascripts/boards/components/labels_select_spec.js deleted 100644 → 0
View file @ 4e366502
/* global BoardService */
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import '~/labels_select';
import LabelsSelect from 'ee/boards/components/labels_select.vue';
import IssuableContext from '~/issuable_context';
let vm;
function selectedText() {
return vm.$el.querySelector('.value').innerText.trim();
}
function activeDropdownItem(index) {
const items = document.querySelectorAll('.is-active');
if (!items[index]) return '';
return items[index].innerText.trim();
}
const label = {
id: '1',
title: 'Testing',
color: 'red',
description: 'testing;',
};
const label2 = {
id: 2,
title: 'Still Testing',
color: 'red',
description: 'testing;',
};
describe('LabelsSelect', () => {
let mock;
beforeEach((done) => {
setFixtures('<div class="test-container"></div>');
mock = new MockAdapter(axios);
mock.onGet('/some/path').reply(200, [
label,
label2,
]);
// eslint-disable-next-line no-new
new IssuableContext();
const propsData = {
board: {
labels: [],
},
canEdit: true,
labelsPath: '/some/path',
};
const Component = Vue.extend(LabelsSelect);
vm = new Component({
propsData,
}).$mount('.test-container');
Vue.nextTick(done);
});
afterEach(() => {
mock.restore();
});
describe('canEdit', () => {
it('hides Edit button', (done) => {
vm.canEdit = false;
Vue.nextTick(() => {
expect(vm.$el.querySelector('.edit-link')).toBeFalsy();
done();
});
});
it('shows Edit button if true', (done) => {
vm.canEdit = true;
Vue.nextTick(() => {
expect(vm.$el.querySelector('.edit-link')).toBeTruthy();
done();
});
});
});
describe('selected', () => {
it('shows Any Label', () => {
expect(selectedText()).toContain('Any Label');
});
it('shows single label', (done) => {
vm.board.labels = [label];
Vue.nextTick(() => {
expect(selectedText()).toContain(label.title);
done();
});
});
it('shows multiple labels', (done) => {
vm.board.labels = [label, label2];
Vue.nextTick(() => {
expect(selectedText()).toContain(label.title);
expect(selectedText()).toContain(label2.title);
done();
});
});
});
describe('clicking dropdown items', () => {
it('sets No labels', (done) => {
vm.board.labels = [label];
vm.$el.querySelector('.edit-link').click();
setTimeout(() => {
vm.$el.querySelectorAll('li a')[0].click();
});
setTimeout(() => {
expect(activeDropdownItem(0)).toEqual('Any Label');
expect(vm.board.labels).toEqual([]);
done();
});
});
it('sets value', (done) => {
vm.$el.querySelector('.edit-link').click();
setTimeout(() => {
vm.$el.querySelectorAll('li a')[1].click();
});
setTimeout(() => {
expect(activeDropdownItem(0)).toEqual(label.title);
expect(vm.board.labels[0].title).toEqual(label.title);
done();
});
});
});
});
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