PHPackages                             bantenprov/vue-workflow - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. bantenprov/vue-workflow

ActiveLibrary[Utility & Helpers](/categories/utility)

bantenprov/vue-workflow
=======================

The VueWorkflow package

2233Vue

Since May 10Pushed 8y ago1 watchersCompare

[ Source](https://github.com/bantenprov/vue-workflow)[ Packagist](https://packagist.org/packages/bantenprov/vue-workflow)[ RSS](/packages/bantenprov-vue-workflow/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

vue-workflow
============

[](#vue-workflow)

[![Join the chat at https://gitter.im/vue-workflow/Lobby](https://camo.githubusercontent.com/c68a4273335de171ce0788b6ec70cf3490693f263a11abff08a625c97d1366ab/68747470733a2f2f6261646765732e6769747465722e696d2f7675652d776f726b666c6f772f4c6f6262792e737667)](https://gitter.im/vue-workflow/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/abccdc6b2b4b6c952777239b99422b54f1f6c4a7df1d1d9893c8cf6c68bfd7bd/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f62616e74656e70726f762f7675652d776f726b666c6f772f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/bantenprov/vue-workflow/?branch=master)[![Build Status](https://camo.githubusercontent.com/0c301abd27883b06f78849193bacfbe522dcd4e55b64bcc206cc9c875d85b010/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f62616e74656e70726f762f7675652d776f726b666c6f772f6261646765732f6275696c642e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/bantenprov/vue-workflow/build-status/master)[![Latest Stable Version](https://camo.githubusercontent.com/39469d5c992f4dadc40aec5fe7431c4659e9f4c83126dfe75cc75f33e18c4262/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d776f726b666c6f772f762f737461626c65)](https://packagist.org/packages/bantenprov/vue-workflow)[![Total Downloads](https://camo.githubusercontent.com/6fad049f56c9ec81ff01a79deedd5c1bf83fff1f5f48d575026aedf053d0ad71/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d776f726b666c6f772f646f776e6c6f616473)](https://packagist.org/packages/bantenprov/vue-workflow)[![Latest Unstable Version](https://camo.githubusercontent.com/f30bc558c9c337807e41ff510a0050349339225094de01ac538b928c15bdccc3/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d776f726b666c6f772f762f756e737461626c65)](https://packagist.org/packages/bantenprov/vue-workflow)[![License](https://camo.githubusercontent.com/e1a0f519124b685692c096cc51a803607409d6255499b796809202cf32e157c4/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d776f726b666c6f772f6c6963656e7365)](https://packagist.org/packages/bantenprov/vue-workflow)[![Monthly Downloads](https://camo.githubusercontent.com/62b298be4768f31c0d24d1c1b30371cbf9a858d09a9dcc5ab296b549ec170292/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d776f726b666c6f772f642f6d6f6e74686c79)](https://packagist.org/packages/bantenprov/vue-workflow)[![Daily Downloads](https://camo.githubusercontent.com/903139acc0a927e3450f2dd3e2212d160e9d526827136984e03c43e8db3d5eac/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d776f726b666c6f772f642f6461696c79)](https://packagist.org/packages/bantenprov/vue-workflow)

Manage workfow using vuejs

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

[](#ℹ️-untuk-saat-ini-module-workflow-hanya-berjalan-di-module-pendaftaran--test-version-)

Install via composer :
----------------------

[](#install-via-composer-)

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

Module ini membutuhkan `vue-guard` dan `vue-trust`
--------------------------------------------------

[](#module-ini-membutuhkan-vue-guard-dan-vue-trust)

### install `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 :

[](#konfigurasi-vue-guard-)

[Dokumentasi Vue Guard](https://github.com/bantenprov/vue-guard)

### Konfigurasi vue trust :

[](#konfigurasi-vue-trust-)

[Dokumentasi Vue Trust](https://github.com/bantenprov/vue-trust)

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

[](#setelah-install-serta-kofigurasi-vue-guard-dan-vue-trust-lanjutkan-untuk-konfigurasi-vue-workflow-)

Edit `config/app.php`
---------------------

[](#edit-configappphp)

```
'providers' => [

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

Artisan command :
-----------------

[](#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`

[](#edit-resourcesassetsjsrouterroutesjs)

```
{
      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`

[](#edit-resourcesassetsjsappjs)

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

### Edit `resources/assets/js/components.js`

[](#edit-resourcesassetsjscomponentsjs)

```
//== vue workflow process component

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

### Cara penggunaan

[](#cara-penggunaan)

Copy code dibawah ke component vue. pada contoh di bawah ini digunakan pada component `Pendaftaran.show.vue` module `Pendaftaran`

Component workflow :

``

props :

- content-type : Nama Model yang digunakan oleh module

```

       Show pendaftaran {{ model.label }}

            Label : {{ model.label }}

            Description : {{ model.description }}

                Username : {{ model.user.name }}

                Kegiatan : {{ model.kegiatan.label }}

```

### Edit `config/vue-workflow.php`

[](#edit-configvue-workflowphp)

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

`ℹ️` jika content\_type lebih dari satu key (`id`) menggunakan angka yang berurutan

contoh untuk penggunaan content type lebih dari satu

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

### Edit controller

[](#edit-controller)

pada contoh ini yang di gunakan adalah module pendaftaran, jadi yang di edit adalah `vendor/bantenprov/pendaftaran/Http/Controllers/Http/PendaftaranController.php`

`Tabahkan use trait ini` :

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

/**
 * The PendaftaranController class.
 *
 * @package Bantenprov\Pendaftaran
 * @author  bantenprov
 */
class PendaftaranController extends Controller
{
    /* Use Workflow Trait */
    use WorkflowTrait;
```

`Pada method store` :

```
/**
  * 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` :

```
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

[](#untuk-melakukan-pengujian)

```
$ php artisan make:model Department -m
```

Edit file `databases/miggrations/timestap_create_departments_table.php`

```
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`

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

}
```

untuk pengujian isi secara manual pada table departments ,

```
+----+---------+-------------+--------------+
| 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`

```