debian-mirror-gitlab/app/assets/javascripts/group.js

96 lines
2.8 KiB
JavaScript
Raw Normal View History

2022-07-16 23:28:13 +05:30
import { debounce } from 'lodash';
2021-09-30 23:02:18 +05:30
import createFlash from '~/flash';
2019-12-26 22:10:19 +05:30
import { __ } from '~/locale';
2021-12-11 22:18:48 +05:30
import { getGroupPathAvailability } from '~/rest_api';
2022-07-16 23:28:13 +05:30
import axios from '~/lib/utils/axios_utils';
2021-03-11 19:13:27 +05:30
import { slugify } from './lib/utils/text_utility';
2018-05-09 12:01:36 +05:30
2022-07-16 23:28:13 +05:30
const DEBOUNCE_TIMEOUT_DURATION = 1000;
2017-08-17 22:00:37 +05:30
export default class Group {
constructor() {
2020-06-23 00:09:42 +05:30
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');
2017-08-17 22:00:37 +05:30
this.updateHandler = this.update.bind(this);
this.resetHandler = this.reset.bind(this);
2022-07-16 23:28:13 +05:30
this.updateGroupPathSlugHandler = debounce(
this.updateGroupPathSlug.bind(this),
DEBOUNCE_TIMEOUT_DURATION,
);
this.currentApiRequestController = null;
2020-06-23 00:09:42 +05:30
2021-03-08 18:12:59 +05:30
this.groupNames.forEach((groupName) => {
2022-03-02 08:16:31 +05:30
groupName.addEventListener('keyup', this.updateHandler);
groupName.addEventListener('keyup', this.updateGroupPathSlugHandler);
2020-06-23 00:09:42 +05:30
});
2021-03-08 18:12:59 +05:30
this.groupPaths.forEach((groupPath) => {
2020-06-23 00:09:42 +05:30
groupPath.addEventListener('keydown', this.resetHandler);
});
2017-08-17 22:00:37 +05:30
}
2020-06-23 00:09:42 +05:30
update({ currentTarget: { value: updatedValue } }) {
const slug = slugify(updatedValue);
2021-03-08 18:12:59 +05:30
this.groupNames.forEach((element) => {
2020-06-23 00:09:42 +05:30
element.value = updatedValue;
});
2021-03-08 18:12:59 +05:30
this.groupPaths.forEach((element) => {
2020-06-23 00:09:42 +05:30
element.value = slug;
});
2017-08-17 22:00:37 +05:30
}
reset() {
2021-03-08 18:12:59 +05:30
this.groupNames.forEach((groupName) => {
2020-06-23 00:09:42 +05:30
groupName.removeEventListener('keyup', this.updateHandler);
groupName.removeEventListener('blur', this.checkPathHandler);
});
2021-03-08 18:12:59 +05:30
this.groupPaths.forEach((groupPath) => {
2020-06-23 00:09:42 +05:30
groupPath.removeEventListener('keydown', this.resetHandler);
});
2019-12-26 22:10:19 +05:30
}
2022-07-16 23:28:13 +05:30
updateGroupPathSlug({ target: { value } = '' } = {}) {
if (this.currentApiRequestController !== null) {
this.currentApiRequestController.abort();
}
this.currentApiRequestController = new AbortController();
const slug = slugify(value);
2019-12-26 22:10:19 +05:30
if (!slug) return;
2022-07-16 23:28:13 +05:30
getGroupPathAvailability(slug, this.parentId?.value, {
signal: this.currentApiRequestController.signal,
})
2019-12-26 22:10:19 +05:30
.then(({ data }) => data)
2020-06-23 00:09:42 +05:30
.then(({ exists, suggests }) => {
2022-07-16 23:28:13 +05:30
this.currentApiRequestController = null;
2020-06-23 00:09:42 +05:30
if (exists && suggests.length) {
const [suggestedSlug] = suggests;
2021-03-08 18:12:59 +05:30
this.groupPaths.forEach((element) => {
2020-06-23 00:09:42 +05:30
element.value = suggestedSlug;
});
} else if (exists && !suggests.length) {
2021-09-30 23:02:18 +05:30
createFlash({
message: __('Unable to suggest a path. Please refresh and try again.'),
});
2019-12-26 22:10:19 +05:30
}
})
2022-07-16 23:28:13 +05:30
.catch((error) => {
if (axios.isCancel(error)) {
return;
}
2021-09-30 23:02:18 +05:30
createFlash({
message: __('An error occurred while checking group path. Please refresh and try again.'),
2022-07-16 23:28:13 +05:30
});
});
2017-08-17 22:00:37 +05:30
}
}