BigW Consortium Gitlab

board_list.js 5.35 KB
Newer Older
1
/* global Sortable */
2 3
import boardNewIssue from './board_new_issue';
import boardCard from './board_card';
4
import eventHub from '../eventhub';
5
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
6

7
const Store = gl.issueBoards.BoardsStore;
8

9
export default {
10
  name: 'BoardList',
11 12 13 14
  props: {
    disabled: {
      type: Boolean,
      required: true,
15
    },
16 17 18
    list: {
      type: Object,
      required: true,
Phil Hughes committed
19
    },
20 21 22
    issues: {
      type: Array,
      required: true,
Phil Hughes committed
23
    },
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
    loading: {
      type: Boolean,
      required: true,
    },
    issueLinkBase: {
      type: String,
      required: true,
    },
    rootPath: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      scrollOffset: 250,
      filters: Store.state.filters,
      showCount: false,
      showIssueForm: false,
    };
  },
45 46 47
  components: {
    boardCard,
    boardNewIssue,
48
    loadingIcon,
49 50 51 52 53 54 55 56 57 58 59
  },
  methods: {
    listHeight() {
      return this.$refs.list.getBoundingClientRect().height;
    },
    scrollHeight() {
      return this.$refs.list.scrollHeight;
    },
    scrollTop() {
      return this.$refs.list.scrollTop + this.listHeight();
    },
60 61 62
    scrollToTop() {
      this.$refs.list.scrollTop = 0;
    },
63 64
    loadNextPage() {
      const getIssues = this.list.nextPage();
65 66 67
      const loadingDone = () => {
        this.list.loadingMore = false;
      };
68

69 70
      if (getIssues) {
        this.list.loadingMore = true;
71 72 73
        getIssues
          .then(loadingDone)
          .catch(loadingDone);
74 75
      }
    },
76 77
    toggleForm() {
      this.showIssueForm = !this.showIssueForm;
78
    },
79 80 81 82
    onScroll() {
      if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
        this.loadNextPage();
      }
Phil Hughes committed
83
    },
84
  },
85 86 87 88 89 90 91 92 93 94 95 96 97
  watch: {
    filters: {
      handler() {
        this.list.loadingMore = false;
        this.$refs.list.scrollTop = 0;
      },
      deep: true,
    },
    issues() {
      this.$nextTick(() => {
        if (this.scrollHeight() <= this.listHeight() &&
          this.list.issuesSize > this.list.issues.length) {
          this.list.page += 1;
98 99 100 101
          this.list.getIssues(false)
            .catch(() => {
              // TODO: handle request error
            });
102 103 104 105 106 107 108 109 110 111
        }

        if (this.scrollHeight() > Math.ceil(this.listHeight())) {
          this.showCount = true;
        } else {
          this.showCount = false;
        }
      });
    },
  },
112 113
  created() {
    eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
114
    eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
115 116 117 118 119 120 121 122 123 124
  },
  mounted() {
    const options = gl.issueBoards.getBoardSortableDefaultOptions({
      scroll: document.querySelectorAll('.boards-list')[0],
      group: 'issues',
      disabled: this.disabled,
      filter: '.board-list-count, .is-disabled',
      dataIdAttr: 'data-issue-id',
      onStart: (e) => {
        const card = this.$refs.issue[e.oldIndex];
125

126 127 128
        card.showDetail = false;
        Store.moving.list = card.list;
        Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
129

130 131 132 133 134
        gl.issueBoards.onStart();
      },
      onAdd: (e) => {
        gl.issueBoards.BoardsStore
          .moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
135

136 137 138 139 140 141 142 143 144 145 146 147 148
        this.$nextTick(() => {
          e.item.remove();
        });
      },
      onUpdate: (e) => {
        const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
        gl.issueBoards.BoardsStore
          .moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
      },
      onMove(e) {
        return !e.related.classList.contains('board-list-count');
      },
    });
149

150
    this.sortable = Sortable.create(this.$refs.list, options);
Phil Hughes committed
151

152 153 154 155 156
    // Scroll event on list to load more
    this.$refs.list.addEventListener('scroll', this.onScroll);
  },
  beforeDestroy() {
    eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
157
    eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
158 159
    this.$refs.list.removeEventListener('scroll', this.onScroll);
  },
160 161 162 163 164 165
  template: `
    <div class="board-list-component">
      <div
        class="board-list-loading text-center"
        aria-label="Loading issues"
        v-if="loading">
166
        <loading-icon />
167
      </div>
168 169 170 171 172
      <transition name="slide-down">
        <board-new-issue
          :list="list"
          v-if="list.type !== 'closed' && showIssueForm"/>
      </transition>
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
      <ul
        class="board-list"
        v-show="!loading"
        ref="list"
        :data-board="list.id"
        :class="{ 'is-smaller': showIssueForm }">
        <board-card
          v-for="(issue, index) in issues"
          ref="issue"
          :index="index"
          :list="list"
          :issue="issue"
          :issue-link-base="issueLinkBase"
          :root-path="rootPath"
          :disabled="disabled"
          :key="issue.id" />
        <li
          class="board-list-count text-center"
          v-if="showCount"
          data-id="-1">
193 194 195 196 197 198

          <loading-icon
            v-show="list.loadingMore"
            label="Loading more issues"
            />

199 200 201 202 203 204 205 206 207 208
          <span v-if="list.issues.length === list.issuesSize">
            Showing all issues
          </span>
          <span v-else>
            Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
          </span>
        </li>
      </ul>
    </div>
  `,
209
};