publish datasets with authors

resources/assets/js/components/MyAutocomplete.vue

@@ -2,17 +2,20 @@
 https://alligator.io/vuejs/vue-autocomplete-component/ -->
 <template>
     <div style="position:relative">
-        <input type="search" @input="searchChanged" v-model="search" v-bind:disabled="isLoading == true" v-bind:title="title" v-bind:placeholder="title" class="pure-u-23-24">
+        <input type="search" @input="searchChanged" v-model="search" v-bind:disabled="isLoading == true" v-bind:title="title" v-bind:placeholder="title" 
+        class="pure-u-23-24" v-on:keydown.down="onArrowDown" v-on:keydown.up="onArrowUp" v-on:keydown.enter="onEnter">
         <!-- <ul class="autocomplete-results" v-show="results.length > 0"> -->
         <ul class="autocomplete-results pure-u-23-24" v-show="isOpen"> 
              <li class="loading" v-if="isLoading" >Loading results...</li>
 
             <li 
                 v-else
-                v-for="suggestion in results" 
-                :key="suggestion.id" 
+                v-for="(suggestion, i) in results" 
+                :key="i" 
                 @click="setResult(suggestion)"
-                class="autocomplete-result">
+                class="autocomplete-result"
+                :class="{ 'is-active': i === arrowCounter }"
+                >
                  <strong>{{ suggestion.full_name }}</strong>
             </li>
         </ul>
@@ -20,6 +23,9 @@ https://alligator.io/vuejs/vue-autocomplete-component/ -->
 </template>
 
 <script>
+import _ from 'lodash';
+import axios from 'axios';
+
 export default {
   //data from parent component
   props: {
@@ -42,7 +48,8 @@ export default {
       isOpen: false,
       isLoading: false,
       isAsync: true,
-      items: []
+      items: [],
+      arrowCounter: -1
     };
   },
 
@@ -74,7 +81,7 @@ export default {
   methods: {
     setResult(person) {
       // this.search = person.full_name;
-      this.reset();     
+      this.reset();
       this.$emit("person", person);
     },
     reset() {
@@ -98,15 +105,14 @@ export default {
           });
           this.isOpen = true;
         }
-      }
-      else{
+      } else {
         this.items = [];
       }
     },
-    filterResults() {
+    filterResults: _.debounce(function() {
       var self = this;
       axios
-        .get("/api/persons", { params: { filter: this.search } })
+        .get("/api/persons", { params: { filter: this.search.toLowerCase() } })
         .then(function(response) {
           return (self.items = response.data.data);
         })
@@ -116,13 +122,32 @@ export default {
       // this.results = this.items.filter(item => {
       //   return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
       // });
+    }, 300),
+    onArrowDown() {
+      if (this.arrowCounter < this.results.length - 1) {
+        this.arrowCounter = this.arrowCounter + 1;
+      }
+    },
+    onArrowUp() {
+      if (this.arrowCounter > 0) {
+        this.arrowCounter = this.arrowCounter - 1;
+      }
+    },
+    onEnter() {
+      if(Array.isArray(this.results) && this.results.length && this.arrowCounter !== -1 && this.arrowCounter < this.results.length){
+        //this.search = this.results[this.arrowCounter];
+        var person = this.results[this.arrowCounter];
+        this.$emit("person", person);
+        //this.isOpen = false;
+        this.reset();
+        this.arrowCounter = -1;
+      }     
     }
   },
   computed: {
     // isOpen() {
     //   return this.results.length > 0;
     // }
-    
   }
 };
 </script>
@@ -143,6 +168,7 @@ export default {
   cursor: pointer;
 }
 
+.autocomplete-result.is-active,
 .autocomplete-result:hover {
   background-color: #4aae9b;
   color: white;

resources/assets/js/datasetPublish.js

@@ -19,18 +19,18 @@
 // else {
 //     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 // }
-window._ = require('lodash');
+// window._ = require('lodash');
 // window.Vue = require('vue');
 // Vue.prototype.$http = axios;
 
-// import Vue from 'vue';
+import Vue from 'vue';
+
 // Vue.component('example', require('./components/Example.vue'));
 //Vue.component('my-autocomplete', require('./components/MyAutocomplete.vue'));
 import MyAutocomplete from './components/MyAutocomplete.vue';
 import VeeValidate from 'vee-validate';
 // import { Validator } from 'vee-validate';
 
-
 Vue.use(VeeValidate);
 
 const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3;
@@ -55,7 +55,7 @@ const app = new Vue({
             step: 1,
             dataset: {
                 type: '',
-                state: '',
+                state: 'inprogress',
                 rights: null,
                 project_id: '',
 
@@ -71,7 +71,7 @@ const app = new Vue({
                     value: '',
                     language: ''
                 },
-                checkedPersons: [],
+                checkedAuthors: [],
                 checkedLicenses: [],// [],
                 files: []
             }
@@ -160,6 +160,10 @@ const app = new Vue({
                 formData.append('licenses[' + i + ']', this.dataset.checkedLicenses[i]);
             }
 
+            for (var i = 0; i < this.dataset.checkedAuthors.length; i++) {
+                formData.append('authors[' + i + ']', this.dataset.checkedAuthors[i]);
+            }
+
             /*
             Make the request to the POST /multiple-files URL
             */
@@ -238,7 +242,12 @@ const app = new Vue({
 
         },
         onAddAuthor(person) {
-            this.persons.push(person);
+            //if person is not in person array
+            //if (this.persons.includes(person) == false) {
+            if (this.persons.filter(e => e.id === person.id).length == 0) {    
+                this.persons.push(person);
+                this.dataset.checkedAuthors.push(person.id);
+            }
         },
         /*
         Removes a select file the user has uploaded

resources/assets/js/lib.js

@@ -3,11 +3,14 @@
  * includes Vue and other libraries. It is a great starting point when
  * building robust, powerful web applications using Vue and Laravel.
  */
-require('./bootstrap');
-// window.Vue = require('vue');
-import Vue from 'vue';
+// require('./bootstrap');
 
-Vue.prototype.$http = axios;
+window.$ = window.jQuery = require('jquery');
+
+// window.Vue = require('vue');
+// import Vue from 'vue';
+
+// Vue.prototype.$http = axios;
 
 // Vue.component('example', require('./components/Example.vue'));