Skip to content

arlas-web-components > "components/results/result-list/result-list.component" > ResultListComponent

Class: ResultListComponent

ResultList component allows to structure data in a filterable and sortable table. Items can be represented as rows or grids and are multi-selectable. For both list and grid modes, each item has detailed data that can be displayed in a togglable space.

Hierarchy

ResultListComponent

Implements

  • OnInit
  • DoCheck
  • OnChanges

Index

Constructors

Properties

Methods


Constructors

constructor

new ResultListComponent(iterableRowsDiffer: IterableDiffers, iterableColumnsDiffer: IterableDiffers, el: ElementRef, colorService: ArlasColorService): ResultListComponent

Defined in components/results/result-list/result-list.component.ts:381

Parameters:

Name Type
iterableRowsDiffer IterableDiffers
iterableColumnsDiffer IterableDiffers
el ElementRef
colorService ArlasColorService

Returns: ResultListComponent


Properties

ANIMATION_TYPES

● ANIMATION_TYPES: object = ANIMATION_TYPES

Defined in components/results/result-list/result-list.component.ts:344

Type declaration

chasingDots: string

circle: string

circleSwish: string

cubeGrid: string

doubleBounce: string

pulse: string

rectangleBounce: string

rotatingPlane: string

threeBounce: string

wanderingCubes: string


CHECK_ALL

● CHECK_ALL: string = "Check all visible items"

Defined in components/results/result-list/result-list.component.ts:76

constant:


CHECK_INBETWEEN

● CHECK_INBETWEEN: string = "Check in between"

Defined in components/results/result-list/result-list.component.ts:72

constant:


FILTER_ON

● FILTER_ON: string = "Filter on"

Defined in components/results/result-list/result-list.component.ts:68

constant:


GEOSORT

● GEOSORT: string = "Geo distance sort"

Defined in components/results/result-list/result-list.component.ts:56

constant:


GEOSORT_ACTIONS

● GEOSORT_ACTIONS: string = "Geo sort actions"

Defined in components/results/result-list/result-list.component.ts:84

constant:


GEOSORT_BUTTON

● GEOSORT_BUTTON: string = "Geo-sort"

Defined in components/results/result-list/result-list.component.ts:96

constant:


GEO_DISTANCE

● GEO_DISTANCE: string = "geodistance"

Defined in components/results/result-list/result-list.component.ts:52

constant:


GLOBAL_ACTIONS

● GLOBAL_ACTIONS: string = "Global actions"

Defined in components/results/result-list/result-list.component.ts:80

constant:


GRID_MODE

● GRID_MODE: string = "Grid mode"

Defined in components/results/result-list/result-list.component.ts:88

constant:


LIST_MODE

● LIST_MODE: string = "List mode"

Defined in components/results/result-list/result-list.component.ts:92

constant:


ModeEnum

● ModeEnum: ModeEnum = ModeEnum

Defined in components/results/result-list/result-list.component.ts:345


SORT_ASCENDING

● SORT_ASCENDING: string = "click for ascending sort"

Defined in components/results/result-list/result-list.component.ts:64

constant:


SORT_DESCENDING

● SORT_DESCENDING: string = "click for descending sort"

Defined in components/results/result-list/result-list.component.ts:60

constant:


SortEnum

● SortEnum: SortEnum = SortEnum

Defined in components/results/result-list/result-list.component.ts:346


actionOnItemEvent

● actionOnItemEvent: Subject<object> = new Subject<{ action: Action, elementidentifier: ElementIdentifier }>()

Defined in components/results/result-list/result-list.component.ts:315

output: : Angular

description: Emits the event of applying the specified action on the specified item.


allItemsChecked

● allItemsChecked: boolean = false

Defined in components/results/result-list/result-list.component.ts:357


borderStyle

● borderStyle: string = "solid"

Defined in components/results/result-list/result-list.component.ts:362


cellBackgroundStyle

● cellBackgroundStyle: CellBackgroundStyleEnum = CellBackgroundStyleEnum.filled

Defined in components/results/result-list/result-list.component.ts:259

input: : Angular

description: The way the cell will be colorized: filled or outlined


clickOnTile

● clickOnTile: Subject<Item> = new Subject()

Defined in components/results/result-list/result-list.component.ts:334

output: : Angular

