+ PersonTable.vue component

+ 3 keywords are required + custom error message
+ composer updates

resources/assets/js/components/Dataset.vue

@@ -54,7 +54,7 @@ function initialState() {
     // checkedSubmitters: [],
 
     persons: [],
-    contributors: [],
+    contributors: []
     // submitters: []
   };
 }
@@ -75,7 +75,7 @@ const dataset = new Vue({
       this.title_main.language = val;
       this.abstract_main.language = val;
     }
-  },
+  },  
   methods: {
     reset() {
       Object.assign(this.$data, initialState());

resources/assets/js/components/PersonTable.vue

@@ -1,8 +1,8 @@
  <template>
-  <table class="pure-table pure-table-horizontal" v-if="list.length">
+  <table class="pure-table pure-table-horizontal" v-if="personlist.length">
     <thead class="thead-dark">
       <tr>
-        <th scope="col">Sort Order</th>
+        <th scope="col">#</th>
         <th scope="col">First Name</th>
         <th scope="col">Last Name</th>
         <th scope="col">Email</th>
@@ -10,9 +10,9 @@
         <th></th>
       </tr>
     </thead>
-    <draggable v-bind:list="list" tag="tbody" v-on:start="isDragging=true" v-on:end="isDragging=false">      
+    <draggable v-bind:list="personlist" tag="tbody" v-on:start="isDragging=true" v-on:end="isDragging=false">      
       <tr
-        v-for="(item, index) in list"
+        v-for="(item, index) in personlist"
         v-bind:key="item.id"
         v-bind:class="[item.status==1 ? 'activeClass' : 'inactiveClass']"
       >
@@ -74,7 +74,7 @@ export default {
   inject: {
     $validator: "$validator"
   },
-  name: "creator-table",  
+  name: "person-table",  
   components: {
     draggable
   },
@@ -92,7 +92,7 @@ export default {
     };
   },
   props: {
-    list: {
+    personlist: {
       type: Array,
       required: true
     },
@@ -105,7 +105,7 @@ export default {
       console.log("custom-actions: " + action, data.full_name, index);
     },
     removeAuthor(key) {
-      this.list.splice(key, 1);
+      this.personlist.splice(key, 1);
     },
     onMove({ relatedContext, draggedContext }) {
       const relatedElement = relatedContext.element;

resources/assets/js/datasetPublish.js

@@ -29,10 +29,11 @@ import axios from 'axios';
 // Vue.component('example', require('./components/Example.vue'));
 //Vue.component('my-autocomplete', require('./components/MyAutocomplete.vue'));
 import MyAutocomplete from './components/MyAutocomplete.vue';
+import messagesEN from './strings/messages/en.js';
 import VeeValidate from 'vee-validate';
 import dataset from './components/Dataset';
 import LocationsMap from './components/LocationsMap.vue';
-import CreatorTable from './components/CreatorTable.vue';
+import PersonTable from './components/PersonTable.vue';
 import modal from './components/ShowModal.vue';
 // import datetime from 'vuejs-datetimepicker';
 // import { Validator } from 'vee-validate';
@@ -40,16 +41,28 @@ import VueToast from 'vue-toast-notification';
 import 'vue-toast-notification/dist/index.css';
 Vue.use(VueToast);
 
+const dict = {
+    custom: {
+        keyword_list: {
+            keywords_length: 'Minimum 3 keywords are required'
+        }
+    }
+};
+
 // Vue.use(VeeValidate);
 Vue.use(VeeValidate, {
     // validity: true
-    useConstraintAttrs: true
+    locale: 'en',
+    useConstraintAttrs: true,
+    dictionary: {
+        en: {  messages: messagesEN }        
+      }
 });
 
 const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3;
 const app = new Vue({
     el: '#app',
-    components: { MyAutocomplete, LocationsMap, modal, CreatorTable },
+    components: { MyAutocomplete, LocationsMap, modal, PersonTable },
     data() {
         return {
             list: [
@@ -137,6 +150,9 @@ const app = new Vue({
         this.reset();
     },
     computed: {
+        keywords_length() {
+            return this.dataset.keywords.length;
+          },
         isInitial() {
             return this.currentStatus === STATUS_INITIAL;
         },

resources/assets/js/strings/messages/en.js

@@ -0,0 +1,4 @@
+const messages={
+    min_value: (field, num) => field +' cannot be empty! ' + num + ' items are required.',
+    };
+export default messages;

resources/views/publish/create-step1.blade.php

@@ -208,7 +208,7 @@
                     </div>
                     <input name="persons" v-model="dataset.persons" type="hidden" class="form-check-input" v-validate="'required'" data-vv-as="Creator" data-vv-scope="step-1">
                     <h3>Draggable table</h3>
-                    <creator-table name="persons" v-bind:list="dataset.persons"></creator-table>  
+                    <person-table name="persons" v-bind:personlist="dataset.persons"></person-table>  
                 </fieldset>
                 
                 <fieldset id="fieldset-contributors">
@@ -505,6 +505,7 @@
                
                 <fieldset id="fieldset-keywords">
                     <legend>Dataset Keywords</legend>
+                    <input type="hidden" v-validate:keywords_length="'min_value:3'" data-vv-scope="step-2" data-vv-as="keyword list" name="keywords_list">
                     <button class="pure-button button-small" @click.prevent="addKeyword()">Add Keyword</button>
                     <table class="table table-hover" v-if="dataset.keywords.length">
                         <thead>