index.js 4 KB
Newer Older
Phil Hughes's avatar
Phil Hughes committed
1
/* global ListIssue */
2

3
import Vue from 'vue';
Lin Jen-Shin's avatar
Lin Jen-Shin committed
4 5
import queryData from '~/boards/utils/query_data';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
6 7
import './header';
import './list';
8
import ModalFooter from './footer.vue';
9
import EmptyState from './empty_state.vue';
10
import ModalStore from '../../stores/modal_store';
Phil Hughes's avatar
Phil Hughes committed
11

12
gl.issueBoards.IssuesModal = Vue.extend({
13
  components: {
14
    EmptyState,
15 16
    'modal-header': gl.issueBoards.ModalHeader,
    'modal-list': gl.issueBoards.ModalList,
17
    ModalFooter,
18 19
    loadingIcon,
  },
20
  props: {
21
    newIssuePath: {
22 23
      type: String,
      required: true,
24
    },
25
    emptyStateSvg: {
26 27
      type: String,
      required: true,
Phil Hughes's avatar
Phil Hughes committed
28
    },
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
    issueLinkBase: {
      type: String,
      required: true,
    },
    rootPath: {
      type: String,
      required: true,
    },
    projectId: {
      type: Number,
      required: true,
    },
    milestonePath: {
      type: String,
      required: true,
    },
    labelPath: {
      type: String,
      required: true,
    },
  },
  data() {
    return ModalStore.store;
  },
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
  computed: {
    showList() {
      if (this.activeTab === 'selected') {
        return this.selectedIssues.length > 0;
      }

      return this.issuesCount > 0;
    },
    showEmptyState() {
      if (!this.loading && this.issuesCount === 0) {
        return true;
      }

      return this.activeTab === 'selected' && this.selectedIssues.length === 0;
    },
  },
69 70 71 72 73 74 75
  watch: {
    page() {
      this.loadIssues();
    },
    showAddIssuesModal() {
      if (this.showAddIssuesModal && !this.issues.length) {
        this.loading = true;
76 77 78
        const loadingDone = () => {
          this.loading = false;
        };
79 80

        this.loadIssues()
81 82
          .then(loadingDone)
          .catch(loadingDone);
83 84 85 86 87 88 89 90 91 92 93
      } else if (!this.showAddIssuesModal) {
        this.issues = [];
        this.selectedIssues = [];
        this.issuesCount = false;
      }
    },
    filter: {
      handler() {
        if (this.$el.tagName) {
          this.page = 1;
          this.filterLoading = true;
94 95 96
          const loadingDone = () => {
            this.filterLoading = false;
          };
Phil Hughes's avatar
Phil Hughes committed
97

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

113 114 115
      return gl.boardService.getBacklog(queryData(this.filter.path, {
        page: this.page,
        per: this.perPage,
Filipa Lacerda's avatar
Filipa Lacerda committed
116
      }))
Eric Eastwood's avatar
Eric Eastwood committed
117
      .then(res => res.data)
Filipa Lacerda's avatar
Filipa Lacerda committed
118
      .then((data) => {
119 120 121
        if (clearIssues) {
          this.issues = [];
        }
Phil Hughes's avatar
Phil Hughes committed
122

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

128
          this.issues.push(issue);
129
        });
Phil Hughes's avatar
Phil Hughes committed
130

131
        this.loadingNewPage = false;
132

133 134 135
        if (!this.issuesCount) {
          this.issuesCount = data.size;
        }
136 137
      }).catch(() => {
        // TODO: handle request error
138
      });
Phil Hughes's avatar
Phil Hughes committed
139
    },
140 141 142 143 144 145 146 147 148 149 150 151 152 153
  },
  template: `
    <div
      class="add-issues-modal"
      v-if="showAddIssuesModal">
      <div class="add-issues-container">
        <modal-header
          :project-id="projectId"
          :milestone-path="milestonePath"
          :label-path="labelPath">
        </modal-header>
        <modal-list
          :issue-link-base="issueLinkBase"
          :root-path="rootPath"
154
          :empty-state-svg="emptyStateSvg"
155 156 157
          v-if="!loading && showList && !filterLoading"></modal-list>
        <empty-state
          v-if="showEmptyState"
158 159
          :new-issue-path="newIssuePath"
          :empty-state-svg="emptyStateSvg"></empty-state>
160 161 162 163
        <section
          class="add-issues-list text-center"
          v-if="loading || filterLoading">
          <div class="add-issues-list-loading">
164
            <loading-icon />
165 166 167
          </div>
        </section>
        <modal-footer></modal-footer>
Phil Hughes's avatar
Phil Hughes committed
168
      </div>
169 170 171
    </div>
  `,
});