Integrating GanttChart into Laravel + VueJS project

Monday, 25/11/2019

Tram Ho

What is a Gantt Chart?

Gantt is a horizontal diagram, used to present tasks and events over time. The diagram will consist of two main parts: the vertical axis shows the names of the jobs and the horizontal axis shows the timelines for those jobs. Looking at a Gantt diagram, you can easily grasp the information of each work and the whole project.
Because the information layout is simple but clear and intuitive, it has become a useful tool to plan, schedule the implementation or manage project progress.

The simplest example of a Gantt Chart is Redmine. We are probably too familiar with redmine when working on projects on the company. On redmine there is support available Gantt diagram. You can try opening your project to see it. Here is an example of Gantt on Redmine.

To integrate the Gantt Chart into the project we have quite a lot of libraries, but within this article I will use the danttmlx Gantt library. This is an open source library with and also has a paid version that includes more advanced functions.

Building the database

The most basic database for storing and dropping Gantt diagram is the following tables:

Tasks: store information about the job’s start, start time, end time, progress in% …
Links: Store connections between jobs

We created the migration in the Laravel project

php artisan make:model GanttTask -m

1 2	php artisan make:model GanttTask -m

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">namespace</span> <span class="token package">App</span> <span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate  Database  Eloquent  Model</span> <span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttTask</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span>
<span class="token punctuation">{</span>
    <span class="token keyword">protected</span> <span class="token variable">$appends</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token double-quoted-string string">"open"</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">getOpenAttribute</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App ;

use Illuminate Database Eloquent Model ;

class GanttTask extends Model

{

protected $appends = [ "open" ] ;

public function getOpenAttribute ( ) {

return true ;

}

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate  Support  Facades  Schema</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Database  Schema  Blueprint</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Database  Migrations  Migration</span> <span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">CreateGanttTasksTable</span> <span class="token keyword">extends</span> <span class="token class-name">Migration</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">up</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'gantt_tasks'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Blueprint <span class="token variable">$table</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">increments</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'text'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">integer</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'duration'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">float</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'progress'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">dateTime</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'start_date'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">integer</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'parent'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">timestamps</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">down</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">dropIfExists</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'tasks'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

use Illuminate Support Facades Schema ;

use Illuminate Database Schema Blueprint ;

use Illuminate Database Migrations Migration ;

class CreateGanttTasksTable extends Migration

{

public function up ( )

{

Schema : : create ( 'gantt_tasks' , function ( Blueprint $table ) {

$table - > increments ( 'id' ) ;

$table - > string ( 'text' ) ;

$table - > integer ( 'duration' ) ;

$table - > float ( 'progress' ) ;

$table - > dateTime ( 'start_date' ) ;

$table - > integer ( 'parent' ) ;

$table - > timestamps ( ) ;

} ) ;

}

public function down ( )

{

Schema : : dropIfExists ( 'tasks' ) ;

}

php artisan make:model GanttLink -m

1 2	php artisan make:model GanttLink -m

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">namespace</span> <span class="token package">App</span> <span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate  Database  Eloquent  Model</span> <span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttLink</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span>
<span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App ;

use Illuminate Database Eloquent Model ;

class GanttLink extends Model

{

}

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate  Support  Facades  Schema</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Database  Schema  Blueprint</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">Illuminate  Database  Migrations  Migration</span> <span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">CreateGanttLinksTable</span> <span class="token keyword">extends</span> <span class="token class-name">Migration</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">up</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'gantt_links'</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Blueprint <span class="token variable">$table</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">increments</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'id'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">string</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'type'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">integer</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'source'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">integer</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'target'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
            <span class="token variable">$table</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">timestamps</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">down</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        Schema <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">dropIfExists</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'links'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

use Illuminate Support Facades Schema ;

use Illuminate Database Schema Blueprint ;

use Illuminate Database Migrations Migration ;

class CreateGanttLinksTable extends Migration

{

Schema : : create ( 'gantt_links' , function ( Blueprint $table ) {

$table - > string ( 'type' ) ;

$table - > integer ( 'source' ) ;

$table - > integer ( 'target' ) ;

} ) ;

}

{

Schema : : dropIfExists ( 'links' ) ;

}

Building backend data storage API

Next, we will build an API to store data whenever operations are sent from the client. We added 2 controllers corresponding to the 2 models created above.

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
<span class="token keyword">namespace</span> <span class="token package">App  Http  Controllers</span> <span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate  Http  Request</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">App  GanttTask</span> <span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttTaskController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">store</span> <span class="token punctuation">(</span> Request <span class="token variable">$request</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
 
        <span class="token variable">$task</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GanttTask</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">text</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">text</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">start_date</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">start_date</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">duration</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">duration</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">progress</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">has</span> <span class="token punctuation">(</span> <span class="token double-quoted-string string">"progress"</span> <span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">progress</span> <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token keyword">parent</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token keyword">parent</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">save</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token double-quoted-string string">"inserted"</span> <span class="token punctuation">,</span>
            <span class="token double-quoted-string string">"tid"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">id</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">update</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">,</span> Request <span class="token variable">$request</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token variable">$task</span> <span class="token operator">=</span> GanttTask <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">text</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">text</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">start_date</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">start_date</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">duration</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">duration</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">progress</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">has</span> <span class="token punctuation">(</span> <span class="token double-quoted-string string">"progress"</span> <span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">progress</span> <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token keyword">parent</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token keyword">parent</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">save</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token double-quoted-string string">"updated"</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">destroy</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token variable">$task</span> <span class="token operator">=</span> GanttTask <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token variable">$task</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">delete</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token double-quoted-string string">"deleted"</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App Http Controllers ;

use Illuminate Http Request ;

use App GanttTask ;

class GanttTaskController extends Controller

{

public function store ( Request $request ) {

$task = new GanttTask ( ) ;

$task - > text = $request - > text ;

$task - > start_date = $request - > start_date ;

$task - > duration = $request - > duration ;

$task - > progress = $request - > has ( "progress" ) ? $request - > progress : 0 ;

$task - > parent = $request - > parent ;

$task - > save ( ) ;

return response ( ) - > json ( [

"action" = > "inserted" ,

"tid" = > $task - > id

] ) ;

}

public function update ( $id , Request $request ) {

$task = GanttTask : : find ( $id ) ;

] ) ;

}

public function destroy ( $id ) {

$task - > delete ( ) ;

] ) ;

}

In this controller we have 3 basic functions to store and update data including: add, edit, delete. Add the corresponding route:

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
Route <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">resource</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'tasks'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'GanttTaskController'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
</span>

<?php

Route : : resource ( 'tasks' , 'GanttTaskController' ) ;

Continue adding controllers for the Link:

<span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
<span class="token keyword">namespace</span> <span class="token package">App  Http  Controllers</span> <span class="token punctuation">;</span>
 
<span class="token keyword">use</span> <span class="token package">Illuminate  Http  Request</span> <span class="token punctuation">;</span>
<span class="token keyword">use</span> <span class="token package">App  GanttLink</span> <span class="token punctuation">;</span>
 
<span class="token keyword">class</span> <span class="token class-name">GanttLinkController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span>
<span class="token punctuation">{</span>
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">store</span> <span class="token punctuation">(</span> Request <span class="token variable">$request</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token variable">$link</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GanttLink</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">type</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">type</span> <span class="token punctuation">;</span>
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">source</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">source</span> <span class="token punctuation">;</span>
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">target</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">target</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">save</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token double-quoted-string string">"inserted"</span> <span class="token punctuation">,</span>
            <span class="token double-quoted-string string">"tid"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">id</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">update</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">,</span> Request <span class="token variable">$request</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token variable">$link</span> <span class="token operator">=</span> GanttLink <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">type</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">type</span> <span class="token punctuation">;</span>
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">source</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">source</span> <span class="token punctuation">;</span>
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">target</span> <span class="token operator">=</span> <span class="token variable">$request</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token property">target</span> <span class="token punctuation">;</span>
 
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">save</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token double-quoted-string string">"updated"</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
 
    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">destroy</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token variable">$link</span> <span class="token operator">=</span> GanttLink <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token variable">$id</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token variable">$link</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">delete</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 
        <span class="token keyword">return</span> <span class="token function">response</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">&gt;</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span>
            <span class="token double-quoted-string string">"action"</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token double-quoted-string string">"deleted"</span>
        <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span>

<?php

namespace App Http Controllers ;

use Illuminate Http Request ;

use App GanttLink ;

class GanttLinkController extends Controller

{

$link = new GanttLink ( ) ;

$link - > type = $request - > type ;

$link - > source = $request - > source ;

$link - > target = $request - > target ;

$link - > save ( ) ;

"tid" = > $link - > id

] ) ;

}

$link = GanttLink : : find ( $id ) ;

] ) ;

}

