debian-mirror-gitlab/app/assets/javascripts/boards/components/modal/index.vue

176 lines
4.1 KiB
Vue
Raw Normal View History

2018-11-08 19:23:39 +05:30
<script>
2018-12-13 13:39:08 +05:30
/* global ListIssue */
import { urlParamsToObject } from '~/lib/utils/common_utils';
import ModalHeader from './header.vue';
import ModalList from './list.vue';
import ModalFooter from './footer.vue';
import EmptyState from './empty_state.vue';
import ModalStore from '../../stores/modal_store';
2019-02-15 15:39:39 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
export default {
components: {
EmptyState,
ModalHeader,
ModalList,
ModalFooter,
GlLoadingIcon,
},
props: {
newIssuePath: {
type: String,
required: true,
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
emptyStateSvg: {
type: String,
required: true,
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
issueLinkBase: {
type: String,
required: true,
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
rootPath: {
type: String,
required: true,
},
projectId: {
type: Number,
required: true,
},
milestonePath: {
type: String,
required: true,
},
labelPath: {
type: String,
required: true,
},
},
data() {
return ModalStore.store;
},
computed: {
showList() {
if (this.activeTab === 'selected') {
return this.selectedIssues.length > 0;
}
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
return this.issuesCount > 0;
},
showEmptyState() {
if (!this.loading && this.issuesCount === 0) {
return true;
}
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
return this.activeTab === 'selected' && this.selectedIssues.length === 0;
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
},
watch: {
page() {
this.loadIssues();
},
showAddIssuesModal() {
if (this.showAddIssuesModal && !this.issues.length) {
this.loading = true;
const loadingDone = () => {
this.loading = false;
};
this.loadIssues()
.then(loadingDone)
.catch(loadingDone);
} else if (!this.showAddIssuesModal) {
this.issues = [];
this.selectedIssues = [];
this.issuesCount = false;
}
},
filter: {
handler() {
if (this.$el.tagName) {
this.page = 1;
this.filterLoading = true;
2018-11-08 19:23:39 +05:30
const loadingDone = () => {
2018-12-13 13:39:08 +05:30
this.filterLoading = false;
2018-11-08 19:23:39 +05:30
};
2018-12-13 13:39:08 +05:30
this.loadIssues(true)
2018-11-08 19:23:39 +05:30
.then(loadingDone)
.catch(loadingDone);
}
},
2018-12-13 13:39:08 +05:30
deep: true,
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
},
created() {
this.page = 1;
},
methods: {
loadIssues(clearIssues = false) {
if (!this.showAddIssuesModal) return false;
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
return gl.boardService
.getBacklog({
2018-11-20 20:47:30 +05:30
...urlParamsToObject(this.filter.path),
page: this.page,
per: this.perPage,
})
2018-12-13 13:39:08 +05:30
.then(res => res.data)
.then(data => {
if (clearIssues) {
this.issues = [];
}
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
data.issues.forEach(issueObj => {
const issue = new ListIssue(issueObj);
const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
2019-09-04 21:01:54 +05:30
issue.selected = Boolean(foundSelectedIssue);
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
this.issues.push(issue);
});
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
this.loadingNewPage = false;
2018-11-08 19:23:39 +05:30
2018-12-13 13:39:08 +05:30
if (!this.issuesCount) {
this.issuesCount = data.size;
}
})
.catch(() => {
// TODO: handle request error
});
2018-11-08 19:23:39 +05:30
},
2018-12-13 13:39:08 +05:30
},
};
2018-11-08 19:23:39 +05:30
</script>
<template>
2019-07-31 22:56:46 +05:30
<div
v-if="showAddIssuesModal"
class="add-issues-modal d-flex position-fixed position-top-0 position-bottom-0 position-left-0 position-right-0 h-100"
>
<div class="add-issues-container d-flex flex-column m-auto rounded">
2018-11-08 19:23:39 +05:30
<modal-header
:project-id="projectId"
:milestone-path="milestonePath"
:label-path="labelPath"
/>
<modal-list
v-if="!loading && showList && !filterLoading"
:issue-link-base="issueLinkBase"
:root-path="rootPath"
:empty-state-svg="emptyStateSvg"
/>
<empty-state
v-if="showEmptyState"
:new-issue-path="newIssuePath"
:empty-state-svg="emptyStateSvg"
/>
2019-07-31 22:56:46 +05:30
<section v-if="loading || filterLoading" class="add-issues-list d-flex h-100 text-center">
<div class="add-issues-list-loading w-100 align-self-center">
<gl-loading-icon size="md" />
</div>
2018-11-08 19:23:39 +05:30
</section>
2019-02-15 15:39:39 +05:30
<modal-footer />
2018-11-08 19:23:39 +05:30
</div>
</div>
</template>