80 lines
2.0 KiB
JavaScript
80 lines
2.0 KiB
JavaScript
|
const ViewPersons = {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
edit: {
|
||
|
|
id: 0,
|
||
|
|
},
|
||
|
|
form: false,
|
||
|
|
list: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
self = this;
|
||
|
|
self.refresh()
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$route': 'refresh'
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
refresh () {
|
||
|
|
getJSON(`//${location.host}${location.pathname}api/person`).then(function(data){
|
||
|
|
self.list = data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
openAdd() {
|
||
|
|
self.form = true;
|
||
|
|
self.edit.id = 0;
|
||
|
|
},
|
||
|
|
send() {
|
||
|
|
if (self.edit.id === 0) {
|
||
|
|
httpJSON(`//${location.host}${location.pathname}api/person`,'POST', '"' + self.edit.name + '"')
|
||
|
|
.then(function(data) {
|
||
|
|
self.refresh();
|
||
|
|
self.form = false;
|
||
|
|
}, function (err) {
|
||
|
|
alert("unable to add new person:" + err.message);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
template: `<div class="row">
|
||
|
|
<p>
|
||
|
|
<span class="p-heading--one">Person</span>
|
||
|
|
<sub>
|
||
|
|
<button v-on:click="openAdd()">New</button>
|
||
|
|
</sub>
|
||
|
|
<div class="p-modal" v-if="form">
|
||
|
|
<div class="p-modal__dialog" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
|
||
|
|
<header class="p-modal__header">
|
||
|
|
<h2 class="p-modal__title" id="modal-title">Neue Person</h2>
|
||
|
|
<button class="p-modal__close" aria-label="Close active modal" v-on:click="form=false">Close</button>
|
||
|
|
</header>
|
||
|
|
<p id="modal-description">
|
||
|
|
<form class="p-form p-form--stacked">
|
||
|
|
<div class="p-form__group">
|
||
|
|
<label class="p-form__label">Name</label>
|
||
|
|
<div class="p-form__control">
|
||
|
|
<input type="text" v-model="edit.name" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="p-button--positive u-float-right" v-on:click="send()">Add</button>
|
||
|
|
</form>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</p>
|
||
|
|
<table class="p-table--mobile-card" role="grid">
|
||
|
|
<thead>
|
||
|
|
<tr role="row">
|
||
|
|
<th scope="col" role="columnheader" aria-sort="none">Name</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr role="row" v-for="item in list">
|
||
|
|
<td role="rowheader" aria-label="Name">{{ item.name }}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>`,
|
||
|
|
}
|