Add UI COG - Part 1 (add and visualize COG in forms)

[CarolineDenis]

To use the new COG feature, the user will follow this simple workflow:

1. Open the New COG Form:

   • Navigate to Data Entry > COG Table to open a new COG form.

2. COG Form Layout:

   • The form includes:
     • A label named "Name" with an associated input box.
     • An empty subview with a "+" button.

3. Add COG/CO:

   • Click the "+" button.
   • A dialog opens with the following options:
     • Add COG:
       • Create a new COG.
       • Use QB (Query Builder) to search for an existing COG.
     • Add CO:
       • Create a new CO.
       • Use QB to search for an existing CO.

4. Create or Select Records:

   • The user can either create a new record and save it or select one or several records from the QB search results and add them to the COG parent.

5. Updated Parent COG Subview:

   • A new record line is added to the Parent COG subview. This line includes:
     • COG/CO information in a collapsed subview.
     • Attributes from COJO (e.g., isPrimary, isSubstrate).
     • A trash can icon at the end of each line to remove the record from the parent COG.
     • An arrow at the front of each line to expand the form.
     • Clicking on the record link opens a new page with the record form

6. Expand Record Form:

   • When the arrow is clicked to uncollapse the line, it opens the corresponding record form using a conditional format based on whether the foreign key (FK) CO or FK COG is present.