Updates dropdown to update branch in commit section.
This commit is contained in:
parent
a3fe09e0c6
commit
0c560cbbf5
|
@ -2,7 +2,51 @@
|
|||
/* global fuzzaldrinPlus */
|
||||
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() {
|
||||
var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
|
||||
|
@ -188,7 +232,7 @@ GitLabDropdownRemote = (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";
|
||||
|
||||
|
@ -208,6 +252,8 @@ GitLabDropdown = (function() {
|
|||
|
||||
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) {
|
||||
var searchFields, selector, self;
|
||||
this.el = el1;
|
||||
|
@ -221,6 +267,7 @@ GitLabDropdown = (function() {
|
|||
this.dropdown = selector != null ? $(selector) : $(this.el).parent();
|
||||
// Set Defaults
|
||||
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.filterInputBlur = this.options.filterInputBlur != null
|
||||
? this.options.filterInputBlur
|
||||
|
@ -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
|
||||
if (this.options.filterable) {
|
||||
this.filter = new GitLabDropdownFilter(this.filterInput, {
|
||||
|
@ -744,9 +795,13 @@ GitLabDropdown = (function() {
|
|||
}
|
||||
};
|
||||
|
||||
GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) {
|
||||
GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject, single) {
|
||||
var $input;
|
||||
// Create hidden input for form
|
||||
if(single){
|
||||
$('input[name="' + fieldName + '"]').remove();
|
||||
}
|
||||
|
||||
$input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value);
|
||||
if (this.options.inputId != null) {
|
||||
$input.attr('id', this.options.inputId);
|
||||
|
@ -762,7 +817,7 @@ GitLabDropdown = (function() {
|
|||
$input.attr('data-meta', selectedObject[this.options.inputMeta]);
|
||||
}
|
||||
|
||||
return this.dropdown.before($input);
|
||||
this.dropdown.before($input).trigger('change');
|
||||
};
|
||||
|
||||
GitLabDropdown.prototype.selectRowAtIndex = function(index) {
|
||||
|
|
|
@ -13,9 +13,16 @@ import { repoEditorLoader } from './repo_editor';
|
|||
import RepoMixin from './repo_mixin';
|
||||
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() {
|
||||
const repo = document.getElementById('repo');
|
||||
|
||||
|
||||
Store.service = Service;
|
||||
Store.service.url = repo.dataset.url;
|
||||
Store.service.refsUrl = repo.dataset.refsUrl;
|
||||
|
@ -24,6 +31,7 @@ function initRepo() {
|
|||
Store.projectUrl = repo.dataset.projectUrl;
|
||||
Store.currentBranch = $('button.dropdown-menu-toggle').attr('data-ref');
|
||||
Store.checkIsCommitable();
|
||||
addEventsForNonVueEls();
|
||||
|
||||
this.vm = new Vue({
|
||||
el: repo,
|
||||
|
|
|
@ -3,19 +3,31 @@
|
|||
import Store from './repo_store';
|
||||
import Api from '../api';
|
||||
import RepoMixin from './repo_mixin'
|
||||
import Helper from './repo_helper'
|
||||
|
||||
const RepoCommitSection = {
|
||||
data: () => Store,
|
||||
|
||||
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: {
|
||||
makeCommit() {
|
||||
// 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 actions = this.changedFiles.map((f) => {
|
||||
const filePath = f.url.split(branch)[1];
|
||||
const actions = this.branchPaths.map((f) => {
|
||||
const filePath = Helper.getFilePathFromFullPath(f.url, branch);
|
||||
return {
|
||||
action: 'update',
|
||||
file_path: filePath,
|
||||
|
@ -52,8 +64,8 @@ export default RepoCommitSection;
|
|||
<label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
|
||||
<div class="col-md-4">
|
||||
<ul class="list-unstyled changed-files">
|
||||
<li v-for="file in changedFiles" :key="file.id">
|
||||
<span class="help-block">{{file.url}}</span>
|
||||
<li v-for="file in branchPaths">
|
||||
<span class="help-block">{{file}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -71,34 +83,7 @@ export default RepoCommitSection;
|
|||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="target-branch">Target branch</label>
|
||||
<div class="col-md-4">
|
||||
<div class="input-group">
|
||||
<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>
|
||||
<span class="help-block">{{targetBranch}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-offset-4 col-md-4">
|
||||
|
|
|
@ -23,7 +23,6 @@ export default class RepoEditButton {
|
|||
},
|
||||
methods: {
|
||||
editClicked() {
|
||||
console.log('thiscf', this.changedFiles)
|
||||
if(this.changedFiles.length) {
|
||||
this.dialog.open = true;
|
||||
return;
|
||||
|
|
|
@ -33,6 +33,10 @@ const RepoHelper = {
|
|||
? window.performance
|
||||
: Date,
|
||||
|
||||
getBranch() {
|
||||
return $('button.dropdown-menu-toggle').attr('data-ref');
|
||||
},
|
||||
|
||||
getLanguageIDForFile(file, langs) {
|
||||
const ext = file.name.split('.').pop();
|
||||
const foundLang = RepoHelper.findLanguage(ext, langs);
|
||||
|
@ -40,6 +44,11 @@ const RepoHelper = {
|
|||
return foundLang ? foundLang.id : 'plaintext';
|
||||
},
|
||||
|
||||
getFilePathFromFullPath(fullPath, branch) {
|
||||
console.log(fullPath, branch)
|
||||
return fullPath.split(branch)[1];
|
||||
},
|
||||
|
||||
findLanguage(ext, langs) {
|
||||
return langs.find(lang => lang.extensions && lang.extensions.indexOf(`.${ext}`) > -1);
|
||||
},
|
||||
|
|
|
@ -41,6 +41,7 @@ const RepoStore = {
|
|||
isCommitable: false,
|
||||
binary: false,
|
||||
currentBranch: '',
|
||||
targetBranch: 'new-branch',
|
||||
commitMessage: '',
|
||||
binaryMimeType: '',
|
||||
// scroll bar space for windows
|
||||
|
|
|
@ -155,6 +155,10 @@
|
|||
#commit-area {
|
||||
background: $gray-light;
|
||||
padding: 20px;
|
||||
|
||||
span.help-block {
|
||||
padding-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
#view-toggler {
|
||||
|
|
|
@ -72,7 +72,7 @@ module DropdownsHelper
|
|||
|
||||
def dropdown_input(placeholder, input_id: nil)
|
||||
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.html_safe
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
- @options && @options.each do |key, value|
|
||||
= hidden_field_tag key, value, id: nil
|
||||
.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]) }
|
||||
%li
|
||||
= dropdown_title _("Create a new branch")
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.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-labels-error.js-label-error
|
||||
%input#new_label_name.default-dropdown-input{ type: "text", placeholder: "Name new label" }
|
||||
|
|
Loading…
Reference in New Issue