Merge pull request #4 from sayasuhendra/main

Added optional User Management and Developer Menu Component for desktop and mobile.
LLoadout · Nov 11, 2021 · 62f214a · 62f214a
2 parents ae5668e + 7ab1e70
commit 62f214a
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 # LLoadout
 
-LLoadout is your loadout for Laravel.  It helps you with tips , code examples and packages to make you a better Laravel developer.
+LLoadout is your loadout for Laravel. It helps you with tips , code examples and packages to make you a better Laravel developer.
 
 # LLoadout inforce
 
@@ -19,20 +19,20 @@ With LLoadout Inforce you will kickstart your Laravel development when using Lar
 
 ## Users, roles and permissions
 
-LLoadout inforce will add a ui for managing users, roles, permission and menus.  It will also provide you with
+LLoadout inforce will add a ui for managing users, roles, permission and menus. It will also provide you with
 an ui to link users to roles and assign permissions to roles.
 
-### manage roles 
+### manage roles
 
-you can manage roles and assign permissions to the roles 
+you can manage roles and assign permissions to the roles
 
 <p align="center">
     <img src="https://github.com/LLoadout/assets/blob/master/inforce/roles.png"  title="LLoadout inforce">
 </p>
 
-### manage users 
+### manage users
 
-you can manage users and assign them a role.  You can also assign permissions on user level.
+you can manage users and assign them a role. You can also assign permissions on user level.
 
 <p align="center">
     <img src="https://github.com/LLoadout/assets/blob/master/inforce/users.png"  title="LLoadout inforce">
@@ -46,12 +46,9 @@ you can manage menus
     <img src="https://github.com/LLoadout/assets/blob/master/inforce/menus.png"  title="LLoadout inforce">
 </p>
 
-
-
 ## Installation
 
-
-## Installing Laravel Jetstream, the Livewire version 
+## Installing Laravel Jetstream, the Livewire version
 
 Laravel Jetstream is a requirement for this package, if you haven't allready install it i refer
 to the docs of Jetstream to install it.
@@ -66,13 +63,13 @@ https://spatie.be/docs/laravel-permission/v4/installation-laravel
 
 Attention : don't forget to read the prerequisites : https://spatie.be/docs/laravel-permission/v4/prerequisites
 
-## Installation of LLoadout inforce 
+## Installation of LLoadout inforce
 
 ```shell
 composer require lloadout/inforce
 ```
 
-### Assets 
+### Assets
 
 LLoadout inforce uses some default menus and permissions, these can be created via the provided migrations and seeder.
 
@@ -96,8 +93,24 @@ It provides a ui for navigation management and navigation permissions.
 
 Therefore you have to add this tag after the Navigation Links section navigation-menu.blade.php. Default on line 19
 
-```php 
+```php
  <livewire:navigation/>
+
+ or
+
+@if(Auth::user()->hasRole('superuser')) // or your optional roles
+    <livewire:user-management-menus/>
+    <livewire:developer-menus/>
+@endif
+```
+
+And add mobile menu default on line 214
+
+```php
+@if(Auth::user()->hasRole('superuser'))  // or your optional roles
+    <livewire:user-management-menus-mobile/>
+    <livewire:developer-menus-mobile/>
+@endif
 ```
 
 ## Logging in
@@ -106,16 +119,17 @@ LLoadout inforce will default create a user with username of `john@doe.com` and
 
 ## Extending the package
 
-Assume you want to add fields to the user view and want to save the field to the database.  Than you can use the published view and extend the LLoadout user component.
+Assume you want to add fields to the user view and want to save the field to the database. Than you can use the published view and extend the LLoadout user component.
 Herefore you have to create your own route to your own created component.
 
-This is the route 
+This is the route
 
 ```php
-Route::get('/user/detail/{user?}', \App\Http\Livewire\MyUser::class)->whereNumber('id')->name('users.edit'); 
+Route::get('/user/detail/{user?}', \App\Http\Livewire\MyUser::class)->whereNumber('id')->name('users.edit');
 ```
 
 This can be your component
+
 ```php
 <?php
 
