Tg-listv NPM | npm.io

<<<<<<< HEAD

TG-LIST COMPONENT

TgList Component is used to create a listing page in our project. It will assist in creating a left search, header buttons, a listing page, title pages, and data. However, you’ll have to feed data to this component, which will develop the abovementioned components. Below is the syntax of the TgList component.

Installation

$ npm install tg-list

or if you prefer yarn

$ yarn add tg-list

Usage

The installation and usage has change to align with new Vue 3 plugin installation.

To create a new Dynamic Form instance, use the createDynamicForms function;

import { createApp } from 'vue'
import { TgList } from 'tg-list'

export const app = createApp(App)

app.use(TgList)

In your component:

<template>
  <tg-list :ListData="<ARRAY>" :HeaderData="<ARRAY>" IdentityColumn="<STRING>" ModuleName="<STRING>" SubModuleCode="<STRING>"  />
</template>
=======
# TG-LIST COMPONENT
TgList Component is used to create a listing page in our project. It will assist in creating a left search, header buttons, a listing page, title pages, and data. However, you’ll have to feed data to this component, which will develop the abovementioned components. Below is the syntax of the TgList component.

## Installation

```bash
$ npm install tg-list

or if you prefer yarn

$ yarn add tg-list

Usage

The installation and usage has change to align with new Vue 3 plugin installation.

To create a new Dynamic Form instance, use the createDynamicForms function;

import { createApp } from 'vue'
import { TgList } from 'tg-list'

export const app = createApp(App)

app.use(TgList)

In your component:

<template>
  <tg-list :ListData="listData" :HeaderData="headers" IdentityColumn="lead_id" ModuleName="CRM" SubModuleCode="CRM_LEADS">
  </tg-list>
</template>

Following are the details of Tglist component properties

Name	Required?	Default	Type	Description
`IsShowAction`	no	`false`	`boolean`	This property is used to show action cell in data table. If it is true then it will show action column along with the data.
`ModuleName`	yes		`string`	It is the module name for which you are using this TgList component.
`SubModuleCode`	yes		`string`	It is the sub module name for which you are using this TgList component.
`IdentityColumn`	yes		`string`	IdentityColumn is the name of the column which is used as identity (ID) for the data.
`HeaderText`	no		`string`	HeaderText contains a string value. It’s the list header of the Page.
`listType`	no	`['list']`	`array`	To display list view or card view or both. For both you can pass array like `['List','Card']`
`ListData`	yes		`array`	This property contains data from the table.
`HeaderData`	yes		`array`	HeaderData Contains table columns. It will display the table column according to the HeaderData property.
`HeaderButtons`	no	`[]`	`array`	HeaderButtons contains the array of buttons that will display on the top of the list data.
`TotalRecords`	no	`0`	`integer`	It contains the total number of records in the table.
`SearchFields`	no	`[]`	`array`	The SearchField contains search fields by which you can filter list data.
`RenderRowActionMethod`	no		`function`	This property is used to provide each row's actions. This function should return array of list action according to the row. You can use this function property to modify the visibility of list actions.
`ListDataCallBackFunction`	no		`function`	It’s the call-back function that refreshes the list data.
`pager-button-click`	no		`function`	This method triggers when any button is clicked in a pager. This function will contain one parameter which gives the object `{PageSize, PageNumber}`
`header-button-click`	no		`function`	This method triggers when any button provided in the header is clicked. This function will contain one parameter which gives the object `{title, iconClass, callbackfunction, href', additionalClass, isdisabled, isvisible, checkPrivilege}`
`action-button-click`	no		`function`	This method triggers when Any row action button clicked. This function will contain four parameters callbackfunction, item, index, event
`sortdata-button-click`	no		`function`	This method triggers when Any column of list data is sorted. This function will contain one parameter, which includes the column name.

ListData

This property contains the following type of object in the array:

  [
    {
      "rownumber": 1,
      "total_records": 2822,
      "lead_owner_id": "James OSmith",
      ...
    },
    ...
]

List data contains the rows of a table. For example, in an array object, Keys are columns, and values include the column's data.

HeaderData

This Property contains the following type of object in the array:

[
    {
      "COLUMN_NAME": " lead_owner_id ",
      "DATA_TYPE": "date",
      "SORTABLE": true,
      "VISIBLE": true,
      "DISPLAY_NAME": null,
      "DISPLAY_ORDER": 1
    },
    ...
]

Header data contains the detail of table columns as mentioned below:

COLUMN_NAME includes the column's name, the same as the List Data array.
DATA_TYPE defines the type of data.
SORTABLE tells whether it is sortable or not.
VISIBLE means it is visible in the data table or not.
DISPLAY_NAME is the name of the table column header.
DISPLAY_ORDER property defines the order of the column.

HeaderButtons

This Property contains the following type of object in the array:

[{
        "title": 'AddLead',
        "iconClass": 'fa-plus',
        "href": '/CRM/ManageLead/0/No/CRM/CRM_LEADS',
        "additionalClass": '',
        "isdisabled": false,
        "isvisible": true,
        "checkPrivilege": true
    },
    ...
]

Header buttons contain the detail of header buttons as mentioned below:

TITLE shows the button name.
ICONCLASS has the icon class of a button.
HREF includes a button link if it redirects to another component.
ADDITIONALCLASS contains any other class if you want to apply it on a button.
ISDISABLED has a true or false value. If it's true, then the button will show as disabled.
CHECKPRIVILEGE is used to check the privilege of a particular button.

SearchFields

This Property contains the following type of object in the array:

[{
       fieldName: 'Email',
       fieldType: "text",
       fieldIcon: "fa-envelope",
       fieldSearchConditionName: ['LEAD.CLIENT_EMAIL'],
       isSearch: false,
       value: "",
       listOptions: []
   },
   ...
]

Search fields contains the detail of header buttons as mentioned below:

FIELDNAME contains the field name of the left search field.
FIELDTYPE contains the type of field, for example, text, ddl-check, ddlradio, checkbox, select, date, date-range, and radio.
FIELDICON contains the icon class of a search field.
FIELDSEARCHCONDITIONNAME contains the column name you want to create a ‘where clause’ for the backend. It will receive a string array as a value.
ISSEARCH contains true/false values.
VALUE contains the default value of that search field if you want to assign it.
LISTOPTION contains the list with {name, value} object. It is used to show the list under checkbox, radio, etc.

RenderRowActionMethod

This property is used to render actions according to list data. Type of this property is function and whenever you set any function in this property, that function will receive each object of listData and it should return following type of array:

[{
        title:'Follow-Ups',
        callbackfunction:'openAddNewEvent',
        href: 'javascript:void(0)',
        icon: 'fa fa-flag text-muted action-icon',
        class: 'bg-secondary',
        additionalSpan:'',
        isVisible: true
    },
    {
        title:'Edit',
        href: '/CRM/ManageLead/{lead_id}/Yes/CRM/CRM_LEADS',
        icon: 'fa fa-pencil text-success action-icon',
        class: 'bg-success',
        additionalSpan:'',
        isVisible: true
    },
    ...
]

TITLE contains the name of the action button.
CALLBACKFUNCTION contains a function name which is called when you click on this particular action button.
HREF contains the link of any action if it redirects to another component or any page.
CLASS has the icon class of a button.
ICON contains fa icon class for action button.
ADDITIONALSPAN contains contains if you want to add something extra with action icon.
ISVISIBLE action is visible or not.

ListDataCallBackFunction

This property contains a function. This function should be used to refresh list and reload the list data.

pager-button-click

This porperty contains a function which emits when paging action will be performed. Function assigned to this property receive the folloqing object { 'PageNumber': 1, "PageSize": 10 }

header-button-click

This property contains a function which emits when any header button is clicked. Function assigned to this property receive the object of HeaderButtons on which button you have clicked. Example:

{
    "title": 'AddLead',
    "iconClass": 'fa-plus',
    "href": '/CRM/ManageLead/0/No/CRM/CRM_LEADS',
    "additionalClass": '',
    "isdisabled": false,
    "isvisible": true,
    "checkPrivilege": true
}

action-button-click

This property contains a function which emits when any action button is clicked. Function assigned to this property receive 4 parameters:

callbackfunction - Function name which is defined while using renderRowActionMethod property

item - Object of action button

{
   title:'Follow-Ups',
   callbackfunction:'openAddNewEvent',
   href: 'javascript:void(0)',
   icon: 'fa fa-flag text-muted action-icon',
   class: 'bg-secondary',
   additionalSpan:'',
   isVisible: true
}

index - index of object
event - Gets event of that button on which user clicked
sortdata-button-click
This property contains a function which emits when sorting is perform on any column. Function assigned to this property receive one parameter that is name of column on which sorting is performed:

Slots in TgList

Following is an example of tg-list component with slots. There are two slots which is used in tg-list component:

<TgList :listType="['List','Card']" 
      IsShowAction="true" 
      ModuleName="CRM" 
      SubModuleCode="CRM_LEADS" 
      IdentityColumn="lead_id"
      :HeaderText="$t('Leads')" 
      :ListData="LeadData" 
      :HeaderData="Headers" 
      :HeaderButtons="listheaderbuttons"
      :TotalRecords="TotalRecords" 
      :IsSearchFieldsOnTop="false" 
      :SearchFields="leftSearchFields"
      :RenderRowActionMethod="renderActions" 
      :ListDataCallBackFunction="FetchData"
      :widgets="widgets"
      :KanbanDataCallBackFunction="FetchDataKanban" 
      :LegendArray="LegendArray"
      :IsFilterApplied="searchCondition ? true : false" 
      :SortExp="SortExp" :SortBy="SortBy"
      @leftsearch-button-click="leftCommonSearch" 
      @pager-button-click="pagerMethod"
      @header-button-click="commonHeaderButtonClick" 
      @action-button-click="actionButtonClick"
      @sortdata-button-click="sortdata">
      <template v-slot:slotdata="{ data }">
          <template v-if="data.column.COLUMN_NAME == 'status_id'">
              <a class="inactive-disabled">
                  <span v-bind:class="getStatusClass(data.row.status_id, 'status_id')">
                      {{ data.row[data.column.COLUMN_NAME] }}
                  </span>
              </a>
          </template>
      </template>
      <template v-slot:customcard="{ data }">
          <div class="card-box expense-card text-center pb-2 ex-green-bg-light">
              <div class="expense-card-header">
                  <div class="custom-control custom-checkbox">
                      <input type="checkbox" class="chkItems custom-control-input" :value="data.row.lead_id" id="chk_11" v-on:change="data.onchangecheckbox($event, data.row)"/>
                      <label class="custom-control-label universal-custom-control-label pt-1" for="chk_11"></label>
                  </div> 
                  <span class="expense-icon"><i class="fa  fa-file-text-o"></i></span> 
                  <a :value="data.row.lead_id" title="" class="text-truncate expense-title" data-toggle-tooltip="tooltip" style="cursor: default;" :data-original-title="data.row.client_email">{{ data.row.client_email }}</a>
              </div> 
          </div>
      </template>
  </TgList>

`slotdata`

slotdata is used to render custom design or reporcess the value of column data. slotdata contains data parameter which is an object:

{
  row: {
      "rownumber": 1,
      "total_records": 2822,
      "lead_owner_id": "James OSmith",
      ...
  },
  column: {
      "COLUMN_NAME": " lead_owner_id ",
      "DATA_TYPE": "date",
      "SORTABLE": true,
      "VISIBLE": true,
      "DISPLAY_NAME": null,
      "DISPLAY_ORDER": 1
  }
}

`customcard`

customcard is used to render custom design and custom code for card view. This slot is only applicable to the Card View. customcard contains data parameter which is an object:

{
  row: {
      "rownumber": 1,
      "total_records": 2822,
      "lead_owner_id": "James OSmith",
      ...
  },
  columnlist: [{
      "COLUMN_NAME": " lead_owner_id ",
      "DATA_TYPE": "date",
      "SORTABLE": true,
      "VISIBLE": true,
      "DISPLAY_NAME": null,
      "DISPLAY_ORDER": 1
  },
  ...
  ]
}