Skip to content

G
gitlab-ce
Commit 0c196e76 authored by Simon Knox's avatar Simon Knox
Browse files
Options

move board crud to a modal

parent c472e8f6
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 132 deletions
app/assets/javascripts/boards/components/board_new_form.js
View file @ 0c196e76
...@@ -48,14 +48,18 @@ import extraMilestones from '../mixins/extra_milestones'; ...@@ -48,14 +48,18 @@ import extraMilestones from '../mixins/extra_milestones';
return 'Save'; return 'Save';
}, },
title() {
if (this.currentPage === 'new') {
return 'Create new board';
}
// TODO check for readonly
return 'Edit board';
},
milestoneToggleText() { milestoneToggleText() {
return this.board.milestone.title || 'Milestone'; return this.board.milestone ? this.board.milestone.title : 'Milestone';
}, },
submitDisabled() { submitDisabled() {
if (this.currentPage !== 'milestone') {
return this.board.name === '';
}
return false; return false;
}, },
}, },
...@@ -83,10 +87,10 @@ import extraMilestones from '../mixins/extra_milestones'; ...@@ -83,10 +87,10 @@ import extraMilestones from '../mixins/extra_milestones';
if (this.currentBoard && this.currentPage !== 'new') { if (this.currentBoard && this.currentPage !== 'new') {
this.currentBoard.name = this.board.name; this.currentBoard.name = this.board.name;
if (this.currentPage === 'milestone') { // We reload the page to make sure the store & state of the app are correct
// We reload the page to make sure the store & state of the app are correct this.refreshPage();
this.refreshPage();
} $('#edit-board-modal').modal('hide');
// Enable the button thanks to our jQuery disabling it // Enable the button thanks to our jQuery disabling it
$(this.$refs.submitBtn).enable(); $(this.$refs.submitBtn).enable();
......
app/assets/javascripts/boards/components/boards_selector.js
View file @ 0c196e76
...@@ -55,19 +55,6 @@ import './board_new_form'; ...@@ -55,19 +55,6 @@ import './board_new_form';
showDelete() { showDelete() {
return this.boards.length > 1; return this.boards.length > 1;
}, },
title() {
if (this.currentPage === 'edit') {
return 'Edit board name';
} else if (this.currentPage === 'milestone') {
return 'Edit board milestone';
} else if (this.currentPage === 'new') {
return 'Create new board';
} else if (this.currentPage === 'delete') {
return 'Delete board';
}
return 'Go to a board';
},
}, },
methods: { methods: {
showPage(page) { showPage(page) {
......
app/views/shared/boards/_switcher.html.haml
View file @ 0c196e76
...@@ -5,63 +5,41 @@ ...@@ -5,63 +5,41 @@
%boards-selector{ "inline-template" => true, %boards-selector{ "inline-template" => true,
":current-board" => current_board_json, ":current-board" => current_board_json,
"milestone-path" => milestones_filter_path(milestone_filter_opts) } "milestone-path" => milestones_filter_path(milestone_filter_opts) }
.dropdown %span.boards-selector-wrapper
%button.dropdown-menu-toggle{ "@click" => "loadBoards", .dropdown
data: { toggle: "dropdown" } } %button.dropdown-menu-toggle{ "@click" => "loadBoards",
{{ board.name }} data: { toggle: "dropdown" } }
= icon("chevron-down") {{ board.name }}
.dropdown-menu{ ":class" => "{ 'is-loading': loading }" } = icon("chevron-down")
.dropdown-title .dropdown-menu{ ":class" => "{ 'is-loading': loading }" }
%button.dropdown-title-button.dropdown-menu-back{ type: "button", .dropdown-content
aria: { label: "Go back" }, %ul{ "v-if" => "!loading" }
"@click.stop.prevent" => "showPage('')", %li{ "v-for" => "board in boards" }
"v-if" => "currentPage !== ''" } %a{ ":href" => "'#{board_base_url}/' + board.id" }
= icon("arrow-left") {{ board.name }}
{{ title }} - if !multiple_boards_available? && current_board_parent.boards.size > 1
%button.dropdown-title-button.dropdown-menu-close{ type: "button", %li.small
aria: { label: "Close" } } Some of your boards are hidden, activate a license to see them again.
= icon("times", class: "dropdown-menu-close-icon") .dropdown-loading{ "v-if" => "loading" }
.dropdown-content{ "v-if" => "currentPage === ''" } = icon("spin spinner")
%ul{ "v-if" => "!loading" }
%li{ "v-for" => "board in boards" } - if can?(current_user, :admin_board, parent)
%a{ ":href" => "'#{board_base_url}/' + board.id" } .dropdown-footer
{{ board.name }} %ul.dropdown-footer-list
- if !multiple_boards_available? && current_board_parent.boards.size > 1 - if parent.feature_available?(:multiple_issue_boards)
%li.small %li
Some of your boards are hidden, activate a license to see them again. %a{ "href" => "#", "@click.prevent" => "showPage('new')", data: { toggle: 'modal', target: '#edit-board-modal' } }
.dropdown-loading{ "v-if" => "loading" } Create new board
= icon("spin spinner")
- if can?(current_user, :admin_board, parent)
%board-selector-form{ "inline-template" => true,
":milestone-path" => "milestonePath",
"v-if" => "currentPage === 'new' || currentPage === 'edit' || currentPage === 'milestone'" }
= render "shared/boards/components/form"
.dropdown-content.board-selector-page-two{ "v-if" => "currentPage === 'delete'" }
%p
Are you sure you want to delete this board?
.board-delete-btns.clearfix
= link_to current_board_path(board),
class: "btn btn-danger pull-left",
method: :delete do
Delete
%button.btn.btn-default.pull-right{ type: "button",
"@click.stop.prevent" => "showPage('')" }
Cancel
- if can?(current_user, :admin_board, parent)
.dropdown-footer{ "v-if" => "currentPage === ''" }
%ul.dropdown-footer-list
- if parent.feature_available?(:multiple_issue_boards)
%li
%a{ "href" => "#", "@click.stop.prevent" => "showPage('new')" }
Create new board
%li
%a{ "href" => "#", "@click.stop.prevent" => "showPage('edit')" }
Edit board name
- if parent.issue_board_milestone_available?(current_user)
%li %li
%a{ "href" => "#", "@click.stop.prevent" => "showPage('milestone')" } %a{ "href" => "#", "@click.prevent" => "showPage('edit')", data: { toggle: 'modal', target: '#edit-board-modal' } }
Edit board milestone Edit board
%li{ "v-if" => "showDelete" } %li{ "v-if" => "showDelete" }
%a{ "href" => "#", "@click.stop.prevent" => "showPage('delete')" } %a{ "href" => "#", "@click.prevent" => "showPage('delete')", data: { toggle: 'modal', target: '#edit-board-modal' } }
%span.text-danger %span.text-danger
Delete board Delete board
- if can?(current_user, :admin_board, parent)
%board-selector-form{ "inline-template" => true,
":milestone-path" => "milestonePath",
"v-if" => "currentPage" }
= render "shared/boards/components/form"
app/views/shared/boards/components/_form.html.haml
View file @ 0c196e76
.board-selector-page-two #edit-board-modal.modal.fade{ tabindex: -1 }
%form{ "@submit.prevent" => "submit" } .modal-dialog.modal-md
.dropdown-content .modal-content
%input{ type: "hidden", .modal-header
id: "board-milestone", %a.close{ href: "#", "data-dismiss" => "modal" } ×
"v-model.number" => "board.milestone_id" } %h4
%div{ "v-if" => "currentPage !== 'milestone'" } {{ title }}
%label.label-light{ for: "board-new-name" } %div{ "v-if" => "currentPage === 'delete'" }
Board name .modal-body
%input.form-control{ type: "text", %p
id: "board-new-name", Are you sure you want to delete this board?
"v-model" => "board.name" } .modal-footer
- if current_board_parent.issue_board_milestone_available?(current_user) = link_to current_board_path(board),
.dropdown.board-inner-milestone-dropdown{ ":class" => "{ open: milestoneDropdownOpen }", class: "btn btn-danger pull-left",
"v-if" => "currentPage === 'new'" } method: :delete do
%label.label-light{ for: "board-milestone" } Delete
Board milestone %button.btn.btn-default.pull-right{ type: "button",
%button.dropdown-menu-toggle.wide{ type: "button", "@click" => "cancel",
"@click.stop.prevent" => "loadMilestones($event)" } data: { dismiss: "modal" } }
{{ milestoneToggleText }} Cancel
= icon("chevron-down") %form{ "v-else" => true,
.dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen", "@submit.prevent" => "submit" }
ref: "milestoneDropdown" } .modal-body
.dropdown-content %input{ type: "hidden",
%ul id: "board-milestone",
%li{ "v-for" => "milestone in extraMilestones" } "v-model.number" => "board.milestone_id" }
%a{ href: "#", %div
":class" => "{ 'is-active': milestone.id === board.milestone_id }", %label.label-light{ for: "board-new-name" }
"@click.stop.prevent" => "selectMilestone(milestone)" } Board name
{{ milestone.title }} %input.form-control{ type: "text",
%li.divider id: "board-new-name",
%li{ "v-for" => "milestone in milestones" } "v-model" => "board.name" }
%a{ href: "#", - if current_board_parent.issue_board_milestone_available?(current_user)
":class" => "{ 'is-active': milestone.id === board.milestone_id }", .dropdown.board-inner-milestone-dropdown{ ":class" => "{ open: milestoneDropdownOpen }" }
"@click.stop.prevent" => "selectMilestone(milestone)" } %label.label-light{ for: "board-milestone" }
{{ milestone.title }} Board milestone
= dropdown_loading %button.dropdown-menu-toggle.wide{ type: "button",
%span "@click.stop.prevent" => "loadMilestones($event)" }
Only show issues scheduled for the selected milestone {{ milestoneToggleText }}
%board-milestone-select{ "v-if" => "currentPage == 'milestone'", = icon("chevron-down")
":milestone-path" => "milestonePath", .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen",
":select-milestone" => "selectMilestone", ref: "milestoneDropdown" }
":board" => "board" } .dropdown-content
.dropdown-footer %ul
%button.btn.btn-primary.pull-left{ type: "submit", %li{ "v-for" => "milestone in extraMilestones" }
":disabled" => "submitDisabled", %a{ href: "#",
"ref" => "'submit-btn'" } ":class" => "{ 'is-active': milestone.id === board.milestone_id }",
{{ buttonText }} "@click.stop.prevent" => "selectMilestone(milestone)" }
%button.btn.btn-default.pull-right{ type: "button", {{ milestone.title }}
"@click.stop.prevent" => "cancel" } %li.divider
Cancel %li{ "v-for" => "milestone in milestones" }
%a{ href: "#",
":class" => "{ 'is-active': milestone.id === board.milestone_id }",
"@click.stop.prevent" => "selectMilestone(milestone)" }
{{ milestone.title }}
= dropdown_loading
.modal-footer
%button.btn.btn-primary.pull-left{ type: "submit",
":disabled" => "submitDisabled",
"ref" => "'submit-btn'" }
{{ buttonText }}
%button.btn.btn-default.pull-right{ type: "button",
"@click.prevent" => "cancel",
data: { dismiss: "modal" } }
Cancel
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7