Angularで作るER DIAGRAM TOOL – 第十一回　リレーションシップモーダルの作成と開く処理

2018年03月05日

まずは、前回、ModelのH2にエンドポイントを追加して、
コネクションを作成するようにしたのですが、
コネクションを作成せずに、モーダルを開くように変更します。

・source_modelが接続元Model、target_modelが接続先Modelです。
・source_model_display_schema、target_model_display_schemaは、どのカラムの内容で表示するかです。

（例）
category has many booksの場合、
source_model_display_schemaにタイトルを選ぶと、カテゴリを選ぶ際にカテゴリタイトルをプルダウンで選べます。

one-to-manyの場合は、target_model_display_schemaは不要となります。

・relation_typeによって、dataService.addOneToManyRelation()または、dataService.addManyToManyRelation()（いずれも未実装）を呼び出します。

・とりあえず、addOneToManyRelation()、addManyToManyRelation()を空実装しておく

・ModalRelationComponentのimportおよび登録

まずは、コネクション作成部分をモーダル呼出しに修正します。

・BsModalService、BsModalRef、ModalRelationComponentのimport。
・BsModalServiceのDI
・メンバ変数BsModalRefの追加
・addEndpointにオプション追加

beforeDrop: (params)=> {} — エンドポイントをドロップした直後に発生。このタイミングでモーダルを開き、
return falseすることにより、その後の処理（コネクションの作成）をキャンセルします。

・モーダルに渡すデータは、SourceModelとTargetModel。beforeDropのparamから、SourceModelエレメントと、TargetModelエレメントのIDを取得できるので、
エレメントのID名からモデルを取得する機能を、dataクラスに実装します。

・getModelByElementH2Id()を実装

これで、model-h2のendPointをドラッグ・ドロップすることで、リレーションモーダルが開くようになりました。
※リレーションモーダルから先はまだ未実装。

リレーションモーダルの先を実装する前に、一つ残っているバグがあります。
モデルを削除したとき、endPointが残り続けます。

・destroyModel()を実装

これで、モデル削除時に自動でendPointが削除されるようになりました。

次回は、one-to-manyのリレーション作成を実装していこうと思います。

Posted by dog-ears