Editor can manage the location list in a way that is less error prone than a CSV

[rjcorwin]

Requirements

• Users define the schema of Locations
• Users define the hierarchy of Locations
• Option to import an existing CSV?
• Support for GEO Fences?

Tree Libraries

• Drag and drop nodes in a tree with Angular https://angular2-tree.readme.io/docs/getting-started
• Another tree library but no drag and drop I don't think http://valor-software.com/ng2-tree/

[evansdianga]

Brainstorm

The user should be able to define the root node, child nodes and leaves.

• The nodes should have default attributes of id :uuid and label : string.
• The nodes should have the option of allowing the users to define specific metadata for each node level.
• Each of the metadata should have the following attributes with types as below:
  • id: uuid
  • label : string
  • DataType : string || enum
  • Maximum number of characters : number
  • Required : Boolean. What should be the ideal value it defaults to? true or false?
• The user should be able to define nesting levels as dictated by the use case.
• The user user should potentially be able to define as many child nodes as required by the specific use case.

• The user should be able to perfrom CRUD operations easily and intuitively. What are some of the options we could use?

  • Lazy Loading of the data at each node?
  • Should we load all the data on page initialization? Would the users face performance challenges once the data gets to a certain size? Especially to be considered is the extra metadata we will allow users to enter.
  • Should we lay the hierarchical master view side by side with the detail view as in the current locations editor? Another options would be to use a pop up dialog. What are the usabilty impacts associated with these? What are the othe layout options we have?
  • We could do the CRUD operations in situ without moving to another page by swapping the Angular Components in the detail view
  • We could have basic info of each node shown by implementing a small pop up that reveals on hover. This is to avoid having to go to activate the detail view component in order to view the data
  • What level of filtering should we allow. Shopuld we allow filtering for all node levels or only the first children to the root node?
  • The detail view should not scroll when the hierarchical master view is being scrolled. This is so that one can scroll on the master view while still viewing the detail view.
  • Drag and drop reordering
    • What levels can be reordered or moved to another node. We could allow :
      • Only nodes at same level
      • Move node at level n to level x±n i.e move any node to any node level
  • When Merging Nodes, which node becomes the default?

  References/ Inspiration/ Related Work

  Drupal Taxonomy Manager

  Drupal Taxonomy User Interface

  AngularJS Tree Component

  Tree View with MAterial Design and AngularJS

  React Treeview Component with Google Material Design

  Location Management Tool in Tangerine v2

[evansdianga]

Update

Treeview Component

• Should we have the Treeview be as stored as one document or as several docs?

  • Advantage of having it as one doc
  • Advantage of having it as separate documents
  • If it is one doc, we could use map-reduce to query the docs to improve performance.

• In the Treeview, what detail should we show? The label only? label and metadata? The preferred option would be to have the label show on the Treeview but implement a pop-up component that shows the metadata in response toonMouseOver.

• Each of the node levels could have potentially different metadata and as such it would not be feasible to have move an item at node level n to node level n±1 without running into data inconsistency after the move.

• Full text search that searches for the text across all node levels would be useful.

User Interaction with the Treeview Component

• User Defines the data model and relationships between the entities. i.e. Creates the hierarchical data structure. This relationship is used to generate a data entry form to create the various entities and corresponding relationships.

• The user creates entries using the form

• The default page for viewing the tree data will have all nodes at the first level displayed by default

• The user should be able to expand one node recursively from the first level deep to the last level

• When a node is clicked, the details page should display the key data plus metadata for the node should be displayed to the user

• The user should be able to edit the default data and the metadata for any item at any node level.

  • What kind of edits are allowed or not allowed

[rjcorwin]

@evansdianga If you are playing with Covalent's Dynamic Form Component tomorrow, note some of the things I had to do in the Binder Component to make it work.

1. Make the form inside the child td-dynamic-form component available like it's done here using ViewChild.
2. Make your submit button for the form with a callback like this submit button and access the data in the callback like so.

I may have ruled out formly btw. You can read my update here https://github.com/Tangerine-Community/Tangerine/issues/232#issuecomment-301934929

[evansdianga]

[rjcorwin]

To get your code into client-v3, take a look at the this commit where I add a router to the app module and then refactor the Binder Module to have its own routes. The commit is a bit large. Things to note are...

• ng-binder has an ng-binder-routing module
• The binder-example route resolves to a BinderExample component which acts like a controller that provides data and stuff that into the Binder Component
• The App Module does not import the NG Binder Routing Module, it just import NG Binder which imports NG Binder Routing Module](https://github.com/Tangerine-Community/Tangerine/blob/v3.x.x/client-v3/src/app/app.module.ts)
• The binder-example route is reachable via the App's Component HTML as seen here.

[rjcorwin]

A couple links from our research this morning:

• Basics of web standards of Drag and Drop https://www.html5rocks.com/en/tutorials/dnd/basics/
• A promising demo at "Angular-specific example. Fancy some ngFor?" http://valor-software.com/ng2-dragula/index.html
• A tutorial on Angular with Drag and Drop API that showed us how we can manipulate HTML Element properties with the @HostBinding('<propertyName') decorator and how we can listen for native HTML Element events with the @HostListener() decorator. http://www.radzen.com/blog/angular-drag-and-drop/
• Interesting draggable elements, not in a list, just freeform https://xieziyu.github.io/#/angular2-draggable/demo
• A draggable grid of elements https://bmorton.co.uk/angular/

[rjcorwin]

^ I updated that list with more.

[rjcorwin]

@evansdianga @chrisekelley Bumping this back to ready as I don't think we're currently working on it.

[rjcorwin]

Closing this old ticket in favor of https://github.com/Tangerine-Community/Tangerine/issues/792