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

152 lines
3.8 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 */
2020-01-01 13:55:28 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2019-12-26 22:10:19 +05:30
import boardsStore from '~/boards/stores/boards_store';
2021-03-11 19:13:27 +05:30
import { urlParamsToObject } from '~/lib/utils/common_utils';
import ModalStore from '../../stores/modal_store';
import EmptyState from './empty_state.vue';
import ModalFooter from './footer.vue';
2018-12-13 13:39:08 +05:30
import ModalHeader from './header.vue';
import ModalList from './list.vue';
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
projectId: {
type: Number,
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;
};
2021-03-08 18:12:59 +05:30
this.loadIssues().then(loadingDone).catch(loadingDone);
2018-12-13 13:39:08 +05:30
} 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
};
2021-03-08 18:12:59 +05:30
this.loadIssues(true).then(loadingDone).catch(loadingDone);
2018-11-08 19:23:39 +05:30
}
},
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
2019-12-26 22:10:19 +05:30
return boardsStore
2018-12-13 13:39:08 +05:30
.getBacklog({
2018-11-20 20:47:30 +05:30
...urlParamsToObject(this.filter.path),
page: this.page,
per: this.perPage,
})
2021-03-08 18:12:59 +05:30
.then((res) => res.data)
.then((data) => {
2018-12-13 13:39:08 +05:30
if (clearIssues) {
this.issues = [];
}
2018-11-08 19:23:39 +05:30
2021-03-08 18:12:59 +05:30
data.issues.forEach((issueObj) => {
2018-12-13 13:39:08 +05:30
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">
2020-11-24 15:15:51 +05:30
<modal-header :project-id="projectId" :label-path="labelPath" />
<modal-list v-if="!loading && showList && !filterLoading" :empty-state-svg="emptyStateSvg" />
2018-11-08 19:23:39 +05:30
<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>