TODO.todo

✔ server @done(2020-08-21 07:13)
  ✔ write initial server (server directory, change 'start' in main package.json) @done(2020-08-19 07:55)
  ✔ Make sure basic open-wc app runs @done(2020-08-19 07:56)
  ✔ Add DB/session/serverstores module with prompts questions for DB setup @done(2020-08-20 09:35)
  ✔ Exit everything on ctrl-c on input (prompts) @done(2020-08-21 07:05)
✔ Change the way initial setup works @done(2020-08-21 07:34)
  ✔ Two lists: one of "super-packages", and one of "optional ones" (set in package.json) @done(2020-08-21 06:45)
  ✔ Allow multi-select for optional ones @done(2020-08-21 07:05)
  ✔ Allow positioning of modules (position field in package.json) @done(2020-08-21 07:05)
  ✔ Make it possible to add multiple modules via cmd (commander) and UI @done(2020-08-21 07:12)
  ✔ Blank out already installed packages @done(2020-08-21 07:34)
✔ Add basic client module, working with or without open-wc (tpe app with tabs) @done(2020-08-22 21:22)
  ✔ Add "fs" key to module, for file system changes, before-manipulate and after-manipulate, with ops and parameters (rename) @done(2020-08-23 07:29)
✔ Add new type of reinstallable module, for pages etc. @done(2020-12-21 20:21)
✔ Change json to json5, in order to being able to add comments -- CHANGE OF HEART @done(2020-12-27 21:07)
✔ Change "// *** -- start" into self-contained blocks /* */ @done(2020-12-28 06:38)
✔ Change PageElementMixin render function @done(21-01-04 17:23)
✔ Add more gathered metainfo (Mixin, title, whatever) with regex from findAnchorPoints  @done(2021-01-07 16:46)
✔ Have a function that will display that info as as sentence @done(2021-01-07 16:46)
✔ Add extra sentence to prompts, and write little intro when placing element @done(2021-01-07 16:46)
✔ Rename client-app-add-tabs into client-app-element-tabs @done(2021-01-07 16:46)
✔ Create client-app-add-page-tabs @done(2021-01-07 16:46)
✔ Complete placement of client-app-element with prompts @done(2021-01-07 16:46)
✔ Write client-app-inner-page so that it places inner pages in right spot @done(2021-01-07 16:46)
✔ Work out how to add a page either in Page Insertion Point or Page tab insertion point @done(2021-01-08 07:43)
✔ Work out how to add an element either in Element Insertion Point or Page tab insertion point @done(2021-01-08 07:43)
  ✔ HINT: write textManipulation as a function, AND findAnchorPoints() given an array, and adding anchor point to info @done(2021-01-08 07:43)
✔ REWORK things so that postAdd is not used for extra prompts, use prepRompts instead (doh) @done(2021-01-09 10:49)
✔ Finish client-app-inner-pages @done(2021-01-09 15:34)
  ✔ Add URL info to js-kit/utils/getFileInfo @done(2021-01-09 11:27)
  ✔ Ask for path RELATIVE to the path above @done(2021-01-09 11:27)
✔ Split findAnchorPoints so that there is a generic one from scaffoldizer and a specific super-short one for js-kit @done(2021-01-10 06:06)
✔ Harmonise API so that config is always at the beginning @done(2021-01-10 06:37)
✔ Allow to add elements in a "elements" subdirectory under the element itself @done(2021-01-10 09:03)
✔ Check that element doesn't exist already @done(2021-01-10 10:43)
✔ Check that element path is not already set @done(2021-01-10 11:47)
✔ Force names for add/list/view elements @done(2021-01-12 07:58)
✔ Check that it still all works (and check headers are off in inner-pages) @done(2021-01-12 11:06)
  ✔ routed-element (cloned from inner-page, adding a 'routedElement' element to the tab) @done(2021-01-13 06:28)
  ✔ NOT DONE - inner-page (as is, but taking tab placement out) @done(2021-01-13 06:45)
  ✔ add-element-tabs -- (renaming add-tabs). NOTE: app-element will add to it @done(2021-01-13 06:10)
  ✔ add-routed-element-tabs (renaming add-page-tabs, normal ee-tab but "passive") @done(2021-01-13 06:45)
  ✔ NOT DONE add-routed-element-stack? (future) @done(2021-01-13 06:47)
