diff options
Diffstat (limited to 'app/assets/javascripts/repo/components/repo_commit_section.vue')
-rw-r--r-- | app/assets/javascripts/repo/components/repo_commit_section.vue | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue new file mode 100644 index 00000000000..bd83f80c928 --- /dev/null +++ b/app/assets/javascripts/repo/components/repo_commit_section.vue @@ -0,0 +1,100 @@ +<script> +/* global Flash */ +import Store from '../stores/repo_store'; +import RepoMixin from '../mixins/repo_mixin'; +import Helper from '../helpers/repo_helper'; +import Service from '../services/repo_service'; + +const RepoCommitSection = { + data: () => Store, + + mixins: [RepoMixin], + + computed: { + branchPaths() { + const branch = Helper.getBranch(); + return this.changedFiles.map(f => Helper.getFilePathFromFullPath(f.url, branch)); + }, + + cantCommitYet() { + return !this.commitMessage || this.submitCommitsLoading; + }, + + filePluralize() { + return this.changedFiles.length > 1 ? 'files' : 'file'; + }, + }, + + methods: { + makeCommit() { + // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions + const branch = Helper.getBranch(); + const commitMessage = this.commitMessage; + const actions = this.changedFiles.map(f => ({ + action: 'update', + file_path: Helper.getFilePathFromFullPath(f.url, branch), + content: f.newContent, + })); + const payload = { + branch: Store.targetBranch, + commit_message: commitMessage, + actions, + }; + Store.submitCommitsLoading = true; + Service.commitFiles(payload, this.resetCommitState); + }, + + resetCommitState() { + this.submitCommitsLoading = false; + this.changedFiles = []; + this.openedFiles = []; + this.commitMessage = ''; + this.editMode = false; + $('html, body').animate({ scrollTop: 0 }, 'fast'); + }, + }, +}; + +export default RepoCommitSection; +</script> + +<template> +<div id="commit-area" v-if="isCommitable && changedFiles.length" > + <form class="form-horizontal"> + <fieldset> + <div class="form-group"> + <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 branchPaths" :key="file.id"> + <span class="help-block">{{file}}</span> + </li> + </ul> + </div> + </div> + <!-- Textarea + --> + <div class="form-group"> + <label class="col-md-4 control-label" for="commit-message">Commit message</label> + <div class="col-md-4"> + <textarea class="form-control" id="commit-message" name="commit-message" v-model="commitMessage"></textarea> + </div> + </div> + <!-- Button Drop Down + --> + <div class="form-group target-branch"> + <label class="col-md-4 control-label" for="target-branch">Target branch</label> + <div class="col-md-4"> + <span class="help-block">{{targetBranch}}</span> + </div> + </div> + <div class="col-md-offset-4 col-md-4"> + <button type="submit" :disabled="cantCommitYet" class="btn btn-success submit-commit" @click.prevent="makeCommit"> + <i class="fa fa-spinner fa-spin" v-if="submitCommitsLoading"></i> + <span class="commit-summary">Commit {{changedFiles.length}} {{filePluralize}}</span> + </button> + </div> + </fieldset> + </form> +</div> +</template> |