All files / app/assets/javascripts group.js

0% Statements 0/41
0% Branches 0/16
0% Functions 0/14
0% Lines 0/40

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.'),
        });
      });
  }
}