2021-06-17 20:10:29 -04:00
|
|
|
import createFlash from '~/flash';
|
2019-11-05 19:06:13 -05:00
|
|
|
import { __ } from '~/locale';
|
2021-11-03 05:10:11 -04:00
|
|
|
import { getGroupPathAvailability } from '~/rest_api';
|
2021-02-01 10:08:56 -05:00
|
|
|
import { slugify } from './lib/utils/text_utility';
|
2018-03-09 15:18:59 -05:00
|
|
|
|
2017-03-12 11:22:00 -04:00
|
|
|
export default class Group {
|
|
|
|
constructor() {
|
2020-06-16 08:09:00 -04:00
|
|
|
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-03-12 11:22:00 -04:00
|
|
|
this.updateHandler = this.update.bind(this);
|
|
|
|
this.resetHandler = this.reset.bind(this);
|
2019-11-05 19:06:13 -05:00
|
|
|
this.updateGroupPathSlugHandler = this.updateGroupPathSlug.bind(this);
|
2020-06-16 08:09:00 -04:00
|
|
|
|
2020-12-23 19:10:25 -05:00
|
|
|
this.groupNames.forEach((groupName) => {
|
2020-06-16 08:09:00 -04:00
|
|
|
if (groupName.value === '') {
|
|
|
|
groupName.addEventListener('keyup', this.updateHandler);
|
|
|
|
|
2021-06-28 11:08:03 -04:00
|
|
|
groupName.addEventListener('keyup', this.updateGroupPathSlugHandler);
|
2019-11-05 19:06:13 -05:00
|
|
|
}
|
2020-06-16 08:09:00 -04:00
|
|
|
});
|
|
|
|
|
2020-12-23 19:10:25 -05:00
|
|
|
this.groupPaths.forEach((groupPath) => {
|
2020-06-16 08:09:00 -04:00
|
|
|
groupPath.addEventListener('keydown', this.resetHandler);
|
|
|
|
});
|
2017-03-12 11:22:00 -04:00
|
|
|
}
|
|
|
|
|
2020-06-16 08:09:00 -04:00
|
|
|
update({ currentTarget: { value: updatedValue } }) {
|
|
|
|
const slug = slugify(updatedValue);
|
|
|
|
|
2020-12-23 19:10:25 -05:00
|
|
|
this.groupNames.forEach((element) => {
|
2020-06-16 08:09:00 -04:00
|
|
|
element.value = updatedValue;
|
|
|
|
});
|
2020-12-23 19:10:25 -05:00
|
|
|
this.groupPaths.forEach((element) => {
|
2020-06-16 08:09:00 -04:00
|
|
|
element.value = slug;
|
|
|
|
});
|
2017-03-12 11:22:00 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
reset() {
|
2020-12-23 19:10:25 -05:00
|
|
|
this.groupNames.forEach((groupName) => {
|
2020-06-16 08:09:00 -04:00
|
|
|
groupName.removeEventListener('keyup', this.updateHandler);
|
|
|
|
groupName.removeEventListener('blur', this.checkPathHandler);
|
|
|
|
});
|
|
|
|
|
2020-12-23 19:10:25 -05:00
|
|
|
this.groupPaths.forEach((groupPath) => {
|
2020-06-16 08:09:00 -04:00
|
|
|
groupPath.removeEventListener('keydown', this.resetHandler);
|
|
|
|
});
|
2019-11-05 19:06:13 -05:00
|
|
|
}
|
|
|
|
|
2020-06-16 08:09:00 -04:00
|
|
|
updateGroupPathSlug({ currentTarget: { value } = '' } = {}) {
|
|
|
|
const slug = this.groupPaths[0]?.value || slugify(value);
|
2019-11-05 19:06:13 -05:00
|
|
|
if (!slug) return;
|
|
|
|
|
2021-11-03 05:10:11 -04:00
|
|
|
getGroupPathAvailability(slug, this.parentId?.value)
|
2019-11-05 19:06:13 -05:00
|
|
|
.then(({ data }) => data)
|
2020-06-16 08:09:00 -04:00
|
|
|
.then(({ exists, suggests }) => {
|
|
|
|
if (exists && suggests.length) {
|
|
|
|
const [suggestedSlug] = suggests;
|
|
|
|
|
2020-12-23 19:10:25 -05:00
|
|
|
this.groupPaths.forEach((element) => {
|
2020-06-16 08:09:00 -04:00
|
|
|
element.value = suggestedSlug;
|
|
|
|
});
|
|
|
|
} else if (exists && !suggests.length) {
|
2021-06-17 20:10:29 -04:00
|
|
|
createFlash({
|
|
|
|
message: __('Unable to suggest a path. Please refresh and try again.'),
|
|
|
|
});
|
2019-11-05 19:06:13 -05:00
|
|
|
}
|
|
|
|
})
|
2020-06-16 08:09:00 -04:00
|
|
|
.catch(() =>
|
2021-06-17 20:10:29 -04:00
|
|
|
createFlash({
|
|
|
|
message: __('An error occurred while checking group path. Please refresh and try again.'),
|
|
|
|
}),
|
2020-06-16 08:09:00 -04:00
|
|
|
);
|
2017-03-12 11:22:00 -04:00
|
|
|
}
|
|
|
|
}
|