index.vue 3.94 KB
Newer Older
1
<script>
2 3 4 5 6 7 8
/* 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';
Clement Ho's avatar
Clement Ho committed
9
import { GlLoadingIcon } from '@gitlab/ui';
10

11 12 13 14 15 16
export default {
  components: {
    EmptyState,
    ModalHeader,
    ModalList,
    ModalFooter,
17
    GlLoadingIcon,
18 19 20 21 22
  },
  props: {
    newIssuePath: {
      type: String,
      required: true,
23
    },
24 25 26
    emptyStateSvg: {
      type: String,
      required: true,
27
    },
28 29 30
    issueLinkBase: {
      type: String,
      required: true,
31
    },
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
    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;
      }
57

58 59 60 61 62 63
      return this.issuesCount > 0;
    },
    showEmptyState() {
      if (!this.loading && this.issuesCount === 0) {
        return true;
      }
64

65
      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
66
    },
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
  },
  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;
93
          const loadingDone = () => {
94
            this.filterLoading = false;
95 96
          };

97
          this.loadIssues(true)
98 99 100 101
            .then(loadingDone)
            .catch(loadingDone);
        }
      },
102
      deep: true,
103
    },
104 105 106 107 108 109 110
  },
  created() {
    this.page = 1;
  },
  methods: {
    loadIssues(clearIssues = false) {
      if (!this.showAddIssuesModal) return false;
111

112 113
      return gl.boardService
        .getBacklog({
114 115 116 117
          ...urlParamsToObject(this.filter.path),
          page: this.page,
          per: this.perPage,
        })
118 119 120 121 122
        .then(res => res.data)
        .then(data => {
          if (clearIssues) {
            this.issues = [];
          }
123

124 125 126 127
          data.issues.forEach(issueObj => {
            const issue = new ListIssue(issueObj);
            const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
            issue.selected = !!foundSelectedIssue;
128

129 130
            this.issues.push(issue);
          });
131

132
          this.loadingNewPage = false;
133

134 135 136 137 138 139 140
          if (!this.issuesCount) {
            this.issuesCount = data.size;
          }
        })
        .catch(() => {
          // TODO: handle request error
        });
141
    },
142 143
  },
};
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170
</script>
<template>
  <div
    v-if="showAddIssuesModal"
    class="add-issues-modal">
    <div class="add-issues-container">
      <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"
      />
      <section
        v-if="loading || filterLoading"
        class="add-issues-list text-center"
      >
        <div class="add-issues-list-loading">
Clement Ho's avatar
Clement Ho committed
171
          <gl-loading-icon />
172 173 174 175 176 177
        </div>
      </section>
      <modal-footer/>
    </div>
  </div>
</template>