Commit ff98a743 authored by Phil Hughes's avatar Phil Hughes Committed by Fatih Acet

Added empty state

parent d9894a2f
/* global Vue */
(() => {
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.ModalEmptyState = Vue.extend({
data() {
return ModalStore.store;
},
props: [
'image', 'newIssuePath',
],
computed: {
contents() {
const obj = {
title: 'You haven\'t added any issues to your project yet',
content: `
An issue can be a bug, a todo or a feature request that needs to be
discussed in a project. Besides, issues are searchable and filterable.
`,
};
if (this.activeTab === 'selected') {
obj.title = 'You haven\'t selected any issues yet';
obj.content = `
Go back to <strong>All issues</strong> and select some issues
to add to your board.
`;
}
return obj;
}
},
template: `
<div class="empty-state">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<div class="svg-content" v-html="image"></div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<div class="text-content">
<h4>{{ contents.title }}</h4>
<p v-html="contents.content"></p>
<a
:href="newIssuePath"
class="btn btn-success btn-inverted"
v-if="activeTab === 'all'">
Create issue
</a>
<button
type="button"
class="btn btn-default"
@click="activeTab = 'all'"
v-if="activeTab === 'selected'">
All issues
</button>
</div>
</div>
</div>
</div>
`,
});
})();
......@@ -44,7 +44,8 @@
'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
},
template: `
<footer class="form-actions add-issues-footer">
<footer
class="form-actions add-issues-footer">
<div class="pull-left">
<button
class="btn btn-success"
......
......@@ -40,10 +40,10 @@
</button>
</h2>
</header>
<modal-tabs v-if="!loading"></modal-tabs>
<modal-tabs v-if="!loading && issues.length > 0"></modal-tabs>
<div
class="add-issues-search prepend-top-10 append-bottom-10"
v-if="activeTab == 'all' && !loading">
class="add-issues-search append-bottom-10"
v-if="activeTab == 'all' && !loading && issues.length > 0">
<input
placeholder="Search issues..."
class="form-control"
......
......@@ -2,6 +2,7 @@
//= require ./header
//= require ./list
//= require ./footer
//= require ./empty_state
(() => {
const ModalStore = gl.issueBoards.ModalStore;
......@@ -9,6 +10,9 @@
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.IssuesModal = Vue.extend({
props: [
'blankStateImage', 'newIssuePath',
],
data() {
return ModalStore.store;
},
......@@ -48,10 +52,20 @@
});
},
},
computed: {
showList() {
if (this.activeTab === 'selected') {
return this.selectedIssues.length > 0;
}
return this.issues.length > 0;
},
},
components: {
'modal-header': gl.issueBoards.IssuesModalHeader,
'modal-list': gl.issueBoards.ModalList,
'modal-footer': gl.issueBoards.ModalFooter,
'empty-state': gl.issueBoards.ModalEmptyState,
},
template: `
<div
......@@ -59,7 +73,11 @@
v-if="showAddIssuesModal">
<div class="add-issues-container">
<modal-header></modal-header>
<modal-list v-if="!loading"></modal-list>
<modal-list v-if="!loading && showList"></modal-list>
<empty-state
v-if="(!loading && issues.length === 0) || (activeTab === 'selected' && selectedIssues.length === 0)"
:image="blankStateImage"
:new-issue-path="newIssuePath"></empty-state>
<section
class="add-issues-list text-center"
v-if="loading">
......
......@@ -66,8 +66,7 @@
template: `
<div
class="add-issues-list add-issues-list-columns"
ref="list"
v-show="!loading">
ref="list">
<div
v-for="issue in loopIssues"
v-if="showIssue(issue)"
......
......@@ -18,7 +18,7 @@
this.activeTab = 'all';
},
template: `
<div class="top-area prepend-top-10">
<div class="top-area prepend-top-10 append-bottom-10">
<ul class="nav-links issues-state-filters">
<li :class="{ 'active': activeTab == 'all' }">
<a
......
......@@ -378,6 +378,18 @@
background-color: $white-light;
border-radius: $border-radius-default;
box-shadow: 0 2px 12px rgba($black, .5);
.empty-state {
display: flex;
flex: 1;
margin-top: 0;
> .row {
width: 100%;
margin-top: auto;
margin-bottom: auto;
}
}
}
.add-issues-header {
......
......@@ -26,4 +26,5 @@
":issue-link-base" => "issueLinkBase",
":key" => "_uid" }
= render "projects/boards/components/sidebar"
%board-add-issues-modal
%board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
"new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project) }
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