This commit is contained in:
Marcel Pociot
2020-05-03 22:47:05 +02:00
parent f0accd908d
commit 37aeee76e4

View File

@@ -1,7 +1,44 @@
{% extends "app" %} {% extends "app" %}
{% block title %}Users{% endblock %} {% block title %}Users{% endblock %}
{% block content %} {% block content %}
<div class="flex flex-col py-8"> <form class="flex flex-col py-8">
<form>
<div>
<div>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900">
Add new user
</h3>
</div>
<div class="mt-6 sm:mt-5">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label for="username"
class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
Username
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<div class="max-w-lg flex rounded-md shadow-sm">
<input id="username"
v-model="userForm.name"
class="flex-1 form-input block w-full rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5"/>
</div>
</div>
</div>
</div>
<div class="mt-8 border-t border-gray-200 pt-5">
<div class="flex justify-end">
<span class="ml-3 inline-flex rounded-md shadow-sm">
<button type="submit"
@click.prevent="saveUser"
class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
Save
</button>
</span>
</div>
</div>
</div>
</div>
</form>
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"> <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
<div <div
class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200"> class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
@@ -42,8 +79,8 @@
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script> <script>
new Vue({ new Vue({
el: '#app', el: '#app',
@@ -60,7 +97,7 @@
methods: { methods: {
deleteUser(user) { deleteUser(user) {
fetch('/users/delete/'+user.id, { fetch('/users/' + user.id, {
method: 'DELETE', method: 'DELETE',
}).then((response) => { }).then((response) => {
return response.json(); return response.json();
@@ -79,6 +116,7 @@
return response.json(); return response.json();
}).then((data) => { }).then((data) => {
if (data.user) { if (data.user) {
this.userForm.name = '';
this.userForm.errors = {}; this.userForm.errors = {};
this.users.unshift(data.user); this.users.unshift(data.user);
} }
@@ -90,4 +128,4 @@
} }
}) })
</script> </script>
{% endblock %} {% endblock %}