- larvale version 5.6 to 5.8

resources/js/components/PersonTable.vue

@@ -0,0 +1,132 @@
+ <template>
+ <div>
+  <h3 v-if="heading && personlist.length">{{ heading }}</h3>
+  <table class="pure-table pure-table-horizontal" v-if="personlist.length">
+    <thead class="thead-dark">
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First Name</th>
+        <th scope="col">Last Name</th>
+        <th scope="col">Email</th>
+        <th scope="col">Orcid</th>
+        <th></th>
+      </tr>
+    </thead>
+    <draggable v-bind:list="personlist" tag="tbody" v-on:start="isDragging=true" v-on:end="isDragging=false">      
+      <tr
+        v-for="(item, index) in personlist"
+        v-bind:key="item.id"
+        v-bind:class="[item.status==1 ? 'activeClass' : 'inactiveClass']"
+      >
+        <td scope="row">{{ index + 1 }}</td>
+        <td>
+          <input
+            name="first_name"
+            class="form-control"
+            placeholder="[FIRST NAME]"
+            v-model="item.first_name"
+            v-bind:readonly="item.status==1"
+            v-validate="'required'"
+            data-vv-scope="step-1"
+          />
+        </td>
+        <td>
+          <input
+            name="last_name"
+            class="form-control"
+            placeholder="[LAST NAME]"
+            v-model="item.last_name"
+            v-bind:readonly="item.status==1"
+            v-validate="'required'"
+            data-vv-scope="step-1"
+          />
+        </td>
+        <td>
+          <input
+            name="email"
+            class="form-control"
+            placeholder="[EMAIL]"
+            v-model="item.email"
+            v-validate="'required|email'"
+            v-bind:readonly="item.status==1"
+            data-vv-scope="step-1"
+          />
+        </td>
+        <td>
+          <input
+            name="identifier_orcid"
+            class="form-control"
+            placeholder="[ORCID optional]"
+            v-model="item.identifier_orcid"
+            v-bind:readonly="item.status==1"
+            data-vv-scope="step-1"
+          />         
+        </td>
+        <td>
+          <button class="pure-button button-small is-warning" @click.prevent="removeAuthor(index)"> <i class="fa fa-trash"></i> </button>
+        </td>
+      </tr>    
+    </draggable>
+  </table>
+  </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+export default {
+  inject: {
+    $validator: "$validator"
+  },
+  name: "person-table",  
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      // list: [
+      //     { id: 1, name: "Abby", sport: "basket" },
+      //     { id: 2, name: "Brooke", sport: "foot" },
+      //     { id: 3, name: "Courtenay", sport: "volley" },
+      //     { id: 4, name: "David", sport: "rugby" }
+      //   ],
+      editable: true,
+      isDragging: false,
+      delayedDragging: false
+    };
+  },
+  props: {
+    personlist: {
+      type: Array,
+      required: true
+    },
+    rowIndex: {
+      type: Number
+    },
+    heading: String
+  },
+  methods: {
+    itemAction(action, data, index) {
+      console.log("custom-actions: " + action, data.full_name, index);
+    },
+    removeAuthor(key) {
+      this.personlist.splice(key, 1);
+    },
+    onMove({ relatedContext, draggedContext }) {
+      const relatedElement = relatedContext.element;
+      const draggedElement = draggedContext.element;
+      return (
+        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
+      );
+    }
+  }
+};
+</script>
+
+<style>
+.custom-actions button.ui.button {
+  padding: 8px 8px;
+}
+.custom-actions button.ui.button > i.icon {
+  margin: auto !important;
+}
+</style>