$link - > delete ( ) ;

] ) ;

}

Routes:

Route <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">resource</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'links'</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'GanttLinkController'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

Route : : resource ( 'links' , 'GanttLinkController' ) ;

Integrate dHtmlx into Frontend VueJS

The project I use demo this time I have used VueJS so I will aim to write Gantt as a component for easy use whenever needed. First to install dhtmlx we install via npm:

<span class="token function">npm</span> <span class="token function">install</span> dhtmlx-gantt --save

1 2	<span class="token function">npm</span> <span class="token function">install</span> dhtmlx-gantt --save

Create Gantt component:

<span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> div ref <span class="token operator">=</span> <span class="token string">"gantt"</span> style <span class="token operator">=</span> <span class="token string">"height: 70vh;, width: 100%"</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> script <span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token string">'dhtmlx-gantt'</span> <span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token string">'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker'</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> fileDragAndDrop <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/snippets/dhx_file_dnd.js'</span> <span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name <span class="token punctuation">:</span> <span class="token string">'Gantt'</span> <span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      dp <span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span>
      fileDnD <span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  computed <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">api_url</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> ' <span class="token operator">/</span> api <span class="token operator">/</span> gantt <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>

  <span class="token function">mounted</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//this.$_initGanttEvents();</span>
    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> fit_tasks <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span>
    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> grid_width <span class="token operator">=</span> <span class="token number">500</span> <span class="token punctuation">;</span>
    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'id'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'No'</span> <span class="token punctuation">,</span> align <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> width <span class="token punctuation">:</span> <span class="token number">35</span> <span class="token punctuation">,</span> template <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> task <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> task <span class="token punctuation">.</span> $index <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'text'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'Tên công việc'</span> <span class="token punctuation">,</span> tree <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> width <span class="token punctuation">:</span> <span class="token string">'*'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'start_date'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'Start'</span> <span class="token punctuation">,</span> align <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> width <span class="token punctuation">:</span> <span class="token number">80</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'duration'</span> <span class="token punctuation">,</span> align <span class="token punctuation">:</span> <span class="token string">'center'</span> <span class="token punctuation">,</span> width <span class="token punctuation">:</span> <span class="token number">70</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'add'</span> <span class="token punctuation">,</span> width <span class="token punctuation">:</span> <span class="token number">44</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span> <span class="token punctuation">;</span>

    gantt <span class="token punctuation">.</span> locale <span class="token punctuation">.</span> labels <span class="token punctuation">[</span> <span class="token string">'section_progress'</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Progress'</span> <span class="token punctuation">;</span>
    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> lightbox <span class="token punctuation">.</span> sections <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'description'</span> <span class="token punctuation">,</span> height <span class="token punctuation">:</span> <span class="token number">38</span> <span class="token punctuation">,</span> map_to <span class="token punctuation">:</span> <span class="token string">'text'</span> <span class="token punctuation">,</span> type <span class="token punctuation">:</span> <span class="token string">'textarea'</span> <span class="token punctuation">,</span> focus <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        name <span class="token punctuation">:</span> <span class="token string">'progress'</span> <span class="token punctuation">,</span> height <span class="token punctuation">:</span> <span class="token number">22</span> <span class="token punctuation">,</span> map_to <span class="token punctuation">:</span> <span class="token string">'progress'</span> <span class="token punctuation">,</span> type <span class="token punctuation">:</span> <span class="token string">'select'</span> <span class="token punctuation">,</span> options <span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'Not started'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.1'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'10%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.2'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'20%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.3'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'30%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.4'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'40%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.5'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'50%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.6'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'60%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.7'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'70%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.8'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'80%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'0.9'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'90%'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
          <span class="token punctuation">{</span> key <span class="token punctuation">:</span> <span class="token string">'1'</span> <span class="token punctuation">,</span> label <span class="token punctuation">:</span> <span class="token string">'Complete'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name <span class="token punctuation">:</span> <span class="token string">'time'</span> <span class="token punctuation">,</span> type <span class="token punctuation">:</span> <span class="token string">'duration'</span> <span class="token punctuation">,</span> map_to <span class="token punctuation">:</span> <span class="token string">'auto'</span> <span class="token punctuation">,</span> height <span class="token punctuation">:</span> <span class="token number">50</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span> <span class="token punctuation">;</span>

    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> date_grid <span class="token operator">=</span> <span class="token string">'%d/%m/%Y'</span> <span class="token punctuation">;</span>
    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> date_format <span class="token operator">=</span> <span class="token string">'%Y-%m-%d %H:%i'</span> <span class="token punctuation">;</span>

    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> scale_height <span class="token operator">=</span> <span class="token number">50</span> <span class="token punctuation">;</span>
    gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> scales <span class="token operator">=</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> unit <span class="token punctuation">:</span> <span class="token string">'month'</span> <span class="token punctuation">,</span> step <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> format <span class="token punctuation">:</span> <span class="token string">'Tháng %m, %Y'</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>
      <span class="token punctuation">{</span> unit <span class="token punctuation">:</span> <span class="token string">'day'</span> <span class="token punctuation">,</span> step <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> format <span class="token punctuation">:</span> <span class="token string">'%j'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span> <span class="token punctuation">;</span>
  gantt <span class="token punctuation">.</span> <span class="token function">init</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> $refs <span class="token punctuation">.</span> gantt <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  gantt <span class="token punctuation">.</span> <span class="token function">clearAll</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  gantt <span class="token punctuation">.</span> ajax <span class="token punctuation">.</span> <span class="token keyword">get</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    url <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> api_url <span class="token punctuation">,</span>
    headers <span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span> <span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window <span class="token punctuation">.</span> token
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> xhr <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gantt <span class="token punctuation">.</span> <span class="token function">parse</span> <span class="token punctuation">(</span> xhr <span class="token punctuation">.</span> responseText <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> dp <span class="token operator">=</span> gantt <span class="token punctuation">.</span> <span class="token function">createDataProcessor</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    url <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> api_url <span class="token punctuation">,</span>
    mode <span class="token punctuation">:</span> <span class="token string">'REST'</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> dp <span class="token punctuation">.</span> <span class="token function">setTransactionMode</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    headers <span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span> <span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window <span class="token punctuation">.</span> token <span class="token punctuation">,</span>
      <span class="token string">'Content-Type'</span> <span class="token punctuation">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token keyword">this</span> <span class="token punctuation">.</span> fileDnD <span class="token operator">=</span> <span class="token function">fileDragAndDrop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> fileDnD <span class="token punctuation">.</span> <span class="token function">init</span> <span class="token punctuation">(</span> gantt <span class="token punctuation">.</span> $container <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">initImportFromMSProject</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    

    <span class="token keyword">var</span> date_to_str <span class="token operator">=</span> gantt <span class="token punctuation">.</span> date <span class="token punctuation">.</span> <span class="token function">date_to_str</span> <span class="token punctuation">(</span> gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> task_date <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">var</span> markerId <span class="token operator">=</span> gantt <span class="token punctuation">.</span> <span class="token function">addMarker</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
      start_date <span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
      css <span class="token punctuation">:</span> <span class="token string">'today'</span> <span class="token punctuation">,</span>
      text <span class="token punctuation">:</span> <span class="token string">'Today'</span> <span class="token punctuation">,</span>
      title <span class="token punctuation">:</span> <span class="token function">date_to_str</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Date</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token function">beforeDestroy</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> dp <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> dp <span class="token punctuation">.</span> <span class="token function">destructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>

  methods <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    $_initGanttEvents <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt <span class="token punctuation">.</span> <span class="token function">attachEvent</span> <span class="token punctuation">(</span> <span class="token string">'onTaskSelected'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> id <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> task <span class="token operator">=</span> gantt <span class="token punctuation">.</span> <span class="token function">getTask</span> <span class="token punctuation">(</span> id <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'task-selected'</span> <span class="token punctuation">,</span> task <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

      gantt <span class="token punctuation">.</span> <span class="token function">attachEvent</span> <span class="token punctuation">(</span> <span class="token string">'onAfterTaskAdd'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> task <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'task-updated'</span> <span class="token punctuation">,</span> id <span class="token punctuation">,</span> <span class="token string">'inserted'</span> <span class="token punctuation">,</span> task <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        task <span class="token punctuation">.</span> progress <span class="token operator">=</span> task <span class="token punctuation">.</span> progress <span class="token operator">||</span> <span class="token number">0</span> <span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span> gantt <span class="token punctuation">.</span> <span class="token function">getSelectedId</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">==</span> id <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'task-selected'</span> <span class="token punctuation">,</span> task <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

      gantt <span class="token punctuation">.</span> <span class="token function">attachEvent</span> <span class="token punctuation">(</span> <span class="token string">'onAfterTaskUpdate'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> task <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'task-updated'</span> <span class="token punctuation">,</span> id <span class="token punctuation">,</span> <span class="token string">'updated'</span> <span class="token punctuation">,</span> task <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

      gantt <span class="token punctuation">.</span> <span class="token function">attachEvent</span> <span class="token punctuation">(</span> <span class="token string">'onAfterTaskDelete'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> id <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'task-updated'</span> <span class="token punctuation">,</span> id <span class="token punctuation">,</span> <span class="token string">'deleted'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> gantt <span class="token punctuation">.</span> <span class="token function">getSelectedId</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'task-selected'</span> <span class="token punctuation">,</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

      gantt <span class="token punctuation">.</span> <span class="token function">attachEvent</span> <span class="token punctuation">(</span> <span class="token string">'onAfterLinkAdd'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> link <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'link-updated'</span> <span class="token punctuation">,</span> id <span class="token punctuation">,</span> <span class="token string">'inserted'</span> <span class="token punctuation">,</span> link <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

      gantt <span class="token punctuation">.</span> <span class="token function">attachEvent</span> <span class="token punctuation">(</span> <span class="token string">'onAfterLinkUpdate'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> link <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'link-updated'</span> <span class="token punctuation">,</span> id <span class="token punctuation">,</span> <span class="token string">'updated'</span> <span class="token punctuation">,</span> link <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

      gantt <span class="token punctuation">.</span> <span class="token function">attachEvent</span> <span class="token punctuation">(</span> <span class="token string">'onAfterLinkDelete'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> id <span class="token punctuation">,</span> link <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">$emit</span> <span class="token punctuation">(</span> <span class="token string">'link-updated'</span> <span class="token punctuation">,</span> id <span class="token punctuation">,</span> <span class="token string">'deleted'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>

    <span class="token function">exportToMSProject</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt <span class="token punctuation">.</span> <span class="token function">exportToMSProject</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token function">exportToExcel</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt <span class="token punctuation">.</span> <span class="token function">exportToExcel</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token function">initImportFromMSProject</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> fileDnD <span class="token punctuation">.</span> <span class="token function">onDrop</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> sendFile <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>

    <span class="token function">sendFile</span> <span class="token punctuation">(</span> file <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> fileDnD <span class="token punctuation">.</span> <span class="token function">showUpload</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">upload</span> <span class="token punctuation">(</span> file <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span> <span class="token punctuation">.</span> fileDnD <span class="token punctuation">.</span> <span class="token function">hideOverlay</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token function">upload</span> <span class="token punctuation">(</span> file <span class="token punctuation">,</span> callback <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      gantt <span class="token punctuation">.</span> <span class="token function">importFromMSProject</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
        data <span class="token punctuation">:</span> file <span class="token punctuation">,</span>
        callback <span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> project <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span> project <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            gantt <span class="token punctuation">.</span> <span class="token function">clearAll</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

            <span class="token keyword">if</span> <span class="token punctuation">(</span> project <span class="token punctuation">.</span> config <span class="token punctuation">.</span> duration_unit <span class="token punctuation">)</span> <span class="token punctuation">{</span>
              gantt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> duration_unit <span class="token operator">=</span> project <span class="token punctuation">.</span> config <span class="token punctuation">.</span> duration_unit <span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

            gantt <span class="token punctuation">.</span> <span class="token function">parse</span> <span class="token punctuation">(</span> project <span class="token punctuation">.</span> data <span class="token punctuation">)</span> <span class="token punctuation">;</span>
          <span class="token punctuation">}</span>

          <span class="token keyword">if</span> <span class="token punctuation">(</span> callback <span class="token punctuation">)</span>
            <span class="token function">callback</span> <span class="token punctuation">(</span> project <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> script <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> style <span class="token operator">&gt;</span>
    @ <span class="token keyword">import</span> <span class="token string">"~dhtmlx-gantt/codebase/dhtmlxgantt.css"</span> <span class="token punctuation">;</span>
    @ <span class="token keyword">import</span> <span class="token string">"../../snippets/dhx_file_dnd.css"</span> <span class="token punctuation">;</span>

    <span class="token punctuation">.</span> gantt_message_area <span class="token punctuation">{</span>
        top <span class="token punctuation">:</span> <span class="token number">50</span> px <span class="token operator">!</span> important <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> style <span class="token operator">&gt;</span>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

< template >

< div ref = "gantt" style = "height: 70vh;, width: 100%" / >

< / template >

< script >

import 'dhtmlx-gantt' ;

import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker' ;

import { fileDragAndDrop } from '@/snippets/dhx_file_dnd.js' ;

export default {

name : 'Gantt' ,

data ( ) {

return {

dp : null ,

fileDnD : null ,

} ;

} ,

computed : {

api_url ( ) {

return ' / api / gantt ;

}

} ,

mounted ( ) {

//this.$_initGanttEvents();

gantt . config . fit_tasks = true ;

gantt . config . grid_width = 500 ;

gantt . config . columns = [

{ name : 'id' , label : 'No' , align : 'center' , width : 35 , template : function ( task ) {

return task . $index + 1 ;

} } ,

{ name : 'text' , label : 'Tên công việc' , tree : true , width : '*' } ,

{ name : 'start_date' , label : 'Start' , align : 'center' , width : 80 } ,

{ name : 'duration' , align : 'center' , width : 70 } ,

{ name : 'add' , width : 44 }

] ;

gantt . locale . labels [ 'section_progress' ] = 'Progress' ;

gantt . config . lightbox . sections = [

{ name : 'description' , height : 38 , map_to : 'text' , type : 'textarea' , focus : true } ,

{

name : 'progress' , height : 22 , map_to : 'progress' , type : 'select' , options : [

{ key : '0' , label : 'Not started' } ,

{ key : '0.1' , label : '10%' } ,

{ key : '0.2' , label : '20%' } ,

{ key : '0.3' , label : '30%' } ,

{ key : '0.4' , label : '40%' } ,

{ key : '0.5' , label : '50%' } ,

{ key : '0.6' , label : '60%' } ,

{ key : '0.7' , label : '70%' } ,

{ key : '0.8' , label : '80%' } ,

{ key : '0.9' , label : '90%' } ,

{ key : '1' , label : 'Complete' }

]

} ,

{ name : 'time' , type : 'duration' , map_to : 'auto' , height : 50 }

] ;

gantt . config . date_grid = '%d/%m/%Y' ;

gantt . config . date_format = '%Y-%m-%d %H:%i' ;

gantt . config . scale_height = 50 ;

gantt . config . scales = [

{ unit : 'month' , step : 1 , format : 'Tháng %m, %Y' } ,

{ unit : 'day' , step : 1 , format : '%j' }

] ;

gantt . init ( this . $refs . gantt ) ;

gantt . clearAll ( ) ;

gantt . ajax . get ( {

url : this . api_url ,

headers : {

'Authorization' : 'Bearer ' + window . token

}

} ) . then ( function ( xhr ) {

gantt . parse ( xhr . responseText ) ;

} ) ;

this . dp = gantt . createDataProcessor ( {

url : this . api_url ,

mode : 'REST' ,

} ) ;

this . dp . setTransactionMode ( {

headers : {

'Content-Type' : 'application/x-www-form-urlencoded'

}

} , true ) ;

this . fileDnD = fileDragAndDrop ( ) ;

this . fileDnD . init ( gantt . $container ) ;

this . initImportFromMSProject ( ) ;

var date_to_str = gantt . date . date_to_str ( gantt . config . task_date ) ;

var markerId = gantt . addMarker ( {

start_date : new Date ( ) ,

css : 'today' ,

text : 'Today' ,

title : date_to_str ( new Date ( ) )

} ) ;

} ,

beforeDestroy ( ) {

if ( this . dp ) {

this . dp . destructor ( ) ;

}

} ,

methods : {

$_initGanttEvents : function ( ) {

gantt . attachEvent ( 'onTaskSelected' , ( id ) => {

let task = gantt . getTask ( id ) ;

this . $emit ( 'task-selected' , task ) ;

} ) ;

gantt . attachEvent ( 'onAfterTaskAdd' , ( id , task ) => {

this . $emit ( 'task-updated' , id , 'inserted' , task ) ;

task . progress = task . progress || 0 ;

if ( gantt . getSelectedId ( ) == id ) {

}

} ) ;

gantt . attachEvent ( 'onAfterTaskUpdate' , ( id , task ) => {

this . $emit ( 'task-updated' , id , 'updated' , task ) ;

} ) ;

gantt . attachEvent ( 'onAfterTaskDelete' , ( id ) => {

this . $emit ( 'task-updated' , id , 'deleted' ) ;

if ( ! gantt . getSelectedId ( ) ) {

this . $emit ( 'task-selected' , null ) ;

}

} ) ;

gantt . attachEvent ( 'onAfterLinkAdd' , ( id , link ) => {

this . $emit ( 'link-updated' , id , 'inserted' , link ) ;

} ) ;

gantt . attachEvent ( 'onAfterLinkUpdate' , ( id , link ) => {

this . $emit ( 'link-updated' , id , 'updated' , link ) ;

} ) ;

gantt . attachEvent ( 'onAfterLinkDelete' , ( id , link ) => {

this . $emit ( 'link-updated' , id , 'deleted' ) ;

} ) ;

} ,

exportToMSProject ( ) {

gantt . exportToMSProject ( ) ;

} ,

exportToExcel ( ) {

gantt . exportToExcel ( ) ;

} ,

initImportFromMSProject ( ) {

this . fileDnD . onDrop ( this . sendFile ) ;

} ,

sendFile ( file ) {

this . fileDnD . showUpload ( ) ;

this . upload ( file , ( ) => {

this . fileDnD . hideOverlay ( ) ;

} ) ;

} ,

upload ( file , callback ) {

gantt . importFromMSProject ( {

data : file ,

callback : function ( project ) {

if ( project ) {

if ( project . config . duration_unit ) {

gantt . config . duration_unit = project . config . duration_unit ;

}

gantt . parse ( project . data ) ;

}

if ( callback )

callback ( project ) ;

}

} ) ;

}

} ;

< / script >

< style >

@ import "~dhtmlx-gantt/codebase/dhtmlxgantt.css" ;

@ import "../../snippets/dhx_file_dnd.css" ;

. gantt_message_area {

top : 50 px ! important ;

}

< / style >

In the component above, I have written a number of functions to support the import and export from excel files, Microsoft Project files. Explain a bit of code: First we init gantt to create a div and get data from ajax via api /api/gantt/ , Then we create a data processor through REST API and so when we When editing on Gantt chart, the library will automatically call api to update the data into the DB:

 gantt <span class="token punctuation">.</span> <span class="token function">init</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> $refs <span class="token punctuation">.</span> gantt <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  gantt <span class="token punctuation">.</span> <span class="token function">clearAll</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  gantt <span class="token punctuation">.</span> ajax <span class="token punctuation">.</span> <span class="token keyword">get</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    url <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> api_url <span class="token punctuation">,</span>
    headers <span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span> <span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window <span class="token punctuation">.</span> token
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> xhr <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    gantt <span class="token punctuation">.</span> <span class="token function">parse</span> <span class="token punctuation">(</span> xhr <span class="token punctuation">.</span> responseText <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> dp <span class="token operator">=</span> gantt <span class="token punctuation">.</span> <span class="token function">createDataProcessor</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    url <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> api_url <span class="token punctuation">,</span>
    mode <span class="token punctuation">:</span> <span class="token string">'REST'</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> dp <span class="token punctuation">.</span> <span class="token function">setTransactionMode</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    headers <span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token string">'Authorization'</span> <span class="token punctuation">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> window <span class="token punctuation">.</span> token <span class="token punctuation">,</span>
      <span class="token string">'Content-Type'</span> <span class="token punctuation">:</span> <span class="token string">'application/x-www-form-urlencoded'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

url : this . api_url ,

headers : {

}

} ) ;

url : this . api_url ,

mode : 'REST' ,

} ) ;

headers : {

'Content-Type' : 'application/x-www-form-urlencoded'

}

The following results:

So I just introduced through how to integrate the Gantt Chart into Laravel + VueJS project. This is just the most basic lesson to learn about GanttChart. Also want to customize the details of the functionality, we need to stick to the library’s documentation to custom code to suit individual requirements. Thank you for following the article

Refer

Dhtmlx Gantt

Share the news now

Source : Viblo

Integrating GanttChart into Laravel + VueJS project

What is a Gantt Chart?

Building the database

Building backend data storage API

Integrate dHtmlx into Frontend VueJS

Refer

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers