今回は、dataのmodelを追加する機能を実装します。
（１）navbar から モデル新規作成用フォームモーダルを開く
まずは、navbarのEdit - Create Modelを押したときに、開かれるモーダルコンポーネントを作成
/src/app/modal-model/modal-model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-2eb3d4b53b961d6ddaf0deffaaf7240e
・dataServiceをDIしています。
・メンバ変数 mode により、作成と編集両方にフォームを使いまわせるようにします。
・メソッドcreateは、とりあえずモーダルを閉じるのみにしています。
/src/app/modal-model/modal-model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-deab5830f8b1c1098bbdc08d936b7fc0
忘れずに、新しいコンポーネント、サービスをモジュールに登録します。
entryComponentsも忘れずに追加。
/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-fc6b22833aeaf77f8440c4970ade705e
次に、navbarにモーダルを開く機能を実装
/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-12468dba4acc93d6788c4f72b2b89a70
・ModalModelComponent、Modelクラスをimport
・this.bsModalService.show()でモーダルを開きつつ、initialStateでmodeと新しいModelを渡しています。
これで、モーダルが開くようになりました。
もちろん、Createを押しても、モーダルが閉じるだけです。
（２）dataServiceにモデル追加機能を追加
/src/app/modal-model/modal-model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/43f0da8210797dc47a046d9a57c3713aae045785#diff-2eb3d4b53b961d6ddaf0deffaaf7240e
・dataServiceのaddModel（未実装）を呼び出す
/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/43f0da8210797dc47a046d9a57c3713aae045785#diff-ae990bb302f27e60323deb45d6746b17
・dataクラスにあるgetNewModelId()で、新しいIDを取得しつつ、渡されたmodelをデータに追加します。
これで、右カラムの情報欄を見るとモデルが追加されるようになりました。
次回は、モデルの追加が左カラムエリアにも反映されるように修正します。