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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import { debounce } from 'lodash';
import { createAlert } from '~/alert';
import { __ } from '~/locale';
import { getGroupPathAvailability } from '~/rest_api';
import axios from '~/lib/utils/axios_utils';
import { slugify } from './lib/utils/text_utility';
const DEBOUNCE_TIMEOUT_DURATION = 1000;
export default class Group {
constructor() {
this.groupPaths = Array.from(document.querySelectorAll('.js-autofill-group-path'));
this.groupNames = Array.from(document.querySelectorAll('.js-autofill-group-name'));
this.parentId = document.getElementById('group_parent_id');
this.updateHandler = this.update.bind(this);
this.resetHandler = this.reset.bind(this);
this.updateGroupPathSlugHandler = debounce(
this.updateGroupPathSlug.bind(this),
DEBOUNCE_TIMEOUT_DURATION,
);
this.currentApiRequestController = null;
this.groupNames.forEach((groupName) => {
groupName.addEventListener('keyup', this.updateHandler);
groupName.addEventListener('keyup', this.updateGroupPathSlugHandler);
});
this.groupPaths.forEach((groupPath) => {
groupPath.addEventListener('keydown', this.resetHandler);
});
}
update({ currentTarget: { value: updatedValue } }) {
const slug = slugify(updatedValue);
this.groupNames.forEach((element) => {
element.value = updatedValue;
});
this.groupPaths.forEach((element) => {
element.value = slug;
});
}
reset() {
this.groupNames.forEach((groupName) => {
groupName.removeEventListener('keyup', this.updateHandler);
groupName.removeEventListener('blur', this.checkPathHandler);
});
this.groupPaths.forEach((groupPath) => {
groupPath.removeEventListener('keydown', this.resetHandler);
});
}
updateGroupPathSlug({ target: { value } = '' } = {}) {
if (this.currentApiRequestController !== null) {
this.currentApiRequestController.abort();
}
this.currentApiRequestController = new AbortController();
const slug = slugify(value);
if (!slug) return;
getGroupPathAvailability(slug, this.parentId?.value, {
signal: this.currentApiRequestController.signal,
})
.then(({ data }) => data)
.then(({ exists, suggests }) => {
this.currentApiRequestController = null;
if (exists && suggests.length) {
const [suggestedSlug] = suggests;
this.groupPaths.forEach((element) => {
element.value = suggestedSlug;
});
} else if (exists && !suggests.length) {
createAlert({
message: __('Unable to suggest a path. Please refresh and try again.'),
});
}
})
.catch((error) => {
if (axios.isCancel(error)) {
return;
}
createAlert({
message: __('An error occurred while checking group path. Please refresh and try again.'),
});
});
}
}
|
