summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal.js
blob: a8a89d0644a1fe508ff18936408313c9a170561d (plain)
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
57
58
59
60
61
import Vue from 'vue';

export function confirmAction(
  message,
  { primaryBtnVariant, primaryBtnText, modalHtmlMessage, title, hideCancel } = {},
) {
  return new Promise((resolve) => {
    let confirmed = false;

    const component = new Vue({
      components: {
        ConfirmModal: () => import('./confirm_modal.vue'),
      },
      render(h) {
        return h(
          'confirm-modal',
          {
            props: {
              primaryVariant: primaryBtnVariant,
              primaryText: primaryBtnText,
              title,
              modalHtmlMessage,
              hideCancel,
            },
            on: {
              confirmed() {
                confirmed = true;
              },
              closed() {
                component.$destroy();
                resolve(confirmed);
              },
            },
          },
          [message],
        );
      },
    }).$mount();
  });
}

export function confirmViaGlModal(message, element) {
  const primaryBtnConfig = {};

  const confirmBtnVariant = element.getAttribute('data-confirm-btn-variant');

  if (confirmBtnVariant) {
    primaryBtnConfig.primaryBtnVariant = confirmBtnVariant;
  }

  const screenReaderText =
    element.querySelector('.gl-sr-only')?.textContent ||
    element.querySelector('.sr-only')?.textContent ||
    element.getAttribute('aria-label');

  if (screenReaderText) {
    primaryBtnConfig.primaryBtnText = screenReaderText;
  }

  return confirmAction(message, primaryBtnConfig);
}