List Page Work flow

Bindable Properties

  1. getDataCallback
  2. options
  3. evtSubItemClickCallback
  4. title
  5. extData

Overview

Shows list of entities in tile,card or grid style.

Defaults

  1. If getDataCallback is there and it gives data then only view will be shown.
  2. If options or any other property of options is not there:
  • options : {
       ShowMoreAfterCount: 5,
       CountToLoadNextData: 20,
       UniqueIdProp: 'Id'
    }
  • DisplayItems is formed from data, taking key as Label and Value Prop.
  • Rest of DisplayItems default:
    {
       DataTypeFormat: '',
       Separator: ' ',
       ValueProp: '',
       MaxChar: 200,
       Tooltip: '',
       IsEvtSubItemClick: false
    }
  • DataType is set by checking if data[0] is a date. Else it is set to String.

Breakdown

Data Handling

  • Get data.

  • Set Defaults

    • Maintain an object for data.
    • Set IdArr in that object from data.
    • Assign the options.
    • Convert DetailsArr to an object structure.
      • Ex: {
        options.UniqueIdProp : dataObj
        }
    • Set a LoadedIdArr in maintained data object by getting loaded items from DetailsArr.
    • Set initial view type.
      • If mobile screen, view will be 'Card'.
      • If !mobile then if ViewType given use that else set default.
    • Set DisplayItems
      • If !displayItems.length, then set Label and ValueProp as key of 1st data.
      • Then, assign with common default object.
      • Set DataType by checking if data is Date or else default as 'String'.
      • Set DataTypeFormat, if DataType is 'Date' or 'Number' accordingly.
      • For each dataObj, set the Tooltip by adding given tooltip with full value if data is more than MaxChar.
    • Create Icons Data
      • Get Icons Value from Display Items.
      • Get same value from data.
      • Override Display Items icons obj with data icons obj.
    • Set Table View Data
      • Set if Serial Num column should be added or not.
      • Set a PageIdArr to give separate loaded id's for Pagination View.
      • Set a TableViewIdArr to LoadedIdArr or PageIdArr based on Table View Variant.
      • Pagination Table Data is created:
        • PageIdArr is created from LoadedIdArr.
        • Total Number of pages count is calculated.
        • Page Number arr is created.

On Page Load Design Creation

  • View is divided in two parts: Header and Views.

  • Views will have compose element to decide which view to load.

  • Tile View

    • Tile and Card will share the same view, some classes will be different based on Variant.
    • If $index is less than ShowMoreAfterCount is shown.
    • An absolute positioned div containing Show More icon will be shown.
    • On Click of that icon rest of data is shown with Show Less Icon.
    • If data is of 'Icons' type with ValueProp = 'TopIcons', an absolute positioned div is shown at top right corner of tile/card with icons set component.
    • A scroll event is attached to the container of view.

  • Table View

    • Table and Pagination Table will share the same view.
    • Width of columns is calculated on page load, by taking total width and then dividing equally into number of visible columns.
    • More Columns should be shown whose $index is greater than equal to ShowMoreAfter Count to add/del columns.
    • Scroll event will be attached to Table div.
    • In table, Create a column if Serial Num column has to be created.
    • Show columns if $index is less than ShowMoreAfterCount.
    • Add a pagination bar for pagination table view.

Scroll Event

  • Scroll method is called whenever event is triggered.
  • If scroll reaches the end:
    • For Tile,Card and Table View:
      • Next set of data loading is initiated.
      • idArr is created to get next set of data.
      • Fetch method
        • Check if data for those id's is already loaded then return dataobj.
        • If not call getDataCallback to get data.
        • Once data has come, conert data to proper structure and then return dataObj.
      • Once data is created in proper structure,icons data is created.
    • For Pagination Table View:
      • Show the Pagination Bar
  • If scroll is not at end and view is Pagination Table, Hide the scroll bar.

Pagination Click

  • Next set of data loading is initiated.
  • idArr is created to get next set of data.
  • Fetch method is called.
  • Once data is created in proper structure,icons data is created.
  • Page Numbers are changed

View Types Click

  • Selected view is variable is changed.
  • For Table and Pagination Table, IdArr is set according to view selected.
  • If Table/Pagination Table is loaded for first time their on load method is called.
  • Selected view icon is made active by changing class.

More Data Show/Hide

  • Tile/Card View:

    • On click of ShowMore/ShowLess icon, variable changed.

  • Table/Pagination Table View:

    • On click of the checkboxes, value of variable is changed to show/hide column.
    • Number of visible columns is changed and width is calculated again.