Commit 52440755 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'move-board-blank-state-vue-component' into 'master'

Move BoardBlankState vue component

See merge request gitlab-org/gitlab-ce!17666
parents 63ab7c0f 7009ec65
...@@ -5,7 +5,7 @@ import Sortable from 'vendor/Sortable'; ...@@ -5,7 +5,7 @@ import Sortable from 'vendor/Sortable';
import Vue from 'vue'; import Vue from 'vue';
import AccessorUtilities from '../../lib/utils/accessor'; import AccessorUtilities from '../../lib/utils/accessor';
import boardList from './board_list.vue'; import boardList from './board_list.vue';
import boardBlankState from './board_blank_state'; import BoardBlankState from './board_blank_state.vue';
import './board_delete'; import './board_delete';
const Store = gl.issueBoards.BoardsStore; const Store = gl.issueBoards.BoardsStore;
...@@ -18,7 +18,7 @@ gl.issueBoards.Board = Vue.extend({ ...@@ -18,7 +18,7 @@ gl.issueBoards.Board = Vue.extend({
components: { components: {
boardList, boardList,
'board-delete': gl.issueBoards.BoardDelete, 'board-delete': gl.issueBoards.BoardDelete,
boardBlankState, BoardBlankState,
}, },
props: { props: {
list: Object, list: Object,
......
<script>
/* global ListLabel */ /* global ListLabel */
import _ from 'underscore'; import _ from 'underscore';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
const Store = gl.issueBoards.BoardsStore; const Store = gl.issueBoards.BoardsStore;
export default { 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() { data() {
return { return {
predefinedLabels: [ predefinedLabels: [
...@@ -89,3 +58,41 @@ export default { ...@@ -89,3 +58,41 @@ export default {
clearBlankState: Store.removeBlankState.bind(Store), clearBlankState: Store.removeBlankState.bind(Store),
}, },
}; };
</script>
<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, index) in predefinedLabels"
:key="index"
>
<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>
</template>
---
title: Move BoardBlankState vue component
merge_request: 17666
author: George Tsiolis
type: performance
/* global BoardService */ /* global BoardService */
import Vue from 'vue'; import Vue from 'vue';
import '~/boards/stores/boards_store'; import '~/boards/stores/boards_store';
import boardBlankState from '~/boards/components/board_blank_state'; import BoardBlankState from '~/boards/components/board_blank_state.vue';
import { mockBoardService } from './mock_data'; import { mockBoardService } from './mock_data';
describe('Boards blank state', () => { describe('Boards blank state', () => {
...@@ -9,7 +9,7 @@ describe('Boards blank state', () => { ...@@ -9,7 +9,7 @@ describe('Boards blank state', () => {
let fail = false; let fail = false;
beforeEach((done) => { beforeEach((done) => {
const Comp = Vue.extend(boardBlankState); const Comp = Vue.extend(BoardBlankState);
gl.issueBoards.BoardsStore.create(); gl.issueBoards.BoardsStore.create();
gl.boardService = mockBoardService(); gl.boardService = mockBoardService();
......
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