ガントチャートを使うには

109 views

画面と操作概要

ガントチャート画面

可能なこと

タスクの追加・削除を行います
追加・削除時はデータベースには保存せずにJSONデータとして保管されています
“保存ボタン”を押下することでJSONデータから実データベースに更新されます
日付を更新するのみでタスクの表示日付を移動します。
ガントチャートは親、子の2階層までとなっております。

タスクバー中央部をドラッグ＆ドロップすることでタスクの開始日、終了日を同時に移動させることができます。

また両サイドのハンドルをそれぞれドラッグ＆ドロップすることで開始日、終了日をそれぞれ移動させることができます。
タスクバーをダブルクリックすることで詳細画面が開きます。

詳細画面

詳細の画面では親ID、表示順番、タスク名、開始日、終了日が必須です。
それ以外についてはカスタマイズ可能です。

タスクを作成する前に・・・

Magic xpa　をインストールしたままではグラフのウィジェットを持っていない状態です。
そのためウィジェットを追加する必要があります。
フォルダをダウンロードして設定する必要がありますので、下記に示す記事へアクセスし手順を進めてください。
カスタムウィジェットの登録方法

タスクの概要

ガントチャートのタスクは次の構成で作成いたします。

タスク名	解説
メインタスク：G0040(オンライン)	ガントチャート部分でタスクバーの操作、データベースへの登録などを行います。
サブタスク：Detail(オンライン)	ガントチャートのタスクバーをクリックした場合やタスクの新規追加を行った場合に詳細を登録する画面です。
サブタスク：Blob作成(バッチ)	ガントチャートに渡すJSONデータを作成いたします。
サブタスク：データ削除処理(バッチ)	データベースからタスクを削除いたします。
サブタスク：データ挿入処理(バッチ)	JSONデータを元にデータベースへ登録を行います。

プログラム作成の手順

今回のプログラム作成手順では次の順番で作成します。

データリポジトリの準備

データリポジトリへ次のテーブルを準備します。

項目名	書式	内容
(任意)プロジェクトIDや顧客IDなど	任意(ペットショップデモではN8)	複数のガントチャートが必要な場合
ID	N	プロジェクトID毎のユニーク番号
pID	N	親番号。指定がない場合は0
Sort	N	全体の表示順番
Task	A	タスク内容
DateFrom	D	開始日
DateTo	D	終了日

タスクを作成する

G0040(タスク特性)

汎用：タスクタイプをWeb Clientにします。

インタフェース：ルートに「G0040」を設定します。

データ：トランザクションモードを「なし」、空のデータビュー許可なども「No」に設定します。

Detail(タスク特性)

汎用：タスクタイプをWeb Clientにします。

データ：トランザクションモードを「なし」、空のデータビュー許可なども「No」に設定します。

Blob作成(タスク特性)

汎用：タスクタイプをバッチ
DataViewToJSONはエディタに定義された項目を基に、JSON形式のBLOBオブジェクトを作成しますのでデータをループさせることはありません。

データ削除処理(タスク特性)

ガントチャートデータを削除いたします。
汎用：初期モードを削除にします。

データ挿入処理(タスク特性)

汎用：タスクタイプをバッチ
メインソースがなく、登録を１回行ったら終了させたいのでタスク終了条件をYES、チェック時期を後置にしています。

G0040タスクを作成する

データビュー

＜見本＞

＜記述内容＞

※メインソースは使いません

VCustomer

顧客IDとして利用します。
別画面にてプロジェクトを指定し、ガントチャートのみのプログラムを作成する場合はこの部分をパラメーターにします。

変数名	解説
vIndex	詳細画面のＩＤに渡すキーを設定します。タスクバーをダブルクリックすることで、タスクバーに設定されたＩＤをvIndexに代入いたします。新規追加の場合はvIndexに「0」を代入いたします。
BlobGuntt	ガントチャートのJSONデータが保持されています。インスタンスにはM=マルチを設定してください。初めにBlob形式で作成し、後ほどJSON形式に戻します。なぜならJSON形式で作成するとフォームエディター上でBlobGunttが表示されず、設定できない状態になるからです。そのためォーム画面の選択肢に登場させてからJSON形式に戻します。
btnSearch	顧客ID条件設定後にBlob作成するために押下するボタンです。クリックすることでBlob作成バッチが起動します。
btnSave	データ削除処理バッチとデータ挿入処理バッチが動きます。動くことでJSONデータを実データベースに保存いたします。
btnClick	詳細画面を呼ぶボタンです。 HTML上には存在しませんがタスクバーをダブルクリックすると、TypeScript側のSimulateClick処理で”btnClickをクリックする”イベントを発行しています。
btnCancel	必要ありません。
btnDelete	該当顧客IDのガントチャートを削除いたします。
JSONCnt	JSONデータの数を一時的に保存いたします。
count	インクリメント用変数
Rturn	必要ありません

