Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 96 | 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.'), }); }); } } |