Commit b29a8e3c authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'boards-blank-state-template-in-js' into 'master'

Issue boards blank state template in JS file

See merge request !9959
parents 357db226 de93054e
......@@ -2,7 +2,8 @@
/* global Vue */
/* global Sortable */
require('./board_blank_state');
import boardBlankState from './board_blank_state';
require('./board_delete');
require('./board_list');
......@@ -17,7 +18,7 @@ require('./board_list');
components: {
'board-list': gl.issueBoards.BoardList,
'board-delete': gl.issueBoards.BoardDelete,
'board-blank-state': gl.issueBoards.BoardBlankState
boardBlankState,
},
props: {
list: Object,
......
/* eslint-disable space-before-function-paren, comma-dangle */
/* global Vue */
/* global ListLabel */
/* global Cookies */
const Store = gl.issueBoards.BoardsStore;
(() => {
const Store = gl.issueBoards.BoardsStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardBlankState = Vue.extend({
data () {
export default {
template: `
<div class="board-blank-state">
<p>
Add the following default lists to your Issue Board with one click:
</p>
<ul class="board-blank-state-list">
<li v-for="label in predefinedLabels">
<span
class="label-color"
:style="{ backgroundColor: label.color }">
</span>
{{ label.title }}
</li>
</ul>
<p>
Starting out with the default set of lists will get you right on the way to making the most of your board.
</p>
<button
class="btn btn-create btn-inverted btn-block"
type="button"
@click.stop="addDefaultLists">
Add default lists
</button>
<button
class="btn btn-default btn-block"
type="button"
@click.stop="clearBlankState">
Nevermind, I'll use my own
</button>
</div>
`,
data() {
return {
predefinedLabels: [
new ListLabel({ title: 'To Do', color: '#F0AD4E' }),
new ListLabel({ title: 'Doing', color: '#5CB85C' })
]
new ListLabel({ title: 'Doing', color: '#5CB85C' }),
],
};
},
methods: {
addDefaultLists () {
addDefaultLists() {
this.clearBlankState();
this.predefinedLabels.forEach((label, i) => {
......@@ -28,8 +53,8 @@
list_type: 'label',
label: {
title: label.title,
color: label.color
}
color: label.color,
},
});
});
......@@ -45,9 +70,15 @@
list.label.id = listObj.label.id;
list.getIssues();
});
})
.catch(() => {
Store.removeList(undefined, 'label');
Cookies.remove('issue_board_welcome_hidden', {
path: '',
});
},
clearBlankState: Store.removeBlankState.bind(Store)
}
Store.addBlankState();
});
})();
},
clearBlankState: Store.removeBlankState.bind(Store),
},
};
%board-blank-state{ "inline-template" => true,
"v-if" => 'list.id == "blank"' }
.board-blank-state
%p
Add the following default lists to your Issue Board with one click:
%ul.board-blank-state-list
%li{ "v-for" => "label in predefinedLabels" }
%span.label-color{ ":style" => "{ backgroundColor: label.color } " }
{{ label.title }}
%p
Starting out with the default set of lists will get you right on the way to making the most of your board.
%button.btn.btn-create.btn-inverted.btn-block{ type: "button", "@click.stop" => "addDefaultLists" }
Add default lists
%button.btn.btn-default.btn-block{ type: "button", "@click.stop" => "clearBlankState" }
Nevermind, I'll use my own
......@@ -32,4 +32,4 @@
":root-path" => "rootPath",
"ref" => "board-list" }
- if can?(current_user, :admin_list, @project)
= render "projects/boards/components/blank_state"
%board-blank-state{ "v-if" => 'list.id == "blank"' }
/* global BoardService */
import Vue from 'vue';
import '~/boards/stores/boards_store';
import boardBlankState from '~/boards/components/board_blank_state';
import './mock_data';
describe('Boards blank state', () => {
let vm;
let fail = false;
beforeEach((done) => {
const Comp = Vue.extend(boardBlankState);
gl.issueBoards.BoardsStore.create();
gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
spyOn(gl.boardService, 'generateDefaultLists').and.callFake(() => new Promise((resolve, reject) => {
if (fail) {
reject();
} else {
resolve({
json() {
return [{
id: 1,
title: 'To Do',
label: { id: 1 },
}, {
id: 2,
title: 'Doing',
label: { id: 2 },
}];
},
});
}
}));
vm = new Comp();
setTimeout(() => {
vm.$mount();
done();
});
});
it('renders pre-defined labels', () => {
expect(
vm.$el.querySelectorAll('.board-blank-state-list li').length,
).toBe(2);
expect(
vm.$el.querySelectorAll('.board-blank-state-list li')[0].textContent.trim(),
).toEqual('To Do');
expect(
vm.$el.querySelectorAll('.board-blank-state-list li')[1].textContent.trim(),
).toEqual('Doing');
});
it('clears blank state', (done) => {
vm.$el.querySelector('.btn-default').click();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.welcomeIsHidden()).toBeTruthy();
done();
});
});
it('creates pre-defined labels', (done) => {
vm.$el.querySelector('.btn-create').click();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
expect(gl.issueBoards.BoardsStore.state.lists[0].title).toEqual('To Do');
expect(gl.issueBoards.BoardsStore.state.lists[1].title).toEqual('Doing');
done();
});
});
it('resets the store if request fails', (done) => {
fail = true;
vm.$el.querySelector('.btn-create').click();
setTimeout(() => {
expect(gl.issueBoards.BoardsStore.welcomeIsHidden()).toBeFalsy();
expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
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