rename board form

app/assets/javascripts/boards/components/board_new_form.vue → app/assets/javascripts/boards/components/board_form.vue

@@ -25,7 +25,7 @@
         >
       </div>
       <div class="media append-bottom-10">
-        <label class="label-light media-body align-self-sm-center">
+        <label class="label-light media-body">
           Board scope
         </label>
         <button
@@ -42,7 +42,10 @@
         </p>
 
         <!-- TODO: if current_board_parent.issue_board_milestone_available?(current_user) -->
-        <div class="board-inner-container">
+        <form-block
+          title="Milestone"
+          defaultText="Any milestone"
+        >
           <input
             type="hidden"
             id="board-milestone"
@@ -53,8 +56,34 @@
             :milestone-path="milestonePath"
             :select-milestone="selectMilestone">
           </board-milestone-select>
-        </div>
+        </form-block>
+
+        <form-block
+          title="Labels"
+          defaultText="Any label"
+        >
+        </form-block>
+
+        <form-block
+          title="Assignee"
+          defaultText="Any assignee"
+          :fieldName="'filter[assignee]'"
+        >
+        </form-block>
+
+        <form-block
+          title="Author"
+          defaultText="Any author"
+          :fieldName="'filter[author]'"
+        >
+        </form-block>
 
+        <form-block
+          title="Weight"
+          defaultText="Any weight"
+          :fieldName="'filter[weight]'"
+        >
+        </form-block>
       </div>
     </form>
   </popup-dialog>
@@ -65,6 +94,7 @@
 
 import Vue from 'vue';
 import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
+import FormBlock from './form_block.vue';
 import BoardMilestoneSelect from './milestone_select.vue';
 
 window.gl = window.gl || {};
@@ -96,6 +126,7 @@ export default Vue.extend({
   components: {
     BoardMilestoneSelect,
     PopupDialog,
+    FormBlock,
   },
   mounted() {
     if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {

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

 import Vue from 'vue';
-import BoardSelectorForm from './board_new_form.vue';
+import BoardForm from './board_form.vue';
 
 (() => {
   window.gl = window.gl || {};
@@ -11,7 +11,7 @@ import BoardSelectorForm from './board_new_form.vue';
 
   gl.issueBoards.BoardsSelector = Vue.extend({
     components: {
-      'board-selector-form': BoardSelectorForm,
+      'board-form': BoardForm,
     },
     props: {
       currentBoard: {

app/assets/javascripts/boards/components/dropdown.vue

 <template>
-  <div class="">
-    <div class="media">
-      <label class="media-body">Milestone</label>
-      <a href="#" data-dropdown-trigger="#milestone-dropdown" ref="trigger">
-        Edit
-      </a>
-    </div>
-    <div class="droplab-dropdown">
-      <div>
-        Current value
-      </div>
-      <ul
-        ref="list"
-        class="dropdown-menu"
-      >
-        <slot name="items"></slot>
-      </ul>
-    </div>
-  </div>
+  <ul
+    ref="list"
+    class="dropdown-menu"
+  >
+    <slot name="items"></slot>
+  </ul>
 </template>
 
 <script>

app/assets/javascripts/boards/components/form_block.vue

+<template>
+  <div class="board-inner-container">
+    <div class="media">
+      <label class="media-body">{{ title }}</label>
+      <a href="#" @click.prevent="toggleEditing">
+        Edit
+      </a>
+    </div>
+    <div class="droplab-dropdown">
+      <div v-if="editing">
+        <input
+          v-if="fieldName"
+          :name="fieldName"
+        >
+        <slot></slot>
+      </div>
+      <div v-else>
+        {{ defaultText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      defaultText: {
+        type: String,
+        required: true,
+      },
+      title: {
+        type: String,
+        required: true,
+      },
+      fieldName: {
+        type: String,
+        required: false,
+      },
+    },
+    data() {
+      return {
+        editing: false,
+      };
+    },
+    methods: {
+      toggleEditing() {
+        this.editing = !this.editing;
+      },
+    },
+  };
+</script>
\ No newline at end of file

app/assets/javascripts/vue_shared/components/popup_dialog.vue

@@ -48,7 +48,7 @@ export default {
   tabindex="-1"
 >
   <div
-    class="modal-dialog modal-sm"
+    class="modal-dialog modal-lg"
     role="document"
   >
     <div class="modal-content">

app/views/shared/boards/_switcher.html.haml

@@ -35,6 +35,6 @@
                   %span.text-danger
                     Delete board
 
-    %board-selector-form{ ":milestone-path" => "milestonePath",
+    %board-form{ ":milestone-path" => "milestonePath",
       ":can-admin-board" => can?(current_user, :admin_board, parent),
       "v-if" => "currentPage" }