bitinflow/expose
1
0
Fork 0
mirror of https://github.com/bitinflow/expose.git synced 2026-03-15 06:25:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marcel Pociot
2020-05-03 22:47:05 +02:00
parent f0accd908d
commit 37aeee76e4
1 changed files with 120 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
resources/views/server/users/index.twig
View File

@@ -1,93 +1,131 @@
{% 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">
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"> <form>
<div <div>
class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200"> <div>
<table class="min-w-full"> <div>
<thead> <h3 class="text-lg leading-6 font-medium text-gray-900">
<tr> Add new user
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"> </h3>
Name </div>
</th> <div class="mt-6 sm:mt-5">
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"> <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
Auth-Token <label for="username"
</th> class="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"> Username
Created At </label>
</th> <div class="mt-1 sm:mt-0 sm:col-span-2">
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th> <div class="max-w-lg flex rounded-md shadow-sm">
</tr> <input id="username"
</thead> v-model="userForm.name"
<tbody class="bg-white"> class="flex-1 form-input block w-full rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5"/>
<tr v-for="user in users"> </div>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900"> </div>
@{ user.name } </div>
</td> </div>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500"> <div class="mt-8 border-t border-gray-200 pt-5">
@{ user.auth_token } <div class="flex justify-end">
</td> <span class="ml-3 inline-flex rounded-md shadow-sm">
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500"> <button type="submit"
@{ user.created_at } @click.prevent="saveUser"
</td> 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">
<td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium"> Save
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a> </button>
<a href="#" @click.prevent="deleteUser(user)" </span>
class="pl-4 text-red-600 hover:text-red-900">Delete</a> </div>
</td> </div>
</tr>
</tbody>
</table>
</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="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
<table class="min-w-full">
<thead>
<tr>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Auth-Token
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
Created At
</th>
<th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
</tr>
</thead>
<tbody class="bg-white">
<tr v-for="user in users">
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 font-medium text-gray-900">
@{ user.name }
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
@{ user.auth_token }
</td>
<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
@{ user.created_at }
</td>
<td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
<a href="#" @click.prevent="deleteUser(user)"
class="pl-4 text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
{% endblock %} </div>
{% block scripts %} {% endblock %}
<script> {% block scripts %}
new Vue({ <script>
el: '#app', new Vue({
el: '#app',
delimiters: ['@{', '}'], delimiters: ['@{', '}'],
data: { data: {
userForm: { userForm: {
name: '', name: '',
errors: {}, errors: {},
},
users: {{ users|json_encode|raw }}
}, },
users: {{ users|json_encode|raw }}
},
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();
}).then((data) => { }).then((data) => {
this.users = this.users.filter(u => u.id !== user.id); this.users = this.users.filter(u => u.id !== user.id);
}); });
}, },
saveUser() { saveUser() {
fetch('/users', { fetch('/users', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(this.userForm) body: JSON.stringify(this.userForm)
}).then((response) => { }).then((response) => {
return response.json(); return response.json();
}).then((data) => { }).then((data) => {
if (data.user) { if (data.user) {
this.userForm.errors = {}; this.userForm.name = '';
this.users.unshift(data.user); this.userForm.errors = {};
} this.users.unshift(data.user);
if (data.errors) { }
this.userForm.errors = data.errors; if (data.errors) {
} this.userForm.errors = data.errors;
}); }
});
}
} }
} })
}) </script>
</script> {% endblock %}
{% endblock %}