bantenprov/vue-workflow

The VueWorkflow package

vue-workflow

, _(*1)

Manage workfow using vuejs, _(*2)

ℹ️ untuk saat ini module workflow hanya berjalan di module pendaftaran ( test version )

Install via composer :

$ composer require bantenprov/vue-workflow:dev-master

Module ini membutuhkan vue-guard dan vue-trust

install vue guard dan vue trust:

$ composer require bantenprov/vue-guard:dev-master
$ composer require bantenprov/vue-trust:dev-master

Konfigurasi vue guard :

Dokumentasi Vue Guard, _(*3)

Konfigurasi vue trust :

Dokumentasi Vue Trust, _(*4)

Setelah install serta kofigurasi vue-guard dan vue-trust lanjutkan untuk konfigurasi vue-workflow :

Edit config/app.php

'providers' => [        

        //....
        Emadadly\LaravelUuid\LaravelUuidServiceProvider::class,
        Bantenprov\VueWorkflow\VueWorkflowServiceProvider::class,

Artisan command :

$ php artisan vendor:publish --tag=vue-workflow-config
$ php artisan vendor:publish --tag=vue-workflow-assets
$ php artisan migrate
$ php artisan vue-workflow:publish-trait

Edit resources/assets/js/router/routes.js

{
      path: '/admin',
      name: 'admin',
      redirect: '/admin/dashboard',
      component: layout('Default'),
      children: [
        /* workflow route */      
        {
        path: '/admin/workflow',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow"
        }
        },
        {
        path: '/admin/workflow/create',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.create.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow | add"
        }
        },
        {
        path: '/admin/workflow/:id/show',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.show.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow | show worfklow"
        }
        },
        {
        path: '/admin/workflow/:id/edit',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/workflow/workflow.edit.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Workflow | show worfklow"
        }
        },
        {
        path: '/admin/workflow/state',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/state/state.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "State"
        }
        },
        {
        path: '/admin/workflow/transition',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Transition"
        }
        },
        {
        path: '/admin/workflow/state/create',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/state/state.create.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "State | add new state"
        }
        },
        {
        path: '/admin/workflow/state/:id/edit',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/state/state.edit.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "State | edit state"
        }
        },
        {
        path: '/admin/workflow/transition',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.index.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Transition"
        }
        },
        {
        path: '/admin/workflow/transition/create',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.create.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Tranisiton | add transition"
        }
        },
        {
        path: '/admin/workflow/transition/:id/edit',
        components: {
          main: resolve => require(['~/components/bantenprov/vue-workflow/transition/transition.edit.vue'], resolve),
          navbar: resolve => require(['~/components/Navbar.vue'], resolve),
          sidebar: resolve => require(['~/components/Sidebar.vue'], resolve)
        },
        meta: {
          title: "Tranisiton | edit tranisiton"
        }
        },
        /* end workflow route */

Edit resources/assets/js/app.js

//==== workflow menu
import workflow_menu from './components/bantenprov/vue-workflow/workflow_menu';

Edit resources/assets/js/components.js

//== vue workflow process component

import WorkflowProcess from '~/components/views/bantenprov/vue-workflow/WorkflowProcess.vue';
Vue.component('workflow-process', WorkflowProcess);

Cara penggunaan

Copy code dibawah ke component vue. pada contoh di bawah ini digunakan pada component Pendaftaran.show.vue module Pendaftaran, _(*5)

Component workflow :, _(*6)

<workflow-process content-type="ContentType"></workflow-process>, _(*7)

props : - content-type : Nama Model yang digunakan oleh module, _(*8)

<template>



    

       Show pendaftaran {{ model.label }}

      

        

          
            
          
        
      
    

    

      
        

          

            Label : {{ model.label }}
          
        

        

          

            Description : {{ model.description }}
          
        

        

            

                Username : {{ model.user.name }}
            
        

        

            

                Kegiatan : {{ model.kegiatan.label }}
            
        

        
        
        
      
    
  


</template>

Edit config/vue-workflow.php

'content_type' => [        
        ['id' => 1,'label' => 'Pendaftaran'],
    ]

ℹ️ jika content_type lebih dari satu key (id) menggunakan angka yang berurutan, _(*9)

contoh untuk penggunaan content type lebih dari satu, _(*10)

'content_type' => [        
        ['id' => 1,'label' => 'Pendaftaran'],
        ['id' => 2,'label' => 'Siswa'],
    ]

Edit controller

pada contoh ini yang di gunakan adalah module pendaftaran, jadi yang di edit adalah vendor/bantenprov/pendaftaran/Http/Controllers/Http/PendaftaranController.php, _(*11)

Tabahkan use trait ini :, _(*12)

/* Use Workflow Trait */
use Bantenprov\VueWorkflow\Http\Traits\WorkflowTrait;

/**
 * The PendaftaranController class.
 *
 * @package Bantenprov\Pendaftaran
 * @author  bantenprov <developer.bantenprov@gmail.com>
 */