@@ -144,8 +158,8 @@ class MyUser extends \LLoadoutInforce\Http\Livewire\User
 
 ```
 
-# Documentation 
+# Documentation
 
-Via the permissions menu you can create your permissions, they are stored in the database.  Via the user or role menu it is possible to assign a permission to a role or a user.
+Via the permissions menu you can create your permissions, they are stored in the database. Via the user or role menu it is possible to assign a permission to a role or a user.
 
-It is also possible to create menu's and corresponding permissions for the menu's.  Giving users or roles access to the menu's via the roles and users management.
+It is also possible to create menu's and corresponding permissions for the menu's. Giving users or roles access to the menu's via the roles and users management.
diff --git a/resources/views/menu-ui/developer-desktop.blade.php b/resources/views/menu-ui/developer-desktop.blade.php
@@ -0,0 +1,24 @@
+<div class="ml-3 relative">
+	<x-jet-dropdown align="right" width="48">
+	    <x-slot name="trigger">
+		<span class="inline-flex rounded-md">
+		    <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
+			{{ __('Developer Menu') }}
+			<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+			    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+			</svg>
+		    </button>
+		</span>
+	    </x-slot>
+
+	    <x-slot name="content">
+		<x-jet-dropdown-link href="{{ route('developers.permissions') }}">
+		    {{ __('Permissions') }}
+		</x-jet-dropdown-link>
+		<x-jet-dropdown-link href="{{ route('developers.menus') }}">
+		    {{ __('Menus') }}
+		</x-jet-dropdown-link>
+	    </x-slot>
+	</x-jet-dropdown>
+    </div>
+
diff --git a/resources/views/menu-ui/developer-mobile.blade.php b/resources/views/menu-ui/developer-mobile.blade.php
@@ -0,0 +1,12 @@
+<div class="border-t border-gray-200"></div>
+
+<div class="block px-4 py-2 text-xs text-gray-400">
+    {{ __('Developer Menu') }}
+</div>
+<div class="border-t border-gray-100"></div>
+<x-jet-responsive-nav-link href="{{ route('developers.permissions') }}">
+    {{ __('Permissions') }}
+</x-jet-responsive-nav-link>
+<x-jet-responsive-nav-link href="{{ route('developers.menus') }}">
+    {{ __('Menus') }}
+</x-jet-responsive-nav-link>
diff --git a/resources/views/menu-ui/user-desktop.blade.php b/resources/views/menu-ui/user-desktop.blade.php
@@ -0,0 +1,24 @@
+<div class="ml-3 relative">
+	<x-jet-dropdown align="right" width="48">
+		<x-slot name="trigger">
+		<span class="inline-flex rounded-md">
+			<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
+			{{ __('User Management') }}
+			<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+				<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+			</svg>
+			</button>
+		</span>
+		</x-slot>
+
+		<x-slot name="content">
+		<x-jet-dropdown-link href="{{ route('users.index') }}">
+			{{ __('Manage Users') }}
+		</x-jet-dropdown-link>
+		<x-jet-dropdown-link href="{{ route('users.roles') }}">
+			{{ __('Manage Roles') }}
+		</x-jet-dropdown-link>
+		</x-slot>
+	</x-jet-dropdown>
+</div>
+
diff --git a/resources/views/menu-ui/user-mobile.blade.php b/resources/views/menu-ui/user-mobile.blade.php
@@ -0,0 +1,12 @@
+<div class="border-t border-gray-200"></div>
+
+<div class="block px-4 py-2 text-xs text-gray-400">
+    {{ __('User Management') }}
+</div>
+<x-jet-responsive-nav-link href="{{ route('users.index') }}">
+    {{ __('Manage Users') }}
+</x-jet-responsive-nav-link>
+<x-jet-responsive-nav-link href="{{ route('users.roles') }}">
+    {{ __('Manage Roles') }}
+</x-jet-responsive-nav-link>
+
diff --git a/src/Http/Livewire/DeveloperMenus.php b/src/Http/Livewire/DeveloperMenus.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace LLoadoutInforce\Http\Livewire;
+
+use Livewire\Component;
+
+class DeveloperMenus extends Component
+{
+    public function render()
+    {
+        return view('LLoadoutInforce-views::menu-ui.developer-desktop');
+    }
+}
diff --git a/src/Http/Livewire/DeveloperMenusMobile.php b/src/Http/Livewire/DeveloperMenusMobile.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace LLoadoutInforce\Http\Livewire;
+
+use Livewire\Component;
+
+class DeveloperMenusMobile extends Component
+{
+    public function render()
+    {
+        return view('LLoadoutInforce-views::menu-ui.developer-mobile');
+    }
+}
diff --git a/src/Http/Livewire/UserManagementMenus.php b/src/Http/Livewire/UserManagementMenus.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace LLoadoutInforce\Http\Livewire;
+
+use Livewire\Component;
+
+class UserManagementMenus extends Component
+{
+    public function render()
+    {
+        return view('LLoadoutInforce-views::menu-ui.user-desktop');
+    }
+}
diff --git a/src/Http/Livewire/UserManagementMenusMobile.php b/src/Http/Livewire/UserManagementMenusMobile.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace LLoadoutInforce\Http\Livewire;
+
+use Livewire\Component;
+
+class UserManagementMenusMobile extends Component
+{
+    public function render()
+    {
+        return view('LLoadoutInforce-views::menu-ui.user-mobile');
+    }
+}
diff --git a/src/LLoadoutInforceServiceProvider.php b/src/LLoadoutInforceServiceProvider.php
@@ -1,17 +1,18 @@
 <?php namespace LLoadoutInforce;
 
 use Livewire\Livewire;
-use LLoadoutInforce\Http\Livewire\Access;
 use LLoadoutInforce\Http\Livewire\Menu;
+use LLoadoutInforce\Http\Livewire\Role;
+use LLoadoutInforce\Http\Livewire\User;
+use Spatie\LaravelPackageTools\Package;
+use LLoadoutInforce\Http\Livewire\Access;
 use LLoadoutInforce\Http\Livewire\MenusTable;
 use LLoadoutInforce\Http\Livewire\Navigation;
 use LLoadoutInforce\Http\Livewire\Permission;
-use LLoadoutInforce\Http\Livewire\PermissionsTable;
-use LLoadoutInforce\Http\Livewire\Role;
 use LLoadoutInforce\Http\Livewire\RolesTable;
-use LLoadoutInforce\Http\Livewire\User;
 use LLoadoutInforce\Http\Livewire\UsersTable;
-use Spatie\LaravelPackageTools\Package;
+use LLoadoutInforce\Http\Livewire\PermissionsTable;
+use LLoadoutInforce\Http\Livewire\UserManagementMenus;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
 
 class LLoadoutInforceServiceProvider extends PackageServiceProvider
@@ -63,6 +64,10 @@ private function loadLivewireComponents()
         Livewire::component('menu', Menu::class);
         Livewire::component('menus-table', MenusTable::class);
         Livewire::component('navigation', Navigation::class);
+        Livewire::component('user-management-menus', UserManagementMenus::class);
+        Livewire::component('user-management-menus-mobile', UserManagementMenusMobile::class);
+        Livewire::component('developer-menus', DeveloperMenus::class);
+        Livewire::component('developer-menus-mobile', DeveloperMenusMobile::class);
 
         Livewire::component('roles-table', RolesTable::class);
         Livewire::component('users-table', UsersTable::class);