project_new.js 4.9 KB
Newer Older
1
/* eslint-disable func-names, no-var, no-underscore-dangle, prefer-template, prefer-arrow-callback*/
2

3
import $ from 'jquery';
4
import VisibilitySelect from '../../../visibility_select';
5

6 7 8 9 10
function highlightChanges($elm) {
  $elm.addClass('highlight-changes');
  setTimeout(() => $elm.removeClass('highlight-changes'), 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
export default class ProjectNew {
  constructor() {
    this.toggleSettings = this.toggleSettings.bind(this);
    this.$selects = $('.features select');
    this.$repoSelects = this.$selects.filter('.js-repo-select');
    this.$projectSelects = this.$selects.not('.js-repo-select');

    $('.project-edit-container').on('ajax:before', () => {
      $('.project-edit-container').hide();
      return $('.save-project-loader').show();
    });

    this.initVisibilitySelect();

    this.toggleSettings();
    this.toggleSettingsOnclick();
    this.toggleRepoVisibility();
  }

  initVisibilitySelect() {
    const visibilityContainer = document.querySelector('.js-visibility-select');
    if (!visibilityContainer) return;
    const visibilitySelect = new VisibilitySelect(visibilityContainer);
    visibilitySelect.init();

    const $visibilitySelect = $(visibilityContainer).find('select');
    let projectVisibility = $visibilitySelect.val();
    const PROJECT_VISIBILITY_PRIVATE = '0';

    $visibilitySelect.on('change', () => {
      const newProjectVisibility = $visibilitySelect.val();

      if (projectVisibility !== newProjectVisibility) {
        this.$projectSelects.each((idx, select) => {
          const $select = $(select);
          const $options = $select.find('option');
          const values = $.map($options, e => e.value);

          // if switched to "private", limit visibility options
          if (newProjectVisibility === PROJECT_VISIBILITY_PRIVATE) {
            if ($select.val() !== values[0] && $select.val() !== values[1]) {
              $select.val(values[1]).trigger('change');
              highlightChanges($select);
54
            }
55 56
            $options.slice(2).disable();
          }
57

58 59 60 61 62 63
          // if switched from "private", increase visibility for non-disabled options
          if (projectVisibility === PROJECT_VISIBILITY_PRIVATE) {
            $options.enable();
            if ($select.val() !== values[0] && $select.val() !== values[values.length - 1]) {
              $select.val(values[values.length - 1]).trigger('change');
              highlightChanges($select);
64
            }
65 66
          }
        });
67

68
        projectVisibility = newProjectVisibility;
Fatih Acet's avatar
Fatih Acet committed
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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
    });
  }

  toggleSettings() {
    this.$selects.each(function () {
      var $select = $(this);
      var className = $select.data('field')
        .replace(/_/g, '-')
        .replace('access-level', 'feature');
      ProjectNew._showOrHide($select, '.' + className);
    });
  }

  toggleSettingsOnclick() {
    this.$selects.on('change', this.toggleSettings);
  }

  static _showOrHide(checkElement, container) {
    const $container = $(container);

    if ($(checkElement).val() !== '0') {
      return $container.show();
    }
    return $container.hide();
  }

  toggleRepoVisibility() {
    var $repoAccessLevel = $('.js-repo-access-level select');
    var $lfsEnabledOption = $('.js-lfs-enabled select');
    var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
    var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
    var prevSelectedVal = parseInt($repoAccessLevel.val(), 10);

    this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
      .nextAll()
      .hide();

    $repoAccessLevel
      .off('change')
      .on('change', function () {
        var selectedVal = parseInt($repoAccessLevel.val(), 10);

        this.$repoSelects.each(function () {
          var $this = $(this);
          var repoSelectVal = parseInt($this.val(), 10);

          $this.find('option').enable();

          if (selectedVal < repoSelectVal || repoSelectVal === prevSelectedVal) {
            $this.val(selectedVal).trigger('change');
            highlightChanges($this);
          }
122

123 124
          $this.find("option[value='" + selectedVal + "']").nextAll().disable();
        });
125

126 127
        if (selectedVal) {
          this.$repoSelects.removeClass('disabled');
128

129 130 131 132 133 134
          if ($lfsEnabledOption.length) {
            $lfsEnabledOption.removeClass('disabled');
            highlightChanges($lfsEnabledOption);
          }
          if (containerRegistry) {
            containerRegistry.style.display = '';
135
          }
136 137
        } else {
          this.$repoSelects.addClass('disabled');
138

139 140 141 142 143 144 145 146 147
          if ($lfsEnabledOption.length) {
            $lfsEnabledOption.val('false').addClass('disabled');
            highlightChanges($lfsEnabledOption);
          }
          if (containerRegistry) {
            containerRegistry.style.display = 'none';
            containerRegistryCheckbox.checked = false;
          }
        }
148

149 150 151 152
        prevSelectedVal = selectedVal;
      }.bind(this));
  }
}