move board crud to a modal

app/assets/javascripts/boards/components/board_new_form.js

@@ -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();
-              }
+
+              $('#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

@@ -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

@@ -5,23 +5,14 @@
 %boards-selector{ "inline-template" => true,
   ":current-board" => current_board_json,
   "milestone-path" => milestones_filter_path(milestone_filter_opts) }
+  %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-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 === ''" }
+        .dropdown-content
           %ul{ "v-if" => "!loading" }
             %li{ "v-for" => "board in boards" }
               %a{ ":href" => "'#{board_base_url}/' + board.id" }
@@ -31,37 +22,24 @@
                 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 === ''" }
+          .dropdown-footer
             %ul.dropdown-footer-list
               - if parent.feature_available?(:multiple_issue_boards)
                 %li
-                %a{ "href" => "#", "@click.stop.prevent" => "showPage('new')" }
+                  %a{ "href" => "#", "@click.prevent" => "showPage('new')", data: { toggle: 'modal', target: '#edit-board-modal' } }
                     Create new board
               %li
-              %a{ "href" => "#", "@click.stop.prevent" => "showPage('edit')" }
-                Edit board name
-            - if parent.issue_board_milestone_available?(current_user)
-              %li
-                %a{ "href" => "#", "@click.stop.prevent" => "showPage('milestone')" }
-                  Edit board milestone
+                %a{ "href" => "#", "@click.prevent" => "showPage('edit')", data: { toggle: 'modal', target: '#edit-board-modal' } }
+                  Edit board
               %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
                     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

-.board-selector-page-two
-  %form{ "@submit.prevent" => "submit" }
-    .dropdown-content
+#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{ "v-if" => "currentPage !== 'milestone'" }
+          %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 }",
-          "v-if" => "currentPage === 'new'" }
+            .dropdown.board-inner-milestone-dropdown{ ":class" => "{ open: milestoneDropdownOpen }" }
               %label.label-light{ for: "board-milestone" }
                 Board milestone
               %button.dropdown-menu-toggle.wide{ type: "button",
@@ -35,17 +54,12 @@
                         "@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
+        .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.stop.prevent" => "cancel" }
+            "@click.prevent" => "cancel",
+            data: { dismiss: "modal" } }
             Cancel