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>`,
}