Merge branch '34371-vue-components-tech-debt' into 'master'
Moves some issue boards components into `.vue` file See merge request gitlab-org/gitlab-ce!20106
This commit is contained in:
commit
c91957c6fd
|
@ -1,14 +1,14 @@
|
|||
import Vue from 'vue';
|
||||
<script>
|
||||
import Flash from '../../../flash';
|
||||
import { __ } from '../../../locale';
|
||||
import './lists_dropdown';
|
||||
import ListsDropdown from './lists_dropdown.vue';
|
||||
import { pluralize } from '../../../lib/utils/text_utility';
|
||||
import ModalStore from '../../stores/modal_store';
|
||||
import modalMixin from '../../mixins/modal_mixins';
|
||||
|
||||
gl.issueBoards.ModalFooter = Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
|
||||
ListsDropdown,
|
||||
},
|
||||
mixins: [modalMixin],
|
||||
data() {
|
||||
|
@ -55,28 +55,32 @@ gl.issueBoards.ModalFooter = Vue.extend({
|
|||
this.toggleModal(false);
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<footer
|
||||
class="form-actions add-issues-footer">
|
||||
<div class="float-left">
|
||||
<button
|
||||
class="btn btn-success"
|
||||
type="button"
|
||||
:disabled="submitDisabled"
|
||||
@click="addIssues">
|
||||
{{ submitText }}
|
||||
</button>
|
||||
<span class="inline add-issues-footer-to-list">
|
||||
to list
|
||||
</span>
|
||||
<lists-dropdown></lists-dropdown>
|
||||
</div>
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<footer
|
||||
class="form-actions add-issues-footer"
|
||||
>
|
||||
<div class="float-left">
|
||||
<button
|
||||
class="btn btn-default float-right"
|
||||
:disabled="submitDisabled"
|
||||
class="btn btn-success"
|
||||
type="button"
|
||||
@click="toggleModal(false)">
|
||||
Cancel
|
||||
@click="addIssues"
|
||||
>
|
||||
{{ submitText }}
|
||||
</button>
|
||||
</footer>
|
||||
`,
|
||||
});
|
||||
<span class="inline add-issues-footer-to-list">
|
||||
to list
|
||||
</span>
|
||||
<lists-dropdown/>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-default float-right"
|
||||
type="button"
|
||||
@click="toggleModal(false)"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</footer>
|
||||
</template>
|
|
@ -5,7 +5,7 @@ import queryData from '~/boards/utils/query_data';
|
|||
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
|
||||
import './header';
|
||||
import './list';
|
||||
import './footer';
|
||||
import ModalFooter from './footer.vue';
|
||||
import EmptyState from './empty_state.vue';
|
||||
import ModalStore from '../../stores/modal_store';
|
||||
|
||||
|
@ -14,7 +14,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
|
|||
EmptyState,
|
||||
'modal-header': gl.issueBoards.ModalHeader,
|
||||
'modal-list': gl.issueBoards.ModalList,
|
||||
'modal-footer': gl.issueBoards.ModalFooter,
|
||||
ModalFooter,
|
||||
loadingIcon,
|
||||
},
|
||||
props: {
|
||||
|
|
|
@ -1,54 +0,0 @@
|
|||
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>
|
||||
`,
|
||||
});
|
|
@ -0,0 +1,56 @@
|
|||
<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>
|
Loading…
Reference in New Issue