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.)

cap08

Although I felt that the explanation was going too long, I finished implementation of schema.
Next time we will be implementing Jsplumb.