board_list.js.es6 2.18 KB
Newer Older
1 2
//= require ./board_card

Phil Hughes's avatar
Phil Hughes committed
3
(() => {
4 5
  const Store = gl.issueBoards.BoardsStore;

6 7 8 9 10 11 12
  window.gl = window.gl || {};
  window.gl.issueBoards = window.gl.issueBoards || {};

  gl.issueBoards.BoardList = Vue.extend({
    components: {
      'board-card': gl.issueBoards.BoardCard
    },
Phil Hughes's avatar
Phil Hughes committed
13 14
    props: {
      disabled: Boolean,
15
      list: Object,
Phil Hughes's avatar
Phil Hughes committed
16
      issues: Array,
Phil Hughes's avatar
Phil Hughes committed
17 18
      loading: Boolean,
      issueLinkBase: String
Phil Hughes's avatar
Phil Hughes committed
19
    },
Phil Hughes's avatar
Phil Hughes committed
20
    data () {
Phil Hughes's avatar
Phil Hughes committed
21
      return {
22
        scrollOffset: 250,
23
        filters: Store.state.filters
Phil Hughes's avatar
Phil Hughes committed
24 25
      };
    },
26
    watch: {
Phil Hughes's avatar
Phil Hughes committed
27 28
      filters: {
        handler () {
29
          this.list.loadingMore = false;
30 31 32 33 34
          this.$els.list.scrollTop = 0;
        },
        deep: true
      }
    },
Phil Hughes's avatar
Phil Hughes committed
35
    methods: {
Phil Hughes's avatar
Phil Hughes committed
36
      listHeight () {
Phil Hughes's avatar
Phil Hughes committed
37 38
        return this.$els.list.getBoundingClientRect().height;
      },
Phil Hughes's avatar
Phil Hughes committed
39
      scrollHeight () {
Phil Hughes's avatar
Phil Hughes committed
40 41
        return this.$els.list.scrollHeight;
      },
Phil Hughes's avatar
Phil Hughes committed
42
      scrollTop () {
Phil Hughes's avatar
Phil Hughes committed
43 44
        return this.$els.list.scrollTop + this.listHeight();
      },
Phil Hughes's avatar
Phil Hughes committed
45
      loadNextPage () {
46
        const getIssues = this.list.nextPage();
Phil Hughes's avatar
Phil Hughes committed
47

48
        if (getIssues) {
49
          this.list.loadingMore = true;
50
          getIssues.then(() => {
51
            this.list.loadingMore = false;
52 53
          });
        }
54
      },
Phil Hughes's avatar
Phil Hughes committed
55
    },
Phil Hughes's avatar
Phil Hughes committed
56
    ready () {
57
      const options = gl.issueBoards.getBoardSortableDefaultOptions({
Phil Hughes's avatar
Phil Hughes committed
58 59 60 61 62
        group: 'issues',
        sort: false,
        disabled: this.disabled,
        onStart: (e) => {
          const card = this.$refs.issue[e.oldIndex];
63

Phil Hughes's avatar
Phil Hughes committed
64 65 66 67 68 69 70 71 72 73
          Store.moving.issue = card.issue;
          Store.moving.list = card.list;
        },
        onAdd: (e) => {
          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
        },
        onRemove: (e) => {
          this.$refs.issue[e.oldIndex].$destroy(true);
        }
      });
74

75
      if (bp.getBreakpointSize() === 'xs') {
Phil Hughes's avatar
Phil Hughes committed
76 77 78
        options.handle = '.js-card-drag-handle';
      }

Phil Hughes's avatar
Phil Hughes committed
79
      this.sortable = Sortable.create(this.$els.list, options);
Phil Hughes's avatar
Phil Hughes committed
80 81 82

      // Scroll event on list to load more
      this.$els.list.onscroll = () => {
83
        if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
84
          this.loadNextPage();
Phil Hughes's avatar
Phil Hughes committed
85 86 87 88
        }
      };
    }
  });
Phil Hughes's avatar
Phil Hughes committed
89
})();