app/assets/javascripts/pages/users/user_overview_block.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
53
54
55
56

import axios from '~/lib/utils/axios_utils';

const DEFAULT_LIMIT = 20;

export default class UserOverviewBlock {
  constructor(options = {}) {
    this.container = options.container;
    this.url = options.url;
    this.requestParams = {
      limit: DEFAULT_LIMIT,
      ...options.requestParams,
    };
    this.postRenderCallback = options.postRenderCallback;
    this.loadData();
  }

  loadData() {
    const containerEl = document.querySelector(this.container);
    const loadingEl = containerEl.querySelector(`.loading`);

    loadingEl.classList.remove('hide');

    axios
      .get(this.url, {
        params: this.requestParams,
      })
      .then(({ data }) => this.render(data))
      .catch(() => loadingEl.classList.add('hide'));
  }

  render(data) {
    const { html, count } = data;
    const containerEl = document.querySelector(this.container);
    const contentList = containerEl.querySelector('.overview-content-list');

    contentList.innerHTML += html;

    const loadingEl = containerEl.querySelector('.loading');

    if (count && count > 0) {
      containerEl.querySelector('.js-view-all').classList.remove('hide');
    } else {
      const nothingHereBlock = containerEl.querySelector('.nothing-here-block');

      if (nothingHereBlock) {
        nothingHereBlock.classList.add('p-5');
      }
    }

    loadingEl.classList.add('hide');

    if (this.postRenderCallback) {
      this.postRenderCallback.call(this);
    }
  }
}