kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

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

Issue boards blank state template in JS file

See merge request !9959
This commit is contained in:
Filipa Lacerda 2017-03-17 14:45:01 +00:00
parent 357db226a0 de93054e78
commit b29a8e3c2e
5 changed files with 172 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/boards/components/board.js
View File

@ -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,

119
app/assets/javascripts/boards/components/board_blank_state.js
View File

@ -1,53 +1,84 @@
/* eslint-disable space-before-function-paren, comma-dangle */
/* global Vue */
/* global ListLabel */
/* global Cookies */
const Store = gl.issueBoards.BoardsStore;
(() => {
const Store = gl.issueBoards.BoardsStore;
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' }),
],
};
},
methods: {
addDefaultLists() {
this.clearBlankState();
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.BoardBlankState = Vue.extend({
data () {
return {
predefinedLabels: [
new ListLabel({ title: 'To Do', color: '#F0AD4E' }),
new ListLabel({ title: 'Doing', color: '#5CB85C' })
]
};
},
methods: {
addDefaultLists () {
this.clearBlankState();
this.predefinedLabels.forEach((label, i) => {
Store.addList({
this.predefinedLabels.forEach((label, i) => {
Store.addList({
title: label.title,
position: i,
list_type: 'label',
label: {
title: label.title,
position: i,
list_type: 'label',
label: {
title: label.title,
color: label.color
}
});
color: label.color,
},
});
});
Store.state.lists = _.sortBy(Store.state.lists, 'position');
Store.state.lists = _.sortBy(Store.state.lists, 'position');
// Save the labels
gl.boardService.generateDefaultLists()
.then((resp) => {
resp.json().forEach((listObj) => {
const list = Store.findList('title', listObj.title);
// Save the labels
gl.boardService.generateDefaultLists()
.then((resp) => {
resp.json().forEach((listObj) => {
const list = Store.findList('title', listObj.title);
list.id = listObj.id;
list.label.id = listObj.label.id;
list.getIssues();
});
list.id = listObj.id;
list.label.id = listObj.label.id;
list.getIssues();
});
},
clearBlankState: Store.removeBlankState.bind(Store)
}
});
})();
})
.catch(() => {
Store.removeList(undefined, 'label');
Cookies.remove('issue_board_welcome_hidden', {
path: '',
});
Store.addBlankState();
});
},
clearBlankState: Store.removeBlankState.bind(Store),
},
};

15
app/views/projects/boards/components/_blank_state.html.haml
View File

@ -1,15 +0,0 @@
%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

2
app/views/projects/boards/components/_board.html.haml
View File

@ -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"' }

93
spec/javascripts/boards/board_blank_state_spec.js Normal file
View File

@ -0,0 +1,93 @@
/* 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();
});
});
});