expose/resources/views/server/users/index.twig

{% extends "app" %}
{% block title %}Users{% endblock %}
{% block content %}
    <div 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">
            <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 %}
{% block scripts %}
    <script>
        new Vue({
            el: '#app',

            delimiters: ['@{', '}'],

            data: {
                userForm: {
                    name: '',
                    errors: {},
                },
                users: {{ users|json_encode|raw }}
            },

            methods: {
                deleteUser(user) {
                    fetch('/expose/users/delete/'+user.id, {
                        method: 'DELETE',
                    }).then((response) => {
                        return response.json();
                    }).then((data) => {
                        this.users = this.users.filter(u => u.id !== user.id);
                    });
                },
                saveUser() {
                    fetch('/expose/users', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.userForm)
                    }).then((response) => {
                        return response.json();
                    }).then((data) => {
                        if (data.user) {
                            this.userForm.errors = {};
                            this.users.unshift(data.user);
                        }
                        if (data.errors) {
                            this.userForm.errors = data.errors;
                        }
                    });
                }
            }
        })
    </script>
{% endblock %}