diff options
5 files changed, 100 insertions, 8 deletions
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6 index ef73d381fb4..67d9f023866 100644 --- a/app/assets/javascripts/boards/boards_bundle.js.es6 +++ b/app/assets/javascripts/boards/boards_bundle.js.es6 @@ -71,6 +71,12 @@ $(() => { Store.addBlankState(); this.loading = false; + + if (this.state.lists.length > 0) { + Store.modal.selectedList = this.state.lists[0]; + } + + Store.modal.showAddIssuesModal = true; }); } }); diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6 index aadb754fd9e..e9f400952b7 100644 --- a/app/assets/javascripts/boards/components/modal/footer.js.es6 +++ b/app/assets/javascripts/boards/components/modal/footer.js.es6 @@ -1,3 +1,4 @@ +//= require ./lists_dropdown /* global Vue */ (() => { const Store = gl.issueBoards.BoardsStore; @@ -31,18 +32,34 @@ addIssues() { const issueIds = this.store.issues.filter(issue => issue.selected).map(issue => issue.id); + issueIds.forEach((id) => { + const issue = this.store.issues.filter(issue => issue.id == id)[0]; + this.store.selectedList.addIssue(issue); + this.store.selectedList.issuesSize += 1; + }); + this.disabled = true; + this.hideModal(); }, }, + components: { + 'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown, + }, template: ` <footer class="form-actions add-issues-footer"> - <button - class="btn btn-success pull-left" - type="button" - :disabled="submitDisabled" - @click="addIssues"> - {{ submitText }} - </button> + <div class="pull-left"> + <button + class="btn btn-success" + type="button" + :disabled="submitDisabled" + @click="addIssues"> + {{ submitText }} + </button> + <span class="add-issues-footer-to-list"> + to list + </span> + <lists-dropdown></lists-dropdown> + </div> <button class="btn btn-default pull-right" type="button" diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 new file mode 100644 index 00000000000..27da5057083 --- /dev/null +++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 @@ -0,0 +1,61 @@ +/* global Vue */ +(() => { + const Store = gl.issueBoards.BoardsStore; + + window.gl = window.gl || {}; + window.gl.issueBoards = window.gl.issueBoards || {}; + + gl.issueBoards.ModalFooterListsDropdown = Vue.extend({ + data() { + return { + modal: Store.modal, + state: Store.state, + } + }, + computed: { + selected() { + return this.modal.selectedList; + }, + }, + methods: { + selectList(list) { + this.modal.selectedList = list; + }, + }, + template: ` + <div class="dropdown inline"> + <button + class="dropdown-menu-toggle" + type="button" + data-toggle="dropdown" + aria-expanded="false"> + {{ selected.title }} + <span + class="dropdown-label-box pull-right" + :style="{ backgroundColor: selected.label.color }"> + </span> + <i class="fa fa-chevron-down"></i> + </button> + <div class="dropdown-menu dropdown-menu-selectable"> + <ul> + <li + v-for="list in state.lists" + v-if="list.type == 'label'"> + <a + href="#" + role="button" + :class="{ 'is-active': list.id == selected.id }" + @click="selectList(list)"> + <span + class="dropdown-label-box" + :style="{ backgroundColor: list.label.color }"> + </span> + {{ list.title }} + </a> + </li> + </ul> + </div> + </div> + `, + }); +})(); diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6 index 4c5eb57f5c9..fa0224beee5 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js.es6 +++ b/app/assets/javascripts/boards/stores/boards_store.js.es6 @@ -14,8 +14,9 @@ }, modal: { issues: [], - showAddIssuesModal: true, + showAddIssuesModal: false, activeTab: 'all', + selectedList: {} }, moving: { issue: {}, diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index cd70a14bec5..bf1c0d1842b 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -427,6 +427,13 @@ padding-right: 15px; } +.add-issues-footer-to-list { + display: inline-block; + padding-left: 6px; + padding-right: 6px; + line-height: 34px; +} + .add-issues-list-columns { width: 100%; padding-top: 3px; |