132 lines
3.4 KiB
Vue
132 lines
3.4 KiB
Vue
<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> |