authors multiselect

build.gradle

@@ -118,10 +118,10 @@ dependencies {
 
     compile group: 'org.webjars', name: 'font-awesome', version: '4.7.0'
     compile group: 'org.webjars', name: 'bootstrap', version: '4.1.3'
-    compile group: 'org.webjars', name: 'bootstrap-select', version: '1.13.8'
     compile group: 'org.webjars.npm', name: 'vue', version: '2.6.9'
     compile group: 'org.webjars.npm', name: 'vuex', version: '3.1.0'
     compile group: 'org.webjars.npm', name: 'vue-router', version: '3.0.2'
+    compile group: 'org.webjars.npm', name: 'vue-multiselect', version: '2.0.2'
     compile group: 'org.webjars.npm', name: 'http-vue-loader', version: '1.3.5'
     compile group: 'org.webjars.npm', name: 'axios', version: '0.18.0'
 

src/main/resources/static/index.html

@@ -5,6 +5,7 @@
     <title>NG-Tracker</title>
     <link rel="stylesheet" href="/webjars/bootstrap/4.1.3/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="/webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
+    <link rel="stylesheet" href="/webjars/vue-multiselect/2.0.2/dist/vue-multiselect.min.css"/>
     <link rel="stylesheet" href="/css/agency.css"/>
 
     <!-- Custom fonts for this template -->
@@ -22,6 +23,7 @@
 <script type="application/javascript" src="/webjars/vue/2.6.9/dist/vue.js"></script>
 <script type="application/javascript" src="/webjars/vuex/3.1.0/dist/vuex.min.js"></script>
 <script type="application/javascript" src="/webjars/vue-router/3.0.2/dist/vue-router.min.js"></script>
+<script type="application/javascript" src="/webjars/vue-multiselect/2.0.2/dist/vue-multiselect.min.js"></script>
 <script type="application/javascript" src="/webjars/http-vue-loader/1.3.5/src/httpVueLoader.js"></script>
 <script type="application/javascript" src="/webjars/axios/0.18.0/dist/axios.min.js"></script>
 <script type="application/javascript" src="/js/app-config.js?v=@@timestamp"></script>

src/main/resources/static/papers/paper.vue

@@ -3,8 +3,7 @@
         <div class="row">
             <div class="col-lg-12 text-center">
                 <h2 class="section-heading text-uppercase">Редактирование статьи</h2>
-                <paper-navigation>
-                </paper-navigation>
+                <paper-navigation/>
             </div>
         </div>
         <hr/>
@@ -35,16 +34,14 @@
                                     <div class="form-group">
                                         <label for="type">Тип статьи:</label>
                                         <select class="form-control" id="type">
-                                            <option v-for="type in allTypes" value="type.id">{{ type.name }}
-                                            </option>
+                                            <option v-for="type in allTypes" value="type.id">{{ type.name }}</option>
                                         </select>
                                     </div>
 
                                     <div class="form-group">
                                         <label for="status">Статус:</label>
                                         <select class="form-control" id="status">
-                                            <option v-for="status in allStatuses" value="status.id">{{status.name}}
-                                            </option>
+                                            <option v-for="status in allStatuses" value="status.id">{{status.name}}</option>
                                         </select>
                                     </div>
 
@@ -59,6 +56,19 @@
                                         <input class="form-control" id="url" type="text"
                                                placeholder="Url"/>
                                     </div>
+
+                                    <div class="form-group">
+                                        <label>Авторы:</label>
+                                        <multiselect v-model="paperAuthors"
+                                                     label="lastName"
+                                                     :multiple="true"
+                                                     :options="allAuthors"
+                                                     :searchable="true"
+                                                     :close-on-select="false"
+                                                     track-by="id"
+                                                     :show-labels="false"
+                                                     placeholder="-- Выберите авторов --"></multiselect>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -72,10 +82,12 @@
 <script>
     module.exports = {
         components: {
-            "paper-navigation": httpVueLoaderEx("/papers/paper-navigation.vue")
+            "paper-navigation": httpVueLoaderEx("/papers/paper-navigation.vue"),
+            Multiselect: window.VueMultiselect.default
         },
         data: function () {
             return {
+                paperAuthors:[],
                 allAuthors: [],
                 allTypes: [],
                 allStatuses: []