Merge pull request #1 from jitendra-webkul/jitendra

Added User Role Feature

packages/Webkul/Admin/composer.json

@@ -8,7 +8,7 @@
         }
     ],
     "require": {
-        "webkul/laravel-admin": "dev-master",
+        "webkul/laravel-user": "dev-master",
         "webkul/laravel-ui": "dev-master"
     },
     "autoload": {

packages/Webkul/Admin/src/Http/routes.php

@@ -18,19 +18,55 @@ Route::group(['middleware' => ['web']], function () {
             
             Route::get('/dashboard', 'Webkul\Admin\Http\Controllers\DashboardController@index')->name('admin.dashboard.index');
 
+            // User Routes
             Route::get('/users', 'Webkul\User\Http\Controllers\UserController@index')->defaults('_config', [
                 'view' => 'admin::users.index'
             ])->name('admin.users.index');
 
+            Route::get('/users/create', 'Webkul\User\Http\Controllers\UserController@create')->defaults('_config', [
+                'view' => 'admin::users.create'
+            ])->name('admin.users.create');
+
+            Route::post('/users/create', 'Webkul\User\Http\Controllers\UserController@store')->defaults('_config', [
+                'redirect' => 'admin.users.index'
+            ])->name('admin.users.store');
+
+            Route::get('/users/edit/{id}', 'Webkul\User\Http\Controllers\UserController@edit')->defaults('_config', [
+                'view' => 'admin::users.edit'
+            ])->name('admin.users.edit');
+
+            Route::put('/users/edit/{id}', 'Webkul\User\Http\Controllers\UserController@update')->defaults('_config', [
+                'redirect' => 'admin.users.index'
+            ])->name('admin.users.update');
+
+            // User Role Routes
+            Route::get('/roles', 'Webkul\User\Http\Controllers\RoleController@index')->defaults('_config', [
+                'view' => 'admin::roles.index'
+            ])->name('admin.roles.index');
+            
+            Route::get('/roles/create', 'Webkul\User\Http\Controllers\RoleController@create')->defaults('_config', [
+                'view' => 'admin::roles.create'
+            ])->name('admin.roles.create');
+
+            Route::post('/roles/create', 'Webkul\User\Http\Controllers\RoleController@store')->defaults('_config', [
+                'redirect' => 'admin.roles.index'
+            ])->name('admin.roles.store');
+
+            Route::get('/roles/edit/{id}', 'Webkul\User\Http\Controllers\RoleController@edit')->defaults('_config', [
+                'view' => 'admin::roles.edit'
+            ])->name('admin.roles.edit');
+
+            Route::put('/roles/edit/{id}', 'Webkul\User\Http\Controllers\RoleController@update')->defaults('_config', [
+                'redirect' => 'admin.roles.index'
+            ])->name('admin.roles.update');
+
+
+            // Admin Profile route
             Route::get('/account', 'Webkul\User\Http\Controllers\AccountController@edit')->defaults('_config', [
                 'view' => 'admin::account.edit'
             ])->name('admin.account.edit');
         
             Route::put('/account', 'Webkul\User\Http\Controllers\AccountController@update')->name('admin.account.update');
-
-            Route::get('/permissions', 'Webkul\User\Http\Controllers\PermissionController@index')->defaults('_config', [
-                'view' => 'admin::permissions.index'
-            ])->name('admin.permissions.index');
         });
     });
 });

packages/Webkul/Admin/src/Providers/AdminServiceProvider.php

@@ -54,12 +54,13 @@ class AdminServiceProvider extends ServiceProvider
 
             $menu->add('configuration.account', 'My Account', route('admin.account.edit'), 1, '');
 
-            $menu->add('settings', 'Settings', '', 6, 'icon-settings');
+            $menu->add('settings', 'Settings', route('admin.users.index'), 6, 'icon-settings');
 
             $menu->add('settings.users', 'Users', route('admin.users.index'), 1, '');
 
-            $menu->add('settings.roles', 'Roles', route('admin.permissions.index'), 2, '');
+            $menu->add('settings.users.users', 'Users', route('admin.users.index'), 1, '');
 
+            $menu->add('settings.users.roles', 'Roles', route('admin.roles.index'), 1, '');
         });
     }
 