description: Emits the event of clicking on a grid tile.


colorsSaturationWeight

● colorsSaturationWeight: number = 1 / 2

Defined in components/results/result-list/result-list.component.ts:247

input: : Angular

description: Knowing that saturation scale is [0, 1], colorsSaturationWeight is a factor (between 0 and 1) that tightens this scale to [(1-colorsSaturationWeight), 1]. Therefore saturation of generated colors will be within this tightened scale..


columnFilterChanged

● columnFilterChanged: Subject<Column> = new Subject()

Defined in components/results/result-list/result-list.component.ts:328

output: : Angular

description: Emits the event of applying the specified globalb action on the selected items.


columns

● columns: Array<Column>

Defined in components/results/result-list/result-list.component.ts:336


consultedItemEvent

● consultedItemEvent: Subject<ElementIdentifier> = new Subject()

Defined in components/results/result-list/result-list.component.ts:296

output: : Angular

description: Emits one item identifier that is hovered, selected or clicked on it for consultation purposes.


defautMode

● defautMode: ModeEnum

Defined in components/results/result-list/result-list.component.ts:193

input: : Angular

description: Mode of representation : list or grid.


detailedDataRetriever

● detailedDataRetriever: DetailedDataRetriever = null

Defined in components/results/result-list/result-list.component.ts:169

input: : Angular

description: A detailed-data-retriever object that implements DetailedDataRetriever interface.


detailedGridHeight

● detailedGridHeight: number = 250

Defined in components/results/result-list/result-list.component.ts:150

input: : Angular

description: Height of the detail grid div (Grid Mode).


displayFilters

● displayFilters: boolean = true

Defined in components/results/result-list/result-list.component.ts:204

input: : Angular

description: Whether filters on list are displayed.


displayListGrid

● displayListGrid: string = "inline"

Defined in components/results/result-list/result-list.component.ts:363


displayThead

● displayThead: boolean = true

Defined in components/results/result-list/result-list.component.ts:233

input: : Angular

description: A boolean to show or hide thead of table


● dropDownMapValues: Map<string, Observable<Array<string>>>

Defined in components/results/result-list/result-list.component.ts:228

input: : Angular

description: A map of fieldName- Observable of array value for dropdown filter


fieldsConfiguration

● fieldsConfiguration: FieldsConfiguration

Defined in components/results/result-list/result-list.component.ts:125

input: : Angular

description: A configuration object that sets id field, title field and urls to images && thumbnails


fieldsList

● fieldsList: Array<object>

Defined in components/results/result-list/result-list.component.ts:107

input: : Angular

description: List of the fields displayed in the table (including the id field)

  • fieldName : Name/path of the field to add to list
  • columnName : Name of the field that will be displayed on the list column
  • dataType : Unit of the field values if it exists (degree, percentage, etc)
  • useColorService : Whether to colorize values on cells of the list with a color generated from the field value NOTE : This list should include the ID field. It will be the id of each item

filtersMap

● filtersMap: Map<string, string | number | Date>

Defined in components/results/result-list/result-list.component.ts:221

input: : Angular

description: A fieldName-fieldValue map of fields to filter.


geoAutoSortEvent

● geoAutoSortEvent: Subject<boolean> = new Subject()

Defined in components/results/result-list/result-list.component.ts:283

output: : Angular

description: Emits the event of geo-sorting data.


geoSortActions

● geoSortActions: Array<Action> = [ { id: 'geosort', label: 'Sort by geo distance' }, { id: 'auto-geosort', label: 'Activate auto geo distance sorting' }, { id: 'remove-auto-geosort', label: 'Remove auto geo distance sorting' } ]

Defined in components/results/result-list/result-list.component.ts:368


geoSortEvent

● geoSortEvent: Subject<string> = new Subject()

Defined in components/results/result-list/result-list.component.ts:277

output: : Angular

description: Emits the event of geo-sorting data.


globalActionEvent

● globalActionEvent: Subject<Action> = new Subject()

Defined in components/results/result-list/result-list.component.ts:322

output: : Angular

description: Emits the event of applying the specified globalb action on the selected items.


globalActionsList

● globalActionsList: Action[] = new Array()

Defined in components/results/result-list/result-list.component.ts:162

input: : Angular

description: List of actions to apply on the selected items.


hasGridMode

