FrontEndGen: front end generator (1.0)

[ducmle]

Depends on #5

Task plan

• [x] #53
• [x] #52
• [x] #54
• [x] #76

Development

FrontEnd (the main task)

• Module: jda-mosar
• Package: jda.modules.mosarfrontend

Backend for testing

• Module: jda-mosar, backend (SpringBoot)
• app example: jda-eg-coursemanmosar

Others

• development branch: feat#17
• Default: cấu hình đôi ngôn ngữ: Javascript/React.js (fron-end); Java/Spring Boot (back-end).

Related

• 29

• 30

[github-actions[bot]]

This PR/issue depends on:

• jdomainapp/jda#5 By Dependent Issues (🤖). Happy coding!

[ducmle]

@jdomainapp/dev-all

1. FEGen design: https://github.com/jdomainapp/jda/blob/main/modules/mdsa/docs/ViewGen.drawio (Read by app draw.io)
2. Todo:
   • construct a new design solution to support different FE platforms

[ducmle]

Seminar 20.3

todo:

1. Finalise and checkin source code of the baseline CourseMan example
   • Note: support multi-level subview (edit/delete): e.g. StudentClass -> Student -> Address: subviews Student & Address are displayed in-line and user is able to edit
   • 3 subview rendering design: (1) basic (as is), (2) pop-up with context path, (3) hybrid of (1) & (2)
   • Development code branch: feat#17
2. Prepare baseline FE test cases for the baseline CourseMan example (form, browse functions; subview)
   • shared task, using a Gsheet to specify test cases (module, function (including nested modules), input, expected output)
3. ViewGen: finalise design & start coding
   • come up with a generic design (improvement over the existing design). URL: https://drive.google.com/file/d/1BxSgpxnYrcI3feXSwpsOSdkCzBDlDbS4/view?usp=sharing
   • read all MCC's config and use them in the view gen
   • use baseline CourseMan app modules (ModuleAddress, Student, StudentSClass) to walk through the improved design, validating it
     • annotate/note in the diagram input, output of each sequence message
   • use base line test cases (above) to test generated CourseMan app

[courtney1403]

Thưa thầy, Em xin update tiến độ.

1. Đã check in source code của baseline CourseMan example bản hiện tại.
2. Test cases: chưa
3. ViewGen:
   • Đã chi tiết thêm 1 số điểm về design tuy nhiên chưa hoàn thiện. Đã code một số phần dựa theo những phần design đã chi tiết hóa và code hiện tại. Đã tạo một số template để gen code, tuy nhiên cũng chưa đầy đủ. Hiện tại đã gen ra được đủ các file cho các modules, tuy nhiên nội dung các file thì chưa đúng, cần phải làm tiếp. Các file generals chưa gen ra đủ.

B.R, Hồng

Vào CN, 20 thg 3, 2022 vào lúc 10:42 Duc Minh Le (Lê Minh Đức) < @.***> đã viết:

Seminar 20.3 todo:

1. Finalise and checkin source code of the baseline CourseMan example
   • Note: support multi-level subview (edit/delete): e.g. StudentClass -> Student -> Address: subviews Student & Address are displayed in-line and user is able to edit
   • 3 subview rendering design: (1) basic (as is), (2) pop-up with context path, (3) hybrid of (1) & (2)
   • Development code branch: feat#17 https://github.com/jdomainapp/jda/tree/feat%2317
2. Prepare baseline FE test cases for the baseline CourseMan example (form, browse functions; subview)
3. ViewGen: finalise design & start coding
   • come up with a generic design (improvement over the existing design)
   • read all MCC's config and use them in the view gen
   • use baseline CourseMan app modules (ModuleAddress, Student, StudentSClass) to walk through the improved design, validating it
     • annotate/note in the diagram input, output of each sequence message
   • use base line test cases (above) to test generated CourseMan app

