flaviojr / tatooine
Start point for new projects
Requires
- php: >=7.0.0
- fideloper/proxy: ~3.3
- laravel/framework: 5.5.*
- laravel/tinker: ~1.0
Requires (Dev)
- filp/whoops: ~2.0
- fzaninotto/faker: ~1.4
- mockery/mockery: ~1.0
- phpunit/phpunit: ~6.0
This package is not auto-updated.
Last update: 2024-06-09 03:02:56 UTC
README
Start point for newer projects. Build with Laravel and Vue 👌
Some cool stuff:
- Authorization implemented with Laravel Auth
- Security schema for management of user and their permissions
- Some cool reusable Vue components, such as a Datagrid and Action (buttons and anchors)
- Custom Menu for each user
- Controller to show/hide buttons and anchors(with Action component)
Build
To get going you only need to do the following:
$ composer install
$ cp .env.example .env
$ php artisan key:generate
$ php artisan migrate && php artisan db:seed
$ npm install
$ npm run dev
$ ./vendor/bin/phpunit
$ php artisan serve
Usage
Seeds
All your routes (resources/permissions) must me mapped in the database, so that the permission control can work properly. To create new resources and their permissions you have to register them in ResourcesPermissionsSeeder
class. This is simply done by:
$this->createNewResource(['users' => 'User management'], [ 'index' => 'Users list', 'create' => 'Creates new user', 'edit' => 'Update user info', 'delete' => 'Delete a user', 'details' => 'Manage user profiles' ]);
Note: Tatooine only accept routes in the
resource/permission/{parameters}
format.
Note: You can change the method description, Tatooine will update it info. You can also delete a permission, just remove it from the permissions
array
.
To run the seeder you can use the command:
$ php artisan resource:run
Custom configuration
Tatooine provides a flexible way to design your routes. You can easily set in your .env like the following:
BASE_ROUTE='tatooine' //Used as the first part of your route. Ex.: yoursystem.com/tatooine/home
MIX_BASE_ROUTE='security' //This one is used by JS to append on AJAX calls
CUSTOM_HOME='home' //Where the application goes when is accessed and after login
Now Tatooine knows how to map your routes.
Helper functions
There is a Helper
class (in app/Helper.php) where are two useful global methods
-
baseUrl: Retrieves your application full url with your
base_route
(Ex.:yoursystem.com/tatooine
). This function have an optional parameter$complement
, wich can be used to complement your base route (Ex.:yoursystem.com/tatooine/users/create
) -
home: Simple function to return the full path of your custom home route
Tatooine super classes
Tatooine comes with three super classes: Model, Repository and Request. The application use them instead of the native classes of Laravel for aditional funcionalities. They live on Core
namespace(Ex.:Core\Model
)
- Model: Has just one method, getFilterColumns(), wich returns the
$filterColumns
array containing the "filterable" columns and the corresponding operator for the filter to use. This array must be defined in your Model classes like bellow:$filterColumns = [ 'usr_name' => 'like', 'usr_enabled' => '=' ]
- Request: Simple extend it and define rules() method, more details on the laravel documentation: https://laravel.com/docs/5.5/validation#form-request-validation
- Repository: Accepts an Model instance. Has one public method, listModel([]). You may use it for retrieve paginated and filtered data. You can call any other
Eloquent\Model
method, the Repository class will pass the call to its Model instance (unless a method with the same name is defined in it)- Tip: Use the
listModel
method in combination with DataGrid component(described bellow).
- Tip: Use the
Available Vue components
Tatooine comes shipped with two reusable components, Action and DataGrid.
Action
<action></action>
This component can render a button/anchor dynamically, based on the user permissions. The usage is simle as below:
<action action="users/create" aclass="btn btn-primary" icon="fa fa-plus" type="button" @btn-clicked="doSomethingWithThis" > Criar novo usuário </action>
Action props:
- action: The url to the action. In an anchor it will be an
href
. Action will use it to check permissions - aclass: Will aply
class
to the anchor/button - icon(optional): Will set an icon to the button
- type: Action component will use this to determine if it will render a anchor or a button. Possible values are: 'anchor' and 'button'
Action events:
- btn-clicked: When action type is 'button', the Action component attach a btn-clicked event to the
click
native event so that you can control what it will do. Then you can listen to the event like below:
doSomethingWithThis (url) { //Whatever you want }
Note: The component has a
slot
inside the anchor/button tag. So that you can pass additional info inside the component
Datagrid
<data-grid></data-grid>
This component renders a paginated grid, with filter options. Also, you can define actions for each row. The usage:
<data-grid url="{{baseUrl('/users/list')}}" primary-key="usr_id" :user-fields="{usr_name: 'User', usr_email: 'E-mail', usr_username: 'Username', usr_enabled: 'Status'}" :user-filters="{ usr_name: {type: 'text', size: 4}, usr_enabled: {type: 'select', size: 3, options: {1: 'Enabled', 0: 'Disabled'}} }" :actions="[ {method: 'edit', url: 'users/edit'}, {method: 'delete', url: 'users/delete'}, {method: 'details', url: 'users/details'} ]" :mutators="{usr_enabled: {0: 'Disabled', 1: 'Enabled'}}" ></data-grid>
DataGrid props:
-
url: You API to retrieve the data to DataGrid.
-
primary-key: This will be used in the grid actions as a parameter, must be a present field on the data retrieved from the server.
-
user-fields: The fields that the DataGrid will show. Has the
{field_name: 'fieldTitle'}
format. -
actions: You may define three type of actions: edit, delete and details. DataGrid will render delete action as a button and the other two will be anchors. In each action you must pass the url for the action. The DataGrid will pass the
primaryKey
as the parameter for each url. -
user-filters: To setup the filters you have to pass an object with info for each field. You must pass the type of the filter and it's size(just a number between 1 and 12, DataGrid will automatically convert to bootstrap grids classes). The type can be 'text', 'number' or 'select'. For 'select' type will have to define also its options, like bellow:
options: {1: 'Option one', 2: 'Option 2'}
Note 1: The object key is used as the filter value
Note 2: This filter feature will be improved to allow other input types(such as 'checkbox' and 'radio
-
mutators: To change how data is going to be visualized you can apply the mutators, just a simple key-value mechanism, you pass the value and the corresponding information to show. Like in the pattern:
{usr_enabled: {0: 'Disabled', 1: 'Enabled'}}