diff options
author | George Tsiolis <tsiolis.g@gmail.com> | 2018-06-21 15:55:17 +0300 |
---|---|---|
committer | George Tsiolis <tsiolis.g@gmail.com> | 2018-06-21 16:37:30 +0300 |
commit | 77723e2f3ac230e806af315c45ebecb8ba23d12d (patch) | |
tree | a926c27d865121d4f88e6198186b6bd6798999e9 /app/assets/javascripts/boards/components/modal/empty_state.vue | |
parent | 7c11ed8c916a10f6d9c32635986008b48410531f (diff) |
Move boards modal EmptyState vue component
Diffstat (limited to 'app/assets/javascripts/boards/components/modal/empty_state.vue')
-rw-r--r-- | app/assets/javascripts/boards/components/modal/empty_state.vue | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue new file mode 100644 index 00000000000..dbd69f84526 --- /dev/null +++ b/app/assets/javascripts/boards/components/modal/empty_state.vue @@ -0,0 +1,73 @@ +<script> +import ModalStore from '../../stores/modal_store'; +import modalMixin from '../../mixins/modal_mixins'; + +export default { + mixins: [modalMixin], + props: { + newIssuePath: { + type: String, + required: true, + }, + emptyStateSvg: { + type: String, + required: true, + }, + }, + data() { + return ModalStore.store; + }, + 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>Open issues</strong> and select some issues + to add to your board. + `; + } + + return obj; + }, + }, +}; +</script> + +<template> + <section class="empty-state"> + <div class="row"> + <div class="col-12 col-md-6 order-md-last"> + <aside class="svg-content"><img :src="emptyStateSvg"/></aside> + </div> + <div class="col-12 col-md-6 order-md-first"> + <div class="text-content"> + <h4>{{ contents.title }}</h4> + <p v-html="contents.content"></p> + <a + v-if="activeTab === 'all'" + :href="newIssuePath" + class="btn btn-success btn-inverted" + > + New issue + </a> + <button + v-if="activeTab === 'selected'" + class="btn btn-default" + type="button" + @click="changeTab('all')" + > + Open issues + </button> + </div> + </div> + </div> + </section> +</template> |