● hasGridMode: boolean = false

Defined in components/results/result-list/result-list.component.ts:355


highlightItems

● highlightItems: Set<string> = new Set()

Defined in components/results/result-list/result-list.component.ts:187

input: : Angular

description: List of items ids to be highlighted.


indeterminatedItems

● indeterminatedItems: Set<string> = new Set()

Defined in components/results/result-list/result-list.component.ts:175

input: : Angular

description: List of items ids that are in a indeterminated status.


isAutoGeoSortActived

● isAutoGeoSortActived: boolean = false

Defined in components/results/result-list/result-list.component.ts:215

input: : Angular

description: Whether the auto sort on the geometry is activated.


isBodyHidden

● isBodyHidden: boolean

Defined in components/results/result-list/result-list.component.ts:199

input: : Angular

description: Whether the body table is hidden or not.


isDetailledGridOpen

● isDetailledGridOpen: boolean = false

Defined in components/results/result-list/result-list.component.ts:359


isGeoSortActived

● isGeoSortActived: boolean = false

Defined in components/results/result-list/result-list.component.ts:210

input: : Angular

description: Whether the sort on the geometry is activated.


isMoreDataRequested

● isMoreDataRequested: boolean = false

Defined in components/results/result-list/result-list.component.ts:354


items

● items: Array<Item> = new Array()

Defined in components/results/result-list/result-list.component.ts:337


keysToColors

● keysToColors: Array<[string, string]>

Defined in components/results/result-list/result-list.component.ts:239

input: : Angular

description: List of [key, color] couples that associates a hex color to each key


moreDataEvent

● moreDataEvent: Subject<number> = new Subject()

Defined in components/results/result-list/result-list.component.ts:309

output: : Angular

description: Emits the request of more data to load. The emited number is the number of times this event has been emitted.


nLastLines

● nLastLines: number = 5

Defined in components/results/result-list/result-list.component.ts:138

input: : Angular

description: When the last - n line is reached, more data is requested.


nbGridColumns

● nbGridColumns: number = 3

Defined in components/results/result-list/result-list.component.ts:156

input: : Angular

description: Number of grid columns (Grid Mode).


resultMode

● resultMode: ModeEnum = this.defautMode

Defined in components/results/result-list/result-list.component.ts:356


rowItemList

● rowItemList: Array<Map<string, string | number | Date>>

Defined in components/results/result-list/result-list.component.ts:118

input: : Angular

description: List of fieldName-fieldValue map. Each map corresponds to a row/grid


searchSize

● searchSize: any

Defined in components/results/result-list/result-list.component.ts:144

input: : Angular

description: Number of new rows added each time the last - n line is reached.


selectedGridItem

● selectedGridItem: Item

Defined in components/results/result-list/result-list.component.ts:264

input: : Angular

description: A item to show detail


selectedItems

● selectedItems: Set<string> = new Set()

Defined in components/results/result-list/result-list.component.ts:181

input: : Angular

description: List of items ids that are in a selected status.


selectedItemsEvent

● selectedItemsEvent: Subject<Array<string>> = new Subject>()

Defined in components/results/result-list/result-list.component.ts:289

output: : Angular

description: Emits the list of items identifiers whose checkboxes are selected.


setFiltersEvent

● setFiltersEvent: Subject<Map<string, string | number | Date>> = new Subject>()

Defined in components/results/result-list/result-list.component.ts:302

output: : Angular

description: Emits the filtred fields map (fieldName-fieldValue map).


sortColumnEvent

● sortColumnEvent: Subject<object> = new Subject<{ fieldName: string, sortDirection: SortEnum }>()

Defined in components/results/result-list/result-list.component.ts:270

output: : Angular

description: Emits the event of sorting data on the specified column.


sortedColumn

● sortedColumn: object

Defined in components/results/result-list/result-list.component.ts:338

Type declaration

fieldName: string

sortDirection: SortEnum


tableWidth

● tableWidth: number = null

Defined in components/results/result-list/result-list.component.ts:132

input: : Angular

description: The table width. If not specified, the tableWidth value is equal to container width.


tbodyHeight

● tbodyHeight: number = null

Defined in components/results/result-list/result-list.component.ts:341


theadHeight

● theadHeight: number = null

Defined in components/results/result-list/result-list.component.ts:342


useColorService

