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

First of all, we added an end point to H2 of Model last time,
I tried to create a connection,
Change it to open a modal without creating a connection.

(1) Creating a relationship modal

/src/app/modal-relation/modal-relation.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-646411b438809058dd2679d246b8906b

· Source_model is the source model and target_model is the destination model.
· Source_model_display_schema, target_model_display_schema is the column content to display.

(Example)
For category has many books,
If you select a title for source_model_display_schema, you can choose a category title by pulldown when choosing a category.

For one-to-many, target_model_display_schema is unnecessary.

· Call dataService.addOneToManyRelation () or dataService.addManyToManyRelation () (not implemented yet) depending on relation_type.

/src/app/modal-relation/modal-relation.component.html
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-01be9d6214e34da40775ab3244149f02

/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-ae990bb302f27e60323deb45d6746b17

· For now, add empty addOneToManyRelation () and addManyToManyRelation ()

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/7295efacc56aa0c29f524bb4cffdddd817c591d3#diff-fc6b22833aeaf77f8440c4970ade705e

· Import and register ModalRelationComponent

(2) Modify the processing after dropping the Model – H2 endpoint

First, modify the connection creation part to a modal call.

/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/8600c7eea9846a3dcb940fd049814789ce8d09f3#diff-da7afb11f9169e78d9b5cfea7afcc510

· Import of BsModalService, BsModalRef, ModalRelationComponent.
· DI of BsModalService
· Addition of member variable BsModalRef
Added option to addEndpoint

beforeDrop: (params) => {} — Occurred immediately after dropping the endpoint. Open a modal at this timing,
By return false, the subsequent processing (creation of connection) is canceled.

· The data to modally give is SourceModel and TargetModel. Because you can get the ID of SourceModel element and TargetModel element from param of beforeDrop,
We will implement the function to retrieve the model from the ID name of the element in the data class.

/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/8600c7eea9846a3dcb940fd049814789ce8d09f3#diff-ba726bfa70586322bd593dddb7beaf87

Implement getModelByElementH2Id ()

Now, by dragging and dropping the endPoint of model-h2, the relation modal opens.
※ Relation From modal to the other is not yet implemented.

Before implementing the relation modal destination, there is one remaining bug.
When deleting a model, endPoint will remain.

cap11

(3) Implement the function to delete the endPoint attached to the model when deleting the model

/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/c7b772c2ec27c703829e99463e28028ab5118d44#diff-14ac3c6b037418c538e10e3c5571bbbe

· Execute jsPlumbService.destroyModel () (unimplemented) on deletion (ngOnDestroy ())

/src/app/service/jsPlumb.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/c7b772c2ec27c703829e99463e28028ab5118d44#diff-da7afb11f9169e78d9b5cfea7afcc510

· Implement destroyModel ()

Now, endPoint is automatically deleted when model is deleted.

Next time I will implement one-to-many relation creation.

シェアする

  • このエントリーをはてなブックマークに追加

フォローする