tabs

users.blade.php

@extends('backend::layouts.default')
@section('content')
    <div id="users-controller">
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs nav-tabs-users">{{-- Start Tabs --}}
                            <li v-class="active: isActive('#users-list')">
                                <a href="#users-list" v-on="click: tabTransition('#users-list', $event)">{{ trans('system.list') }} </a>
                            </li>
                            <li v-repeat="edit_user: edit_users" v-class="active: isActive(edit_user.unique_key)">{{-- Start Edit Tabs --}}
                                <a  v-on="click: tabTransition(edit_user.unique_key, $event)" href="#">
                                    <span v-if="isNew(edit_user)">
                                        {{ trans('system.new_user') }}:
                                    </span>
                                    <span>
                                        @{{ edit_user.name }}
                                    </span>
                                </a>
                                <button class="balon-close btn btn-danger btn-flat" v-on="click: closeTab($index)">
                                    <i class="fa fa-times"></i>
                                </button>
                            </li>{{-- End Edit Tabs  --}}

                            <li v-on="click: newUser">
                                <a href="#">
                                    <i class="fa fa-plus-circle text-teal"></i>
                                </a>
                            </li>
                        </ul>{{-- End Tabs --}}

                        <div class="tab-content">
                            <div class="tab-pane"  v-class="active: isActive('#users-list')" id="users-list">
                                <div class="box-body table-responsive no-padding">
                                    <table class="table table-hover">
                                        <tbody>
                                        <tr>
                                            <th v-repeat="column: columns">@{{ column }} </th>
                                            <th>{{ trans('system.actions') }}</th>
                                        </tr>
                                        <tr v-repeat="user: users">
                                            <td v-repeat="column: columns">@{{ user[column] }}</td>
                                            <td>
                                                <span v-repeat="action: actions" v-on="click: actionMethod(action.method, user)"  class="user-controller-action btn btn-xs btn-@{{ action.color }}" >
                                                    <i class="@{{ action.icon }}"></i>
                                                </span>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div v-repeat="edit_user: edit_users" v-class="active: isActive(edit_user.unique_key)" class="tab-pane">
                                <form>
                                    <div class="form-group">
                                        <label for=""> {{ trans('system.username') }}
                                            <input type="text" v-model="edit_users[$index].name" class="form-control">
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label for=""> {{ trans('system.email') }}
                                            <input type="email" v-model="edit_users[$index].email" class="form-control">
                                        </label>
                                    </div>
                                    <div v-if="isNew(edit_user)" class="form-group">
                                        <label for=""> {{ trans('system.password') }}
                                            <input type="password" v-model="edit_users[$index].password" class="form-control">
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <div class="btn btn-success" v-on="click: saveUser($index, andCloseTab)">{{ trans('system.save_and_close') }}</div>
                                        <div class="btn btn-primary" v-on="click: saveUser($index, noCloseTab)">{{ trans('system.save') }}</div>
                                        <div v-if="isOld(edit_user)" class="btn btn-warning" v-on="click: resetPassword($index)">{{ trans('system.reset_password') }}</div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <pre>@{{ $data | json }}</pre>
        </section>
    </div>
@stop

users.js

new Vue({
    el: "#users-controller",
    methods: {
        // Костыль для вызова метода по имени
        actionMethod: function (method, user) {
            this[method](user);
        },

        newUser: function () {
            var user = {
                name: '',
                email: '',
                unique_key: '#user-' + Date.now(),
                password: '',
                created_at: null
            };

            this.edit_users.push(user);

            this._goToTab(user.unique_key);
        },

        editUser: function (user) {
            if (!user.hasOwnProperty('unique_key')) {
                user.$set('unique_key', '#user-' + Date.now());
            }

            if (this.edit_users.indexOf(user) < 0) {
                this.edit_users.push(user);
            }

            this._goToTab(user.unique_key);
        },

        removeUser: function (user) {
            this.$http.delete('api/users/' + user.id, {}, function (response) {
                if (!response.errors) {
                    this.users.$remove(user);
                    this.edit_users.$remove(user);
                }


            });
        },

        resetPassword: function(index)
        {
            //TODO: implement!
        },

        saveUser: function (index, closeTab) {
            var user = this.edit_users[index];

            if (this.isNew(user)) return this._createUser(user, function () {

                if(! closeTab) this._endEditingUser(index);

                return ! closeTab;
            });

            this._updateUser(user, function () {

                if(! closeTab) this._endEditingUser(index);

                return ! closeTab;
            });
        },

        _createUser: function (user, callback) {
            this.$http.post('api/users', user, function (response) {
                if (response.success) {
                    $.each(this.columns, function (index, column) {
                        user.$set(column, response.data.user[column]);
                    });

                    this.users.push(user);

                    if (callback()) return false;



                    this._goToTab(this.default_tab);
                }

                // Жейквери отлично сочетается с Ву =)
                $.each(response.messages, function(index, message){
                    $.notify({message: message}, {type: response.errors ? 'danger' : 'info'});
                })
            });

        },

        _updateUser: function (user, callback) {
            this.$http.patch('api/users/' + user.id, user, function (response) {
                 $.each(response.messages, function(index, message){
                    // обчный бутстраповский нотифайер...
                    $.notify({message: message}, {type: response.errors ? 'danger' : 'info'});
                });
            })
        },

        _endEditingUser: function (index) {
            this.edit_users.$remove(index);
        },

        _goToTab: function (tab_id) {
            this.$set('active_tab', tab_id);
        },

        tabTransition: function (tab_id, e) {
            e.preventDefault();
            this._goToTab(tab_id);
        },

        closeTab: function (index) {
            var isSelf = this.isActive(this.edit_users[index].unique_key);

            this._endEditingUser(index);

            if (!isSelf) return false;

            if (this.edit_users.length) {
                var last_user = this.edit_users[this.edit_users.length - 1];
                this._goToTab(last_user.unique_key);
                return false;
            }

            this._goToTab(this.default_tab);
        },

        isNew: function (user) {
            return !('id' in user);
        },

        isOld: function(user) {
            return !!('id' in user);
        },

        isActive: function (tab_id) {
            return tab_id == this.active_tab;
        }
    },

    data: {
        users: [],
        edit_users: [],
        default_tab: '#users-list',
        active_tab: '',
        columns: ['id', 'name', 'email', 'created_at'],
        actions: [
            {icon: "fa fa-edit", color: "primary", method: 'editUser'},
            {icon: "fa fa-trash", color: "danger", method: 'removeUser'}
        ],
        andCloseTab: true,
        noCloseTab: false
    },
    ready: function () {
        this._goToTab(this.default_tab);
        this.$http.get('api/users', {}, function (response) {

            this.$set('users', response.data.users);
        });

    }
});