● useColorService: boolean = false

Defined in components/results/result-list/result-list.component.ts:253

input: : Angular

description: Whether to allow colorizing cells and the grid tile of the list.


Methods

askForMoreData

askForMoreData(moreDataCallsCounter: number): void

Defined in components/results/result-list/result-list.component.ts:482

description: Emits the event of asking for more items to fetch

Parameters:

Name Type Description
moreDataCallsCounter number Counts the event's emission occurence

Returns: void


closeDetail

closeDetail(isClosed: boolean): void

Defined in components/results/result-list/result-list.component.ts:609

Parameters:

Name Type
isClosed boolean

Returns: void


columnChanged

columnChanged(colum: Column): void

Defined in components/results/result-list/result-list.component.ts:682

description: Emits the column when a filter is addedd

Parameters:

Name Type
colum Column

Returns: void


geoSort

geoSort(): void

Defined in components/results/result-list/result-list.component.ts:568

description: Emits the request event of geo-sorting

Returns: void


ngDoCheck

ngDoCheck(): void

Defined in components/results/result-list/result-list.component.ts:462

Returns: void


ngOnChanges

ngOnChanges(changes: SimpleChanges): void

Defined in components/results/result-list/result-list.component.ts:408

Parameters:

Name Type
changes SimpleChanges

Returns: void


ngOnInit

ngOnInit(): void

Defined in components/results/result-list/result-list.component.ts:398

Returns: void


selectAllItems

selectAllItems(): void

Defined in components/results/result-list/result-list.component.ts:634

description: Selects all the items

Returns: void


selectInBetween

selectInBetween(): void

Defined in components/results/result-list/result-list.component.ts:653

description: Selects all the items between the farest and nearest selected items

Returns: void


setBorderStyle

setBorderStyle(borderStyle: any): void

Defined in components/results/result-list/result-list.component.ts:592

description: Sets the border style of rows

Parameters:

Name Type
borderStyle any

Returns: void


setConsultedItem

setConsultedItem(identifier: string): void

Defined in components/results/result-list/result-list.component.ts:581

description: Sets and emits the hovered item's identifier

Parameters:

Name Type
identifier string

Returns: void


setFilters

setFilters(filtersMap: Map<string, string | number | Date>): void

Defined in components/results/result-list/result-list.component.ts:524

description: Sets and emits the [fieldName, filterValue] map of filtered fields

Parameters:

Name Type
filtersMap Map<string, string

Returns: void


setGeoSortAction

setGeoSortAction(action: Action): void

Defined in components/results/result-list/result-list.component.ts:501

Parameters:

Name Type
action Action

Returns: void


setGlobalAction

setGlobalAction(action: Action): void

Defined in components/results/result-list/result-list.component.ts:497

description: Sets and emits the action to apply to all selected items

Parameters:

Name Type
action Action

Returns: void


setItemsPositionsList

setItemsPositionsList(item: Item): void

Defined in components/results/result-list/result-list.component.ts:671

description: Sets the positions list of the selected items

Parameters:

Name Type
item Item

Returns: void


setSelectedGridItem

setSelectedGridItem(item: Item): void

Defined in components/results/result-list/result-list.component.ts:599

description: Sets the selected grid item

Parameters:

Name Type
item Item

Returns: void


setSelectedItems

setSelectedItems(selectedItems: Set<string>): void

Defined in components/results/result-list/result-list.component.ts:532

description: Sets and emits the identifiers list of selected items

Parameters:

Name Type
selectedItems Set<string>

Returns: void


sort

sort(sortedColumn: Column): void

Defined in components/results/result-list/result-list.component.ts:545

description: Emits the column to sort on and the sort direction

Parameters:

Name Type
sortedColumn Column

Returns: void


triggerActionOnItem

triggerActionOnItem(actionOnItem: object): void

Defined in components/results/result-list/result-list.component.ts:490

description: Emits which action to apply on which item/product

Parameters:

actionOnItem: object

Name Type
action Action
elementidentifier ElementIdentifier

Returns: void


whichMode

whichMode(toggleChangeEvent: MatButtonToggleChange): void

Defined in components/results/result-list/result-list.component.ts:620

description: Sets the display style according to the mode

Parameters:

Name Type
toggleChangeEvent MatButtonToggleChange

Returns: void