Skip to content

Commit

Permalink
Refactor autocompletion code for repository search
Browse files Browse the repository at this point in the history
  • Loading branch information
@bgeuken
bgeuken committed Jan 7, 2019
1 parent e03c011 commit 77c0b32
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 106 deletions.
99 changes: 38 additions & 61 deletions src/api/app/assets/javascripts/webui2/autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,44 @@ $(document).ready(function() {
}
});
});

$('.repository-autocomplete').on('autocompleteselect autocompletechange', function(event, ui) {
var projectName,
dropdown = $(this).find('.repository-dropdown'),
repoNameElement = $(this).find('.repository-name');

// Get project name
if (event.type === 'autocompleteselect') {
projectName = ui.item.value;
} else {
projectName = $(this).find('.ui-autocomplete-input').val();
}

// Clear form
dropdown.html('').prop('disabled', true);
repoNameElement.val('');

if (projectName === '') return;

// Update dropdown
$.ajax({
url: dropdown.data('source'),
data: { project: projectName },
success: function (data) {
if(data.length === 0) {
dropdown.append(new Option('No repositories found'));
} else {
$.each(data, function (_, val) {
dropdown.append(new Option(val));
});

repoNameElement.val(projectName.replace(/:/g, '_') + '_' + data[0]);

dropdown.prop('disabled', false);
}
}
});
});
});

function autocomleteBranchPackageName(linkedPackageSource) { // jshint ignore:line
Expand Down Expand Up @@ -50,64 +88,3 @@ function autocompleteSpinner(spinnerId, searching) {
icon.next().addClass('d-none');
}
}

function suggestRepositoryName(id, projectName, repositoryName){
$(id + ' #repo_name').val(projectName.replace(/:/g, '_') + '_' + repositoryName);
}

function autocompleteRepositories(id, projectName) {
var repositoriesId = (id + ' #target_repo');

$(repositoriesId).html('');
$(id + ' #repo_name').val('');
$(repositoriesId).prop('disabled', true);

if (projectName === '') return;

$.ajax({
url: $(repositoriesId).data('ajaxurl'),
data: { project: projectName },
success: function (data) {
if(data.length === 0) {
$(repositoriesId).append(new Option('No repositories found'));
} else {
$.each(data, function (idx, val) {
$(repositoriesId).append(new Option(val));
});

suggestRepositoryName(id, projectName, data[0]);

$(repositoriesId).prop('disabled', false);
}
}
});
}

function repositoriesSetupAutocomplete(id) { // jshint ignore:line
var inputId = (id + ' #target_project');
var icon = $(id + ' .project-search-icon i:first-child');

$(inputId).autocomplete({
appendTo: (id + ' .modal-body'),
source: $(inputId).data('ajaxurl'),
minLength: 2,
select: function(event, ui) {
autocompleteRepositories(id, ui.item.value);
},
change: function() {
autocompleteRepositories(id, $(inputId).val());
},
search: function() {
icon.addClass('d-none');
icon.next().removeClass('d-none');
},
response: function() {
icon.removeClass('d-none');
icon.next().addClass('d-none');
}
});

$(id + ' #target_repo').change(function () {
suggestRepositoryName(id, $(inputId).val(), $(this).val());
});
}
30 changes: 8 additions & 22 deletions src/api/app/views/webui2/webui/repositories/_add_repository_from_project_modal.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,22 @@
= form_tag(action: :create, project: project) do
.modal-header
%h5.modal-title Add Repository to #{project}
.modal-body
.form-group
= label_tag :project do
%strong Project:
.input-group
.input-group-prepend
%span.input-group-text.project-search-icon
%i.fa.fa-search
%i.fas.fa-spinner.fa-spin.d-none
= text_field_tag 'target_project', '', id: 'target_project',
class: 'form-control',
required: true,
placeholder: 'Type to autocomplete...',
data: { 'ajaxurl': url_for(controller: 'project', action: 'autocomplete_projects') }
.modal-body.repository-autocomplete
= render partial: 'webui/autocomplete', locals: { html_id: 'target_project', label: '<strong>Project:</strong>'.html_safe,
source: url_for(controller: 'project', action: 'autocomplete_projects') }

.form-group
= label_tag :repositories do
%strong Repositories:
= select_tag 'target_repo', options_for_select(['']), id: 'target_repo',
required: true,
= select_tag 'target_repo', options_for_select(['']), required: true,
disabled: true,
class: 'custom-select',
data: { 'ajaxurl': url_for(controller: :project,
class: 'repository-dropdown custom-select',
data: { source: url_for(controller: :project,
action: :autocomplete_repositories) }
.form-group
= label_tag :name do
%strong Name:
= text_field_tag :repository, '', size: 60, disabled: false, required: true, class: 'form-control', id: 'repo_name'
= text_field_tag :repository, '', size: 60, disabled: false, required: true, class: 'repository-name form-control'
.form-group
= label_tag :architectures, class: 'w-100' do
%strong Architectures:
Expand All @@ -41,6 +30,3 @@

.modal-footer
= render partial: 'webui2/shared/dialog_action_buttons'

= content_for :ready_function do
repositoriesSetupAutocomplete('#add-repository-from-project');
27 changes: 6 additions & 21 deletions src/api/app/views/webui2/webui/repositories/_add_repository_path_modal.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,19 @@
= form_tag(action: :create, project: project) do
.modal-header
%h5.modal-title Add additional path to #{repository}
.modal-body
.form-group
= label_tag :project do
%strong Project:
.input-group
.input-group-prepend
%span.input-group-text.project-search-icon
%i.fa.fa-search
%i.fas.fa-spinner.fa-spin.d-none
= text_field_tag 'target_project', '', id: 'target_project',
class: 'form-control',
required: true,
placeholder: 'Type to autocomplete...',
data: { 'ajaxurl': url_for(controller: 'project', action: 'autocomplete_projects') }
.modal-body.repository-autocomplete
= render partial: 'webui/autocomplete', locals: { html_id: 'target_project', label: '<strong>Project:</strong>'.html_safe,
source: url_for(controller: 'project', action: 'autocomplete_projects') }
.form-group
= label_tag :repositories do
%strong Repositories:
= select_tag 'target_repo', options_for_select(['']), id: 'target_repo',
required: true,
= select_tag 'target_repo', options_for_select(['']), required: true,
disabled: true,
class: 'custom-select',
data: { 'ajaxurl': url_for(controller: :project,
class: 'repository-dropdown custom-select',
data: { source: url_for(controller: :project,
action: :autocomplete_repositories) }
= hidden_field_tag :repository, repository

.modal-footer
= render partial: 'webui2/shared/dialog_action_buttons'

= content_for :ready_function do
repositoriesSetupAutocomplete("#add-repository-path-#{repository.id}");

7 changes: 5 additions & 2 deletions src/api/spec/bootstrap/features/webui/repositories_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,11 @@

click_link('Add from a Project')
fill_in('target_project', with: repository.project)
# We need to remove focus from project so that the autocomplete happens
find('#repo_name').click
# Select the first autocomplete result
find('.ui-menu-item-wrapper', match: :first).click
# Remove focus from autocomplete. Needed to trigger update of the other input fields.
find('#target_repo').click

click_button('Accept')

expect(page).to have_css('.repository-card')
Expand Down

0 comments on commit 77c0b32

Please sign in to comment.