Angularで作るER DIAGRAM TOOL – 第六回 モデルの追加機能を実装

This time, we implement the function to add model of data.

(1) Open a new model form modal from navbar

First, create a modal component to be opened when you press Edit – Create Model in navbar

/src/app/modal-model/modal-model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-2eb3d4b53b961d6ddaf0deffaaf7240e

· DI dataService.
· By member variable mode, we will use the form for both creation and editing.
· The method create only closes the modal for the time being.

/src/app/modal-model/modal-model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-deab5830f8b1c1098bbdc08d936b7fc0

Do not forget to register new components and services in the module.
Also do not forget to add entryComponents.

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

Next, we implemented a function to open a modal in navbar

/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/aaa0b361acbfa19b2b43e49fb16d0790c48aa99a#diff-12468dba4acc93d6788c4f72b2b89a70

· ModalModelComponent, import a Model class import
· While opening a modal with this.bsModalService.show (), passing mode and a new model with initialState.

The modal now opens.
Of course, pressing Create will only close the modal.

(2) Add model addition function to dataService

/src/app/modal-model/modal-model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/43f0da8210797dc47a046d9a57c3713aae045785#diff-2eb3d4b53b961d6ddaf0deffaaf7240e

· Call addServer’s addModel (unimplemented)

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

· With getNewModelId () in the data class, while passing the new ID, add the passed model to the data.

Now, when you look at the information column on the right column, models are added.

Next time, we will modify the model addition so that it will be reflected in the left column area as well.