List Page

Shows list of entities in tile,card or grid style

Basic Usage

HTML Structure

<require from="{user_path}/list_pages/list_page"></require>
<cst-list-page get-data-callback.bind="{getDataCallback}" options.bind="{options}" evt-sub-item-click-callback="{evtSubItemClickCallback}" title.bind="{title}" ext-data.bind="{extData}"></cst-list-page>

Bindable Properties

Property Name	Data Type	Required	Decription
getDataCallback	method	Yes	Callback method to get the data
options	object	No	Basic component options
evtSubItemClickCallback	method	No	Method to be called when any clickabel item is clicked
title	object	No	To be shown on the top of page
extData	string	No	Changed data by an outer event

Structure of bindable properties

getDataCallback
getDataCallback(overrideContext, _idArr, _sortingDataObj): returns a data object
data: {
IdArr: []
DetailsArr: []
Options: {} }

sortingDataObj = { property: '', direction: '' }

*If options are coming with data in call back than those options will be considered over the bindable proprty.*

evtSubItemClickCallback
evtSubItemClickCallback(overrideContext, _dataObj, _valueProp, _iconClicked)

options
{
showMoreAfterCount : 5,
tableViewSerialNumHeading: '',
uniqueIdProp: 'Id',
countToLoadNextData: 20,
viewType: {
  type: '',
  variant: ''
},
additionalAttr : {
  attrName: attrValProp
},
displayItems: [
   label: '',
   labelProp: '',
   valueProp: '',
   value: '',
   dataType: '',
   dataTypeFormat: '',
   dataTypeOptions: '',
   separator: '',
   tooltip: '',
   maxChar: '',
   isEvtSubItemClick: '',
   sortByValues: []

] }

*options Properties Description*

Property Name	Data Type	Required	Decription	Possible Values	Default Values
showMoreAfterCount	number	No	Count after which data will be considered as more data	Any Number	5
tableViewSerialNumHeading	string	No	Heading to show Serial Num Column in Table View	Any string	undefined
uniqueIdProp	string	No	Primary key Property of data	Any property name	Id
countToLoadNextData	number	No	How many records should be loaded for next Page	Any Number	20
viewType	object	No	Which View and which variant of view to be shown	Type: 'Tile/Table', Variant: For Type = 'Tile', it can be 'Tile/Card' For Type = 'Table', it can be 'Table/PaginationTable'	Type: 'Tile', Variant: 'Tile'
displayItems	array	No	Information about showing data.	Array	Created from data
sortByValues	array	No	Values to be shown for sorting.	Array	Empty array

*Display Items Properties Description*

Property Name	Data Type	Required	Decription	Possible Values	Default Values
label	string	No	Label to show in front of Value	Any string	''
labelProp	string	No	Property to be mapped in data to get Label	Any property	''
valueProp	string	Yes if DisplayItems given	Property to be mapped in data to get Value	Any property	''
value	string	No	Value to be shown	Any type of data	''
dataType	string	No	Type of data	String/Date/Number/Icons/HTML	String
dataTypeFormat	string	No	Format in which Data needs to be formatted	DD/MM/YYYY,DD-MM-YYYY....	If type is Date then, 'DD/MM/YYYY' else ''
dataTypeOptions	object	No	Options related to data type	Any options	{}
separator	string	No	separator to be used b/w data and value	, ':'...
tooltip	string	No	Title to be shown on hover	Any string	''
maxChar	number	No	Maximum characters of data to be shown	Any number	200
isEvtSubItemClick	boolean	No	Is data clickable or not	true/false	false

title
title = {
message: ''
}

title
sortByValues = [{
label: ''
valueProp: ''
sortDesc: ''
}]

CSS Overriding

Following Classes are given to override CSS:

.page-override : Component Container
.tile-card-view-override: Tile/Card View container
.item-override: Items/Tiles/Cards
.item-override[data-id=${UniqueIdProp}]: Particular Tile/Card
.subitem-override: SubItems
.subitem-override[data-value=${valueProp}]: Particular SubItem
.label-override: Lables
.separator-override: Separators
.value-override: Values
.table-view-override: Table View Container
.row-override: Rows
.row-override[data-id=${UniqueIdProp}]: Particular Row
.column-override: Columns
.column-override[data-value=${valueProp}]: Particular Column

