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
62
63
64
65
66
67
68
69
70
|
import { memoize } from 'lodash';
import Vue from 'vue';
import { __ } from '~/locale';
import { createAlert } from '~/alert';
// Async import component since we might not need it...
const JSONTable = memoize(() =>
import(/* webpackChunkName: 'gfm_json_table' */ '../components/json_table.vue'),
);
const mountParseError = (element) => {
// Let the error container be a sibling to the element.
// Otherwise, dismissing the alert causes the copy button to be misplaced.
const container = document.createElement('div');
element.insertAdjacentElement('beforebegin', container);
// We need to create a child element with a known selector for `createAlert`
const el = document.createElement('div');
el.classList.add('js-json-table-error');
container.insertAdjacentElement('afterbegin', el);
return createAlert({
message: __('Unable to parse JSON'),
variant: 'warning',
parent: container,
containerSelector: '.js-json-table-error',
});
};
const mountJSONTableVueComponent = (userData, element) => {
const { fields = [], items = [], filter, caption } = userData;
const container = document.createElement('div');
element.innerHTML = '';
element.appendChild(container);
return new Vue({
el: container,
render(h) {
return h(JSONTable, {
props: {
fields,
items,
hasFilter: filter,
caption,
},
});
},
});
};
const renderTable = (element) => {
// Avoid rendering multiple times
if (!element || element.classList.contains('js-json-table')) {
return;
}
element.classList.add('js-json-table');
try {
mountJSONTableVueComponent(JSON.parse(element.textContent), element);
} catch (e) {
mountParseError(element);
}
};
export const renderJSONTable = (elements) => {
elements.forEach(renderTable);
};
|
