Angularで作るER DIAGRAM TOOL – 第八回 スキーマの作成・編集・削除機能の実装
Basically it is almost the same as model.
(1) Create a form modal to register / edit schema.
/src/app/modal-schema/modal-schema.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-2588015c073ce9535c2d4c6b404f79ea
· DataService.addSchema () is not implemented yet
/src/app/modal-schema/modal-schema.component.html
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-3c1bd9797de95d11f665231c2a92f3e7
· It is long because of many items, but what you are doing is simple.
(2) Create a component for schema to be displayed on the left column.
/src/app/schema/schema.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-2588015c073ce9535c2d4c6b404f79ea
· Input () first, @ Input () last is the flag whose current schema’s order is the first (or last). Use it to display / hide the rearrangement arrow.
· DataService.deleteSchema (), dataService.moveSchema () not implemented yet
/src/app/schema/schema.component.html
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-509ca554e45e65071f64a71eb7976013
· Each part is displayed / hidden by is_pivot, first, last.
(3) Update dataService
/src/app/service/data.service.ts
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-ae990bb302f27e60323deb45d6746b17
· Implemented uninstalled addSchema (), deleteSchema (), moveSchema ()
· Data.getModelById () is not implemented yet
Since it is necessary to acquire the parent model from the parent_id of schema with addSchema () and deleteSchema () of the above dataService,
Implement it in the data class.
/src/app/class/data.ts
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-ba726bfa70586322bd593dddb7beaf87
(4) Reading into module
Added SchemaComponent, ModalSchemaComponent to module
/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-fc6b22833aeaf77f8440c4970ade705e
(5) Call from model
/src/app/model/model.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-14ac3c6b037418c538e10e3c5571bbbe
・ModalSchemaComponentのimport
・addSchema()の実装
/src/app/model/model.component.html
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-e7b9f22b5724e30d03dbdfd83021ec15
· Import of ModalSchemaComponent
· Implementation of addSchema ()
/src/app/class/schema.ts
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-43602a3f26ba4b6bcf22b9c72c3fec66
Implementation of getElementbyId ()
Finally adjust style
/src/styles.css
https://github.com/dog-ears/er-diagram-tool/commit/9cd12ed5429013cb8fafaca36dd8083b8d0cbfb2#diff-0fd3637456511d89012d5274dd855970
· Material icon cursor to pointer. (However, if disable class is attached, make it translucent by default.)
Although I felt that the explanation was going too long, I finished implementation of schema.
Next time we will be implementing Jsplumb.
Discussion
New Comments
No comments yet. Be the first one!