— Reply to this email directly, view it on GitHub https://github.com/jdomainapp/jda/issues/17#issuecomment-1073159764, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJEA2NCMIERB72DJGNFJVNTVA2NBRANCNFSM5BKUOLRQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were assigned.Message ID: @.***>

-- Trân trọng, Lê Thị Hồng

[ducmle]

Seminar 3.4:

todo:

1. Finalise and checkin source code of the baseline CourseMan example
   • Development code branch: feat#17
   • @jindojojin : check code into branch
   • @Hai & @courtney1403 : checked in
2. Prepare baseline FE test cases for the baseline CourseMan example (form, browse functions; subview)
   • shared task, using a Gsheet to specify test cases (module, function (including nested modules), input, expected output)
3. ViewGen: start coding
   • finalised base design
   • view gen design: improve current ViewGen design to use templates config in MCCL to generate URL: https://drive.google.com/file/d/1BxSgpxnYrcI3feXSwpsOSdkCzBDlDbS4/view?usp=sharing
   • code view gen for your frontend: read all MCC's config and use them in the view gen*
   • use baseline CourseMan app modules (ModuleAddress, Student, StudentSClass) to walk through the improved design, validating it
     • annotate/note in the diagram input, output of each sequence message
   • use base line test cases (above) to test generated CourseMan app

[courtney1403]

08/05/2022

1. Đưa config appTemplate vào Scc class

   • Đưa vào RFSGenConfig.
   • Thêm trường vào RFSGenConfig -> chứa thông tin của App template
   • parseRFSGenConfig: cần cập nhật để đọc config apptemplate
   • sử dụng java refection api

2. Đưa biến platform -> tự động load các default template

3. View Gen: dùng java parser (source code) để đọc mcc

   • example: jda.modules.mosar.test.reactjs.ViewTest
   • MCCUtils.readMCC
   • ViewBootstraper.modules: chứa toàn bộ các mcc (dạng source code) của các module đã được đọc.
   • see this method for an example of how to get a view field from MCC and extract its information (type, label, etc.): View.viewFieldFromFieldDeclaration (line 185-195)

4. Tổng hợp thiết kế chung, phân chia công việc phù hợp

[ducmle]

15/05/2022

Progress

Hai's Thesis

Thesis proposal has been approved.

Thesis plan

1. Research M2T/EGL: ~ 2 wks (30/5/2002)
2. Implement FEGenEGL: 6wks (15/7/2022)
3. (Optional) Subproblem 3: FE Testing

Linh's Thesis

Thesis proposal:

1. Complete and send to Dr. Hanh for approval (early next week)

Thesis plan

1. Proceed with the current plan
2. Enhancements (e.g. w.r.t HOC), if necessary, will be added later

Todo

1. Meeting time change: Saturday 8:30AM
2. Next week:
   1. meeting: off (exam period)
   2. Linh: complete thesis proposal & get Dr. Hanh's approval
3. Meeting 28/5/2022:
   1. Hai: complete FEGenVuejs for ModuleStudentClass
   2. Linh: complete FEGenReactNative for all CourseMan modules

[ducmle]

Seminar 28/5/2022

Progress

@HaiTong

update progress on:

• Background research of EGL
• final testing: jda-eg-courseman-fevuejs

Todo

@HaiTong

1. jda-eg-courseman-fevuejs:
   • module design: merge add.vue (html) và edit.vue (.html) => entity.vue (.html)
   • write a ReadMe.md as a technical report for the CourseMan-Vuejs app
     • explain how to install/run the app in Node.js
     • explain CourseMan Vuejs components and CourseMan modules
   • FIX:
     • subform (StudentClass-Student): browse button does not show filtered objects
     • supertype-subtype module (ModuleCourseModule): objects not updated/created correctly