class PendaftaranController extends Controller
{  
    /* Use Workflow Trait */
    use WorkflowTrait;

Pada method store :, _(*13)

/**
  * Display the specified resource.
  *
  * @param  \App\Pendaftaran  $pendaftaran
  * @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
    $pendaftaran = $this->pendaftaran;

    $validator = Validator::make($request->all(), [
        'kegiatan_id' => 'required',
        'user_id' => 'required|max:16|unique:pendaftarans,user_id',
        'label' => 'required|max:16|unique:pendaftarans,label',
        'description' => 'max:255',
    ]);

    if($validator->fails()){

        $check = $pendaftaran->where('label',$request->label)->orWhere('user_id', $request->user_id)->whereNull('deleted_at')->count();

        if ($check > 0) {
            $response['message'] = 'Failed, label or user already exists';
        } else {
            /*
              $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
              $pendaftaran->user_id = $request->input('user_id');
              $pendaftaran->label = $request->input('label');
              $pendaftaran->description = $request->input('description');                
              $pendaftaran->save();
            */

            /* Ganti dengan code di bawah ini */
            $this->insertWithWorkflow($pendaftaran, $request->all());

            $response['message'] = 'success';
        }
    } else {

        /*
          $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
          $pendaftaran->user_id = $request->input('user_id');
          $pendaftaran->label = $request->input('label');
          $pendaftaran->description = $request->input('description');        
          $pendaftaran->save();
        */

        /* Ganti dengan code di bawah ini */

        $this->insertWithWorkflow($pendaftaran, $request->all());

        $response['message'] = 'success';
    }

    $response['status'] = true;

    return response()->json($response);
}

Pada method update :, _(*14)

public function update(Request $request, $id)
{
    $response = array();
    $message = array();

    $validator = Validator::make($request->all(), [
        'label' => 'required|unique:pendaftarans,label,'.$id,
        'user_id' => 'required|unique:pendaftarans,user_id,'.$id,            
        'kegiatan_id' => 'required',
        'description' => 'required'
    ]);

    if($validator->fails()){            
        foreach($validator->messages()->getMessages() as $key => $error){
            foreach($error AS $error_get) {
                array_push($message, $error_get);
            }                
        }   

        $get_request = $this->pendaftaran->find($id);

        $check_label = $this->pendaftaran->where('id','!=', $id)->where('label', $request->label);

        $check_user = $this->pendaftaran->where('id','!=', $id)->where('user_id', $request->user_id);

        if($check_label->count() > 0 || $check_user->count() > 0){
            $response['message'] = implode("\n",$message);
        }else{
            /*
              $pendaftaran->label = $request->input('label');
              $pendaftaran->description = $request->input('description');
              $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
              $pendaftaran->user_id = $request->input('user_id');
              $pendaftaran->save();

              $response['message'] = 'success';
            */

            /* Ganti dengan code dibawah ini */

            $update = $this->updateWithWorkflow($this->pendaftaran->find($id), $id, $request->all());

            $response['message'] = $update['message'];
        }


    }else{

        /*
          $pendaftaran->label = $request->input('label');
          $pendaftaran->description = $request->input('description');
          $pendaftaran->kegiatan_id = $request->input('kegiatan_id');
          $pendaftaran->user_id = $request->input('user_id');
          $pendaftaran->save();

          $response['message'] = 'success';
        */

        /* Ganti dengan code dibawah ini */

        $update = $this->updateWithWorkflow($this->pendaftaran->find($id), $id, $request->all());

        $response['message'] = $update['message'];
    }

    $response['status'] = true;

    return response()->json($response);
}

Untuk melakukan pengujian

$ php artisan make:model Department -m

Edit file databases/miggrations/timestap_create_departments_table.php, _(*15)

Schema::create('departments', function (Blueprint $table) {
    $table->increments('id');
    $table->integer('user_id');
    $table->integer('kegiatan_id');
    $table->string('name');
    $table->timestamps();
});

Edit file app/Department.php, _(*16)

class Department extends Model
{
    protected $fillable = ['user_id', 'kegiatan_id', 'name'];

}

untuk pengujian isi secara manual pada table departments ,, _(*17)

+----+---------+-------------+--------------+
| id | user_id | kegiatan_id |     name     |
+----+---------+-------------+--------------+
|  1 |    1    |      1      | Department 1 |
+----+---------+-------------+--------------+
|  2 |    2    |      2      | Department 2 |
+----+---------+-------------+--------------+

setelah itu edit file app/Http/Controllers/Traits/WorkflowConditionTrait.php, _(*18)

<?php

namespace App\Http\Controllers\Traits;
use App\Department;

/**
 * Trait WorkflowConditionTrait
 * @package App\Http\Controllers\Traits
 */
trait WorkflowConditionTrait
{    

    /**
     * @return bool
     */

    public function guard__propose_to_review($content_id){

        $check = \Bantenprov\Pendaftaran\Models\Bantenprov\Pendaftaran\Pendaftaran::find($content_id);
        $department = Department::where('kegiatan_id',$check->kegiatan_id)->first();
        if($department->user_id == \Auth::user()->id){
              return [
                  'error' => true,
                  'message' => 'Success update state.'
              ];
        }else{
              return [
                  'error' => true,
                  'message' => 'tidak mempunyai akses untuk ini.'
              ];
        }        

    }

}