✔ Make js-kit work as a standalone program @done(2021-01-14 07:44)
✔ Change order of parameters is stock scaffoldizer https://stackoverflow.com/questions/4351521/how-do-i-pass-command-line-arguments-to-a-node-js-program @done(2021-01-15 08:44)
✔ Add eslint to frame @done(2021-01-15 09:17)
✔ Make sure it still works if app name doesn't have a "-" by adding 'main' @done(2021-01-15 10:13)
✔ Make sure that result app is fully linted @done(2021-01-15 13:21)
✔ Add full hooks (same as plain-PREFIX-ELEMENTNAME) to PREFIX-landing, PREFIX-load-error, PREFIX-not-found @done(2021-01-16 09:39)
  ✔ Done programmatically! (Was: Could this be done programmatically? @done(2021-01-16 09:39)
✔ Add server stores (server-store) (simple version) @done(2021-01-17 11:14)
  ✔ Validate store name, ensure there is no matching store @done(2021-01-17 22:39)
  ✔ Validate store URL, ensure there is no matching URL @done(2021-01-17 22:39)
  ✔ Validate version better @done(2021-01-17 23:13)
  ✔ Improve error message so that findMatchingStoreNameAndVersions gives list of versions @done(2021-01-18 07:47)
  ✔ Turn choices into a select @done(2021-01-18 07:57)
  ✔ Add default version value to server stores @done(2021-01-18 08:16)
✔ Add DB server stores (server-db-store) (simple version) @done(2021-01-18 09:48)
✔ Add way to run scripts -- use to create databases (picking store) @done(2021-01-18 11:54)
✔ Check that DB sync actually works @done(2021-01-18 23:31)
  ✔ Reset project @done(2021-01-18 22:29)
  ✔ Create database @done(2021-01-18 22:29)
  ✔ Add DB credentials that actually connect to a DB @done(2021-01-18 22:29)
  ✔ Run server and check that DB connection is happening @done(2021-01-18 23:31)
  ✔ Check that sync script actually does run @done(2021-01-18 23:31)
✔ Write function that, given a store and version, returns a list of fields and types @done(2021-01-18 23:49)
✔ Make AddEdit work <nn-input-text dense name="voucherNumber" label="V#" .value=${this.data.voucherNumber || ''} > </nn-input-text> @done(2021-01-27 06:15)

STORES
------
✔ Make sure that entries in the searchSchema matching schema are marked as searchable in schema in jsoreststores @done(21-08-17 07:35)
✔ Add parameter to getStoreFields with previously set fields, and use it to prevent positionField from being redeclared @done(21-08-18 07:14)
  ✔ Make sure the position field is added to the store's schema last @done(21-08-18 07:15)
✔ Ask which are the sortable fields (only searchable ones) @done(21-08-18 07:20)
✔ Check for already existing fields, in adding and creating @done(21-08-18 08:33)
✔ Find a better prettier way to print schema and array values: indentation, speechmarks, etc. @done(21-08-20 08:07)
✔ Make positionField as part of jsonreststore-mysql, take it out of jsonreststores. @done(21-08-21 10:58)
  ✔ Take positionField out of jsonreststores, make sure another 'positioning' field is used instead @done(21-08-21 10:58)
  ✔ NOTE: positionField is NOT needed in the memory store since things go into arrays @done(21-08-21 10:58)
  ✔ Add template for memory store with required API calls when needed @done(21-08-21 10:58)
✔ Make it possible to create DB, API and memory stores (table, connection (var), positionfilter, positionField) @done(21-08-24 13:34)
✔ Add option to add fields to an existing store (new command) @done(21-08-24 22:35)
✔ Run db creation script automatically after store creation or field adding @done(21-08-26 13:24)
✔ Make sure only DB stores are actually dealt with in terms of db sync @done(21-08-27 08:23)
✔ Ask whether schema should be synced up with DB @done(21-08-27 21:28)


BIG MISSING THINGS:
  - GOOD DnD
  - GOOD FILE UPLOADS 
  - WEBSOCKET PUSH STORE CHANGES


JSONRESTSTORES:
  - Better hooks
  - Embedded, simple file uploads
  - Automatic joins
  - Automatic grouping

☐ NOTES ON STORES
Companies
  /companies/:id
People [FK: companyId]
  /people/:id
  /companies/:companyId/people/:id
☐ Addresses [FK: personId]
  ☐ /addresses/:id
  /people/:personId/addresses/:id

☐ Add parameters to anchorPoints. Will need it for "useItem"
☐ When in a list element, in the main cycle have an element insertion point, with parameter "useItem"
☐ Always pass "data" to child
☐ In listElement, make the anchor within the map() cycle with (useItem=true)

NOTE:
**URL PARAMS ARE ONLY FOR LOADING**
Routing/Page Elements will have a property `reloadFromLocation` used in routerCallback

Non-list elements will have an internal storeParams variable which will either be set in routerCallback() or in updated('record').
  - E.g. <view-element storeParams={ {id: 10 } }> OR <view-element record={ ... }>
  - getStoreUrl() will always use storeParams.* to make up the URL. E.g. return `/stores/ports/${this.storeParams.id}`
  - The property .record is always optional, although it will override storeParams

List elements will have an internal storeParams variable which will either be set in routerCallback() or passed to it directly
  - E.g. <list-element .storeParams=${ { portId: this.record.portId } } records={record.ports }> (records is not mandatory)
  - getStoreUrl() will always use storeParams.* to make up the URL. E.g. return `/stores/berths?portId=${this.storeParams.id}`
  - The property .records is optional

This means that list elements will always have access to the crucial filtering IDs they need to fetch/save the correct data. Fetching is important EVEN
when having the data available and preloaded, in case the user wants to change ordering fields, go to next page if available, etc.


AppElement:
  *** Parent: LitElement. Common to ALL elements, providing SharedStyles (basic CSS) and basic default mixins  
  By default, it will add ResponsiveMixin (one of potentially others) which adds "wide" and "mobile" props

RoutedElement:
  *** Parent: AppElement. Hide contents if not active, depending on pagePath.
  Mixed with routify's RoutedPageMixin
    (Which will register the pagePath routes, provide 'active' prop and locationMatch)
  It will also enhance shouldUpdate to emit, and provide handy equalParams()

PageElement:
  *** Parent: RoutedElement. Provides renderHeader() which calls headerSlotted(), and sets meta data


----------------------------------------------------
FINAL MIXINS/ELEMENTS:

  * [X] RoutingMixin               - Extends RoutingPageMixin, which will set "active" when .pagePath or page-path match, allowing for allowPartialMatch.
                                     But will also and dispatch 'active' when active 
  * [X] HideInativeMixix           - Hides an element if the "active" property is not set. It also prevents updating,
  * [X] HeaderAndTitleMixin        - Provides header, changes title, 
  * [ ] LoaderMixin                - Provides the Loader loader and the Loader-path attributes
  * [ ] RoutingLoaderMixin         - Will trigger Loader loading from URL based on routing

  * [X] AppElement: Basic theming styles, basic sizing, etc
      [ ] * AddEditElement - Deriving from AppElement, providing buttons to save an element
      [ ] * ListElement    - Deriving from AppElement, providing buttons to add an element
      [ ] * ViewElement    - Deriving from AppElement, providing buttons to edit an element
       (ALL need to be mixed with RootPageMixin, PageLoaderMixin, LoaderElementMixin or LoaderRoutedElementMixin)
       (Actually, the only absolute must is LoaderMixin)

A page will be either AppElement or AddEditElement or ListElement or ViewElement mixed with
  * [X] Root page WITHOUT Loader:         RootPageMixin             --- RoutingMixin + HideInactiveMixin + HeaderAndTitleMixin
  * [ ] Root page with Loader:            RootPageWithLoaderMixin   --- RoutingMixin + HideInactiveMixin + HeaderAndTitleMixin + LoaderMixin + RoutingLoaderMixin
  
  * [X] Page WITHOUT Loader:              PageMixin                 --- RoutingMixin + HideInactiveMixin
  * [ ] Page with Loader:                 PageWithLoaderMixin       --- RoutingMixin + HideInactiveMixin +                       LoaderMixin + RoutingLoaderMixin
  
  * [X] Element WITHOUT Loader:           ElementMixin              --- N/A
  * [ ] Element with Loader:              ElementWithLoaderMixin    --- LoaderMixin
 
  NO AUTO-ADD:
  * [ ] Element with Loader from routing: RoutedElementWithLoaderMixin --- LoaderMixin + RoutingMixin + RoutingLoaderMixin

-----------------------------------------------------------------
Only page elements will ever load data. All of the other elements do not do the loading.


***SIMPLIFIED FINAL VERSION***:
* AppElement (Basic theming styles, basic sizing, etc). **GO: Anywhere
* AppPageElement RoutingMixin(HideInactiveMixin(LoaderMixin(RoutingLoaderMixin(AppElement)))) **GO: AppPageElement, AppRootPageElement
*
* PageAddElement (AppElement) **GO: AppPageElement, AppRootPageElement
* PageEditElement (AppElement) **GO: AppPageElement, AppRootPageElement
* PageViewElement (AppElement) **GO: AppPageElement, AppRootPageElement
* PageListElement (AppElement) **GO: AppPageElement, AppRootPageElement


"src/lib/base/AppElement.js":[
  {
    "op":"insert",
    "position":"before",
    "anchorPoint":"/* Loaded modules -- end */",
    "value":"import { ResponsiveMixin } from './AppElementMixins/ResponsiveMixin.js'"
  },
  {
    "op":"custom",
    "function":"addMixinToElement",
    "mixin":"ResponsiveMixin"
  }
  

[X] AddEditCommonMixin: L 102, 2.0.0 is hardcoded, MAYBE add a way to have default store versions, or maybe specify exact version
[X] add-edit-PREFIX-ELEMENTNAME.ejs: Add the store name there
[X] Make sure 1.0.0 is changed with default store version across the app, attempt to create directory on the spot
[X] Make sure file-not-found is the last entry in the list of pages
[X] Fix missing messenger problem, add UI stuff
[X] Add snack-bar to TPE from Compas
[X] Fix Jsonreststores so that it doesn't crap if stores not there
[X] Fix Jsonreststores so that it copies `request` and doesn't assign request.record at all

[X] Add field names directly with their types in add/edit form
[X] Make sure basic element still works, without store

✔ AddEdit is done @done(2021-01-27 06:15)
✔ Change renderAddEditElement so that it's a function that includes an argument with the actual form, NO MORE innerRender @done(2021-01-27 06:15)
✔ Rename 'edit' into 'add-edit' everywhere @done(2021-01-27 06:51)
✔ Make it select the store @done(2021-01-27 08:01)
✔ Decide how NOT to ask for store elements if no stores added, maybe check if module is installed @done(2021-01-27 08:58)
✔ Look for "message: 'Which" and change function to call pageTypeQuestion() @done(21-08-28 08:39)
✔ Make it work out the fields by actually loading the store @done(21-09-12 10:06)

STAGE 2:
✔ Add hook "askPrompts", and call it in Scaffoldizer, adding there the extra questions. Note that getPrompts is actually legacy @done(23-06-11 15:20)
✔ Make sure things are still functioning after sweeping changes to prompets architecture @done(23-06-11 21:10)
✔ Make sure the root page is still added, that is: all of the variables are passed @done(23-06-11 21:10)
✔ Check possibility of NOT having insertion points, but analyse code instead. <--- PLEASE @done(23-07-16 09:48)
✔ Complete insertion of main pages @done(23-07-26 23:53)
✔ Complete insertion of elements which will be sub-tabs, using the normal element placeholder. @done(23-07-26 23:53)
✔ Complete insertion of normal element into another element, as a global element or as a specficically scoped element @done(23-07-26 23:53)
☐ Allow adding of store pages, check parameters passed
☐ Make sure stores are give the right parameters (only the main page of a tab gets the list for now)
☐ Make the loader actually work
☐ Make sure that variables are passed (all IDs and *Record values), and make sure that these variables are LIT properties of both pages
☐ Make a form work (pure html), using the data-loader to load data and making sure add-edit-element uses some of en-form code to gather values
☐ Make sure everything works as intended in terms of loading, saving, etc.
☐ Add links from one screen to the other, final: view linking to edit, 
☐ Make inline editing work too: inline-editing
☐ Make realtime fields work too☐ Make everything resilient if network connection fails
☐ Make sure every use case in terms of forms really works (real time, inline, normal, etc.) with intra-page linking fully working and full handling of network failures
☐ Run 'npm install' (script) when an item is added to dependencies so that sync work at first go and module not in node_modules

☐ --- STAGE 2 DONE ---
☐ server-log-error dependent on server-stores and server-db. Add page to view server errors with details etc.
☐ client-reducs
☐ clientserver-auth
☐ clientserver-user-config
☐ clientserver-app-config
✔ Look for a different server to serve files rather than open-wc's https://www.npmjs.com/package/es6-module-server @done(21-08-27 22:49)
  ✔ NOTE: We wrote one ourselves @done(21-08-27 22:49)
--- STAGE 3 DONE
☐ Document the lot as literate code
☐ Make sure GENERATED code is also literate, and generates a manual
☐ --- STAGE 4 DONE
☐ Add module to build (rollup config)


# ACTUAL TODO
✔ Port the "main" thing onto js-kit, before losing it again -- it will be permanent @done(23-07-23 22:48)
✔ Fix ee-tab, `pages = this.shadowRoot.querySelector('slot[name="content"]').assignedElements()` needs to be out of ifs @done(23-07-23 22:49)
✔ Understand why clicking on "main" zaps the /home part of the story and links to #home @done(23-07-23 22:49)
✔ Add a nice function to swap between tabs @done(23-07-23 22:50)
✔ Figure out how to prevent the popstate select() to overide whatever is loaded, neatly @done(23-07-24 11:23)
✔ Figure out a good way of having /home be the same as / (possibly client redirect) @done(23-07-24 21:48)
✔ Automatically add basic pages (home, not-found, loading-error) to the base app @done(23-07-24 21:57)
✔ Find better (working) way so that not-found page is at the end, make new section @done(23-07-24 23:06)
✔ Check why not-found page is missing title/description @done(23-07-24 23:22)
✔ Publish latest tpe (update npm beforehand) @done(23-07-24 23:37)
✔ Check why there are too many spaces in SpainApp.js (Drawer and file-not-found) @done(23-07-25 00:12)
✔ Add option NOT to compare hashes in routify @done(23-07-25 10:07)
✔ Delete tabs from not-found and loading-error @done(23-07-25 16:44)
✔ Run other manipulations to those pages @done(23-07-25 16:44)
✔ Fix the automatic loading of pages, by renaming everything in a totally new way @done(23-07-25 22:04)
✔ Make adding of elements (non-pages) work properly @done(23-07-26 23:26)
✔ Figure out how to add tabs, MOST LIKELY when adding an element "as tab" or "in page" (when adding it) @done(23-07-26 23:26)
✔ Fix weird issues with tabs and spacing, improve in that department so that weirdness doesn't happen @done(23-07-27 18:55)
✔ Add info about PARENT to newElementInfo, so that it can know things like path and routing group. Fix tabs.js and module.json @done(23-07-27 23:09)
✔ Fix huge problems with going from a dynamic module to another @done(23-07-27 23:10)
✔ Fixed issues with selection of drawer item on the left, reworked the "page" property which was obsolete @done(23-07-27 23:10)
☐ Only allow pages without ":" in the URL to go in the drawer
☐ If there are no stores, don't ask for the element, it's always PageElement or PlainElement.
☐ Make sure the indent function looks for the first NOT EMPTY line above
☐ Check if an element has already been created when picking a name
 
/all-ports
Is it a static page? Yes

/all-ports
Is it a static page? No
Which store does it query? ports (data-query: `/ports`)
Do you want to connect it to a specific store or create one? Connect/Create

Do you want to be able to view records? (`/all-ports/:portId`, data: `/ports/:portId`)
Do you want to be able to add records? (`/all-ports/add`)
Do you want to be able to edit records? (`/all-ports/:portId/edit`)
Do you want to be able to inline-edit the record?

/all-ports/1/all-berths
Is it a static page? No
Which store does it query? berths (data-query: `/ports/:portId/berths`)
Do you want to connect it to a specific store or create one? Connect/Create

Do you want to be able to view records? (`/all-ports/:portId/all-berths/:berthId`, data: `/ports/:portId/berths/:berthId`)
Do you want to be able to add records? (`/all-ports/:portId/all-berths/add`)
Do you want to be able to edit records? (`/all-ports/:portId/all-berths/:berthId/edit`)
Do you want to be able to inline-edit the record?

RAMBLINGS
* ADDING A Root page -- Plain element (`/ports`)

* ADDING A Root page -- Page Element  (always isList = 1) (`/ports`)
  ++ Always "list" store element, with matching URL
  ++ MAYBE a "add" element `/ports/add`
  
* ADDING A Sub page (they can only be added to a page, root or not)

 * When parent page has with isList = true (e.g. `/ports`), child can be
    * EITHER PAGE loader of an ID, must end with `:portId` (the ID of the store ports), which will give `/ports/:portId`
      ++ edit and/or view element. edit element is default only if it's the only one there. If view element, then it will be default. 
    * OR an "add" element `/ports/add`
    * OR a plain element (`/ports/generalInfo`)

  * When parent page has isList = false (e.g. `/ports/:portId`), child can be
    * EITHER loader of a LIST, must end with `/berths` for `/ports:portId/berths`
      ++ Always "list" store element, with matching URL 
      ++ MAYBE a "add" element `/ports/:portId/berths/add`
    * OR a view element

* ADDING A View Page Element (`/ports/:portId/allDetails`)
  * Always add it to a page with isList = false

* ADDING An Edit Page Element (`/ports/:portId/editSimplified`)
  * Always add it to a page with isList = false

* ADDING An Add Page Element (`/ports/addSimplified`)
  * Always add it to a page with isList = true

* ADDING A Plain Element
  * Under ANY existing element, globally or local to the element

Testing:
rm -rf testing-app;cp -pr testing-app.START testing-app; node Development/scaffoldizer/bin/scaffoldizer -s Development/js-kit -d testing-app add
rm -rf testing-app;cp -pr testing-app.START testing-app; rm -rf testing-app/node_modules; rm -rf testing-app/server/node_modules;node Development/scaffoldizer/bin/scaffoldizer -s Development/js-kit -d testing-app add everything; cd testing-app; npm install;cd ..

Testing /2:
rm -rf ../example-app/*; cp -pr ../example-app.NEWSTART5/* .
DEBUG="*" node  ../js-kit/bin/jskit.js add
npm run start:dev

Testing /3:
rm -rf ../spain-app/*;cp -pr ../spain-app.BASE/* .
DEBUG="*" node  ../js-kit/bin/jskit.js add
npm run start:dev

EVERYTHING BELOW THIS LINE NEEDS TO BE ADJUSTED



NOTE: The difference between an App element and a Routed/Page element is that a Routed/Page element will call reload() if URL has changed. SO, if
an element is not routed, it will need the data passed to it by the parent

Case 1 -- an PageElement co-view-companies which includes a RoutedElement co-list-companies-people. The PageElement loads the
company data first. Then the co-list-companies-people loads the list of people from the company and displays it.
co-list-companies-people MAY be passed parentData which includes the company info
*NOTE: Elements are contained into one-another. If network fails in the parent, it will be apparent and reload-able
*NOTE 2: In this example, there will be one query for the company, and then one query in People for each displayed company,
AND THEN another query un Addresses for each displayed person.
*NOTE 3: if there is no matched ID in store, it will need to be a queryString by default instead of using the URL

*NOTE 4: If the element is changed into AppElement, no autoload will be done. In that case, "data" MUST be passed by
parent

  A COMPANY
    PageElement (view)
    URL: /view-companies/:id
    Element: co-view-companies
    File: /pages/co-view-companies.js
    Store: companies. Match /view-companies/:id with /companies/:id MATCH: id
    Query: /companies/:[storeParams.id] (UI: match URL's "id" with one of the foreign keys in store People)
    Data: "data" (company's record)
    NOTE: storeParams comes either by the URL (if set, for page elements) or from storeParams which is copied from data


  LIST OF PEOPLE FOR A COMPANY
    RoutedElement (list) WITHIN parent co-view-companies
    NOT URL: /view-companies/:id
    Element: co-list-people
    File: /pages/co-view-companies/elements/co-list-people.js
    Store: people.
    Query: /people?companyId=[storeParams.id] (UI: match URL's "id" with one of the foreign keys in store People)
    Data: "data" (list of all people)
    Props...
      MAYBE parentData (co-view-companies.js calls <co-list-people .parentData="${this.data}") -- this.data is the company info
      MAYBE data (co-view-companies.js calls <co-list-people .data="${this.data.people}") -- this.data.people is the list of people

IMPORTANT REMEMBER: storeParams can be set at every data change, so that it includes all the fields defined as ID in the schema

When this element is created, each row is empty, but with a placeholder to add elements.
Each element could be

  A PERSON WITHIN THE LIST OF PEOPLE FOR A COMPANY
    RoutedElement (view) WITHIN parent co-list-people
    URL: /view-companies/:companyId/people/:personId
    Element: co-view-person
    File: /pages/co-view-companies/elements/co-list-people/elements/co-view-person.js
    Store: people
    Query:/addresses?personId=[storeParams.personId] (UI: ask to match URL's "companyId" and "personId" with foreign keys in addresses, ONLY match personId)
    Props...
      MAYBE parentData (co-list-people.js calls <co-view-person .parentData="${this.data}") (this.data is the full list of people)
      MAYBE data (from co-list-people, which calls <co-view-person .data="${item}")
      MAYBE item (from co-list-people, which calls <co-view-person .item="${item}")
      *NOTE: Needs to find a way to do this. Note that "data" and "item" are the same because this is a view element

  RoutedElement (list) WITHIN parent co-list-people
    URL: /view-companies/:companyId/people/:personId/addresses
    Element: co-list-addresses
    File: /pages/co-view-companies/elements/co-list-people/elements/co-list-addresses.js
    Store: addresses
    Query:/addresses?personId=[params.personId] (UI: ask to match URL's "companyId" and "personId" with foreign keys in addresses, ONLY match personId)
    Props...
      MAYBE parentData (co-list-people.js calls <co-list-addresses .parentData="${this.data}") (this.data is the full list of people)
      MAYBE data (from co-list-people, which calls <co-list-addresses .data="${item.addresses}")
      MAYBE item (from co-list-people, which calls <co-list-addresses .item="${item}")

    *NOTE: Needs to find a way to do this. Note that ".addresses", which is a crucial part


IMPORTANT REMEMBER: MUST find a way so that the storeParams object is either set by routerCallback (depending on the change of URL) or by parent
ALSO IMPORTANT: Do not base reloads on change of store URL



Case 2 -- a PageElement that manages the URL all on its own. E.g. /ports/:portId/berths

Case 2A -- An AppElement which contains a RoutedElement (View) to view the port information,
and another RoutedElement (List) to view the list of berths
NOTE: The list element has no access to port information.

  PageElement (plain)
    URL: /ports/:id
    Element: co-port
    File: /pages/co-port.js

  RoutedElement (view) WITHIN parent co-port.
    URL: /ports/:id
    Element: co-view-port.js
    File: /pages/co-port/elements/co-view-port.js
    Store: ports. Match /ports/:id (page) with /ports/:id (store)

  RoutedElement (list) WITHIN parent co-port
    URL: /ports/:id
    Element: co-list-port-berths.js
    File: /pages/co-port/elements/co-list-port-berths.js
    Store: berths. Match with ports/:id (page) with /berths?portId=XXX




**TODO**
  PageElement
    URL: /view-companies/:id
    Element: co-view-companies
    File: /pages/co-view-companies.js
    Store: companies. Match /view-companies/:id with /companies/:id MATCH: id