2. Background research:
   • EGL example: 4/6/2022 (check in code to training/egl)
   • EGL courseman example: 11/6/2022 (check in code to jda/examples/courseman/egl

@jindojojin

1. jda-eg-courseman-fereactnative:
   • testing: ensure that all modules work as expected
   • write a ReadMe.md as a technical report for the CourseMan-ReactNative app
     • explain how to install/run the app
     • explain CourseMan ReactNative components and CourseMan modules
   • complete the common FEGen code (reading the new configuration file) discussed in the last meeting
   • FEGenReactNative: complete v1.0
2. Background research:
   • HOC & comparison with JDA's MCCL-SCCL

[ducmle]

Seminar 4/6/2022

Progress

@HaiTong

1. TBC

   @jindojojin

2. jda-eg-courseman-fereactnative:
   • to be completed
3. Background research:
   • HOC: ok
4. FEGen: completed a prototype implementation

@courtney1403

1. Started applying FEGen (that Linh has implemented) to jda-eg-courseman-feangular

Todo

@HaiTong

1. TBC

@jindojojin

1. FEGen:
   • test with generating the FE for jda-eg-courseman-fereactnative; to complete by next week
     2. Generalise FEGen for the web-based version

[ducmle]

Seminar 11/6/2022

Progress

Conference paper plan

@jindojojin

1. jda-eg-courseman-fereactnative:
   • demonstrate benchmark app
   • discuss 2 issues
2. FEGen: version 1.0 completed (to be extended later after benchmark app requirements are finalised)

Todo

@HaiTong

1. jda-eg-courseman-fevuejs:
   • finalise the benchmark app (fix the issues raised in a previous seminar)
   • test to make sure that all modules work correctly

@jindojojin

1. jda-eg-courseman-fereactnative: finalise the benchmark app
   • resolve cyclic subview rendering issue (e.g. Student.address & Address.student)
   • finalise type hierarchy (supertype-subtype) view (e.g. CourseModule type hierarchy)
   • add "Create new button" to subform view
   • add notifications
   • test to make sure that all modules work correctly
     3. Generalise FEGen for the web-based version

@courtney1403

1. jda-eg-courseman-feangular: finalise the benchmark app
   • test to make sure that all modules work correctly

@ducmle

• List the key API documentations of the frontend frameworks
• Create the requirement set structure (key syntax elements, ...)

[jindojojin]

@ducmle

• List the key API documentations of the frontend frameworks => HOC: https://reactjs.org/docs/higher-order-components.html React context: https://reactjs.org/docs/context.html React native : https://reactnative.dev/architecture/overview

[ducmle]

Seminar 18/6/2022

Progress

@jindojojin

1. jda-eg-courseman-fereactnative: finalise the benchmark app
   • completed most of the issues last week
   • todo: notification, fix issues with fragment/screen stack navigation & object passing
   • FEGen: completed for all ReactNative modules

@courtney1403

1. jda-eg-courseman-feangular: finalise benchmark app
2. apply FEGen for Angular

@Hai

• leave of absence

Conference paper plan

• discuss the FrontEnd requirements

Todo

Deadline: SPA requirements - 22/6

@jindojojin

1. complete the SPA requirements table for React/ReactNative
2. Complete template-based FEGen and its application to jda-eg-courseman-fereactnative
3. jda-eg-courseman-fereactnative
   • todo: notification, fix issues with fragment/screen stack navigation & object passing

@Hai

1. complete the SPA requirements table for Vuejs
2. Complete template-based FEGen and its application to jda-eg-courseman-vuejs

@courtney1403

1. complete the SPA requirements table for Angularjs
2. Complete template-based FEGen and its application to jda-eg-courseman-angular

@ducmle

1. Write 1st draft conference paper

Next meeting:

• Evaluation: evaluate the extent to which FEGen meets the SPA requirements

[ducmle]

Seminar 2/7/2022

Progress

1. @jindojojin: jda-eg-courseman-fereactnative:
   • completed the core requirements
   • todo: notification, fix issues with fragment/screen stack navigation & object passing
2. @haitong: jda-eg-courseman-fevuejs:
   • finalise bechmark app and help Linh complete the FEGen for VueJs
3. FEGen:
   • tested with ReactNative
   • testing for VueJs (Hai): code generated but ObjectForm has error when running

Next meeting: 04/07/2022: 8:30PM

• FEGen: algorithm
• Evaluation: evaluate the extent to which FEGen meets the SPA requirements

[ducmle]

Meeting 4/7/2022

Progress

1. @jindojojin: jda-eg-courseman-fereactnative:
   • completed the core requirements and FEGen
   • FEGen algorithm: revised for paper
   • todo:
     • adapt FEGen for React
     • AppConfigGen: add this to generate app-level configs (taken from @RFSGenDesc in SCC)
2. @haitong: jda-eg-courseman-fevuejs: todo:
   • use the backend app from jda-eg-coursemanmosar of the branch to avoid backend errors
   • finalise the frontend bechmark app
   • complete the FEGen for VueJs:
     • FEGen.genViewForm: to support subtypes (e.g. CourseModule subtypes: ElectiveModule, CompulsoryModule)

Next meeting: 06/07/2022: 8:30PM

• Evaluation: evaluate the extent to which FEGen meets the SPA requirements

[ducmle]

ReactNative

Meetings: 18/7 - 6/8

• [x] Create Enrolment trong Student -> pass parent Student object into the Enrolment (to be sent to backend)
• [x] use linked field for subform
• [x] Multiinputfield (e.g. Student.enrolments): to create a new component for this
  • [x] view: use the React hook form
  • [-] (6,23/8/2022 - DEL) use custom object array to maintain state for the multiinputfield (instead of relying on the state management of the field)
  • [x] worked with StudentClass/Student
  • [x] to work with StudentClass/Student/Enrolment
• [x] (6,23/8/2022) list-view: add support for pagination

Meeting: 23/8/2022

• [x] write ReadMe.md for the app
  • [x] has the basic structure with sections and images
  • [x] to add a demo video
• [x] complete FEGen
  • [x] write ReadMe.md: design & usage instructions
• [x] testing: complete functional testing of the app

Vuejs

30/7/2022:

• [x] merge add/edit html
• [x] transfer data from parent to child modules. Use JavaScript Map for Prop, e.g. Prop.putObj('student', s) function putObj(var name, var obj) { map.set(name, obj)

4/8/2022 In a subform (e.g. Student/Address):

• [x] hide the subform of the parent (e.g. Student)
• [x] view related objects (e.g. Address) on the subform (e.g. Student.Address)
• [x] 1:1 association: allow create and unlink subform object from the parent (e.g. Student)
• [x] 1:M association (e.g. Student/Enrolment) on form-expansion event (by clicking on the subform label)
  • [x] on-click Main -> Create new
    • [x] clear form
    • [x] parent object (e.g. Student) is presented on the linked input field (e.g. Enrolment.student)
  • [x] on-click Browse -> List only subform objects that are linked to the parent object (if parent object is null -> inform error)
  • [x] on-Edit an object on the list -> edit this object
  • [x] on-Delete an object on the list -> unlink object from parent
    • [x] if subform depends on parent -> unlink and delete object

30/8/2022 Supertype-subtype association (e.g. CourseModule, CompulsoryModule, ...):

• [x] on-Edit an object on the list -> retrieve actual object from the backend, to know its type
• [x] Apply to other modules:
  • [x] Merge add, edit components
  • [x] parent-child CRUDs (1:1, 1:M)

Angular

24/7/2022: Apply similar designs to React & Vuejs:

• [x] CRUDs on stand-alone view
• [x] parent-child CRUDs (1:1, 1:M)
• [x] object in subform is changed -> parent object is updated correctly

FEGen

After benchmark apps have been completed:

• [x] FEGen for ReactNative
• [x] FEGen for React
• [x] FEGen for Angular
• [x] FEGen for Vuejs