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