wikichua/vam

Laravel Vue Admin Manager + CRUD Generator (WIP)

Vue Admin Manager (CRUD generator) - Basic (TO BE ENHANCED)

Requirements

1. A new Laravel related project (completedly new)
2. Composer require laravel/ui (no need installing the auth scaffolding)
3. A working NPM in your machine
4. Knowledge in Vue Js, Bootstrap-Vue, Axios, Sass, & all Laravel stuffs...

Vue Package integrated

"@popperjs/core": "^2.4.0",
"bootstrap-vue": "^2.15.0",
"moment": "^2.26.0",
"portal-vue": "^2.1.7",
"sweetalert2": "^9.13.2",
"vform": "^1.0.1",
"vue-progressbar": "^0.7.5",
"vue-router": "^3.3.1",
"vue2-editor": "^2.10.2",
"vuejs-loading-plugin": "^1.0.51",
"vuex": "^3.4.0",
"watch": "^1.0.2"

Current Edition

1. Activity Logging
2. Preset Authentication (exactly from Laravel scaffolding)
3. Permission & Role (Authorization)
4. Settings configuration
5. Basic Users' Management
6. Profile & Password Update
7. CRUD generator (create components for CRUD, migrations, forms, controller, model, etc...)
   • Datatable listing (using common table component in bootstrap)
     • Able to delete row record (Authorization Gate included)
   • Create and Edit form
     • Text, File, Textarea, Date or Time Picker, Select, Checkbox, Radio, Editor and etc...
8. Swal and Toast integrated
9. Select, Radio or Checkbox options will be added to settings table during migration
10. Select, Radio or Checkbox model options will be generated codes in controller and both create and edit component.
11. Vue Select AKA Select2

Todo

1. Additional fields to support
   • Editor
   • Select, Radio & Checkbox fetch options from Model
   • Select2 or Datalist from Bootstrap-vue
2. Auth route configurable
3. Setting update push notification
4. ...still thinking...

Installation

Setup new Laravel project in terminal

$ laravel new **project**
$ php artisan storage:link

In your .env file

APP_URL=https://**project.test**
DB_DATABASE=**project_table**

Back to your terminal

$ composer require wikichua/vam dev-master
$ composer require laravel/ui
$ php artisan vendor:publish --tag=vam.install --force

In your app/User.php

class User extends \Wikichua\VAM\Models\User
{
    use Notifiable;

    use \Wikichua\VAM\Http\Traits\AdminUser;
    use \Wikichua\VAM\Http\Traits\ModelScopes;
    use \Wikichua\VAM\Http\Traits\DynamicFillable;
    use \Wikichua\VAM\Http\Traits\UserTimezone;

Then you continue in your terminal

$ php artisan migrate
$ php artisan ziggy:generate
$ npm install --save --no-bin-links && npm run dev

php artisan vendor:publish --tag=vam.install --force

You will see this..

Copied Directory [/vendor/wikichua/vam/resources/js] To [/resources/js]
Copied Directory [/vendor/wikichua/vam/resources/sass] To [/resources/sass]
Copied File [/vendor/wikichua/vam/package.json] To [/package.json]
Copied File [/vendor/wikichua/vam/webpack.mix.js] To [/webpack.mix.js]

Scary but yeah, it does overwrited if you already had modified those in your files (Suggest to backup those before publishing with --force):

1. resources/js/app.js
2. resources/js/bootstrap.js
3. webpack.mix.js

Optional Publishing..

If you wish to ammend the auth layout at your wish or even change the admin theme layout..

php artisan vendor:publish --tag=vam.view

What about the config? Namespaces?

php artisan vendor:publish --tag=vam.config

However, I prefer to use vam.config to toggle the availability for auth routes.

'hidden_auth_route_names' => [
    'password_email' => false,
    'password_request' => false,
    'password_reset' => false,
    'password_confirm' => false,
    'login' => false,
    'register' => false,
    'logout' => false,
],

So if you wish to use your own route declarations, just turn all of those to true..

This is how I normall do

art vendor:publish --tag=vam.install --force && art ziggy:generate && npm run watch-poll

Usage

Creating new module

$ php artisan vam:config <ModelName>
$ php artisan vam:make <ModelName>
$ php artisan ziggy:generate
$ npm install && npm run dev

This is how I normall do

art ziggy:generate && npm run watch-poll

Config

You may get the sample of config file once vam:config called. Do advise if that's confusing, I will then make a wiki.md for that. In case of you getting "Config file is not ready". This indicating your config generated from vam:config is still work in progress.

    'ready' => false, // set true when you are ready to generate CRUD

Once you have done your config, you can switch that to true. Of course after vam:make is done, this section will be turned to true automatically. This could prevent you from accidentally run vam:make again.

You may access with this auto populated login

email: [email protected]

password: admin123

Deployment issue

Okay! I love ziggy but for now, there is no support env detection or either I can't figure out other way of hack technique. But it's still good using it so all you need to do is

1. Change you .env file APP_URL to your production DNS
2. Npm run prod
3. Push to your repo and all set to go

Sample of the vam:make output

$ art vam:config Test
    Config file created: config/vam/TestConfig.php
$ art vam:make Test --force
    Config Test Found! Initiating!
    Model file created: /codes/vam/app/Test.php
    Controller file created: /codes/vam/app/Http/Controllers/Admin/TestController.php
    API Route file created: routes/routers/testRoutes.php
    VUE Route file created: /codes/vam/resources/js/routers/testRoutes.js
    Menu included: routes/web.php
    Vue component file created: /codes/vam/resources/js/components/test/ListComponent.vue
    Vue component file created: /codes/vam/resources/js/components/test/CreateComponent.vue
    Vue component file created: /codes/vam/resources/js/components/test/EditComponent.vue
    Vue component file created: /codes/vam/resources/js/components/test/ShowComponent.vue
    Menu included: routes/web.php
    Migration file created: /codes/vam/database/migrations/2020_06_05_000000_VamTestTable.php
    Since you had done make the CRUD, we will help you set ready to false to prevent accidentally make after you have done all your changes in your flow!
    Config has changed: /codes/vam/config/vam/TestConfig.php

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Wiki Chua
• All Contributors

License

license. Please see the license file for more information.