Commit f1a70ce7 authored by Filipa Lacerda's avatar Filipa Lacerda

Moves list_dropdown and footer components to a .vue file

parent 510e45fd
import Vue from 'vue'; <script>
import Flash from '../../../flash'; import Flash from '../../../flash';
import { __ } from '../../../locale'; import { __ } from '../../../locale';
import './lists_dropdown'; import ListsDropdown from './lists_dropdown.vue';
import { pluralize } from '../../../lib/utils/text_utility'; import { pluralize } from '../../../lib/utils/text_utility';
import ModalStore from '../../stores/modal_store'; import ModalStore from '../../stores/modal_store';
import modalMixin from '../../mixins/modal_mixins'; import modalMixin from '../../mixins/modal_mixins';
gl.issueBoards.ModalFooter = Vue.extend({ export default {
components: { components: {
'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown, ListsDropdown,
}, },
mixins: [modalMixin], mixins: [modalMixin],
data() { data() {
...@@ -55,28 +55,32 @@ gl.issueBoards.ModalFooter = Vue.extend({ ...@@ -55,28 +55,32 @@ gl.issueBoards.ModalFooter = Vue.extend({
this.toggleModal(false); this.toggleModal(false);
}, },
}, },
template: ` };
</script>
<template>
<footer <footer
class="form-actions add-issues-footer"> class="form-actions add-issues-footer"
>
<div class="float-left"> <div class="float-left">
<button <button
:disabled="submitDisabled"
class="btn btn-success" class="btn btn-success"
type="button" type="button"
:disabled="submitDisabled" @click="addIssues"
@click="addIssues"> >
{{ submitText }} {{ submitText }}
</button> </button>
<span class="inline add-issues-footer-to-list"> <span class="inline add-issues-footer-to-list">
to list to list
</span> </span>
<lists-dropdown></lists-dropdown> <lists-dropdown/>
</div> </div>
<button <button
class="btn btn-default float-right" class="btn btn-default float-right"
type="button" type="button"
@click="toggleModal(false)"> @click="toggleModal(false)"
>
Cancel Cancel
</button> </button>
</footer> </footer>
`, </template>
});
...@@ -5,7 +5,7 @@ import queryData from '~/boards/utils/query_data'; ...@@ -5,7 +5,7 @@ import queryData from '~/boards/utils/query_data';
import loadingIcon from '~/vue_shared/components/loading_icon.vue'; import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import './header'; import './header';
import './list'; import './list';
import './footer'; import ModalFooter from './footer.vue';
import EmptyState from './empty_state.vue'; import EmptyState from './empty_state.vue';
import ModalStore from '../../stores/modal_store'; import ModalStore from '../../stores/modal_store';
...@@ -14,7 +14,7 @@ gl.issueBoards.IssuesModal = Vue.extend({ ...@@ -14,7 +14,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
EmptyState, EmptyState,
'modal-header': gl.issueBoards.ModalHeader, 'modal-header': gl.issueBoards.ModalHeader,
'modal-list': gl.issueBoards.ModalList, 'modal-list': gl.issueBoards.ModalList,
'modal-footer': gl.issueBoards.ModalFooter, ModalFooter,
loadingIcon, loadingIcon,
}, },
props: { props: {
......
import Vue from 'vue';
import ModalStore from '../../stores/modal_store';
gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
data() {
return {
modal: ModalStore.store,
state: gl.issueBoards.BoardsStore.state,
};
},
computed: {
selected() {
return this.modal.selectedList || this.state.lists[1];
},
},
destroyed() {
this.modal.selectedList = null;
},
template: `
<div class="dropdown inline">
<button
class="dropdown-menu-toggle"
type="button"
data-toggle="dropdown"
aria-expanded="false">
<span
class="dropdown-label-box"
:style="{ backgroundColor: selected.label.color }">
</span>
{{ selected.title }}
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
<ul>
<li
v-for="list in state.lists"
v-if="list.type == 'label'">
<a
href="#"
role="button"
:class="{ 'is-active': list.id == selected.id }"
@click.prevent="modal.selectedList = list">
<span
class="dropdown-label-box"
:style="{ backgroundColor: list.label.color }">
</span>
{{ list.title }}
</a>
</li>
</ul>
</div>
</div>
`,
});
<script>
import ModalStore from '../../stores/modal_store';
export default {
data() {
return {
modal: ModalStore.store,
state: gl.issueBoards.BoardsStore.state,
};
},
computed: {
selected() {
return this.modal.selectedList || this.state.lists[1];
},
},
destroyed() {
this.modal.selectedList = null;
},
};
</script>
<template>
<div class="dropdown inline">
<button
class="dropdown-menu-toggle"
type="button"
data-toggle="dropdown"
aria-expanded="false">
<span
:style="{ backgroundColor: selected.label.color }"
class="dropdown-label-box">
</span>
{{ selected.title }}
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
<ul>
<li
v-for="(list, i) in state.lists"
v-if="list.type == 'label'"
:key="i">
<a
:class="{ 'is-active': list.id == selected.id }"
href="#"
role="button"
@click.prevent="modal.selectedList = list">
<span
:style="{ backgroundColor: list.label.color }"
class="dropdown-label-box">
</span>
{{ list.title }}
</a>
</li>
</ul>
</div>
</div>
</template>
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