顧客名取得

顧客番号をキーにして顧客名を紹介リンクで所得します。
顧客番号の位置づけは変数VCustomerを選択し、終了にも設定します。

ガントチャートデータ存在チェック

データがある場合は表示しますが、無い場合はエラー文章を表示します。
判定を論理で判断し、ガントチャートデータの中から紹介します。
顧客番号の位置づけは変数VCustomerを選択し、終了にも設定します。

フォーム

＜見本＞

顧客名を配置した場合、そのままだとコントロール名が日本語なのでSmartUXで利用する際にエラーとなります。
コントロール名を「CustomerName」というようにアルファベット名に書き換えます。

ロジック

＜見本＞

＜記述内容＞

V_btnSearchクリック時

BlobGuntt初期値を入れる。
初期値を入れないと、データがある得意先からデータが無い得意先を選択した場合に以前のデータが残ってしまいます。
Blob作成バッチをコール。
ガントチャートのデータが存在する場合、BlobGunttにJSONデータを挿入するBlob作成バッチをコールします。
これによって画面に配置してあるV_BlobGunttコントロールに値が設定されます。
CallJS(‘onTextareaChange’)
TypeScriptのonTextareaChange関数を起動して画面にガントチャートのデータを反映させます。
onTextareaChange関数に関しては後述いたします。

V_btnClickクリック時

タスクバー中央部をダブルクリックした場合にコールされます。
ダブルクリックイベントはTypeScript側で設定いたします。

V_btnDeleteクリック時

ガントチャートデータの削除ボタンクリック時に起動し、バッチファイルのデータ削除処理を動かします。

V_btnSaveクリック時

