8. Minimum 4 char bei den Atributen Titel und zusätzliche Titel (server und clientseitig)
8.1. Minimum 4 Charactaer bei den Atributen Description und zusätzliche Beschreibungen (server und clientseitig) 9. einheitliches Löschsymbol bei (zusätliche Titel, zusätzliche Beschreibungen, Keywords, Files und Datas References 16. Reject note vom Editor und Reviewer maximal 500 Zeichen (client- und serverseitig) - Datenbankänderungen auch vorgenommen 18. Edit Button am Ende nachdem ein Datesatz angelegt wurde 23. Vue Component "PersonTable" auf TypeScript umgeschrieben
This commit is contained in:
Arno Kaimbacher
parent
4b8f2a63d8
commit
faa68cc223
12 changed files with 160 additions and 136 deletions
|
|
@ -1,125 +1,139 @@
|
|||
<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']"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<script lang="ts">
|
||||
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
|
||||
);
|
||||
}
|
||||
import { Component, Inject, Vue, Prop, Watch } from "vue-property-decorator";
|
||||
|
||||
@Component({
|
||||
components: { draggable }
|
||||
})
|
||||
export default class PersonTable extends Vue {
|
||||
@Inject("$validator") readonly $validator!: string;
|
||||
// inject: {
|
||||
// $validator: "$validator"
|
||||
// },
|
||||
name: "person-table";
|
||||
// components: {
|
||||
// draggable
|
||||
// },
|
||||
|
||||
editable = true;
|
||||
isDragging = false;
|
||||
delayedDragging = false;
|
||||
|
||||
@Prop({ default: true, type: Array })
|
||||
personlist;
|
||||
@Prop(Number)
|
||||
rowIndex;
|
||||
@Prop(String)
|
||||
heading;
|
||||
|
||||
// props: {
|
||||
// personlist: {
|
||||
// type: Array,
|
||||
// required: true
|
||||
// },
|
||||
// rowIndex: {
|
||||
// type: Number
|
||||
// },
|
||||
// heading: String
|
||||
// },
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@ const app = new Vue({
|
|||
currentStatus: null,
|
||||
uploadFieldName: 'photos',
|
||||
fileCount: 0,
|
||||
editLink: null,
|
||||
releaseLink: null,
|
||||
deleteLink: null,
|
||||
|
||||
|
|
@ -185,6 +186,9 @@ const app = new Vue({
|
|||
// this.dataset.reset();//reset methods will trigger property changed.
|
||||
// this.step = 1;
|
||||
},
|
||||
editNewDataset() {
|
||||
window.location = this.editLink;
|
||||
},
|
||||
releaseNewDataset() {
|
||||
window.location = this.releaseLink;
|
||||
},
|
||||
|
|
@ -316,6 +320,7 @@ const app = new Vue({
|
|||
let keyword = this.dataset.keywords[i];
|
||||
formData.append('keywords[' + i + '][value]', keyword.value);
|
||||
formData.append('keywords[' + i + '][type]', keyword.type);
|
||||
formData.append('keywords[' + i + '][language]', keyword.language);
|
||||
}
|
||||
|
||||
for (var i = 0; i < this.dataset.titles.length; i++) {
|
||||
|
|
@ -350,6 +355,7 @@ const app = new Vue({
|
|||
// this.items = response.data;
|
||||
//Vue.set(app.skills, 1, "test55");
|
||||
_this.currentStatus = STATUS_SUCCESS;
|
||||
_this.editLink = response.data.edit;
|
||||
_this.releaseLink = response.data.release;
|
||||
_this.deleteLink = response.data.delete;
|
||||
if (response.data.redirect) {
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue