add authors during publishing

resources/assets/js/app.js

@@ -17,6 +17,7 @@ window.Vue = require('vue');
 
 Vue.component('my-vuetable', require('./components/MyVuetable.vue'));
 
+
 const app = new Vue({
     el: '#app'
 });

resources/assets/js/bootstrap.js

@@ -1,3 +1,5 @@
+window._ = require('lodash');
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the

resources/assets/js/components/MyAutocomplete.vue

@@ -0,0 +1,136 @@
+<!-- https://pineco.de/instant-ajax-search-laravel-vue/ 
+https://alligator.io/vuejs/vue-autocomplete-component/ -->
+<template>
+    <div>
+        <input type="search" @input="onChange" v-model="search" v-bind:disabled="isLoading == true" v-bind:title=title placeholder="Search for authors and contributors...">
+        <!-- <ul class="autocomplete-results" v-show="results.length > 0"> -->
+        <ul class="autocomplete-results" v-show="isOpen"> 
+             <li class="loading" v-if="isLoading" >Loading results...</li>
+
+            <li 
+                v-else
+                v-for="result in results" 
+                :key="result.id" 
+                @click="setResult(result)"
+                class="autocomplete-result">
+                 <strong>{{ result.full_name }}</strong>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+  //data from parent component
+  props: {
+    title: String
+    // items: {
+    //   type: Array,
+    //   required: false,
+    //   default: () => []
+    // },
+    // isAsync: {
+    //   type: Boolean,
+    //   required: false,
+    //   default: false
+    // }
+  },
+  data() {
+    return {
+      search: null,
+      results: [],
+      isOpen: false,
+      isLoading: false,
+      isAsync: true,
+      items: []
+    };
+  },
+
+  //   watch: {
+  //     search(after, before) {
+  //       this.isOpen = true;
+  //       this.filterResults();
+  //     }
+  //   },
+
+  watch: {
+    // Once the items content changes, it means the parent component
+    // provided the needed data
+    items: function(value, oldValue) {
+      // we want to make sure we only do this when it's an async request
+      if (this.isAsync) {
+        this.results = value;
+        this.isOpen = true;
+        this.isLoading = false;
+      } else {
+        if (val.length !== oldValue.length) {
+          this.results = val;
+          this.isLoading = false;
+        }
+      }
+    }
+  },
+
+  methods: {
+    setResult(person) {
+      // this.search = person.full_name;
+      this.reset();
+      this.isOpen = false;
+      this.$emit("person", person);
+    },
+    reset() {
+      this.search = "";
+    },
+    onChange() {
+      // Let's warn the parent that a change was made
+      this.$emit("input", this.search);
+
+      // Is the data given by an outside ajax request?
+      if (this.isAsync) {
+        this.isLoading = true;
+        this.filterResults();
+      } else {
+        // Data is sync, we can search our flat array
+        this.filterResults();
+        this.isOpen = true;
+      }
+    },
+    filterResults() {
+      var self = this;
+      axios
+        .get("/api/persons", { params: { filter: this.search } })
+        .then(function(response) {
+          return (self.items = response.data.data);
+        })
+        .catch(function(error) {
+          alert(error);
+        });
+      // this.results = this.items.filter(item => {
+      //   return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
+      // });
+    }
+  }
+};
+</script>
+
+<style>
+.autocomplete-results {
+  padding: 0;
+  margin: 0;
+  border: 1px solid #eeeeee;
+  height: 120px;
+  overflow: auto;
+}
+
+.autocomplete-result {
+  list-style: none;
+  text-align: left;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+
+.autocomplete-result:hover {
+  background-color: #4aae9b;
+  color: white;
+}
+</style>

resources/assets/js/datasetPublish.js

@@ -19,12 +19,14 @@
 // else {
 //     console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 // }
+window._ = require('lodash');
 // window.Vue = require('vue');
 // Vue.prototype.$http = axios;
 
 // Vue.component('example', require('./components/Example.vue'));
-const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3;
+Vue.component('my-autocomplete', require('./components/MyAutocomplete.vue'));
 
+const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3;
 const app = new Vue({
     el: '#app',
 
@@ -41,6 +43,7 @@ const app = new Vue({
             currentStatus: null,
             uploadFieldName: 'photos',
             fileCount: 0,
+            persons: [],
 
             step: 1,
             dataset: {
@@ -98,6 +101,7 @@ const app = new Vue({
             this.dataset.files = [];
         },
         save() {
+            var _this = this;
             this.errors = [];
             /*
            Initialize the form data
@@ -151,7 +155,7 @@ const app = new Vue({
                     // this.loading = false;            
                     // this.items = response.data;          
                     //Vue.set(app.skills, 1, "test55");
-                    this.currentStatus = STATUS_SUCCESS;
+                    _this.currentStatus = STATUS_SUCCESS;
 
                     if (response.data.redirect) {
                         window.location = response.data.redirect;
@@ -166,14 +170,14 @@ const app = new Vue({
                         var errorsArray = errorObject.response.data.errors;
                         for (var index in errorsArray) {
                             console.log(errorsArray[index]);
-                            this.errors.push(errorsArray[index]);
+                            _this.errors.push(errorsArray[index]);
                         }
                     }
                     if (errorObject.response.data.error) {
                         var error = errorObject.response.data.error;
-                        this.errors.push(error.message);
+                        _this.errors.push(error.message);
                     }
-                    this.currentStatus = STATUS_FAILED;
+                    _this.currentStatus = STATUS_FAILED;
                 });
         },
         // filesChange(fieldName, fileList) {
@@ -212,6 +216,9 @@ const app = new Vue({
             // }       
 
         },
+        onAddPerson(person) {
+            this.persons.push(person);
+        },
         /*
         Removes a select file the user has uploaded
         */