データベースから該当ガントチャートを削除
カウンターのクリア
JSONデータ{“data”:[{・・・以下の個数を数えたものをJSONCnt変数に代入する
カウンター < JSONCntのうちはループさせる
数字10桁のIDを宣言
JSONデータ{“data”:[{“ID”:”T+1”},{“ID”:”T+2”}・・・]
のIDの値を次々と読み取って5.で宣言したIDに代入する。
データ挿入処理をコールする。
パラメータは「顧客コード」「先ほど取得したID」「カウンター」をデータ挿入処理バッチに渡す。
countをインクリメントする。
「保存しました」のメッセージを表示

Detailタスクを作成する

データビュー

＜見本＞

＜記述内容＞

変数名	解説
vID	タスクバーをダブルクリックすることで受け取るIDパラメータ新規作成の場合は０を取得します。
BtnUpdate	更新ボタン
BtnDelete	削除ボタン
vpID	タスクのユニークID
vSort	表示順番
vTask	タスク名
vDateFrom	タスク開始日
vDateTo	タスク終了日
MaxID	現チャートのIDの最大値

フォーム

＜見本＞

ウィンドウタイプをオーバーレイに変更する。

ロジック

タスク前

＜ｉｆ＞の場合
vIndex(G0040で設定されたIndex番号)が0の場合は新規タスクとなり、それ以外は修正タスクとなりエディタコントロールに値がセットされます。
たとえばvTask(タスク名)ですと
JSONFind(‘L’VAR,’/data’,’ID’,vIndex)でJSONデータで {“ID”:vIndexの値}を探して行を確定します。
JSONGet(‘L’VAR,’/data[確定した行]/Task’)でJSONデータから「確定した行」のTaskの値をvTaskに代入しております。
＜Ｅｌｓｅ＞では、開始日（vDateFrom）と終了日（vDateTo）に「Date()」を設定します。

V_BtnUpdateボタンクリック時

更新ボタンクリック時の処理です。

タスク名であれば
JSONModify(‘L’VAR,’/data[‘ & Trim(Str(JSONFind(‘L’VAR,’/data’,’ID’,vIndex),’10’))&’]/Task’,vTask)
というように画面上の「vTask」の値を該当「vIndex」の行の「{“Tsk”:””}」に値を設定しタスクを閉じます。
vpIDの場合であれば
JSONModify(‘L’VAR,’/data[‘ & Trim(Str(JSONFind(‘L’VAR,’/data’,’ID’,K),’10’))&’]/pID’,BC)

もし新規タスクの場合はIDの最大値を算出して+1したものをIDに設定いたします。
次にJSONInsertを使用し現在のJSONデータに対してデータを追加いたします。
項目を追加する場合はこちらにも追加が必要です。

V_BtnDeleteボタンクリック時

削除時にはJSONDelete関数にてJSONデータから該当行を削除致します。

Blob作成タスクを作成する

データビュー

顧客番号で範囲指定したデータをDataViewToJSONでJSON形式に変更します。
ロジック側で「'{“data”:’ & DataViewToJSON(0,Trim(Z),’@’)&’}’」とdata要素の入れ子にしています。

ロジック

コールプログラムパラメーター

オンラインタスクG0040にて宣言しているBlobGunttに対して
‘{“data”:’ & DataViewToJSON(0,Trim(Z),’@’)&’}’と
JSONデータを代入しています。

データ削除処理タスクを作成する

データビュー

顧客番号の範囲で削除を行います。

データ挿入処理タスクを作成する

データビュー

登録リンクにて行を挿入いたします。

代入する値としてTask(タスク名)を例に挙げますと
JSONGet(‘L’VAR,’/data[‘ & Trim(Str(BB,’10’)) & ‘]/Task’)と
JSONからタスク名を抽出してデータベースに代入しています。

メニューから開く設定

以上でプラグラムの動きを作成し終わりました。
しかしこのままでは作成したページへのルートが作られておらず、たどり着く道筋がありません。
そのためサイドメニューへページを追加し開けるようにしましょう。
追加方法は、以下のURLから参照ページをご覧ください。
簡単なプログラムを構築する際の「メニューへの追加」

SmartUX側での編集

ルートを追加しページを追加する

プログラムをSmartUX側で編集するために最初に必要な作業となります。
また、ウィジェットの基本的な配置方法やマッピングについても説明しているため追加方法とともに、以下のURLから参照ページをご覧ください。
簡単なプログラムを構築する際の「SmartUX側」
初めに画面に必要なウィジェットを配置します。
G0040の画面は次の完成画面をご参考ください。

Detailの画面は次の完成画面をご参考ください。

Detailの画面の場合、デフォルトの設定ではオーバーレイ画面が300px四方で固定されているため、画面を広げる作業が必要です。
詳しい方法を次のページからご参照ください。
オーバーレイ画面のサイズを変更するには

ガントチャートウィジェットを配置

ガントチャートウィジェットをドラッグ＆ドロップで配置します。

アウトラインの「ganttJson」をクリックし、プロパティシートを表示させるアイコンをクリックします。

DataにV_BlobGunttを設定（マッピング）いたします。

タイプスクリプト「G0040.component.ts」の編集

6行目のinport群の下に以下の2行を追記してください。
（6行目とは「import { TaskBaseMagicComponent, magicProviders } from “@magic-xpa/angular”;」のこと）

import { GanttChartComponent } from '../../../msj/gantt-chart.component';
import { ViewChild } from '@angular/core';

次に15行目の「export class G0040 ~」群の中にある以下の記述をご確認ください。

  override createFormControlsAccessor(formGroup: FormGroup) {

    this.mgfc = new MgFormControlsAccessor(formGroup, this.magicServices);

  }

この記述の直下に以下のコードを記述してください。

  
  onEvent = ($event) => {
    if ($event.event == "click") {
      this.mg.setValueToControl(this.mgc.V_vIndex,$event.id);
      $event.json = JSON.stringify($event.json);
      this.mg.setValueToControl(this.mgc.V_BlobGuntt,$event.json);
    }

    if ($event.event == "dblclick") {
      this.mg.setValueToControl(this.mgc.V_vIndex,$event.id);
      this.mg.simulateClick(this.mgc.V_btnClick);
    }
    if ($event.event == "save") {
      $event.json = JSON.stringify($event.json);
      this.mg.setValueToControl(this.mgc.V_BlobGuntt,$event.json);
      this.mg.simulateClick(this.mgc.V_btnSave);
    }
  };
 
  @ViewChild('ganttChart') ganttChart: GanttChartComponent;
  onTextareaChange(): void {
    
    if (this.ganttChart) {
      this.ganttChart.watchTextAreaForJSON();
    }
  }

追加した後の画面は次のようになります。

「G0040.component.ts」への記述解説

式	解説
$event.event == “click”	タスクバーをクリックした場合の処理 this.mg.setValueToControl(this.mgc.V_vIndex,$event.id); V_vIndexにIDを設定する
$event.event == “dblclick”	タスクバーをダブルクリックした場合の処理 this.mg.simulateClick(this.mgc.V_btnClick); V_btnClickをクリックしたことにする
$event.event == “save”	保存ボタンをクリックした場合の処理 this.mg.simulateClick(this.mgc.V_btnSave); V_btnSaveをクリックしたことにする
onTextareaChange(): void {	if (this.ganttChart) { this.ganttChart.watchTextAreaForJSON(); } } JSONデータを元にガントチャートを表示する