Commit 0c560cbb authored by Jacob Schatz's avatar Jacob Schatz

Updates dropdown to update branch in commit section.

parent a3fe09e0
...@@ -2,7 +2,51 @@ ...@@ -2,7 +2,51 @@
/* global fuzzaldrinPlus */ /* global fuzzaldrinPlus */
import { isObject } from './lib/utils/type_utility'; import { isObject } from './lib/utils/type_utility';
var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote; var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote, GitLabDropdownInput;
GitLabDropdownInput = (function() {
function GitLabDropdownInput(input, options) {
var $inputContainer, $clearButton;
var _this = this;
this.input = input;
this.options = options;
this.fieldName = this.options.fieldName || 'field-name';
$inputContainer = this.input.parent();
$clearButton = $inputContainer.find('.js-dropdown-input-clear');
$clearButton.on('click', (function(_this) {
// Clear click
return function(e) {
e.preventDefault();
e.stopPropagation();
return _this.input.val('').trigger('input').focus();
};
})(this));
this.input
.on('keydown', function (e) {
var keyCode = e.which;
if (keyCode === 13 && !options.elIsInput) {
e.preventDefault();
}
})
.on('input', function(e) {
var val = e.currentTarget.value || 'new-branch'
val = val.split(' ').join('-') // replaces space with dash
.replace(/[^a-zA-Z0-9 -]/g, '').toLowerCase() //replace non alphanumeric
.replace(/(-)\1+/g, '-'); // replace repeated dashes
_this.cb(_this.options.fieldName, val, {}, true);
_this.input.closest('.dropdown')
.find('.dropdown-toggle-text')
.text(val);
});
}
GitLabDropdownInput.prototype.onInput = function(cb) {
this.cb = cb;
}
return GitLabDropdownInput;
})();
GitLabDropdownFilter = (function() { GitLabDropdownFilter = (function() {
var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS; var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
...@@ -188,7 +232,7 @@ GitLabDropdownRemote = (function() { ...@@ -188,7 +232,7 @@ GitLabDropdownRemote = (function() {
})(); })();
GitLabDropdown = (function() { GitLabDropdown = (function() {
var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex; var ACTIVE_CLASS, FILTER_INPUT, NO_FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
LOADING_CLASS = "is-loading"; LOADING_CLASS = "is-loading";
...@@ -208,6 +252,8 @@ GitLabDropdown = (function() { ...@@ -208,6 +252,8 @@ GitLabDropdown = (function() {
FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)'; FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)';
NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter';
function GitLabDropdown(el1, options) { function GitLabDropdown(el1, options) {
var searchFields, selector, self; var searchFields, selector, self;
this.el = el1; this.el = el1;
...@@ -221,6 +267,7 @@ GitLabDropdown = (function() { ...@@ -221,6 +267,7 @@ GitLabDropdown = (function() {
this.dropdown = selector != null ? $(selector) : $(this.el).parent(); this.dropdown = selector != null ? $(selector) : $(this.el).parent();
// Set Defaults // Set Defaults
this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT); this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
this.noFilterInput = this.options.noFilterInput || this.getElement(NO_FILTER_INPUT);
this.highlight = !!this.options.highlight; this.highlight = !!this.options.highlight;
this.filterInputBlur = this.options.filterInputBlur != null this.filterInputBlur = this.options.filterInputBlur != null
? this.options.filterInputBlur ? this.options.filterInputBlur
...@@ -259,6 +306,10 @@ GitLabDropdown = (function() { ...@@ -259,6 +306,10 @@ GitLabDropdown = (function() {
}); });
} }
} }
if(this.noFilterInput.length) {
this.plainInput = new GitLabDropdownInput(this.noFilterInput, this.options);
this.plainInput.onInput(this.addInput.bind(this))
}
// Init filterable // Init filterable
if (this.options.filterable) { if (this.options.filterable) {
this.filter = new GitLabDropdownFilter(this.filterInput, { this.filter = new GitLabDropdownFilter(this.filterInput, {
...@@ -744,9 +795,13 @@ GitLabDropdown = (function() { ...@@ -744,9 +795,13 @@ GitLabDropdown = (function() {
} }
}; };
GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) { GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject, single) {
var $input; var $input;
// Create hidden input for form // Create hidden input for form
if(single){
$('input[name="' + fieldName + '"]').remove();
}
$input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value); $input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value);
if (this.options.inputId != null) { if (this.options.inputId != null) {
$input.attr('id', this.options.inputId); $input.attr('id', this.options.inputId);
...@@ -762,7 +817,7 @@ GitLabDropdown = (function() { ...@@ -762,7 +817,7 @@ GitLabDropdown = (function() {
$input.attr('data-meta', selectedObject[this.options.inputMeta]); $input.attr('data-meta', selectedObject[this.options.inputMeta]);
} }
return this.dropdown.before($input); this.dropdown.before($input).trigger('change');
}; };
GitLabDropdown.prototype.selectRowAtIndex = function(index) { GitLabDropdown.prototype.selectRowAtIndex = function(index) {
......
...@@ -13,9 +13,16 @@ import { repoEditorLoader } from './repo_editor'; ...@@ -13,9 +13,16 @@ import { repoEditorLoader } from './repo_editor';
import RepoMixin from './repo_mixin'; import RepoMixin from './repo_mixin';
import PopupDialog from '../vue_shared/components/popup_dialog.vue' import PopupDialog from '../vue_shared/components/popup_dialog.vue'
function addEventsForNonVueEls() {
$(document).on('change', '.dropdown', () => {
Store.targetBranch = $('.project-refs-target-form input[name="ref"]').val();
});
}
function initRepo() { function initRepo() {
const repo = document.getElementById('repo'); const repo = document.getElementById('repo');
Store.service = Service; Store.service = Service;
Store.service.url = repo.dataset.url; Store.service.url = repo.dataset.url;
Store.service.refsUrl = repo.dataset.refsUrl; Store.service.refsUrl = repo.dataset.refsUrl;
...@@ -24,6 +31,7 @@ function initRepo() { ...@@ -24,6 +31,7 @@ function initRepo() {
Store.projectUrl = repo.dataset.projectUrl; Store.projectUrl = repo.dataset.projectUrl;
Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref'); Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
Store.checkIsCommitable(); Store.checkIsCommitable();
addEventsForNonVueEls();
this.vm = new Vue({ this.vm = new Vue({
el: repo, el: repo,
......
...@@ -3,19 +3,31 @@ ...@@ -3,19 +3,31 @@
import Store from './repo_store'; import Store from './repo_store';
import Api from '../api'; import Api from '../api';
import RepoMixin from './repo_mixin' import RepoMixin from './repo_mixin'
import Helper from './repo_helper'
const RepoCommitSection = { const RepoCommitSection = {
data: () => Store, data: () => Store,
mixins: [RepoMixin], mixins: [RepoMixin],
computed: {
branchPaths() {
let branch = Helper.getBranch();
return this.changedFiles.map((f) => {
console.log('branch', branch)
console.log(Helper.getFilePathFromFullPath(f.url, branch))
return Helper.getFilePathFromFullPath(f.url, branch);
});
}
},
methods: { methods: {
makeCommit() { makeCommit() {
// see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
const branch = $('button.dropdown-menu-toggle').attr('data-ref'); const branch = Helper.getBranch();
const commitMessage = this.commitMessage; const commitMessage = this.commitMessage;
const actions = this.changedFiles.map((f) => { const actions = this.branchPaths.map((f) => {
const filePath = f.url.split(branch)[1]; const filePath = Helper.getFilePathFromFullPath(f.url, branch);
return { return {
action: 'update', action: 'update',
file_path: filePath, file_path: filePath,
...@@ -52,8 +64,8 @@ export default RepoCommitSection; ...@@ -52,8 +64,8 @@ export default RepoCommitSection;
<label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label> <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
<div class="col-md-4"> <div class="col-md-4">
<ul class="list-unstyled changed-files"> <ul class="list-unstyled changed-files">
<li v-for="file in changedFiles" :key="file.id"> <li v-for="file in branchPaths">
<span class="help-block">{{file.url}}</span> <span class="help-block">{{file}}</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -71,34 +83,7 @@ export default RepoCommitSection; ...@@ -71,34 +83,7 @@ export default RepoCommitSection;
<div class="form-group"> <div class="form-group">
<label class="col-md-4 control-label" for="target-branch">Target branch</label> <label class="col-md-4 control-label" for="target-branch">Target branch</label>
<div class="col-md-4"> <div class="col-md-4">
<div class="input-group"> <span class="help-block">{{targetBranch}}</span>
<div class="input-group-btn branch-dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
Action
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">Target branch</a>
</li>
<li>
<a href="#">Create my own branch</a>
</li>
</ul>
</div>
<input class="form-control" id="target-branch" name="target-branch" placeholder="placeholder" type="text"></input>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes"></label>
<div class="col-md-4">
<div class="checkbox new-merge-request">
<label for="checkboxes-0">
<input id="checkboxes-0" name="checkboxes" type="checkbox" value="1"></input>
Start a new merge request with these changes
</label>
</div>
</div> </div>
</div> </div>
<div class="col-md-offset-4 col-md-4"> <div class="col-md-offset-4 col-md-4">
......
...@@ -23,7 +23,6 @@ export default class RepoEditButton { ...@@ -23,7 +23,6 @@ export default class RepoEditButton {
}, },
methods: { methods: {
editClicked() { editClicked() {
console.log('thiscf', this.changedFiles)
if(this.changedFiles.length) { if(this.changedFiles.length) {
this.dialog.open = true; this.dialog.open = true;
return; return;
......
...@@ -33,6 +33,10 @@ const RepoHelper = { ...@@ -33,6 +33,10 @@ const RepoHelper = {
? window.performance ? window.performance
: Date, : Date,
getBranch() {
return $('button.dropdown-menu-toggle').attr('data-ref');
},
getLanguageIDForFile(file, langs) { getLanguageIDForFile(file, langs) {
const ext = file.name.split('.').pop(); const ext = file.name.split('.').pop();
const foundLang = RepoHelper.findLanguage(ext, langs); const foundLang = RepoHelper.findLanguage(ext, langs);
...@@ -40,6 +44,11 @@ const RepoHelper = { ...@@ -40,6 +44,11 @@ const RepoHelper = {
return foundLang ? foundLang.id : 'plaintext'; return foundLang ? foundLang.id : 'plaintext';
}, },
getFilePathFromFullPath(fullPath, branch) {
console.log(fullPath, branch)
return fullPath.split(branch)[1];
},
findLanguage(ext, langs) { findLanguage(ext, langs) {
return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1); return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1);
}, },
......
...@@ -41,6 +41,7 @@ const RepoStore = { ...@@ -41,6 +41,7 @@ const RepoStore = {
isCommitable: false, isCommitable: false,
binary: false, binary: false,
currentBranch: '', currentBranch: '',
targetBranch: 'new-branch',
commitMessage: '', commitMessage: '',
binaryMimeType: '', binaryMimeType: '',
// scroll bar space for windows // scroll bar space for windows
......
...@@ -155,6 +155,10 @@ ...@@ -155,6 +155,10 @@
#commit-area { #commit-area {
background: $gray-light; background: $gray-light;
padding: 20px; padding: 20px;
span.help-block {
padding-top: 7px;
}
} }
#view-toggler { #view-toggler {
......
...@@ -72,7 +72,7 @@ module DropdownsHelper ...@@ -72,7 +72,7 @@ module DropdownsHelper
def dropdown_input(placeholder, input_id: nil) def dropdown_input(placeholder, input_id: nil)
content_tag :div, class: "dropdown-input" do content_tag :div, class: "dropdown-input" do
filter_output = search_field_tag input_id, nil, class: "dropdown-input-field dropdown-no-filter", placeholder: placeholder, autocomplete: 'off' filter_output = text_field_tag input_id, nil, class: "dropdown-input-field dropdown-no-filter", placeholder: placeholder, autocomplete: 'off'
filter_output << icon('times', class: "dropdown-input-clear js-dropdown-input-clear", role: "button") filter_output << icon('times', class: "dropdown-input-clear js-dropdown-input-clear", role: "button")
filter_output.html_safe filter_output.html_safe
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
- @options && @options.each do |key, value| - @options && @options.each do |key, value|
= hidden_field_tag key, value, id: nil = hidden_field_tag key, value, id: nil
.dropdown .dropdown
= dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project, find: ['branches']), field_name: 'ref', submit_form_on_click: true, visit: false }, { toggle_class: "js-project-refs-dropdown" } = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_project_path(@project, find: ['branches']), field_name: 'ref', input_field_name: 'new-branch', submit_form_on_click: true, visit: false }, { toggle_class: "js-project-refs-dropdown" }
%ul.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) } %ul.dropdown-menu.dropdown-menu-selectable.git-revision-dropdown{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
%li %li
= dropdown_title _("Create a new branch") = dropdown_title _("Create a new branch")
......
.dropdown-page-two.dropdown-new-label .dropdown-page-two.dropdown-new-label
= dropdown_title("Create new label", back: true) = dropdown_title("Create new label", options: { back: true })
= dropdown_content do = dropdown_content do
.dropdown-labels-error.js-label-error .dropdown-labels-error.js-label-error
%input#new_label_name.default-dropdown-input{ type: "text", placeholder: "Name new label" } %input#new_label_name.default-dropdown-input{ type: "text", placeholder: "Name new label" }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment