New mode: VueJS!

[NightZpy]

Hi friends, i'm working in crud with vuejs, using vue-table, vue-strap for use modal, vue-validator and vue-editable (very simple component. Is better modify for best features).

Features:

• Search
• Add 1, with validation in client and server (need map laravel rules names with vue validator rules names
• Add 2
• Modal and edit
• Modal and edit 2
• Delete
• Edit in place
• Show and Hidden columns.
• Paginate and paginate styles.

I like any docs for add this to generator, i can overwrite templates, but doesn't the better option. I like pass --vuejs or --vue option for generate crud with this.

New files:

• crud.js
• model-config.js (this file is a file for each index -model- page, for config)
• modal folder with modal template files for each model. Folder and files
• Overwrite ApiRequest or create new extend from them, with this code:

    public function response(array $errors)
    {
        return Response::json(static::makeError($errors), 400);
    }

    /**
     * @param string $errors
     * @param array  $data
     *
     * @return array
     */
    public static function makeError($errors, array $data = [])
    {
        $res = [
            'success' => false,
            'errors' => $errors,
        ];

        if (!empty($data)) {
            $res['data'] = $data;
        }

        return $res;
    } 

• index action in ApiController for each model:

public function index(Request $request)
    {

        // handle sort option
        if (request()->has('sort')) {
            list($sortCol, $sortDir) = explode('|', request()->sort);
            $query = Provider::orderBy($sortCol, $sortDir);
        } else {
            $query = Provider::orderBy('name', 'asc');
        }

        if ($request->exists('filter')) {
            $query->where(function($q) use($request) {
                $value = "%{$request->filter}%";
                $q->where('name', 'like', $value)
                    ->orWhere('email', 'like', $value)
                    ->orWhere('code', 'like', $value);
            });
        }

        $perPage = request()->has('per_page') ? (int) request()->per_page : null;
        return response()->json($query->paginate($perPage));
    }

[NightZpy]

Here the project repository

[NightZpy]

Main file for vuejs works, this file later is include into resources/views/model/index.blade.php script section. This file is generate into public/app/js/models/ using elixir!

resource/assets/js/models/model-config.js

var objectRow = {            
    id:         "",
    code:       "",
    name:       "",
    specialty: "",
    district:   "",
    address:    "",
    phone: "",
    movil1: "",
    movil2: "",
    contact: "",
    email: ""
};

var tableColumns = [
    {
        name: 'id',
        sortField: 'id',
        visible: false
    },
    {
        name: 'code',
        sortField: 'code',
    },
    {
        name: 'name',
        sortField: 'name',
    },
    {
        name: 'specialty',
        sortField: 'specialty',
    },
    {
        name: 'district',
        sortField: 'district',
    },
    {
        name: 'address',
        sortField: 'address',
        visible: false
    },
    {
        name: 'phone',
        sortField: 'phone',
    },    
    {
        name: 'movil1',
        sortField: 'movil1',
    },
    {
        name: 'movil2',
        sortField: 'movil2',
        visible: false
    },       
    {
        name: 'contact',
        sortField: 'contact',
    },
    {
        name: 'email',
        sortField: 'email',
    },                
    {
        name: '__actions',
        dataClass: 'center aligned',
        callback: null
    }        
];

var token = '{{ csrf_token() }}';

var apiUrl = { 
    show:  "{{ route('api.v1.providers.show') }}/",
    index: "{{ route('api.v1.providers.index') }}",  
    store: "{{ route('api.v1.providers.store') }}",  
    update: "{{ route('api.v1.providers.update') }}/",  
    delete: "{{ route('api.v1.providers.delete') }}/"
};

var fieldInitOrder = 'name';

/*
* Used for customize fields with highlight in searching result
*/
var onLoadSuccess = function(data, highlight, searchFor) {
    if (this.searchFor !== '') {
        for (n in data) {
            data[n].name = highlight(searchFor, data[n].name);
            data[n].code = highlight(searchFor, data[n].code);
            data[n].email = highlight(searchFor, data[n].email);
        }
    }
};

[NightZpy]

This is index.balde.php example using adminlte:

@extends('layouts.app')

@section('content')
    <div id="crud-app">
        <section class="content-header">
            <h1 class="pull-left">Providers</h1>
            <h1 class="pull-right">
               <a class="btn btn-primary pull-right" href="#" style="margin-top: -10px;margin-bottom: 5px" @click="modal('POST')">Add New</a>
            </h1>
        </section>
        <div class="content" style="padding-top: 30px;">
            <div class="box box-primary">
                <div class="box-body">
                    @include('providers.vue-table')
                </div>
            </div>
        </div>
        <!-- --------- Modals ---------- -->
        @include('providers.form')
        @include('providers.delete')
        @include('providers.show')
        @include('layouts.modal.info')        
    </div>
@endsection

@push('vue-scripts')  
    <script src="/app/js/models/provider-config.js"></script>
    <script src="/app/js/crud.js"></script>    
@endpush

@push('vue-styles')
    <link rel="stylesheet" href="/app/css/vue-styles.css">
@endpush

[NightZpy]

Field example with validation from vue-validator:

        <!-- Code Field -->
        <div class="form-group col-sm-6">
            <label for="code">Código:</label>
            <input type="text" class="form-control" v-model="row.code" v-validate:code="{ required: true, minlength: 3, maxlength: 128 }" data-type="text" />
            <div v-if="$validation.code.invalid" class="alert alert-danger" role="alert">
                <div v-if="$validation.code.required"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    <span class="sr-only">Error:</span>
                    // print here error message that match with vue-validator rule from errors messages lang file in laravel.
                </div>
                <div v-if="$validation.code.minlength">
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    <span class="sr-only">Error:</span>
                    // print here error message that match with vue-validator rule from errors messages lang file in laravel.
                </div>
            </div>      
        </div>

Is neccesary a way of map vue-validator rules with laravel validation rules for works equal in both!

[89gsc]

This looks very cool :( I wish I saw this before setting up 20+ tables using datatables :D

[NightZpy]

@gsc89 Hi my friend, vuejs is magic :D I already works in this implementations! Maybe 3 or 4 days more for finish :D

[89gsc]

Yeah in my next project I will use this.

[NightZpy]

@gsc89 Already pull request for this feature, wati for @mitulgolakiya check in :D

This is my fork.

[folkevil]

how about this update :D

[vijaythecoder]

I cant find any documentation regarding this feature on the site, also i tried to check the files to see how I can generate vuejs files and found this php artisan infyom:vuejs Item --fromTable --tableName=items but it gives me error

[Symfony\Component\Debug\Exception\FatalThrowableError]                    
  Cannot use object of type InfyOm\Generator\Common\GeneratorField as array  

can some one help me what could go wrong? I am using laravel 5.3 and my api is already generated. I want to generate only vuejs files and I dont mind generating from starting if there is no way to generate only vuejs files.

[mitulgolakiya]

@vijaythecoder vuejs support for 5.3 is currently under progress.

[vijaythecoder]

@mitulgolakiya thanks a lot for quick response. any ETA on vuejs command, I will hold on my development if it is going to be soon. or if you can send me generated folder of vuejs files for one of the module, that would be great. And last thing, you guys rock (y)

[mitulgolakiya]

@vijaythecoder @NightZpy is currently working on it. And actually, he is the actual developer of vuejs support to the generator. so maybe he can help you.

[vijaythecoder]

sure thanks @mitulgolakiya

[NightZpy]

@vijaythecoder i can give you access to my private project, you check ;) but is with laravel 5.2 yet! You want?

[vijaythecoder]

wow @NightZpy that would great 👍 . yeah I mean I need it

[NightZpy]

@vijaythecoder only for copy needed files, but generator package vuejs support even don't ready!

[vijaythecoder]

yeah I just want to see structure

[vijaythecoder]

you can remove the access @NightZpy I copied the structure. Thanks a lot for your help 👍

[NightZpy]

Ok, i hope that help you! :D

[vijaythecoder]

yeah my folder structure is completely different than you did setup. but I can see lot of useful info from your code and following some logics. I am using structure that reads data from api and then should work standalone so that it can be used in electron and also hybrid apps :) Thanks a lot for your time and help . Hope to see this released soon

[MightySCollins]

This looks really good, can't wait for this in Laravel 5.3!

[vesper8]

will this support vue.js 2.0 now that it's out? Can't wait to see this working! Do you have an ETA?

[vesper8]

@vijaythecoder really excited to use this in my new project. Any chance you can release a dev version if you're not close to finishing it? Would start using it today. Thanks!

[arieltoledo]

Hi any progress so far ? I see the vue.js on my infyom artisan options, but there is no docs so far. Im really looking foward to try this one out. Cheers. Greate tool by the way. Thanks a lot.

[StygianTraveler]

Is this usable...?

[rhmtlubis]

I cant find any documentation regarding this feature on the site, also i tried to check the files to see how I can generate vuejs files and found this php artisan infyom:vuejs Item --fromTable --tableName=items but it gives me error

[Symfony\Component\Debug\Exception\FatalThrowableError]
Cannot use object of type InfyOm\Generator\Common\GeneratorField as array
can some one help me what could go wrong? I am using laravel 5.3 and my api is already generated. I want to generate only vuejs files and I dont mind generating from starting if there is no way to generate only vuejs files.

i have same error, and im using laravel 5.3

[fhferreira]

@NightZpy [Symfony\Component\Debug\Exception\FatalThrowableError] Cannot use object of type InfyOm\Generator\Common\GeneratorField as array

i have same error, and im using laravel 5.3

[timoteo7]

Symfony\Component\Debug\Exception\FatalThrowableError : Cannot use object of type InfyOm\Generator\Common\GeneratorField as array

I have the same error in Laravel 5.6

[ajayinfyom]

We are not maintaining VueJs Generator in this package from last few versions.