@@ -70,27 +71,28 @@ class AdminServiceProvider extends ServiceProvider
      */
     protected function composeView()
     {
-        view()->composer('admin::layouts.nav-left', function($view) {
+        view()->composer(['admin::layouts.nav-left', 'admin::layouts.nav-aside', 'admin::layouts.tabs'], function($view) {
             $menu = current(Event::fire('admin.menu.create'));
-            $view->with('menu', $menu);
-        });
 
-        view()->composer('admin::layouts.nav-aside', function($view) {
+            $keys = explode('.', $menu->currentKey);
-            $parentMenu = current(Event::fire('admin.menu.create'));
+            $subMenus = $tabs = [];
-            $menu = [];
+            if(count($keys) > 1) {
-            foreach ($parentMenu->items as $item) {
+                $subMenus = [
-                $currentKey = current(explode('.', $parentMenu->currentKey));
+                        'items' => $menu->sortItems(array_get($menu->items, current($keys) . '.children')),
-                if($item['key'] != $currentKey)
+                        'current' => $menu->current,
-                    continue;
+                        'currentKey' => $menu->currentKey
+                    ];
 
-                $menu = [
+                if(count($keys) > 2) {
-                    'items' => $parentMenu->sortItems($item['children']),
+                    $tabs = [
-                    'current' => $parentMenu->current,
+                            'items' => $menu->sortItems(array_get($menu->items, implode('.children.', array_slice($keys, 0, 2)) . '.children')),
-                    'currentKey' => $parentMenu->currentKey
+                            'current' => $menu->current,
-                ];
+                            'currentKey' => $menu->currentKey
+                        ];
+                }
             }
-
+            
-            $view->with('menu', $menu);
+            $view->with('menu', $menu)->with('subMenus', $subMenus)->with('tabs', $tabs);
         });
     }
 

packages/Webkul/Admin/src/Resources/assets/js/app.js

@@ -5,19 +5,44 @@ window.VeeValidate = require('vee-validate');
 Vue.use(VeeValidate);
 
 $(document).ready(function () {
-    const form = new Vue({
+    const app = new Vue({
-        el: 'form',
+        el: '#app',
-        
+
         mounted: function() {
             this.addServerErrors()
+            this.addFlashMessages()
         },
 
         methods: {
+            onSubmit: function(e) {
+                this.$validator.validateAll().then((result) => {
+                    if (result) {
+                        e.target.submit()
+                    }
+                });
+            },
+
             addServerErrors: function() {
-                // this.errors.add('email', "Hello")
+                var scope = null;
-                // for (var key in serverErrors) {
+                for (var key in serverErrors) {
-                //     this.errors.add(key, serverErrors[key][0])
+                    const field = this.$validator.fields.find({ name: key, scope: scope });
-                // }
+                    if (field) {
+                        this.$validator.errors.add({
+                            id: field.id,
+                            field: key,
+                            msg: serverErrors[key][0],
+                            scope: scope,
+                        });
+                    }
+                }
+            },
+
+            addFlashMessages: function() {
+                const flashes = this.$refs.flashes
+
+                flashMessages.forEach(function(flash) {
+                    flashes.addFlash(flash)
+                }, this);
             }
         }
     });

packages/Webkul/Admin/src/Resources/assets/sass/app.scss

@@ -11,6 +11,8 @@ body {
     font-family: $font-family;
     font-size: $font-size-base;
     font-weight: 500;
+    position: static;
+    min-height: 100%;
 }
 
 .navbar-top  {
@@ -19,6 +21,10 @@ body {
     font-size: 0;
     @include box-shadow(0 3px 6px 0 rgba(0,0,0,0.05));
     border-bottom: 1px solid $border-color;
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 5;
 
     .navbar-top-left {
         width: 50%;
@@ -107,22 +113,26 @@ body {
 
 .content-container {
     padding-left: 90px;
-    width: 100%;
-    display: inline-block;
     position: absolute;
     margin-top: 60px;
     top: 0px;
+    right: 0;
+    left: 0;
     bottom: 0px;
     z-index: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
     
     .aside-nav {
         width: 280px;
-        position: absolute;
+        position: fixed;
-        top: 0;
+        top: 60px;
         bottom: 0;
         border-right: 1px solid $border-color;
         background: #F8F9FA;
         padding-top: 10px;
+        overflow-y: auto;
+        z-index: 4;
 
         a {
             padding: 15px;
@@ -143,10 +153,18 @@ body {
         }
     }
 
-    .content {
+    .content-wrapper {
-        padding: 25px;
+        padding: 25px 25px 25px 305px;
-        padding-left: 305px;
+        overflow-y: auto;
+    }
 
+    .content {
+        padding: 25px 0;
+
+        &.full-page {
+            padding: 25px;
+        }
+        
         .page-header {
             display: block;
 

packages/Webkul/Admin/src/Resources/views/account/edit.blade.php

@@ -1,10 +1,8 @@
-@extends('admin::layouts.master')
+@extends('admin::layouts.content')
 
 @section('content')
-    @include ('admin::layouts.nav-aside')
-
     <div class="content">
-        <form method="POST" action="">
+        <form method="POST" action="" @submit.prevent="onSubmit">
             <div class="page-header">
                 <div class="page-title">
                     <h1>
@@ -23,29 +21,40 @@
                 
                 <div class="form-container">
                     @csrf()
+
                     <input name="_method" type="hidden" value="PUT">
 
-                    <div class="control-group" :class="[errors.first('name') ? 'has-error' : '']">
+                    <accordian :title="'{{ __('General') }}'" :active="true">
-                        <label for="">{{ __('Name') }}</label>
+                        <div class="accordian-content">
-                        <input type="text" v-validate="'required'" class="control" name="name" value="{{ $user->name }}"/>
+                            <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
-                        <span class="control-error" v-if="errors.first('name')">@{{ errors.first('name') }}</span>
+                                <label for="name">{{ __('Name') }}</label>
-                    </div>
+                                <input type="text" v-validate="'required'" class="control" id="email" name="name" value="{{ $user->name }}"/>
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
 
-                    <div class="control-group" :class="[errors.first('email') ? 'has-error' : '']">
+                            <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
-                        <label for="">{{ __('Email') }}</label>
+                                <label for="email">{{ __('Email') }}</label>
-                        <input type="text" v-validate="'required|email'" class="control" name="email" value="{{ $user->email }}"/>
+                                <input type="text" v-validate="'required|email'" class="control" id="email" name="email" value="{{ $user->email }}"/>
-                        <span class="control-error" v-if="errors.first('email')">@{{ errors.first('email') }}</span>
+                                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
-                    </div>
+                            </div>
+                        </div>
+                    </accordian>
 
-                    <div class="control-group">
+                    <accordian :title="'{{ __('Password') }}'" :active="true">
-                        <label for="">{{ __('Password') }}</label>
+                        <div class="accordian-content">
-                        <input type="text" class="control" name="password"/>
+                            <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
-                    </div>
+                                <label for="password">{{ __('Password') }}</label>
+                                <input type="password" v-validate="'min:6|max:18'" class="control" id="password" name="password"/>
+                                <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                            </div>
 
-                    <div class="control-group">
+                            <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
-                        <label for="">{{ __('Confirm Password') }}</label>
+                                <label for="password_confirmation">{{ __('Confirm Password') }}</label>
-                        <input type="text" class="control" name="confirm_password"/>
+                                <input type="password" v-validate="'min:6|max:18|confirmed:password'" class="control" id="password_confirmation" name="password_confirmation"/>
-                    </div>
+                                <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
                 </div>
             </div>
         </form>

packages/Webkul/Admin/src/Resources/views/dashboard/index.blade.php

@@ -1,5 +1,7 @@
 @extends('admin::layouts.master')
 
-@section('content')
+@section('content-wrapper')
-    <h1>Dashboard</h1>
+    <div class="content full-page">
+        <h1>Dashboard</h1>
+    </div>
 @stop

packages/Webkul/Admin/src/Resources/views/layouts/content.blade.php

@@ -0,0 +1,17 @@
+@extends('admin::layouts.master')
+
+@section('content-wrapper')
+    <div class="inner-section">
+    
+        @include ('admin::layouts.nav-aside')
+
+        <div class="content-wrapper">
+
+            @include ('admin::layouts.tabs')
+
+            @yield('content')
+
+        </div>
+        
+    </div>
+@stop

packages/Webkul/Admin/src/Resources/views/layouts/master.blade.php

@@ -10,38 +10,36 @@
         <link rel="stylesheet" href="{{ asset('vendor/webkul/admin/assets/css/admin.css') }}">
         <link rel="stylesheet" href="{{ asset('vendor/webkul/ui/assets/css/ui.css') }}">
 
+        @yield('head')
+
         @yield('css')
         
-        @yield('head')
     </head>
     
     <body>
         <div id="app">
 
             <flash-wrapper ref='flashes'></flash-wrapper>
-
-        </div>
         
-        @include ('admin::layouts.nav-top')
+            @include ('admin::layouts.nav-top')
 
-        @include ('admin::layouts.nav-left')
+            @include ('admin::layouts.nav-left')
 
-        <div class="content-container">
+            <div class="content-container">
 
-            @yield('content')
+                @yield('content-wrapper')
+
+            </div>
 
         </div>
 
-        <script type="text/javascript" src="{{ asset('vendor/webkul/admin/assets/js/admin.js') }}"></script>
-        <script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
-
         <script type="text/javascript">
-            window.flashMessages= [];
+            window.flashMessages = [];
             @if($success = session('success'))
                 window.flashMessages = [{'type': 'alert-success', 'message': "{{ $success }}" }];
-            @elseif($warning = session('warning')))
+            @elseif($warning = session('warning'))
                 window.flashMessages = [{'type': 'alert-warning', 'message': "{{ $warning }}" }];
-            @elseif($error = session('error')))
+            @elseif($error = session('error'))
                 window.flashMessages = [{'type': 'alert-error', 'message': "{{ $error }}" }];
             @endif
 
@@ -51,6 +49,9 @@
             @endif
         </script>
 
+        <script type="text/javascript" src="{{ asset('vendor/webkul/admin/assets/js/admin.js') }}"></script>
+        <script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
+
         @yield('javascript')
 
     </body>

packages/Webkul/Admin/src/Resources/views/layouts/nav-aside.blade.php

@@ -1,12 +1,12 @@
-@if(count($menu))
+@if(count($subMenus))
     <div class="aside-nav">
         <ul>
-            @foreach($menu['items'] as $menu)
+            @foreach($subMenus['items'] as $menuItem)
-                <li class="{{ $menu['active'] ? 'active' : '' }}">
+                <li class="{{ $menu->getActive($menuItem) }}">
-                    <a href="{{ $menu['url'] }}">
+                    <a href="{{ $menuItem['url'] }}">
-                        {{ $menu['name'] }}
+                        {{ $menuItem['name'] }}
 
-                        @if ($menu['active'])
+                        @if ($menu->getActive($menuItem))
                             <i class="angle-right-icon"></i>
                         @endif
                     </a>

packages/Webkul/Admin/src/Resources/views/layouts/nav-top.blade.php

@@ -21,7 +21,7 @@
                             Administrator
                         </span>
                     </div>
-                    <i class="icon arrow-down-icon-active"></i>
+                    <i class="icon arrow-down-icon active"></i>
                 </div>
 
                 <div class="dropdown-list bottom-right">

packages/Webkul/Admin/src/Resources/views/layouts/tabs.blade.php

@@ -0,0 +1,13 @@
+@if(count($tabs))
+    <div class="tabs">
+        <ul>
+            @foreach($tabs['items'] as $tab)
+                <li class="{{ $menu->getActive($tab) }}">
+                    <a href="{{ $tab['url'] }}">
+                        {{ $tab['name'] }}
+                    </a>
+                </li>
+            @endforeach
+        </ul>
+    </div>
+@endif

packages/Webkul/Admin/src/Resources/views/roles/create.blade.php

@@ -0,0 +1,56 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+        <form method="POST" action="{{ route('admin.roles.store') }}" @submit.prevent="onSubmit">
+            <div class="page-header">
+                <div class="page-title">
+                    <h1>{{ __('Add Role') }}</h1>
+                </div>
+
+                <div class="page-action">
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('Save Role') }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="page-content">
+                <div class="form-container">
+                    @csrf()
+
+                    <accordian :title="'{{ __('General') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
+                                <label for="name">{{ __('Name') }}</label>
+                                <input type="text" v-validate="'required'" class="control" id="email" name="name"/>
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
+
+                            <div class="control-group">
+                                <label for="description">{{ __('Description') }}</label>
+                                <textarea class="control" id="description" name="description"></textarea>
+                            </div>
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Access Control') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group">
+                                <label for="permission_type">{{ __('Permissions') }}</label>
+                                <select class="control" name="permission_type" id="permission_type">
+                                    <option value="custom">{{ __('Custom') }}</option>
+                                    <option value="all">{{ __('All') }}</option>
+                                </select>
+                            </div>
+
+                            <div class="control-group">
+                                <tree-view/>
+                            </div>                            
+                        </div>
+                    </accordian>
+                </div>
+            </div>
+        </form>
+    </div>
+@stop

packages/Webkul/Admin/src/Resources/views/roles/index.blade.php

@@ -0,0 +1,21 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+        <div class="page-header">
+            <div class="page-title">
+                
+            </div>
+
+            <div class="page-action">
+                <a href="{{ route('admin.roles.create') }}" class="btn btn-lg btn-primary">
+                    {{ __('Add Role') }}
+                </a>
+            </div>
+        </div>
+
+        <div class="page-content">
+
+        </div>
+    </div>
+@stop

packages/Webkul/Admin/src/Resources/views/users/create.blade.php

@@ -0,0 +1,80 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+        <form method="POST" action="{{ route('admin.users.store') }}" @submit.prevent="onSubmit">
+            <div class="page-header">
+                <div class="page-title">
+                    <h1>{{ __('Add User') }}</h1>
+                </div>
+
+                <div class="page-action">
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('Save User') }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="page-content">
+                <div class="form-container">
+                    @csrf()
+
+                    <accordian :title="'{{ __('General') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
+                                <label for="name">{{ __('Name') }}</label>
+                                <input type="text" v-validate="'required'" class="control" id="email" name="name"/>
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
+
+                            <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                                <label for="email">{{ __('Email') }}</label>
+                                <input type="text" v-validate="'required|email'" class="control" id="email" name="email"/>
+                                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Password') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                                <label for="password">{{ __('Password') }}</label>
+                                <input type="password" v-validate="'min:6|max:18'" class="control" id="password" name="password"/>
+                                <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                            </div>
+
+                            <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
+                                <label for="password_confirmation">{{ __('Confirm Password') }}</label>
+                                <input type="password" v-validate="'min:6|max:18|confirmed:password'" class="control" id="password_confirmation" name="password_confirmation"/>
+                                <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Status and Role') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('role_id') ? 'has-error' : '']">
+                                <label for="role">{{ __('Role') }}</label>
+                                <select v-validate="'required'" class="control" name="role_id">
+                                    @foreach($roles as $role)
+                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
+                                    @endforeach
+                                </select>
+                                <span class="control-error" v-if="errors.has('role_id')">@{{ errors.first('role_id') }}</span>
+                            </div>
+
+                            <div class="control-group">
+                                <label for="status">{{ __('Status') }}</label>
+                                <span class="checkbox">
+                                    <input type="checkbox" id="status" name="status" value="1">
+                                    <label class="checkbox-view" for="status"></label>
+                                    {{ __('Account is Active') }}
+                                </span>
+                            </div>
+                        </div>
+                    </accordian>
+                </div>
+            </div>
+        </form>
+    </div>
+@stop

packages/Webkul/Admin/src/Resources/views/users/edit.blade.php

@@ -0,0 +1,81 @@
+@extends('admin::layouts.content')
+
+@section('content')
+    <div class="content">
+        <form method="POST" action="{{ route('admin.users.update', $user->id) }}" @submit.prevent="onSubmit">
+            <div class="page-header">
+                <div class="page-title">
+                    <h1>{{ __('Edit User') }}</h1>
+                </div>
+
+                <div class="page-action">
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('Save User') }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="page-content">
+                <div class="form-container">
+                    @csrf()
+                    <input name="_method" type="hidden" value="PUT">
+
+                    <accordian :title="'{{ __('General') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
+                                <label for="name">{{ __('Name') }}</label>
+                                <input type="text" v-validate="'required'" class="control" id="email" name="name" value="{{ $user->name }}"/>
+                                <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                            </div>
+
+                            <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                                <label for="email">{{ __('Email') }}</label>
+                                <input type="text" v-validate="'required|email'" class="control" id="email" name="email" value="{{ $user->email }}"/>
+                                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Password') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                                <label for="password">{{ __('Password') }}</label>
+                                <input type="password" v-validate="'min:6|max:18'" class="control" id="password" name="password"/>
+                                <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                            </div>
+
+                            <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
+                                <label for="password_confirmation">{{ __('Confirm Password') }}</label>
+                                <input type="password" v-validate="'min:6|max:18|confirmed:password'" class="control" id="password_confirmation" name="password_confirmation"/>
+                                <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
+                            </div>
+                        </div>
+                    </accordian>
+
+                    <accordian :title="'{{ __('Status and Role') }}'" :active="true">
+                        <div class="accordian-content">
+                            <div class="control-group" :class="[errors.has('role_id') ? 'has-error' : '']">
+                                <label for="role">{{ __('Role') }}</label>
+                                <select v-validate="'required'" class="control" name="role_id">
+                                    @foreach($roles as $role)
+                                        <option value="{{ $role->id }}" {{ $user->role_id == $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
+                                    @endforeach
+                                </select>
+                                <span class="control-error" v-if="errors.has('role_id')">@{{ errors.first('role_id') }}</span>
+                            </div>
+
+                            <div class="control-group">
+                                <label for="status">{{ __('Status') }}</label>
+                                <span class="checkbox">
+                                    <input type="checkbox" id="status" name="status" value="{{ $user->status }}" {{ $user->status ? 'checked' : '' }}>
+                                    <label class="checkbox-view" for="status"></label>
+                                    {{ __('Account is Active') }}
+                                </span>
+                            </div>
+                        </div>
+                    </accordian>
+                </div>
+            </div>
+        </form>
+    </div>
+@stop

packages/Webkul/Admin/src/Resources/views/users/index.blade.php

@@ -1,9 +1,21 @@
-@extends('admin::layouts.master')
+@extends('admin::layouts.content')
 
 @section('content')
-    @include ('admin::layouts.nav-aside')
-
     <div class="content">
+        <div class="page-header">
+            <div class="page-title">
+                
+            </div>
 
+            <div class="page-action">
+                <a href="{{ route('admin.users.create') }}" class="btn btn-lg btn-primary">
+                    {{ __('Add User') }}
+                </a>
+            </div>
+        </div>
+
+        <div class="page-content">
+
+        </div>
     </div>
 @stop

packages/Webkul/Ui/package.json

@@ -1,20 +1,20 @@
 {
-    "private": true,
+  "private": true,
-    "scripts": {
+  "scripts": {
-        "dev": "npm run development",
+    "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
+    "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
+    "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
-    },
+  },
-    "devDependencies": {
+  "devDependencies": {
-        "axios": "^0.18",
+    "axios": "^0.18",
-        "cross-env": "^5.1.4",
+    "cross-env": "^5.1.4",
-        "laravel-mix": "^2.1",
+    "laravel-mix": "^2.1",
-        "laravel-mix-merge-manifest": "^0.1.1",
+    "laravel-mix-merge-manifest": "^0.1.1",
-        "jquery": "^3.2",
+    "jquery": "^3.2",
-        "vue": "^2.1.10"
+    "vue": "^2.1.10"
-    }
+  }
-}
+}

packages/Webkul/Ui/src/Http/routes.php

@@ -1,6 +1,6 @@
 <?php
 
-Route::view('/ui-kit', 'ui::ui-kit');
+Route::view('/ui-kit', 'ui::partials.ui-kit');
 
 // Route::get('/users', function () {
 //     $users = \Webkul\User\Models\Admin::paginate(1);

packages/Webkul/Ui/src/Menu.php

@@ -48,13 +48,11 @@ class Menu {
 			'url'		 => $url,
 			'sort'		 => $sort,
 			'icon-class' => $iconClass,
-			'active' 	 => false,
 			'children'	 => []
         ];
 
-		if ($url == $this->current) {
+		if (strpos($this->current, $url) !== false) {
 			$this->currentKey = $key;
-			$item['active'] = true;
 		}
 
 		$children = str_replace('.', '.children.', $key);
@@ -88,12 +86,7 @@ class Menu {
 	{
 		$url = trim($item['url'], '/');
 
-		if ($this->current === $url)
+		if ((strpos($this->current, $url) !== false) || (strpos($this->currentKey, $item['key']) === 0)) {
-		{
-			return 'active current';
-		}
-
-		if (strpos($this->currentKey, $item['key']) === 0) {
 			return 'active';
 		}
 	}

packages/Webkul/Ui/src/Resources/assets/images/Accordion-Arrow-Down.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Accordion-Arrow-Down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Accordion-Arrow-Down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2" fill="#0041FF" x="0" y="0" width="24" height="24" rx="12"></rect>
+        <polyline id="Path-3" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 12.000000) scale(-1, -1) rotate(-90.000000) translate(-12.000000, -12.000000) " points="10 8 14 12 10 16"></polyline>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/images/Accordion-Arrow-Up.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Accordion-Arrow-Up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Accordion-Arrow-Up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2" fill="#0041FF" x="0" y="0" width="24" height="24" rx="12"></rect>
+        <polyline id="Path-3" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 11.000000) scale(-1, 1) rotate(-90.000000) translate(-12.000000, -11.000000) " points="10 7 14 11 10 15"></polyline>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/images/Icon-Pencil-Large.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Pencil-Large</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Pencil-Large" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(0.000000, 1.000000)" stroke="#979797" stroke-width="2">
+            <polygon id="Combined-Shape" stroke-linecap="round" stroke-linejoin="round" transform="translate(11.000000, 11.500000) scale(1, -1) rotate(-45.000000) translate(-11.000000, -11.500000) " points="14 2.90864186 14 24 8 24 8 2.90864186 11 -1"></polygon>
+            <path d="M14,4 L19,9" id="Path-10"></path>
+        </g>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/images/Icon-Sort-Down.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sort-Down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Sort-Down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(9.000000, 9.000000) rotate(90.000000) translate(-9.000000, -9.000000) translate(3.000000, 5.000000)" stroke="#979797" stroke-width="2">
+            <path d="M1.13686838e-12,4 L10.068125,4" id="Path-3"></path>
+            <polyline id="Path-4" points="8 0 12 4.08548298 8 8"></polyline>
+        </g>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/images/Icon-Sortable.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sortable</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Sortable" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Icon-Sort-Down" transform="translate(5.000000, 6.000000)" stroke="#979797" stroke-width="2">
+            <path d="M0,1 L14,1" id="Path-3"></path>
+            <path d="M0,6 L14,6" id="Path-3-Copy"></path>
+            <path d="M0,11 L14,11" id="Path-3-Copy-2"></path>
+        </g>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/images/Icon-Trash.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Trash</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Trash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <polygon id="Rectangle-10" stroke="#979797" stroke-width="2" points="4 5 7.39453125 5 9.64208984 2.00048828 14.6196289 2.00048828 16.6455078 5 20 5 20 8 4 8"></polygon>
+        <polygon id="Rectangle-10" stroke="#979797" stroke-width="2" points="6 8 18 8 18 22 6 22"></polygon>
+        <path d="M9,12 L9,18" id="Path-12" stroke="#979797" stroke-width="2"></path>
+        <path d="M12,12 L12,18" id="Path-12-Copy" stroke="#979797" stroke-width="2"></path>
+        <path d="M15,12 L15,18" id="Path-12-Copy-2" stroke="#979797" stroke-width="2"></path>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/images/Icon-remove.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-remove</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-remove" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval-9" stroke="#979797" stroke-width="2" cx="12" cy="12" r="10"></circle>
+        <g id="Icon-Cross-Sm" transform="translate(9.000000, 9.000000)" stroke="#8E8E8E" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="M0,0 L6,6" id="Path-2"></path>
+            <path d="M0,0 L6,6" id="Path-2" transform="translate(3.000000, 3.000000) scale(-1, 1) translate(-3.000000, -3.000000) "></path>
+        </g>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/images/icon-search.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-search</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval-2" stroke="#8E8E8E" stroke-width="3" cx="10.5" cy="10.5" r="7"></circle>
+        <path d="M15.5,15.5 L21.5,21.5" id="Line" stroke="#8E8E8E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>

packages/Webkul/Ui/src/Resources/assets/js/app.js

@@ -1,26 +1,5 @@
-$(document).ready(function () {
+Vue.component('flash-wrapper', require('./components/flash-wrapper'))
-    function addFlash(flash) {
+Vue.component('flash', require('./components/flash'))
-        flashMessages.push(flash)
+Vue.component('accordian', require('./components/accordian'))
-    }
+Vue.component('tree-view', require('./components/tree-view/tree-view'))
-
+Vue.component('tree-checkbox', require('./components/tree-view/tree-checkbox'))
-    Vue.component('flash-wrapper', require('./components/flash-wrapper'))
-    Vue.component('flash', require('./components/flash'))
-
-    const app = new Vue({
-        el: '#app',
-
-        mounted: function() {
-            this.addFlashMessages()
-        },
-
-        methods: {
-            addFlashMessages: function() {
-                const flashes = this.$refs.flashes
-
-                flashMessages.forEach(function(flash) {
-                    flashes.addFlash(flash)
-                }, this);
-            }
-        }
-    });
-})

packages/Webkul/Ui/src/Resources/assets/js/components/accordian.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="accordian" :class="{ 'active': isActive }">
+        <div class="accordian-header" @click="toggleAccordion()">
+            {{ title }}
+            <i class="icon" :class="iconClass"></i>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            title: String,
+            active: Boolean
+        },
+
+        data: function() {
+            return {
+                isActive: false
+            }
+        },
+
+        mounted: function() {
+            this.isActive = this.active;
+        },
+
+        methods: {
+            toggleAccordion: function() {
+                this.isActive = !this.isActive;
+            }
+        },
+
+        computed: {
+            iconClass() {
+                return {
+                    'accordian-down-icon': !this.isActive,
+                    'accordian-up-icon': this.isActive,
+                };
+            }
+        }
+    }
+</script>

packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/index.js

@@ -0,0 +1 @@
+export { default as Treeview } from './tree-view';

packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-checkbox.vue

@@ -0,0 +1,21 @@
+<template>
+    <span class="checkbox">
+        <input type="checkbox" name="permissions[]" :id="inputValue" v-model="inputValue" @change="inputChanged($event)" :checked="isChecked">
+        <label class="checkbox-view" :for="inputValue"></label>
+        {{ label }}
+    </span>
+</template>
+
+<script>
+    export default {
+        name: 'tree-checkbox',
+
+        props: ['label', 'inputValue', 'isChecked'],
+
+        methods: {
+            inputChanged (e) {
+                this.$emit('change', this.inputValue)
+            }
+        }
+    }
+</script>

packages/Webkul/Ui/src/Resources/assets/js/components/tree-view.1/tree-view.vue

@@ -0,0 +1,147 @@
+<script>
+
+    export default {
+        name: 'tree-view',
+
+        inheritAttrs: false,
+
+        props: {
+            items: {
+                type: Object,
+                required: false,
+                default: () => ({
+                    "name": "Root",
+                    "value": "1",
+                    "children": [{
+                        "name": "First Child",
+                        "value": "2",
+                    }, {
+                        "name": "Second Child",
+                        "value": "3",
+                        "children": [{
+                            "name": "GrandChild 1",
+                            "value": "4",
+                        }, {
+                            "name": "GrandChild 2",
+                            "value": "5",
+                        }, {
+                            "name":"GrandChild 3",
+                            "value": "6",
+                        }]
+                    }]
+                })
+            },
+
+            value: {
+                type: Array,
+                required: false,
+                default: () => ([])
+            }
+        },
+
+        computed: {
+            allChildren () {
+                let leafs = [];
+                let searchTree = items => {
+                    if(!! items['children'] && items['children'].length > 0) {
+                        items['children'].forEach(child => searchTree(child))
+                    } else {
+                        leafs.push(items)
+                    }
+                }
+
+                searchTree(this.items)
+
+                return leafs;
+            },
+
+            hasChildren () {
+                return !! this.items['children'] && this.items['children'].length > 0;
+            },
+
+            hasSelection () {
+                return !! this.value && this.value.length > 0;
+            },
+
+            isAllChildrenSelected () {
+                return this.hasChildren && this.hasSelection && this.allChildren.every(leaf => this.value.some(sel => sel === leaf.value))
+            },
+
+            isSomeChildrenSelected () {
+                return this.hasSelection && this.allChildren.some(leaf => this.value.some(sel => sel === leaf.value))
+            },
+
+            isChecked () {
+                return this.hasChildren ? this.isSomeChildrenSelected : (this.value.indexOf(this.items['value']) === -1 ? false : true);
+            }
+        },
+
+        methods: {
+            generateRoot () {
+                return this.$createElement('tree-checkbox', {
+                    props: {
+                        label: this.items['name'],
+                        inputValue: this.items['value'],
+                        isChecked: this.isChecked
+                    },
+                    on: {
+                        change: selection => {
+                            if(this.hasChildren) {
+                                if(this.isAllChildrenSelected) {
+                                    this.allChildren.forEach(leaf => {
+                                        let index = this.value.indexOf(leaf.value)
+                                        this.value.splice(index, 1)
+                                    })
+                                } else {
+                                    this.allChildren.forEach(leaf => {
+                                        let index = this.value.indexOf(leaf.value)
+                                        if(index === -1) {
+                                            this.value.push(leaf.value);
+                                        }
+                                    })
+                                }
+
+                                this.$emit('input', this.value)
+                            } else {
+                                this.$emit('input', selection);
+                            }
+                        }
+                    }
+                })
+            },
+
+            generateChildren () {
+                let childElements = [];
+                if(this.items['children']) {
+                    this.items['children'].forEach(child => {
+                        childElements.push(this.generateChild(child));
+                    })
+                }
+
+                return childElements;
+            },
+
+            generateChild (child) {
+                return this.$createElement('tree-view', {
+                    class: 'tree-item',
+                    on: {
+                        input: selection => {
+                            // Main Turning Point
+                            
+                            console.log(this.items)
+                            this.$emit('input', selection)
+                        }
+                    },
+                    props: {
+                        items: child,
+                        value: this.value
+                    }
+                })
+            }
+        },
+
+        render (createElement) {
+            return createElement('div', {}, [this.generateRoot(), ... this.generateChildren()])
+        }
+    }
+</script>

packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/index.js

@@ -0,0 +1 @@
+export { default as Treeview } from './tree-view';

packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-checkbox.vue

@@ -0,0 +1,60 @@
+<template>
+    <span class="checkbox">
+        <input type="checkbox" name="permissions[]" :id="inputValue" :value="inputValue.value" @change="inputChanged($event)" :checked="isActive">
+        <label class="checkbox-view" :for="inputValue"></label>
+        {{ inputValue }} ======== {{ value }}
+    </span>
+</template>
+
+<script>
+    export default {
+        name: 'tree-checkbox',
+
+        props: ['label', 'inputValue', 'value'],
+
+        methods: {
+            inputChanged (e) {
+                this.$emit('change', this.inputValue)
+            },
+
+            valueComparator (a, b) {
+                if (a === b) 
+                    return true
+
+                if (a !== Object(a) || b !== Object(b)) {
+                    return false
+                }
+
+                const props = Object.keys(a)
+
+                if (props.length !== Object.keys(b).length) {
+                    return false
+                }
+
+                return props.every(p => this.valueComparator(a[p], b[p]))
+            }
+        },
+
+        computed: {
+            isMultiple () {
+                return Array.isArray(this.inputValue)
+            },
+
+            isActive () {
+                const value = this.value
+                const input = this.inputValue
+
+                if (this.isMultiple) {
+                    if (!Array.isArray(input)) 
+                        return false
+
+                    return input.some(item => this.valueComparator(item, value))
+                }
+
+                var isChecked = value ? this.valueComparator(value, input) : Boolean(input)
+
+                return isChecked;
+            },
+        }
+    }
+</script>

packages/Webkul/Ui/src/Resources/assets/js/components/tree-view/tree-view.vue

@@ -0,0 +1,140 @@
+<script>
+
+    export default {
+        name: 'tree-view',
+
+        inheritAttrs: false,
+
+        props: {
+            items: {
+                type: Object,
+                required: false,
+                default: () => ({
+                    "name": "Root",
+                    "value": "1",
+                    "children": [{
+                        "name": "First Child",
+                        "value": "2",
+                    }, {
+                        "name": "Second Child",
+                        "value": "3",
+                        "children": [{
+                            "name": "GrandChild 1",
+                            "value": "4",
+                        }, {
+                            "name": "GrandChild 2",
+                            "value": "5",
+                        }, {
+                            "name":"GrandChild 3",
+                            "value": "6",
+                        }]
+                    }]
+                })
+            },
+
+            value: {
+                type: Array,
+                required: false,
+                default: () => ([])
+            }
+        },
+
+        computed: {
+            allChildren () {
+                let leafs = [];
+                let searchTree = items => {
+                    if(!! items['children'] && items['children'].length > 0) {
+                        items['children'].forEach(child => searchTree(child))
+                    } else {
+                        leafs.push(items)
+                    }
+                }
+
+                searchTree(this.items)
+
+                return leafs;
+            },
+
+            hasChildren () {
+                return !! this.items['children'] && this.items['children'].length > 0;
+            },
+
+            hasSelection () {
+                return !! this.value && this.value.length > 0;
+            },
+
+            isAllChildrenSelected () {
+                return this.hasChildren && this.hasSelection && this.allChildren.every(leaf => this.value.some(sel => sel === leaf))
+            },
+
+            isSomeChildrenSelected () {
+                return this.hasSelection && this.allChildren.some(leaf => this.value.some(sel => sel === leaf))
+            }
+        },
+
+        methods: {
+            generateRoot () {
+                return this.$createElement('tree-checkbox', {
+                    props: {
+                        label: this.items['name'],
+                        inputValue: this.hasChildren ? this.isAllChildrenSelected : this.value,
+                        value: this.hasChildren ? this.isAllChildrenSelected : this.items
+                    },
+                    on: {
+                        change: selection => {
+                            if(this.hasChildren) {
+                                if(this.isAllChildrenSelected) {
+                                    this.allChildren.forEach(leaf => {
+                                        let index = this.value.indexOf(leaf)
+                                        this.value.splice(index, 1)
+                                    })
+                                } else {
+                                    this.allChildren.forEach(leaf => {
+                                        let index = this.value.indexOf(leaf)
+                                        if(index === -1) {
+                                            this.value.push(leaf);
+                                        }
+                                    })
+                                }
+
+                                this.$emit('input', this.value)
+                            } else {
+                                this.$emit('input', selection);
+                            }
+                        }
+                    }
+                })
+            },
+
+            generateChild (child) {
+                return this.$createElement('tree-view', {
+                    class: 'tree-item',
+                    on: {
+                        input: selection => {
+                            this.$emit('input', selection)
+                        }
+                    },
+                    props: {
+                        items: child,
+                        value: this.value
+                    }
+                })
+            },
+
+            generateChildren () {
+                let childElements = [];
+                if(this.items['children']) {
+                    this.items['children'].forEach(child => {
+                        childElements.push(this.generateChild(child));
+                    })
+                }
+
+                return childElements;
+            }
+        },
+
+        render (createElement) {
+            return createElement('div', {}, [this.generateRoot(), ... this.generateChildren()])
+        }
+    }
+</script>

packages/Webkul/Ui/src/Resources/assets/sass/_variables.scss

@@ -2,4 +2,5 @@ $brand-color: #0041FF;
 $danger-color: #FC6868;
 $success-color: #4CAF50;
 $warning-color: #FFC107;
-$control-border-color: #C7C7C7;
+$control-border-color: #C7C7C7;
+$border-color: rgba(162, 162, 162, 0.2);

packages/Webkul/Ui/src/Resources/assets/sass/app.scss

@@ -8,6 +8,7 @@
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    font-weight: 500;
 }
 
 *:focus {
@@ -34,6 +35,11 @@ h1 {
     margin-top: 0;
 }
 
+h2 {
+    font-size: 18px;
+    color: #3A3A3A;
+}
+
 .btn {
     @include box-shadow(0 1px 4px 0 rgba(0, 0, 0, 0.20), 0 0 8px 0 rgba(0, 0, 0, 0.10));
     border-radius: 3px;
@@ -41,6 +47,7 @@ h1 {
     color: #fff;
     cursor: pointer;
     transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    font: inherit;
 
     &:hover, &:active, &:focus {
         opacity: 0.75;
@@ -48,16 +55,16 @@ h1 {
     }
 
     &.btn-sm {
-        padding: 6px 10px;
+        padding: 6px 12px;
     }
     &.btn-md {
-        padding: 8px 12px;
+        padding: 8px 16px;
     }
     &.btn-lg {
-        padding: 10px 14px;
+        padding: 10px 20px;
     }
     &.btn-xl {
-        padding: 12px 16px;
+        padding: 12px 24px;
     }
 
     &.btn-primary {
@@ -79,7 +86,7 @@ h1 {
 }
 .dropdown-list {
     width: 200px;
-    box-shadow: 0px 4px 15.36px 0.64px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
+    @include box-shadow(0 2px 4px 0 rgba(0,0,0,0.16), 0 0 9px 0 rgba(0,0,0,0.16));
     border-radius: 3px;
     background-color: #FFFFFF;
     position: absolute;
@@ -221,6 +228,7 @@ h1 {
         }
     }
 }
+
 .checkbox {
     position: relative;
     display: block;
@@ -243,6 +251,7 @@ h1 {
         margin: 0;
         display: inline-block !important;
         vertical-align: middle;
+        margin-right: 5px;
     }
 
     input:checked + .checkbox-view {
@@ -254,6 +263,7 @@ h1 {
         cursor: not-allowed;
     }
 }
+
 .radio {
     position: relative;
     display: block;
@@ -275,6 +285,7 @@ h1 {
         margin: 0;
         display: inline-block !important;
         vertical-align: middle;
+        margin-right: 5px;
     }
 
     input:checked + .radio-view {
@@ -301,6 +312,10 @@ h1 {
             color: #3A3A3A;
         }
 
+        textarea.control {
+            height: 100px;
+        }
+
         .control {
             background: #fff;
             border: 2px solid $control-border-color;
@@ -333,7 +348,7 @@ h1 {
         }
 
         .control-error {
-            display: block;
+            display: none;
             color: #FF5656;
             margin-top: 5px;
         }
@@ -341,6 +356,10 @@ h1 {
         &.has-error .control {
             border-color: $danger-color;
         }
+
+        &.has-error .control-error {
+            display: block;
+        }
     }
 }
 
@@ -349,7 +368,7 @@ h1 {
     top: 10px;
     right: 10px;
     position: fixed;
-    z-index: 3;
+    z-index: 6;
 
     .alert {
         width: 300px;
@@ -389,4 +408,63 @@ h1 {
             font-size: 15px;
         }
     }
+}
+
+.tabs {
+
+    ul {
+        border-bottom: solid 1px $border-color;
+
+        li {
+            display: inline-block;
+
+            a {
+                padding: 15px 20px;
+                cursor: pointer;
+                margin: 0px 2px;
+                text-align: center;
+                color: #000311;
+                display: block;
+            }
+
+            &.active a {
+                border-bottom: 3px solid $brand-color;
+            }
+        }
+    }
+}
+
+.accordian {
+    .accordian-header {
+        font-size: 18px;
+        color: #3A3A3A;
+        border-bottom: solid 1px $border-color;
+        padding: 20px 15px;
+        cursor: pointer;
+
+        .icon {
+            float: right;
+        }
+    }
+
+    .accordian-content {
+        padding: 20px 15px;
+        display: none;
+        transition: 0.3s ease all;
+    }
+
+    &.active .accordian-content {
+        display: inline-block;
+    }
+}
+
+.tree-item {
+    padding-left: 30px;
+    display: inline-block;
+    width: 100%;
+
+    .checkbox {
+        margin: 0;
+        margin-bottom: 5px;
+    }
 }

packages/Webkul/Ui/src/Resources/assets/sass/icons.scss

@@ -23,21 +23,6 @@
     background-image: url('../images/Icon-Settings.svg');
 }
 
-.active {
-    .icon-dashboard {
-        background-image: url('../images/Icon-Dashboard-Active.svg');
-    }
-
-    .icon-settings {
-        background-image: url('../images/Icon-Settings-Active.svg');
-    }
-
-    .icon-configuration {
-        @extend %menu-properties;
-        background-image: url('../images/Icon-Configure-Active.svg');
-    }
-}
-
 .angle-right-icon {
     background-image: url('../images/Angle-Right.svg');
     width: 17px;
@@ -56,14 +41,95 @@
     height: 8px;
 }
 
-.arrow-down-icon-active {
-    background-image: url('../images/Arrow-Down.svg');
-    width: 14px;
-    height: 8px;
-}
-
 .white-cross-sm-icon {
     background-image: url('../images/Icon-Sm-Cross-White.svg');
     width: 18px;
     height: 18px;
+}
+
+.accordian-up-icon {
+    background-image: url('../images/Accordion-Arrow-Up.svg');
+    width: 24px;
+    height: 24px;
+}
+.accordian-down-icon {
+    background-image: url('../images/Accordion-Arrow-Down.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.trash-icon {
+    background-image: url('../images/Icon-Trash.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.remove-icon {
+    background-image: url('../images/Icon-remove.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.pencil-lg-icon {
+    background-image: url('../images/Icon-Pencil-Large.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.search-icon {
+    background-image: url('../images/icon-search.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.sortable-icon {
+    background-image: url('../images/Icon-Sortable.svg');
+    width: 24px;
+    height: 24px;
+}
+
+.sort-down-icon {
+    background-image: url('../images/Icon-Sort-Down.svg');
+    width: 18px;
+    height: 18px;
+}
+
+.active {
+    .icon-dashboard {
+        background-image: url('../images/Icon-Dashboard-Active.svg');
+    }
+
+    .icon-settings {
+        background-image: url('../images/Icon-Settings-Active.svg');
+    }
+
+    .icon-configuration {
+        @extend %menu-properties;
+        background-image: url('../images/Icon-Configure-Active.svg');
+    }
+
+    .arrow-down-icon {
+        background-image: url('../images/Arrow-Down.svg');
+        width: 14px;
+        height: 8px;
+    }
+
+    &.icon-dashboard {
+        background-image: url('../images/Icon-Dashboard-Active.svg');
+    }
+
+    &.icon-settings {
+        background-image: url('../images/Icon-Settings-Active.svg');
+    }
+
+    &.icon-configuration {
+        @extend %menu-properties;
+        background-image: url('../images/Icon-Configure-Active.svg');
+    }
+
+    &.arrow-down-icon {
+        background-image: url('../images/Arrow-Down.svg');
+        width: 14px;
+        height: 8px;
+    }
 }

packages/Webkul/Ui/src/Resources/views/partials/ui-kit.blade.php

@@ -49,6 +49,18 @@
             a:active {
                 text-decoration: none;
             }
+            .icon {
+                margin: 0 !important;
+                vertical-align: middle;
+            }
+            span.icon-wrapper {
+                display: inline-block;
+                vertical-align: middle;
+                border: 1px solid #d3d3d3;
+                border-radius: 4px;
+                padding: 5px;
+                margin-right: 10px;
+            }
         </style>
     </head>
     
@@ -294,6 +306,79 @@
                     </tbody>
                 </table>
             </div>
+
+
+            <label class="styleguide-label">Icons</label>
+            <div class="styleguide-wrapper">
+                <span class="icon-wrapper">
+                    <i class="icon icon-dashboard"></i>
+                </span>
+                <span class="icon-wrapper">
+                    <i class="icon icon-dashboard active"></i>
+                </span>
+                <span class="icon-wrapper">
+                    <i class="icon icon-configuration"></i>
+                </span>
+                <span class="icon-wrapper">
+                    <i class="icon icon-configuration active"></i>
+                </span>
+                <span class="icon-wrapper">
+                    <i class="icon icon-settings"></i>
+                </span>
+                <span class="icon-wrapper">
+                    <i class="icon icon-settings active"></i>
+                </span>
+                <span class="icon-wrapper">
+                    <i class="icon angle-right-icon"></i>
+                </span>
+                <span class="icon-wrapper">
+                    <i class="icon angle-left-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon arrow-down-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon arrow-down-icon active"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon white-cross-sm-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon accordian-up-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon accordian-down-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon trash-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon pencil-lg-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon remove-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon search-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon sortable-icon"></i>
+                </span>
+
+                <span class="icon-wrapper">
+                    <i class="icon sort-down-icon"></i>
+                </span>
+            </div>
         </div>
     </body>
 

packages/Webkul/User/src/Database/migrations/2018_06_12_111907_create_admins_table.php

@@ -18,8 +18,8 @@ class CreateAdminsTable extends Migration
             $table->increments('id');
             $table->string('name');
             $table->string('email')->unique();
-            $table->string('password');
+            $table->string('password')->nullable();
-            $table->boolean('status');
+            $table->boolean('status')->default(0);
             $table->integer('role_id')->unsigned();
             $table->rememberToken();
             $table->timestamps();

packages/Webkul/User/src/Database/migrations/2018_06_13_055341_create_roles_table.php

@@ -18,7 +18,6 @@ class CreateRolesTable extends Migration
             $table->string('name');
             $table->string('description');
             $table->json('permissions')->nullable();
-            $table->boolean('status');
             $table->timestamps();
         });
     }

packages/Webkul/User/src/Database/migrations/2018_06_28_131304_foo.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class Foo extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        //
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}

packages/Webkul/User/src/Http/Controllers/AccountController.php

@@ -36,13 +36,16 @@ class AccountController extends Controller
      */
     public function update()
     {
+        $user = auth()->guard('admin')->user();
+
         $this->validate(request(), [
             'name' => 'required',
-            'email' => 'email',
+            'email' => 'email|unique:admins,email,' . $user->id,
-            // 'password' => 'required|confirmed'
+            'password' => 'nullable|confirmed'
         ]);
         
-        $user::update(request('name', 'email', 'password'));
+
+        $user->update(request(['name', 'email', 'password']));
 
         session()->flash('success', 'Account changes saved successfully.');
 

packages/Webkul/User/src/Http/Controllers/RoleController.php

@@ -0,0 +1,101 @@
+<?php
+
+namespace Webkul\User\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Routing\Controller;
+use Webkul\User\Models\Role;
+
+/**
+ * Admin user role controller
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class RoleController extends Controller
+{
+    protected $_config;
+
+    public function __construct()
+    {
+        $this->_config = request('_config');
+    }
+
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        return view($this->_config['view']);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        return view($this->_config['view'], compact('roleItems'));
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        Role::create(request()->all());
+
+        session()->flash('success', 'Role created successfully.');
+
+        return redirect()->route($this->_config['redirect']);
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function edit($id)
+    {
+        $role = Role::findOrFail($id);
+
+        return view($this->_config['view'], compact('role'));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request $request
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, $id)
+    {
+        $role = Role::findOrFail($id);
+
+        $role->update(request(['name', 'description', 'permissions']));
+
+        session()->flash('success', 'Role updated successfully.');
+
+        return redirect()->route($this->_config['redirect']);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}

packages/Webkul/User/src/Http/Controllers/UserController.php

@@ -5,6 +5,9 @@ namespace Webkul\User\Http\Controllers;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\Routing\Controller;
+use Webkul\User\Models\Admin;
+use Webkul\User\Models\Role;
+use Webkul\User\Http\Requests\UserForm;
 
 /**
  * Admin user controller
@@ -40,29 +43,24 @@ class UserController extends Controller
      */
     public function create()
     {
-        return view($this->_config['view']);
+        $roles = Role::all();
+
+        return view($this->_config['view'], compact('roles'));
     }
 
     /**
      * Store a newly created resource in storage.
      *
-     * @param  \Illuminate\Http\Request  $request
+     * @param  \Webkul\User\Http\Requests\UserForm  $request
      * @return \Illuminate\Http\Response
      */
-    public function store(Request $request)
+    public function store(UserForm $request)
     {
-        //
+        Admin::create(request()->all());
-    }
 
-    /**
+        session()->flash('success', 'User created successfully.');
-     * Display the specified resource.
+
-     *
+        return redirect()->route($this->_config['redirect']);
-     * @param  int  $id
-     * @return \Illuminate\Http\Response
-     */
-    public function show($id)
-    {
-        //
     }
 
     /**
@@ -73,19 +71,28 @@ class UserController extends Controller
      */
     public function edit($id)
     {
-        //
+        $user = Admin::findOrFail($id);
+        $roles = Role::all();
+
+        return view($this->_config['view'], compact('user', 'roles'));
     }
 
     /**
      * Update the specified resource in storage.
      *
-     * @param  \Illuminate\Http\Request  $request
+     * @param  \Webkul\User\Http\Requests\UserForm  $request
      * @param  int  $id
      * @return \Illuminate\Http\Response
      */
-    public function update(Request $request, $id)
+    public function update(UserForm $request, $id)
     {
-        //
+        $user = Admin::findOrFail($id);
+
+        $user->update(request(['name', 'email', 'password']));
+
+        session()->flash('success', 'User updated successfully.');
+
+        return redirect()->route($this->_config['redirect']);
     }
 
     /**

packages/Webkul/User/src/Http/Requests/UserForm.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Webkul\User\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UserForm extends FormRequest
+{
+    protected $rules;
+
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        $this->rules = [
+            'name' => 'required',
+            'email' => 'email|unique:admins,email',
+            'password' => 'nullable|confirmed',
+            'role_id' => 'required'
+        ];
+
+        if($this->method() == 'PUT') {
+            $this->rules['email'] = 'email|unique:admins,email,' . $this->route('id');
+        }
+
+        return $this->rules;
+    }
+}

packages/Webkul/User/src/Models/Admin.php

@@ -16,7 +16,7 @@ class Admin extends Authenticatable
      * @var array
      */
     protected $fillable = [
-        'name', 'email', 'password',
+        'name', 'email', 'password', 'role_id', 'status',
     ];
 
     /**

public/vendor/webkul/admin/assets/css/admin.css

@@ -4,6 +4,8 @@
   font-family: "Montserrat", sans-serif;
   font-size: 14px;
   font-weight: 500;
+  position: static;
+  min-height: 100%;
 }
 
 .navbar-top {
@@ -13,6 +15,10 @@
   -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
   border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 5;
 }
 
 .navbar-top .navbar-top-left {
@@ -97,23 +103,27 @@
 
 .content-container {
   padding-left: 90px;
-  width: 100%;
-  display: inline-block;
   position: absolute;
   margin-top: 60px;
   top: 0px;
+  right: 0;
+  left: 0;
   bottom: 0px;
   z-index: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .content-container .aside-nav {
   width: 280px;
-  position: absolute;
+  position: fixed;
-  top: 0;
+  top: 60px;
   bottom: 0;
   border-right: 1px solid rgba(162, 162, 162, 0.2);
   background: #F8F9FA;
   padding-top: 10px;
+  overflow-y: auto;
+  z-index: 4;
 }
 
 .content-container .aside-nav a {
@@ -132,9 +142,17 @@
   float: right;
 }
 
+.content-container .content-wrapper {
+  padding: 25px 25px 25px 305px;
+  overflow-y: auto;
+}
+
 .content-container .content {
+  padding: 25px 0;
+}
+
+.content-container .content.full-page {
   padding: 25px;
-  padding-left: 305px;
 }
 
 .content-container .content .page-header {

public/vendor/webkul/admin/assets/js/admin.js

@@ -95,7 +95,7 @@ module.exports = g;
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(2);
-module.exports = __webpack_require__(8);
+module.exports = __webpack_require__(9);
 
 
 /***/ }),
@@ -104,24 +104,49 @@ module.exports = __webpack_require__(8);
 
 window.jQuery = window.$ = $ = __webpack_require__(3);
 window.Vue = __webpack_require__(4);
-window.VeeValidate = __webpack_require__(13);
+window.VeeValidate = __webpack_require__(8);
 
 Vue.use(VeeValidate);
 
 $(document).ready(function () {
-    var form = new Vue({
+    var app = new Vue({
-        el: 'form',
+        el: '#app',
 
         mounted: function mounted() {
             this.addServerErrors();
+            this.addFlashMessages();
         },
 
         methods: {
+            onSubmit: function onSubmit(e) {
+                this.$validator.validateAll().then(function (result) {
+                    if (result) {
+                        e.target.submit();
+                    }
+                });
+            },
+
             addServerErrors: function addServerErrors() {
-                // this.errors.add('email', "Hello")
+                var scope = null;
-                // for (var key in serverErrors) {
+                for (var key in serverErrors) {
-                //     this.errors.add(key, serverErrors[key][0])
+                    var field = this.$validator.fields.find({ name: key, scope: scope });
-                // }
+                    if (field) {
+                        this.$validator.errors.add({
+                            id: field.id,
+                            field: key,
+                            msg: serverErrors[key][0],
+                            scope: scope
+                        });
+                    }
+                }
+            },
+
+            addFlashMessages: function addFlashMessages() {
+                var flashes = this.$refs.flashes;
+
+                flashMessages.forEach(function (flash) {
+                    flashes.addFlash(flash);
+                }, this);
             }
         }
     });
@@ -21919,16 +21944,6 @@ process.umask = function() { return 0; };
 
 /***/ }),
 /* 8 */
-/***/ (function(module, exports) {
-
-// removed by extract-text-webpack-plugin
-
-/***/ }),
-/* 9 */,
-/* 10 */,
-/* 11 */,
-/* 12 */,
-/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -21944,7 +21959,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ErrorComponent", function() { return ErrorComponent; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "version", function() { return version; });
 /**
-  * vee-validate v2.1.0-beta.3
+  * vee-validate v2.1.0-beta.5
   * (c) 2018 Abdelrahman Awad
   * @license MIT
   */
@@ -22964,6 +22979,7 @@ ErrorBag.prototype._normalizeError = function _normalizeError (error) {
   }
 
   error.scope = !isNullOrUndefined(error.scope) ? error.scope : null;
+  error.vmId = !isNullOrUndefined(error.vmId) ? error.vmId : (this.vmId || null);
 
   return [error];
 };
@@ -24242,7 +24258,7 @@ Validator.prototype._validate = function _validate (field, value, ref) {
   var isExitEarly = false;
   // use of '.some()' is to break iteration in middle by returning true
   Object.keys(field.rules).filter(function (rule) {
-    if (!initial) { return true; }
+    if (!initial || !RULES[rule]) { return true; }
 
     return RULES[rule].options.immediate;
   }).some(function (rule) {
@@ -25059,12 +25075,12 @@ prototypeAccessors$5.flags.get = function () {
     var this$1 = this;
 
   return this._base.fields.items.filter(function (f) { return f.vmId === this$1.id; }).reduce(function (acc, field) {
-      var obj;
-
     if (field.scope) {
-      acc[("$" + (field.scope))] = ( obj = {}, obj[field.name] = field.flags, obj );
+      if (!acc[("$" + (field.scope))]) {
+        acc[("$" + (field.scope))] = {};
+      }
 
-      return acc;
+      acc[("$" + (field.scope))][field.name] = field.flags;
     }
 
     acc[field.name] = field.flags;
@@ -25225,6 +25241,12 @@ var mixin = {
       return;
     }
 
+    // There is a validator but it isn't injected, mark as reactive.
+    if (!requested && this.$validator) {
+      var Vue = this.$options._base; // the vue constructor.
+      Vue.util.defineReactive(this.$validator, 'errors', this.$validator.errors);
+    }
+
     if (! this.$options.computed) {
       this.$options.computed = {};
     }
@@ -25233,13 +25255,13 @@ var mixin = {
       return this.$validator.errors;
     };
     this.$options.computed[options.fieldsBagName || 'fields'] = function fieldBagGetter () {
-      var this$1 = this;
+      return this.$validator.fields.items.reduce(function (acc, field) {
-
-      return this.$validator.fields.items.filter(function (f) { return f.vmId === this$1._uid; }).reduce(function (acc, field) {
-        var obj;
-
         if (field.scope) {
-          acc[("$" + (field.scope))] = ( obj = {}, obj[field.name] = field.flags, obj );
+          if (!acc[("$" + (field.scope))]) {
+            acc[("$" + (field.scope))] = {};
+          }
+
+          acc[("$" + (field.scope))][field.name] = field.flags;
 
           return acc;
         }
@@ -25251,7 +25273,7 @@ var mixin = {
     };
   },
   beforeDestroy: function beforeDestroy () {
-    if (this._uid === this.$validator.id) {
+    if (this.$validator && this._uid === this.$validator.id) {
       this.$validator.errors.clear(); // remove errors generated by this component.
     }
   }
@@ -29604,7 +29626,7 @@ var ErrorComponent = {
   }
 };
 
-var version = '2.1.0-beta.3';
+var version = '2.1.0-beta.5';
 
 var rulesPlugin = function (ref) {
   var Validator$$1 = ref.Validator;
@@ -29636,5 +29658,11 @@ var index_esm = {
 
 
 
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
 /***/ })
 /******/ ]);

public/vendor/webkul/ui/assets/css/ui.css

@@ -1,4 +1,4 @@
-.icon-dashboard, .icon-configuration, .icon-settings, .active .icon-configuration {
+.icon-dashboard, .icon-configuration, .icon-settings, .active .icon-configuration, .active.icon-configuration {
   width: 48px;
   height: 48px;
   margin-bottom: 10px;
@@ -23,18 +23,6 @@
   background-image: url("../images/Icon-Settings.svg");
 }
 
-.active .icon-dashboard {
-  background-image: url("../images/Icon-Dashboard-Active.svg");
-}
-
-.active .icon-settings {
-  background-image: url("../images/Icon-Settings-Active.svg");
-}
-
-.active .icon-configuration {
-  background-image: url("../images/Icon-Configure-Active.svg");
-}
-
 .angle-right-icon {
   background-image: url("../images/Angle-Right.svg");
   width: 17px;
@@ -53,16 +41,94 @@
   height: 8px;
 }
 
-.arrow-down-icon-active {
+.white-cross-sm-icon {
+  background-image: url("../images/Icon-Sm-Cross-White.svg");
+  width: 18px;
+  height: 18px;
+}
+
+.accordian-up-icon {
+  background-image: url("../images/Accordion-Arrow-Up.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.accordian-down-icon {
+  background-image: url("../images/Accordion-Arrow-Down.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.trash-icon {
+  background-image: url("../images/Icon-Trash.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.remove-icon {
+  background-image: url("../images/Icon-remove.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.pencil-lg-icon {
+  background-image: url("../images/Icon-Pencil-Large.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.search-icon {
+  background-image: url("../images/icon-search.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.sortable-icon {
+  background-image: url("../images/Icon-Sortable.svg");
+  width: 24px;
+  height: 24px;
+}
+
+.sort-down-icon {
+  background-image: url("../images/Icon-Sort-Down.svg");
+  width: 18px;
+  height: 18px;
+}
+
+.active .icon-dashboard {
+  background-image: url("../images/Icon-Dashboard-Active.svg");
+}
+
+.active .icon-settings {
+  background-image: url("../images/Icon-Settings-Active.svg");
+}
+
+.active .icon-configuration {
+  background-image: url("../images/Icon-Configure-Active.svg");
+}
+
+.active .arrow-down-icon {
   background-image: url("../images/Arrow-Down.svg");
   width: 14px;
   height: 8px;
 }
 
-.white-cross-sm-icon {
+.active.icon-dashboard {
-  background-image: url("../images/Icon-Sm-Cross-White.svg");
+  background-image: url("../images/Icon-Dashboard-Active.svg");
-  width: 18px;
+}
-  height: 18px;
+
+.active.icon-settings {
+  background-image: url("../images/Icon-Settings-Active.svg");
+}
+
+.active.icon-configuration {
+  background-image: url("../images/Icon-Configure-Active.svg");
+}
+
+.active.arrow-down-icon {
+  background-image: url("../images/Arrow-Down.svg");
+  width: 14px;
+  height: 8px;
 }
 
 @-webkit-keyframes jelly {
@@ -142,6 +208,7 @@
           box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-weight: 500;
 }
 
 *:focus {
@@ -168,6 +235,11 @@ h1 {
   margin-top: 0;
 }
 
+h2 {
+  font-size: 18px;
+  color: #3A3A3A;
+}
+
 .btn {
   -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1);
@@ -177,6 +249,7 @@ h1 {
   cursor: pointer;
   -webkit-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  font: inherit;
 }
 
 .btn:hover, .btn:active, .btn:focus {
@@ -185,19 +258,19 @@ h1 {
 }
 
 .btn.btn-sm {
-  padding: 6px 10px;
+  padding: 6px 12px;
 }
 
 .btn.btn-md {
-  padding: 8px 12px;
+  padding: 8px 16px;
 }
 
 .btn.btn-lg {
-  padding: 10px 14px;
+  padding: 10px 20px;
 }
 
 .btn.btn-xl {
-  padding: 12px 16px;
+  padding: 12px 24px;
 }
 
 .btn.btn-primary {
@@ -218,8 +291,8 @@ h1 {
 
 .dropdown-list {
   width: 200px;
-  -webkit-box-shadow: 0px 4px 15.36px 0.64px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 0 9px 0 rgba(0, 0, 0, 0.16);
-          box-shadow: 0px 4px 15.36px 0.64px rgba(0, 0, 0, 0.1), 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 0 9px 0 rgba(0, 0, 0, 0.16);
   border-radius: 3px;
   background-color: #FFFFFF;
   position: absolute;
@@ -387,6 +460,7 @@ h1 {
   margin: 0;
   display: inline-block !important;
   vertical-align: middle;
+  margin-right: 5px;
 }
 
 .checkbox input:checked + .checkbox-view {
@@ -420,6 +494,7 @@ h1 {
   margin: 0;
   display: inline-block !important;
   vertical-align: middle;
+  margin-right: 5px;
 }
 
 .radio input:checked + .radio-view {
@@ -445,6 +520,10 @@ h1 {
   color: #3A3A3A;
 }
 
+.form-container .control-group textarea.control {
+  height: 100px;
+}
+
 .form-container .control-group .control {
   background: #fff;
   border: 2px solid #C7C7C7;
@@ -478,7 +557,7 @@ h1 {
 }
 
 .form-container .control-group .control-error {
-  display: block;
+  display: none;
   color: #FF5656;
   margin-top: 5px;
 }
@@ -487,12 +566,16 @@ h1 {
   border-color: #FC6868;
 }
 
+.form-container .control-group.has-error .control-error {
+  display: block;
+}
+
 .alert-wrapper {
   width: 300px;
   top: 10px;
   right: 10px;
   position: fixed;
-  z-index: 3;
+  z-index: 6;
 }
 
 .alert-wrapper .alert {
@@ -536,3 +619,58 @@ h1 {
   padding: 0px;
   font-size: 15px;
 }
+
+.tabs ul {
+  border-bottom: solid 1px rgba(162, 162, 162, 0.2);
+}
+
+.tabs ul li {
+  display: inline-block;
+}
+
+.tabs ul li a {
+  padding: 15px 20px;
+  cursor: pointer;
+  margin: 0px 2px;
+  text-align: center;
+  color: #000311;
+  display: block;
+}
+
+.tabs ul li.active a {
+  border-bottom: 3px solid #0041FF;
+}
+
+.accordian .accordian-header {
+  font-size: 18px;
+  color: #3A3A3A;
+  border-bottom: solid 1px rgba(162, 162, 162, 0.2);
+  padding: 20px 15px;
+  cursor: pointer;
+}
+
+.accordian .accordian-header .icon {
+  float: right;
+}
+
+.accordian .accordian-content {
+  padding: 20px 15px;
+  display: none;
+  -webkit-transition: 0.3s ease all;
+  transition: 0.3s ease all;
+}
+
+.accordian.active .accordian-content {
+  display: inline-block;
+}
+
+.tree-item {
+  padding-left: 30px;
+  display: inline-block;
+  width: 100%;
+}
+
+.tree-item .checkbox {
+  margin: 0;
+  margin-bottom: 5px;
+}

public/vendor/webkul/ui/assets/images/Accordion-Arrow-Down.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Accordion-Arrow-Down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Accordion-Arrow-Down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2" fill="#0041FF" x="0" y="0" width="24" height="24" rx="12"></rect>
+        <polyline id="Path-3" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 12.000000) scale(-1, -1) rotate(-90.000000) translate(-12.000000, -12.000000) " points="10 8 14 12 10 16"></polyline>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/Accordion-Arrow-Up.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Accordion-Arrow-Up</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Accordion-Arrow-Up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2" fill="#0041FF" x="0" y="0" width="24" height="24" rx="12"></rect>
+        <polyline id="Path-3" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="translate(12.000000, 11.000000) scale(-1, 1) rotate(-90.000000) translate(-12.000000, -11.000000) " points="10 7 14 11 10 15"></polyline>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/Icon-Pencil-Large.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Pencil-Large</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Pencil-Large" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(0.000000, 1.000000)" stroke="#979797" stroke-width="2">
+            <polygon id="Combined-Shape" stroke-linecap="round" stroke-linejoin="round" transform="translate(11.000000, 11.500000) scale(1, -1) rotate(-45.000000) translate(-11.000000, -11.500000) " points="14 2.90864186 14 24 8 24 8 2.90864186 11 -1"></polygon>
+            <path d="M14,4 L19,9" id="Path-10"></path>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/Icon-Sort-Down.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sort-Down</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Sort-Down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g transform="translate(9.000000, 9.000000) rotate(90.000000) translate(-9.000000, -9.000000) translate(3.000000, 5.000000)" stroke="#979797" stroke-width="2">
+            <path d="M1.13686838e-12,4 L10.068125,4" id="Path-3"></path>
+            <polyline id="Path-4" points="8 0 12 4.08548298 8 8"></polyline>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/Icon-Sortable.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Sortable</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Sortable" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Icon-Sort-Down" transform="translate(5.000000, 6.000000)" stroke="#979797" stroke-width="2">
+            <path d="M0,1 L14,1" id="Path-3"></path>
+            <path d="M0,6 L14,6" id="Path-3-Copy"></path>
+            <path d="M0,11 L14,11" id="Path-3-Copy-2"></path>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/Icon-Trash.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Trash</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-Trash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <polygon id="Rectangle-10" stroke="#979797" stroke-width="2" points="4 5 7.39453125 5 9.64208984 2.00048828 14.6196289 2.00048828 16.6455078 5 20 5 20 8 4 8"></polygon>
+        <polygon id="Rectangle-10" stroke="#979797" stroke-width="2" points="6 8 18 8 18 22 6 22"></polygon>
+        <path d="M9,12 L9,18" id="Path-12" stroke="#979797" stroke-width="2"></path>
+        <path d="M12,12 L12,18" id="Path-12-Copy" stroke="#979797" stroke-width="2"></path>
+        <path d="M15,12 L15,18" id="Path-12-Copy-2" stroke="#979797" stroke-width="2"></path>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/Icon-remove.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-remove</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Icon-remove" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval-9" stroke="#979797" stroke-width="2" cx="12" cy="12" r="10"></circle>
+        <g id="Icon-Cross-Sm" transform="translate(9.000000, 9.000000)" stroke="#8E8E8E" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="M0,0 L6,6" id="Path-2"></path>
+            <path d="M0,0 L6,6" id="Path-2" transform="translate(3.000000, 3.000000) scale(-1, 1) translate(-3.000000, -3.000000) "></path>
+        </g>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/images/icon-search.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-search</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="icon-search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval-2" stroke="#8E8E8E" stroke-width="3" cx="10.5" cy="10.5" r="7"></circle>
+        <path d="M15.5,15.5 L21.5,21.5" id="Line" stroke="#8E8E8E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>

public/vendor/webkul/ui/assets/js/ui.js

@@ -64,99 +64,7 @@
 /******/ })
 /************************************************************************/
 /******/ ([
-/* 0 */,
+/* 0 */
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__(2);
-__webpack_require__(11);
-module.exports = __webpack_require__(13);
-
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
-
-$(document).ready(function () {
-    function addFlash(flash) {
-        flashMessages.push(flash);
-    }
-
-    Vue.component('flash-wrapper', __webpack_require__(18));
-    Vue.component('flash', __webpack_require__(7));
-
-    var app = new Vue({
-        el: '#app',
-
-        mounted: function mounted() {
-            this.addFlashMessages();
-        },
-
-        methods: {
-            addFlashMessages: function addFlashMessages() {
-                var flashes = this.$refs.flashes;
-
-                flashMessages.forEach(function (flash) {
-                    flashes.addFlash(flash);
-                }, this);
-            }
-        }
-    });
-});
-
-/***/ }),
-/* 3 */,
-/* 4 */,
-/* 5 */,
-/* 6 */,
-/* 7 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var disposed = false
-var normalizeComponent = __webpack_require__(8)
-/* script */
-var __vue_script__ = __webpack_require__(9)
-/* template */
-var __vue_template__ = __webpack_require__(10)
-/* template functional */
-var __vue_template_functional__ = false
-/* styles */
-var __vue_styles__ = null
-/* scopeId */
-var __vue_scopeId__ = null
-/* moduleIdentifier (server only) */
-var __vue_module_identifier__ = null
-var Component = normalizeComponent(
-  __vue_script__,
-  __vue_template__,
-  __vue_template_functional__,
-  __vue_styles__,
-  __vue_scopeId__,
-  __vue_module_identifier__
-)
-Component.options.__file = "src/Resources/assets/js/components/flash.vue"
-
-/* hot reload */
-if (false) {(function () {
-  var hotAPI = require("vue-hot-reload-api")
-  hotAPI.install(require("vue"), false)
-  if (!hotAPI.compatible) return
-  module.hot.accept()
-  if (!module.hot.data) {
-    hotAPI.createRecord("data-v-feee1d58", Component.options)
-  } else {
-    hotAPI.reload("data-v-feee1d58", Component.options)
-  }
-  module.hot.dispose(function (data) {
-    disposed = true
-  })
-})()}
-
-module.exports = Component.exports
-
-
-/***/ }),
-/* 8 */
 /***/ (function(module, exports) {
 
 /* globals __VUE_SSR_CONTEXT__ */
@@ -265,7 +173,202 @@ module.exports = function normalizeComponent (
 
 
 /***/ }),
-/* 9 */
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(2);
+__webpack_require__(17);
+module.exports = __webpack_require__(19);
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+Vue.component('flash-wrapper', __webpack_require__(3));
+Vue.component('flash', __webpack_require__(6));
+Vue.component('accordian', __webpack_require__(9));
+Vue.component('tree-view', __webpack_require__(12));
+Vue.component('tree-checkbox', __webpack_require__(14));
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(4)
+/* template */
+var __vue_template__ = __webpack_require__(5)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/flash-wrapper.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-34b58a1a", Component.options)
+  } else {
+    hotAPI.reload("data-v-34b58a1a", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 4 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    data: function data() {
+        return {
+            uid: 1,
+
+            flashes: []
+        };
+    },
+
+    methods: {
+        addFlash: function addFlash(flash) {
+            flash.uid = this.uid++;
+            this.flashes.push(flash);
+        },
+
+        removeFlash: function removeFlash(flash) {
+            var index = this.flashes.indexOf(flash);
+
+            this.flashes.splice(index, 1);
+        }
+    }
+});
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "transition-group",
+    {
+      staticClass: "alert-wrapper",
+      attrs: { tag: "div", name: "flash-wrapper" }
+    },
+    _vm._l(_vm.flashes, function(flash, index) {
+      return _c("flash", {
+        key: flash.uid,
+        attrs: { flash: flash },
+        on: {
+          onRemoveFlash: function($event) {
+            _vm.removeFlash($event)
+          }
+        }
+      })
+    })
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-34b58a1a", module.exports)
+  }
+}
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(7)
+/* template */
+var __vue_template__ = __webpack_require__(8)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/flash.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-feee1d58", Component.options)
+  } else {
+    hotAPI.reload("data-v-feee1d58", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -296,7 +399,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 10 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -322,11 +425,519 @@ if (false) {
   }
 }
 
+/***/ }),
+/* 9 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(10)
+/* template */
+var __vue_template__ = __webpack_require__(11)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/accordian.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-d9e5880c", Component.options)
+  } else {
+    hotAPI.reload("data-v-d9e5880c", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 10 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: {
+        title: String,
+        active: Boolean
+    },
+
+    data: function data() {
+        return {
+            isActive: false
+        };
+    },
+
+    mounted: function mounted() {
+        this.isActive = this.active;
+    },
+
+    methods: {
+        toggleAccordion: function toggleAccordion() {
+            this.isActive = !this.isActive;
+        }
+    },
+
+    computed: {
+        iconClass: function iconClass() {
+            return {
+                'accordian-down-icon': !this.isActive,
+                'accordian-up-icon': this.isActive
+            };
+        }
+    }
+});
+
 /***/ }),
 /* 11 */
 /***/ (function(module, exports, __webpack_require__) {
 
-window.jQuery = window.$ = $ = __webpack_require__(12);
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    { staticClass: "accordian", class: { active: _vm.isActive } },
+    [
+      _c(
+        "div",
+        {
+          staticClass: "accordian-header",
+          on: {
+            click: function($event) {
+              _vm.toggleAccordion()
+            }
+          }
+        },
+        [
+          _vm._v("\n        " + _vm._s(_vm.title) + "\n        "),
+          _c("i", { staticClass: "icon", class: _vm.iconClass })
+        ]
+      ),
+      _vm._v(" "),
+      _vm._t("default")
+    ],
+    2
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-d9e5880c", module.exports)
+  }
+}
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(13)
+/* template */
+var __vue_template__ = null
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/tree-view/tree-view.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-2c07aa7d", Component.options)
+  } else {
+    hotAPI.reload("data-v-2c07aa7d", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    name: 'tree-view',
+
+    inheritAttrs: false,
+
+    props: {
+        items: {
+            type: Object,
+            required: false,
+            default: function _default() {
+                return {
+                    "name": "Root",
+                    "value": "1",
+                    "children": [{
+                        "name": "First Child",
+                        "value": "2"
+                    }, {
+                        "name": "Second Child",
+                        "value": "3",
+                        "children": [{
+                            "name": "GrandChild 1",
+                            "value": "4"
+                        }, {
+                            "name": "GrandChild 2",
+                            "value": "5"
+                        }, {
+                            "name": "GrandChild 3",
+                            "value": "6"
+                        }]
+                    }]
+                };
+            }
+        },
+
+        value: {
+            type: Array,
+            required: false,
+            default: function _default() {
+                return [];
+            }
+        }
+    },
+
+    computed: {
+        allChildren: function allChildren() {
+            var leafs = [];
+            var searchTree = function searchTree(items) {
+                if (!!items['children'] && items['children'].length > 0) {
+                    items['children'].forEach(function (child) {
+                        return searchTree(child);
+                    });
+                } else {
+                    leafs.push(items);
+                }
+            };
+
+            searchTree(this.items);
+
+            return leafs;
+        },
+        hasChildren: function hasChildren() {
+            return !!this.items['children'] && this.items['children'].length > 0;
+        },
+        hasSelection: function hasSelection() {
+            return !!this.value && this.value.length > 0;
+        },
+        isAllChildrenSelected: function isAllChildrenSelected() {
+            var _this = this;
+
+            return this.hasChildren && this.hasSelection && this.allChildren.every(function (leaf) {
+                return _this.value.some(function (sel) {
+                    return sel === leaf;
+                });
+            });
+        },
+        isSomeChildrenSelected: function isSomeChildrenSelected() {
+            var _this2 = this;
+
+            return this.hasSelection && this.allChildren.some(function (leaf) {
+                return _this2.value.some(function (sel) {
+                    return sel === leaf;
+                });
+            });
+        }
+    },
+
+    methods: {
+        generateRoot: function generateRoot() {
+            var _this3 = this;
+
+            return this.$createElement('tree-checkbox', {
+                props: {
+                    label: this.items['name'],
+                    inputValue: this.hasChildren ? this.isAllChildrenSelected : this.value,
+                    value: this.hasChildren ? this.isAllChildrenSelected : this.items
+                },
+                on: {
+                    change: function change(selection) {
+                        if (_this3.hasChildren) {
+                            if (_this3.isAllChildrenSelected) {
+                                _this3.allChildren.forEach(function (leaf) {
+                                    var index = _this3.value.indexOf(leaf);
+                                    _this3.value.splice(index, 1);
+                                });
+                            } else {
+                                _this3.allChildren.forEach(function (leaf) {
+                                    var index = _this3.value.indexOf(leaf);
+                                    if (index === -1) {
+                                        _this3.value.push(leaf);
+                                    }
+                                });
+                            }
+
+                            _this3.$emit('input', _this3.value);
+                        } else {
+                            _this3.$emit('input', selection);
+                        }
+                    }
+                }
+            });
+        },
+        generateChild: function generateChild(child) {
+            var _this4 = this;
+
+            return this.$createElement('tree-view', {
+                class: 'tree-item',
+                on: {
+                    input: function input(selection) {
+                        _this4.$emit('input', selection);
+                    }
+                },
+                props: {
+                    items: child,
+                    value: this.value
+                }
+            });
+        },
+        generateChildren: function generateChildren() {
+            var _this5 = this;
+
+            var childElements = [];
+            if (this.items['children']) {
+                this.items['children'].forEach(function (child) {
+                    childElements.push(_this5.generateChild(child));
+                });
+            }
+
+            return childElements;
+        }
+    },
+
+    render: function render(createElement) {
+        return createElement('div', {}, [this.generateRoot()].concat(_toConsumableArray(this.generateChildren())));
+    }
+});
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(0)
+/* script */
+var __vue_script__ = __webpack_require__(15)
+/* template */
+var __vue_template__ = __webpack_require__(16)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/tree-view/tree-checkbox.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-0c27ec9b", Component.options)
+  } else {
+    hotAPI.reload("data-v-0c27ec9b", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 15 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    name: 'tree-checkbox',
+
+    props: ['label', 'inputValue', 'value'],
+
+    methods: {
+        inputChanged: function inputChanged(e) {
+            this.$emit('change', this.inputValue);
+        },
+        valueComparator: function valueComparator(a, b) {
+            var _this = this;
+
+            if (a === b) return true;
+
+            if (a !== Object(a) || b !== Object(b)) {
+                return false;
+            }
+
+            var props = Object.keys(a);
+
+            if (props.length !== Object.keys(b).length) {
+                return false;
+            }
+
+            return props.every(function (p) {
+                return _this.valueComparator(a[p], b[p]);
+            });
+        }
+    },
+
+    computed: {
+        isMultiple: function isMultiple() {
+            return Array.isArray(this.inputValue);
+        },
+        isActive: function isActive() {
+            var _this2 = this;
+
+            var value = this.value;
+            var input = this.inputValue;
+
+            if (this.isMultiple) {
+                if (!Array.isArray(input)) return false;
+
+                return input.some(function (item) {
+                    return _this2.valueComparator(item, value);
+                });
+            }
+
+            var isChecked = value ? this.valueComparator(value, input) : Boolean(input);
+
+            return isChecked;
+        }
+    }
+});
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("span", { staticClass: "checkbox" }, [
+    _c("input", {
+      attrs: { type: "checkbox", name: "permissions[]", id: _vm.inputValue },
+      domProps: { value: _vm.inputValue.value, checked: _vm.isActive },
+      on: {
+        change: function($event) {
+          _vm.inputChanged($event)
+        }
+      }
+    }),
+    _vm._v(" "),
+    _c("label", {
+      staticClass: "checkbox-view",
+      attrs: { for: _vm.inputValue }
+    }),
+    _vm._v(
+      "\n    " +
+        _vm._s(_vm.inputValue) +
+        " ======== " +
+        _vm._s(_vm.value) +
+        "\n"
+    )
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-0c27ec9b", module.exports)
+  }
+}
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+window.jQuery = window.$ = $ = __webpack_require__(18);
 
 $(function () {
     $(document).click(function (e) {
@@ -391,7 +1002,7 @@ $(function () {
 });
 
 /***/ }),
-/* 12 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -10762,143 +11373,10 @@ return jQuery;
 
 
 /***/ }),
-/* 13 */
+/* 19 */
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
 
-/***/ }),
-/* 14 */,
-/* 15 */,
-/* 16 */,
-/* 17 */,
-/* 18 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var disposed = false
-var normalizeComponent = __webpack_require__(8)
-/* script */
-var __vue_script__ = __webpack_require__(19)
-/* template */
-var __vue_template__ = __webpack_require__(20)
-/* template functional */
-var __vue_template_functional__ = false
-/* styles */
-var __vue_styles__ = null
-/* scopeId */
-var __vue_scopeId__ = null
-/* moduleIdentifier (server only) */
-var __vue_module_identifier__ = null
-var Component = normalizeComponent(
-  __vue_script__,
-  __vue_template__,
-  __vue_template_functional__,
-  __vue_styles__,
-  __vue_scopeId__,
-  __vue_module_identifier__
-)
-Component.options.__file = "src/Resources/assets/js/components/flash-wrapper.vue"
-
-/* hot reload */
-if (false) {(function () {
-  var hotAPI = require("vue-hot-reload-api")
-  hotAPI.install(require("vue"), false)
-  if (!hotAPI.compatible) return
-  module.hot.accept()
-  if (!module.hot.data) {
-    hotAPI.createRecord("data-v-34b58a1a", Component.options)
-  } else {
-    hotAPI.reload("data-v-34b58a1a", Component.options)
-  }
-  module.hot.dispose(function (data) {
-    disposed = true
-  })
-})()}
-
-module.exports = Component.exports
-
-
-/***/ }),
-/* 19 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/* harmony default export */ __webpack_exports__["default"] = ({
-    data: function data() {
-        return {
-            uid: 1,
-
-            flashes: []
-        };
-    },
-
-    methods: {
-        addFlash: function addFlash(flash) {
-            flash.uid = this.uid++;
-            this.flashes.push(flash);
-        },
-
-        removeFlash: function removeFlash(flash) {
-            var index = this.flashes.indexOf(flash);
-
-            this.flashes.splice(index, 1);
-        }
-    }
-});
-
-/***/ }),
-/* 20 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var render = function() {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c(
-    "transition-group",
-    {
-      staticClass: "alert-wrapper",
-      attrs: { tag: "div", name: "flash-wrapper" }
-    },
-    _vm._l(_vm.flashes, function(flash, index) {
-      return _c("flash", {
-        key: flash.uid,
-        attrs: { flash: flash },
-        on: {
-          onRemoveFlash: function($event) {
-            _vm.removeFlash($event)
-          }
-        }
-      })
-    })
-  )
-}
-var staticRenderFns = []
-render._withStripped = true
-module.exports = { render: render, staticRenderFns: staticRenderFns }
-if (false) {
-  module.hot.accept()
-  if (module.hot.data) {
-    require("vue-hot-reload-api")      .rerender("data-v-34b58a1a", module.exports)
-  }
-}
-
 /***/ })
 /******/ ]);