Functionality

Component's

Pass a view type in options to show that particular view.
If View is not passed, we can change the views by clicking on View Type icons.
title can be passed to show a Message on top of Component.

All View's Common

An 'ActionItemClass' and a '${valueProp}ActionClass' can be added to item and subitem respectively to change CSS on any click trigger.

View Type=Tile

Show More icon is added to show/hide More data.
On Scroll End, Next set of data will be loaded.

View Type=Table

To Show/Hide More data Columns can be added/removed from table by checkboxes.

View Variant=PaginationTable

On Scroll End, a pagination bar is shown to navigate through pages.

View Variant=Table

On Scroll End, Next set of data will be loaded.

Working Example

HTML

<template>
  <require from="./shared/core_comp/list_pages/list_page"></require>
  <div>
    <cst-list-page get-data-callback.bind="getDataCallback" options.bind="options" evt-sub-item-click-callback="evtSubItemClickCallback" title.bind="title" ext-data.bind="extData"></cst-list-page>
  </div>
</template>

CSS

    .page-override .tile-card-view-override .subitem-override[data-value='NIT'] {
        width: 100% !important;
    }

class MyCls{
    constructor(){
        this.options = {
            displayItems: [
            {
                valueProp: 'NIT'
            },
            {
                dataType: 'Icons',
                value: [
                    {
                        id: 'Save1',
                        name: 'Save',
                        tooltip: 'Save'
                    },
                    {
                        id: 'Print',
                        name: 'Print',
                        tooltip: 'Print'
                    },
                    {
                        id: 'Phone',
                        name: 'Phone',
                        tooltip: 'Phone'
                    },
                    {
                        id: 'Mail',
                        name: 'Mail',
                        tooltip: 'Mail',
                        isHide: true
                    },
                    {
                        id: 'Save2',
                        name: 'Save',
                        tooltip: 'Save'
                    }],
                    valueProp: 'TopIcons',
                    dataTypeOptions : {
                        title: 'NIT',
                        showMoreAfterCount: 2
                }
            },
            {
                valueProp: 'TenderTitle'
            },
            {
                label: 'Request of Tender Document To',
                valueProp: 'TenderDoc',
                separator: ':&nbsp;'
            },
            {
                valueProp: 'ClosingDate',
                label: 'Tender Closing Date and Time',
                dataType: 'Date',
                dataTypeFormat: 'DD-MM-YYYY HH:mm',
                separator: ':&nbsp;'
            },
            {
                label: 'Estimated Cost',
                valueProp: 'EstimatedCost',
                dataType: 'Number',
                dataTypeFormat: '0,0.0',
                separator: ':&nbsp;'
            },
            {
                label: 'EMD',
                valueProp: 'EMD',
                dataType: 'Number',
                dataTypeFormat: '0,0.0',
                separator: ':&nbsp;'
            },
            {
                label: 'Line',
                valueProp: 'Line',
                separator: ':&nbsp;',
                IsEvtSubItemClick: true
            },
            {
                label: 'Buyer',
                valueProp: 'Buyer',
                separator: ':&nbsp;'
            },
            {
                label: 'Form Fee',
                valueProp: 'FormFee',
                separator: ':&nbsp;'
            },
            {
                valueProp: 'TenderCategory',
                label: 'Category of Tender',
                separator: ':&nbsp;'
            },
            {
                valueProp: 'TenderType',
                label: 'Tender Type',
                separator: ':&nbsp;'
            },
            {
                valueProp: 'Region',
                label: 'Region',
                separator: ':&nbsp;'
            }],
            tableViewSerialNumHeading: 'Serial No.',
            showMoreAfterCount: 6,
            uniqueIdProp: 'Id'
        };
        this.title = {
            message:'Total Tenders: 30'
        };
        this.extData = [];
    }

    evtSubItemClickCallback(overrideContext, dataObj, valueProp, icon){
        
    }

    getDataCallback(overrideContext, idArr) {
    
    }
}
export { MyCls }