src/lib/column-view/column-view.component.ts
The ColumnView Component displays a tree structure on a Mac OSX Finder style.
This component is used with the inputs and outputs mentioned below.
ColumnViewStructure.ColumnViewModel : model - Column view model ;
number : maxColumns - Max column view columns ;
string : mainTitle - Title that is displayed in the header ;
string : leafTitle - leaf title ;
number : columnViewFlexWeight - Weight of the columnView. Flex value assuming that the leaf have the weight of 1 ;
boolean : leafValidation - If the columnView validates the selected leaf ;
boolean : showColumnsHeader - Used to control if the columns header will appear ;
boolean : showActionAdd - Used to control if the header add action will appear ;
boolean : showActionAddPrefilled - Used to control if the header add action with filter will appear ;
boolean : showActionRemove - Used to control if the header remove action will appear ;
boolean | Array<ColumnViewHeaderButtons> : showHeaderByColumn - Tells the component if there has to be an header of a column basis
and if so, what actions will be shown ;
boolean : isOrderable - Used to control if the up and down actions will appear ;
boolean : showActionChangeNumberOfLines - Used to control if the header add lines action will appear ;
boolean : isToShowScannerAction - Used to control if the header bar/qr code scanner action will appear ;
string : changeNumberOfElementsMessage - Used to pass a custom message to show on dropdown of add several lines ;
boolean : showOverallHeader - Used to tell the component to show the header by default but can be used to completely hide it ;
boolean : showOverallFooter - Used to tell the component to show the footer by default but can be used to completely hide it ;
boolean : multiSelection - Controls wether the user can select multiple rows by using a checkbox ;
CustomHeaderTemplate | Array<CustomHeaderTemplate> : showHeaderCustomActionsByColumn - Tells the component if there are custom actions
that will appear on each available columns .
boolean : fullHeight - Tells the component to be full height
AutoSelectInput : autoSelectField - Used to deal with auto-select/autofocus of a given input of leaf. By default do nothing.
boolean : canAddDisabled - Tells the component if new items can be added
boolean : keepSelectionAfterLastValueInput - Used to control if the selection must change after last value's input
boolean : showMultiSelectionToggleAll - Defines if the "toggle all" multi selection checkbox is displayed
boolean : validationByColumn - If this is defined, count the errors on each column and throw a separate message for each one
boolean : useVirtualScroll - Determines if the column view uses virtual scrolling to display rows.
ColumnViewSelectedArgs : selected - Triggered when an item is selected (leaf or node). $event contains the item object selected ;
ColumnViewActionArgs : action - Triggered when an action (inside of a leaf or node) is selected. $event contains the item with the action selected ;
ColumnViewAddArgs : add - Triggered when the action add (on the header) is clicked ;
ColumnsViewScanArgs : scan - Triggered when the action scan (on the header) is clicked ;
ColumnViewRemoveArgs : remove - Triggered when the action remove(inside of a leaf or node) is clicked. $event contains the item that can be removed ;
ColumnViewValidateArgs : validate - Triggered when a validation to a leaf occurs ;
ColumnViewAddArgs : numberOfElementsChanged - Triggered when the action change number of lines changes ;
null : allUnselected - Triggered when no column is selected .
DropOnRowArgs : onReceiveDropInRow - When something was dropped in a row
boolean : onLargeModeChanged - When largeMode changes (true if no longer in mobile mode | false if now in mobile mode)
number : levelDecreased - When the current level of the column view is decreased (back button is clicked)
To use the component, assume this HTML Template as an example:
Example :<cmf-core-controls-columnView [model]="myModel" mainTitle="My Title" max-columns="2" (selected)="onItemSelected($event)">
<!-- Items inserted here will be placed on the top right corner of the component. -->
<!-- Useful for selection modes -->
<div class="top right item"></div>
<leaf-content>
<!-- Your component to show the leaf -->
</leaf-content>
</cmf-core-controls-columnView> public myModel: Controls.ColumnViewModel = {
rootNode: {
id: "root",
name: "Parameter Groups",
children: [
<Controls.ColumnViewNode>{
id: "pmg1",
name: "Parameter Group 1",
children: [
<Controls.ColumnViewLeaf>{
id: "p1",
name: "Parameter Name 1",
value: "1"
},
<Controls.ColumnViewLeaf>{
id: "p1",
name: "Parameter Name 2",
value: "3"
},
<Controls.ColumnViewNode>{
id: "pmg12",
name: "Parameter Group 1",
children: (node: Controls.ColumnViewNode): Promise<Controls.ColumnViewItem[]> => {
return Promise.resolve( [
<Controls.ColumnViewLeaf>{
id: "p1",
name: "Parameter Name 1",
value: "1"
},
<Controls.ColumnViewLeaf>{
id: "p1",
name: "Parameter Name 2",
value: "3"
}
]);
}
}
]
},
<Controls.ColumnViewLeaf>{
id: "pmg2",
name: "Parameter Leaf",
value: "2"
}
]
}
};
CustomizableComponent
OnChanges
OnDestroy
AfterViewChecked
AfterViewInit
OnValidate
| host | { |
| providers |
ValidatorModel
|
| selector | cmf-core-controls-columnView |
| styleUrls | ./column-view.component.less |
| templateUrl | ./column-view.component.html |
| viewProviders |
|
constructor(viewContainerRef: ViewContainerRef, _parentValidatorModel: ValidatorModel, _elementRef: ElementRef, _validatorModel: ValidatorModel, dom: DOMService, zone: NgZone, _columnViewUtil: ColumnViewUtil, _pageBag: PageBag, util: UtilService, device: DeviceService, sanitizer: DomSanitizer)
|
||||||||||||||||||||||||||||||||||||||||||||||||
|
Constructor method that also manages the validator model logic
Parameters :
|
| isToShowScannerAction |
Type : boolean
|
Default value : false
|
|
Used to control if the header scan/qr bar code action will appear |
| title |
Type : string
|
|
Alternative title input |
| useVirtualScroll |
Default value : false
|
|
Determines if the column view uses virtual scrolling to display rows. Note: Row addition or removal is not currently supported with this. |
| Public changeRow | |||||||||
changeRow(event: ColumnViewSelectedArgs, index: number)
|
|||||||||
|
Logic to change the selected row
Parameters :
Returns :
void
|
| Public dealWithInputAutoSelection |
dealWithInputAutoSelection()
|
|
Returns :
void
|
| Public destroyKeyPressListener |
| Deprecated in v11.2, this will result in a no-op |
destroyKeyPressListener()
|
|
Remove the listener for the keypress event
Returns :
void
|
| Public down |
down()
|
|
Moves the cursor to next available position downwards.
Returns :
Promise<void>
|
| Public endLeafEdition | ||||||
endLeafEdition(event: MouseEvent)
|
||||||
|
Event when clicking on leaf back button. Mobile only event
Parameters :
Returns :
void
|
| Public errorCount | ||||||||
errorCount(context: OnValidateArgs)
|
||||||||
|
Returns error count all the rows in the columnView
Parameters :
Returns :
number
error count |
| Public getFlexWeight | ||||||||||||
getFlexWeight(type: ColumnViewPart, normalize)
|
||||||||||||
|
Calculate the flex weight considering the current layout
Parameters :
Returns :
number
|
| Public getParentOfSelectedItem |
getParentOfSelectedItem()
|
|
Get parent of the currently selected item
Returns :
ColumnViewItem
|
| Public goToLeaf | ||||||||
goToLeaf(rowNumber: number)
|
||||||||
|
Goes to the leaf # specified.
Parameters :
Returns :
boolean
|
| Public instantiateKeyPressListener |
| Deprecated in v11.2, this will result in a no-op |
instantiateKeyPressListener()
|
|
Add the listener for the key press event
Returns :
void
|
| Public isAddCopyOnColumnActive | ||||||
isAddCopyOnColumnActive(index: number)
|
||||||
|
Can the remove action be shown for a given index
Parameters :
Returns :
boolean
|
| Public isAddOnColumnActive | ||||||
isAddOnColumnActive(index: number)
|
||||||
|
Can the add action be shown for a given index
Parameters :
Returns :
boolean
|
| Public isBackVisible | ||||||
isBackVisible(index: number)
|
||||||
|
Check if back icon is visible according to visible columns and header mode
Parameters :
Returns :
boolean
|
| Public isChangeNumberOfLinesActive | ||||||
isChangeNumberOfLinesActive(index: number)
|
||||||
|
Determines whether change number of lines active is
Parameters :
Returns :
boolean
true if change number of lines active |
| Public isChangeNumberOfLinesOnColumnActive | ||||||
isChangeNumberOfLinesOnColumnActive(index: number)
|
||||||
|
Can the change number of lines action be shown for a given index
Parameters :
Returns :
boolean
|
| Public isColumnHidden | ||||||
isColumnHidden(columnIndex: number)
|
||||||
|
Verify if a column must be hidden or not
Parameters :
Returns :
boolean
|
| Public isDownArrowDisabled | ||||||
isDownArrowDisabled(index: number)
|
||||||
|
Verify if the down arrow must be disabled (ex: last row of column)
Parameters :
Returns :
boolean
|
| Public isFirstVisibleColumn | ||||||
isFirstVisibleColumn(columnIndex: number)
|
||||||
|
Verify if index is the first visible one
Parameters :
Returns :
boolean
|
| Public isHeaderByColumnActive | ||||||
isHeaderByColumnActive(index: number)
|
||||||
|
Just a simple verification to whether or not the header actions should shown on a column basis
Parameters :
Returns :
boolean
|
| Public isLastVisibleColumn | ||||||
isLastVisibleColumn(columnIndex: number)
|
||||||
|
Verify if index is the last visible one
Parameters :
Returns :
boolean
|
| Public isOrderableOnColumnActive | ||||||
isOrderableOnColumnActive(index: number)
|
||||||
|
Can the up and down actions be shown for a given column index
Parameters :
Returns :
boolean
|
| Public isRemoveOnColumnActive | ||||||
isRemoveOnColumnActive(index: number)
|
||||||
|
Can the remove action be shown for a given index
Parameters :
Returns :
boolean
|
| Public isRemoveOnColumnDisabled | ||||||
isRemoveOnColumnDisabled(index: number)
|
||||||
|
Takes into account if the showHeaderByColumn mode is active, and checks the _selectedRows array for a column basis config, otherwise just uses the selectedRowArgs
Parameters :
Returns :
boolean
|
| Public isRowLocked |
isRowLocked()
|
|
Determines whether row locked is
Returns :
boolean
true if row locked |
| Public isScanOnColumnActive | ||||||
isScanOnColumnActive(index: number)
|
||||||
|
Can the scan bar/qr codes action be shown for a given index
Parameters :
Returns :
boolean
|
| Public isUpArrowDisabled | ||||||
isUpArrowDisabled(index: number)
|
||||||
|
Verify if the up arrow must be disabled (ex: first row of column)
Parameters :
Returns :
boolean
|
| Public moveCursor | ||||||||||||
moveCursor(direction: number, isCycling?: boolean)
|
||||||||||||
|
Move Cursor Horizontally
Parameters :
Returns :
boolean
|
| Public next |
next()
|
|
Moves the cursor to the next element. Opposite of @see previous.
Returns :
void
|
| Public nextColumn |
nextColumn()
|
|
Moves the cursor to the next column.
Returns :
void
|
| Public ngAfterViewChecked |
ngAfterViewChecked()
|
|
ngAfterViewChecked - Check if any element was recently added
Returns :
void
|
| Public ngAfterViewInit |
ngAfterViewInit()
|
|
Angular 2 - After view init
Returns :
void
|
| Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
OnChanges - handle model changes
Parameters :
Returns :
void
|
| Public ngOnDestroy |
ngOnDestroy()
|
|
On component destruction - unsubscribe events.
Returns :
void
|
| Public onAction | ||||||||||||
onAction(event: ColumnViewActionArgs, column: ColumnViewColumnModel, index: number)
|
||||||||||||
|
Parameters :
Returns :
void
|
| Public onAddSeveralLinesSelect |
onAddSeveralLinesSelect()
|
|
On opening change number of lines dropdown.
Returns :
void
|
| Public onArrowDownClick | |||||||||
onArrowDownClick(event: Event, columnIndex: number)
|
|||||||||
|
Move the selected line downwards
Parameters :
Returns :
void
|
| Public onArrowUpClick | |||||||||
onArrowUpClick(event: Event, columnIndex: number)
|
|||||||||
|
Move the selected line upwards
Parameters :
Returns :
void
|
| Public onBackClick | |||||||||
onBackClick(event: MouseEvent, currentIndex?: number)
|
|||||||||
|
Event when clicking on columnView back button
Parameters :
Returns :
void
|
| Public onDropdownSpinnerClickCancel |
onDropdownSpinnerClickCancel()
|
|
On click cancel on change number of lines dropdown, close dropdown
Returns :
void
|
| Public onDropdownSpinnerClickOk | ||||||
onDropdownSpinnerClickOk(index: number)
|
||||||
|
On click Ok on change number of lines dropdown, emit change if value was increased and close the dropdown
Parameters :
Returns :
void
|
| Public onDropInRow |
onDropInRow(args: any, index: number)
|
|
When something is dropped on a row
Returns :
void
|
| Public onHeaderAdd | ||||||||||||
onHeaderAdd(index: number, addPrefilled)
|
||||||||||||
|
Parameters :
Returns :
void
|
| Public onHeaderCopy | ||||||
onHeaderCopy(index: number)
|
||||||
|
Parameters :
Returns :
void
|
| Public onHeaderRemove |
onHeaderRemove(event: Event, enabled: boolean, index: number)
|
|
Determines whether header remove on
Returns :
void
|
| Public onMultiSelectedToggle | |||||||||
onMultiSelectedToggle(event: ColumnViewMultiSelectedToggleArgs, index: number)
|
|||||||||
|
Notify parent component when the multi selection status is toggled for a column's rows
Parameters :
Returns :
void
|
| Public onOrder | ||||||
onOrder(column: ColumnViewItem[])
|
||||||
|
On ColumnView order
Parameters :
Returns :
void
|
| Public onRemove | ||||||||||||
onRemove(event: ColumnViewRemoveArgs, column: ColumnViewColumnModel, index: number)
|
||||||||||||
|
Parameters :
Returns :
void
|
| Public onRowSelected | ||||||||||||
onRowSelected(event: ColumnViewSelectedArgs, column: ColumnViewColumnModel, index: number)
|
||||||||||||
|
onRowSelected - update selected row/index and notify parent component
Parameters :
Returns :
void
|
| Public Async onValidate | ||||||||
onValidate(context: OnValidateArgs)
|
||||||||
|
Validate the columnView rows
Parameters :
Returns :
Promise<boolean>
|
| Public previous | ||||||
previous(moveToLast)
|
||||||
|
Moves the cursor to the previous element. Opposite of @see next.
Parameters :
Returns :
void
|
| Public previousColumn |
previousColumn()
|
|
Moves the cursor to the previous column.
Returns :
void
|
| Public resetSelection |
resetSelection()
|
|
Resets selection - both column and row
Returns :
boolean
|
| Public scanEvent | ||||||||
scanEvent(result: string)
|
||||||||
|
Create a scan event
Parameters :
Returns :
ColumnViewScanArgs
The scan event |
| Public selectRow | ||||||||||||||||||||
selectRow(recvRow: number, recvColumn: number, focus?: boolean, triggerNotification?: boolean)
|
||||||||||||||||||||
|
Selects a specific row in a specific column
Parameters :
Returns :
void
|
| Public setColumn | |||||||||||||||
setColumn(newSelectedIndex: number, focus)
|
|||||||||||||||
|
Sets the cursor on the column with the index specified.
Parameters :
Returns :
void
|
| Public _headerColumns |
Type : any[]
|
Default value : [1]
|
|
Column view header columns |
| Public action |
Type : EventEmitter<ColumnViewActionArgs>
|
Default value : new EventEmitter<ColumnViewActionArgs>()
|
| Public add |
Type : EventEmitter<ColumnViewAddArgs>
|
Default value : new EventEmitter<ColumnViewAddArgs>()
|
| Public allUnselected |
Type : EventEmitter<>
|
Default value : new EventEmitter<null>()
|
| Public alwaysCollapsedMode |
Default value : false
|
|
If true, leaf is always collapsed, and columnView occupies all the available space |
| Public Array |
Default value : Array
|
|
Assigns |
| Public autoSelectField |
Type : AutoSelectInput
|
Default value : null
|
|
Setup auto-select input logic on add event. By default do nothing. |
| Public beforeSelected |
Type : EventEmitter<ColumnViewSelectedArgs>
|
Default value : new EventEmitter<ColumnViewSelectedArgs>(false)
|
| Public canAddDisabled |
Default value : false
|
|
Whether or not new items can be added in the ColumnView |
| Public changeNumberOfElementsMessage |
Type : string
|
Default value : null
|
|
Custom message that appears on change number of lines dropdown. By default is null |
| Public childColumns |
Type : QueryList<ColumnViewColumn>
|
Decorators :
@ViewChildren(ColumnViewColumn)
|
|
Child columns accessor |
| Public childColumnsElementRef |
Type : QueryList<ElementRef>
|
Decorators :
@ViewChildren(ColumnViewColumn, {read: ElementRef})
|
|
Child columns accessor for ElementRef |
| Public columns |
Type : ColumnViewColumnModel[]
|
|
Column view columns |
| Public columnViewFlexWeight |
Type : number
|
|
Weight of the columnView. Flex value assuming that the leaf have the weight of 1 |
| Public copy |
Type : EventEmitter<ColumnViewAddArgs>
|
Default value : new EventEmitter<ColumnViewAddArgs>()
|
| Public elementQuery |
Type : ElementQuery
|
Decorators :
@ViewChild(ElementQuery, {static: true})
|
|
Element Query Accessor |
| Public enumColumnViewPart |
Default value : ColumnViewPart
|
| Public hasLeafContent |
Default value : false
|
|
If the leaf as content or not |
| Public isEditingLeaf |
Default value : false
|
|
if the user is editing a leaf or not |
| Public isMobile |
Default value : this.device.isMobile
|
|
Is mobile device |
| Public isOrderable |
Default value : false
|
|
Used to control if the up and down actions will appear |
| Public keepSelectionAfterLastValueInput |
Default value : false
|
|
Used to control if the selection must change after last value's input |
| Public leafHeaderInnerHTML |
Type : SafeHtml
|
|
HTML of the header title of the column view leaf |
| Public leafTitle |
Type : string
|
Default value : ''
|
|
leaf title |
| Public leafValidation |
Default value : true
|
|
If the columnView validates the selected leaf |
| Public levelDecreased |
Type : EventEmitter<number>
|
Default value : new EventEmitter<number>()
|
|
When the current level of the column view is decreased (back button is clicked) |
| Public mainTitle |
Type : string
|
Default value : null
|
|
Title that is displayed in the header - it becomes the node title upon navigation |
| Public maxColumns |
Type : number
|
Default value : undefined
|
|
Max column view columns |
| Public maxNumberOfElementsOnSpinner |
Type : number
|
Default value : Number.MAX_SAFE_INTEGER
|
|
Maximum value of the number of lines on dropdown |
| Public messages |
Type : object
|
Default value : {
defaultAddSeveralMessage: $localize`:@@cmf-core-controls/column-view#DEFAULT_ADD_SEVERAL_MESSAGE:Number of lines`,
back: $localize`:@@cmf-core-controls/main#actions.navigation.BACK:Back`
}
|
|
Localization Messages |
| Public minimumOfElementsOnSpinner |
Type : number
|
Default value : 0
|
|
Minimum value of the number of lines on dropdown |
| Public model |
Type : ColumnViewModel
|
|
Column view model |
| Public multiSelectedToggle |
Default value : new EventEmitter<ColumnViewMultiSelectedToggleArgs>()
|
| Public multiSelection |
Default value : false
|
|
Controls wether the user can select multiple rows using a checkbox |
| Public numberOfElementsChanged |
Type : EventEmitter<ColumnViewAddArgs>
|
Default value : new EventEmitter<ColumnViewAddArgs>()
|
| Public numberOfElementsSpinner |
Type : number
|
Default value : 0
|
|
Value that appears on change number of lines dropdown |
| Public onBuildContextManualInsert |
Type : ActionButtonBuildContextHandler
|
Default value : () => {...}
|
|
Context building function for Manual Barcode Search |
| Public onBuildContextScan |
Type : ActionButtonBuildContextHandler
|
Default value : () => {...}
|
|
Context building function for Camera Scan |
| Public onLargeModeChanged |
Default value : new EventEmitter<boolean>()
|
|
If true, screen changed to large mode, if false, screen changed to mobile mode. |
| Public onReceiveDropInRow |
Type : EventEmitter<DropOnRowArgs>
|
Default value : new EventEmitter<DropOnRowArgs>()
|
| Public order |
Type : EventEmitter<ColumnViewItem[]>
|
Default value : new EventEmitter<ColumnViewItem[]>()
|
| Public preSelectFirstRow |
Default value : false
|
|
If first row should be pre selected |
| Public remove |
Type : EventEmitter<ColumnViewRemoveArgs>
|
Default value : new EventEmitter<ColumnViewRemoveArgs>()
|
| Public scan |
Type : EventEmitter<ColumnViewScanArgs>
|
Default value : new EventEmitter<ColumnViewScanArgs>()
|
| Public selected |
Type : EventEmitter<ColumnViewSelectedArgs>
|
Default value : new EventEmitter<ColumnViewSelectedArgs>()
|
|
Event emitters |
| Public selectedColumnIndex |
Default value : -1
|
|
Column view selected column index |
| Public selectedRowArgs |
Type : ColumnViewSelectedArgs
|
Default value : null
|
|
Column view selected row args - mainly used to perform row removals |
| Public showActionAdd |
Default value : false
|
|
Used to control if the header add action will appear |
| Public showActionAddPrefilled |
Default value : false
|
|
Used to control if the header add action with filters will appear |
| Public showActionChangeNumberOfLines |
Default value : false
|
|
Used to control if the header change number of lines action will appear |
| Public showActionCopy |
Default value : false
|
|
Used to control if the header copy action will appear |
| Public showActionRemove |
Default value : false
|
|
Used to control if the header remove action will appear |
| Public showColumnsHeader |
Default value : true
|
|
Used to control if the columns header will appear |
| Public showHeaderByColumn |
Type : boolean | ColumnViewHeaderButtons[]
|
Default value : null
|
|
Tells the component if there has to be an header of a column basis and if so, what actions will be shown |
| Public showHeaderCustomActionsByColumn |
Type : CustomHeaderTemplate | CustomHeaderTemplate[]
|
|
Tells the component if there are custom actions that will appear on each available columns |
| Public showMultiSelectionToggleAll |
Default value : false
|
|
Defines if the "toggle all" multi selection checkbox is displayed |
| Public showOverallFooter |
Default value : true
|
|
Tells the component to show the footer by default but can be used to completely hide it |
| Public showOverallHeader |
Default value : true
|
|
Tells the component to show the header by default but can be used to completely hide it |
| Public treeDepth |
Type : number
|
|
The depth of the tree |
| Public useVirtualScroll |
Default value : false
|
|
Determines if the column view uses virtual scrolling to display rows. Note: Row addition or removal is not currently supported with this. |
| Public validate |
Type : EventEmitter<ColumnViewValidateArgs>
|
Default value : new EventEmitter<ColumnViewValidateArgs>()
|
| Public visibleColumns |
Type : number
|
Default value : 1
|
|
Number of visible columns |
| content | ||||||
setcontent(content: ElementRef)
|
||||||
|
Parameters :
Returns :
void
|
| title | ||||||
gettitle()
|
||||||
settitle(title: string)
|
||||||
|
Alternative title input
Parameters :
Returns :
void
|
| emptyColumns |
getemptyColumns()
|
|
Get the and array on column placeholders used to fill up the empty space
Returns :
any[]
|
<ng-container>
<div class="columnView-header-container" *ngIf="showOverallHeader">
<div class="cmf-core-controls-columnView-header" *ngIf="largeMode || !isEditingLeaf" [style.flex]="getFlexWeight(enumColumnViewPart.ColumnView)" [style.margin-right]="hasLeafContent && largeMode ? '32px' : '0px'">
<column-header *ngFor="let column of _headerColumns; let i = index" [class.hidden]="isColumnHidden(i)">
<!--Only show the back control in the first column-->
<div *ngIf="isFirstVisibleColumn(i)" class="header-left">
<div *ngIf="selectedColumnIndex >= 0 && columns.length > 1 && treeDepth >= visibleColumns" class="cmf-core-controls-columnView-header-back" data-action="previous" [style.cursor]="isBackVisible(i) ? 'pointer' : 'default'" (click)="onBackClick($event,i)">
<span class="icon-core-st-sm-previous" data-action="previous" *ngIf="isBackVisible(i)"></span>
<div class="columnView-header-title">
<span *ngIf="visibleColumns > 1"
[title]="columns[selectedColumnIndex - 1] && isBackVisible(i) ?
(columns[selectedColumnIndex - 1].rootNode.title != null ?
columns[selectedColumnIndex - 1].rootNode.title :
columns[selectedColumnIndex - 1].rootNode.name)
: mainTitle"
[innerHTML]="columns[selectedColumnIndex - 1] && isBackVisible(i) ?
(columns[selectedColumnIndex - 1].rootNode.title != null ?
columns[selectedColumnIndex - 1].rootNode.title :
columns[selectedColumnIndex - 1].rootNode.name)
: mainTitle"></span>
</div>
<div class="columnView-header-title">
<span *ngIf="visibleColumns <= 1"
[title]="columns[selectedColumnIndex] && isBackVisible(i) ?
(columns[selectedColumnIndex].rootNode.title != null ?
columns[selectedColumnIndex].rootNode.title :
columns[selectedColumnIndex].rootNode.name)
: mainTitle"
[innerHTML]="columns[selectedColumnIndex] && isBackVisible(i) ?
(columns[selectedColumnIndex].rootNode.title != null ?
columns[selectedColumnIndex].rootNode.title :
columns[selectedColumnIndex].rootNode.name)
: mainTitle"></span>
</div>
</div>
<div class="columnView-header-title" *ngIf="selectedColumnIndex < 0 || columns.length === 1 || treeDepth < visibleColumns">
<span [innerHTML]="mainTitle" [title]="mainTitle"></span>
<ng-content select="[main-title-additional-content]"></ng-content>
</div>
</div>
<!-- Header actions on a column basis when the showHeaderByColumn mode is activated, otherwise a single right floated div -->
<div *ngIf="(showHeaderCustomActionsByColumn || showActionAdd || showActionRemove || showActionCopy || showActionChangeNumberOfLines || isToShowScannerAction || isOrderable || isHeaderByColumnActive(i)) && !isColumnHidden(i)" class="header-actions">
<div *ngIf="!useVirtualScroll() && (isOrderable || isOrderableOnColumnActive(i) === true)" class="action" data-action="down" [class.disabled]="isDownArrowDisabled(i)" (click)="onArrowDownClick($event, i)">
<span class="icon-core-st-sm-downarrow"></span>
</div>
<div *ngIf="!useVirtualScroll() && (isOrderable || isOrderableOnColumnActive(i) === true)" class="action" data-action="up" [class.disabled]="isUpArrowDisabled(i)" (click)="onArrowUpClick($event, i)">
<span class="icon-core-st-sm-uparrow"></span>
</div>
<div *ngIf="!isMobile && (showActionRemove || isRemoveOnColumnActive(i) === true)" class="action" data-action="delete" [class.disabled]="isRemoveOnColumnDisabled(i)"
(click)="onHeaderRemove($event, !isRemoveOnColumnDisabled(i), i)">
<span class="icon-core-st-sm-delete"></span>
</div>
<ng-template [ngIf]="(showActionAdd || isAddOnColumnActive(i) === true) && showActionAddPrefilled" [ngIfElse]="simpleAdd">
<div class="action-multiple-options" [class.disabled]="canAddDisabled">
<cmf-core-controls-actionButtonGroup
class="header-button-group"
icon-class="icon-core-st-sm-add"
buttonSize="Small"
[showLabel]="false">
<cmf-core-controls-actionButtonGroupButton
data-action="add-empty"
i18n-mainTitle="@@cmf-core-controls/column-view#labels.ADD_EMPTY"
mainTitle="Add Empty"
[isDisplayOnly]="true"
(invoke)="onHeaderAdd(i, false)">
</cmf-core-controls-actionButtonGroupButton>
<cmf-core-controls-actionButtonGroupButton
data-action="add-prefilled"
i18n-mainTitle="@@cmf-core-controls/column-view#labels.ADD_PREFILLED"
mainTitle="Add Prefilled"
[isDisplayOnly]="true"
(invoke)="onHeaderAdd(i, true)">
</cmf-core-controls-actionButtonGroupButton>
</cmf-core-controls-actionButtonGroup>
</div>
</ng-template>
<ng-template #simpleAdd>
<div *ngIf="showActionAdd || isAddOnColumnActive(i) === true" class="action" data-action="add" [class.disabled]="canAddDisabled" (click)="onHeaderAdd(i)">
<span class="icon-core-st-sm-add"></span>
</div>
</ng-template>
<div *ngIf="showActionCopy || isAddCopyOnColumnActive(i) === true" class="action" data-action="copy"
(click)="onHeaderCopy(i)">
<span class="icon-core-st-sm-copy"></span>
</div>
<div *ngIf="isToShowScannerAction || isScanOnColumnActive(i) === true" class="action" data-action="scanManual">
<cmf-core-controls-actionButton
[showLabel]="false" buttonSize="Condensed"
button-id="Manufacturing.BarcodeIdentification.ManualInsert"
[build-context]="onBuildContextManualInsert">
</cmf-core-controls-actionButton>
</div>
<div *ngIf="isToShowScannerAction || isScanOnColumnActive(i) === true" class="action" data-action="scanCamera">
<cmf-core-controls-actionButton
[showLabel]="false" buttonSize="Condensed" button-id="Camera.Scan.Code"
[build-context]="onBuildContextScan">
</cmf-core-controls-actionButton>
</div>
<div *ngIf="showActionChangeNumberOfLines || isChangeNumberOfLinesOnColumnActive(i) === true" class="action" data-action="addSeveral" [class.disabled]="isChangeNumberOfLinesActive(i)">
<div cmf-dropdown-class="cmf-core-columnView-addseveral-dropdown">
<cmf-core-controls-dropdown [items]="[{}]" [multiSelection]="true" [immediateSelection]="true" (onOpen)="onAddSeveralLinesSelect()" [customHeader]="true" #dropdownSpinner>
<cmf-core-controls-title-dropdown>
<div style="display: flex;">
<span class="icon-core-st-sm-addlines"></span>
<span class="icon-core-st-lg-caret"></span>
</div>
</cmf-core-controls-title-dropdown>
<ng-template let-item="item">
<div class="wrapper-dropdown-spinner">
<div *ngIf="changeNumberOfElementsMessage == null"> {{messages.defaultAddSeveralMessage}}:</div>
<div *ngIf="changeNumberOfElementsMessage != null"> {{changeNumberOfElementsMessage}}:</div>
<cmf-core-controls-spinner [min]="minimumOfElementsOnSpinner" [max]="maxNumberOfElementsOnSpinner" step="1" valueType="Integer" [(value)]="numberOfElementsSpinner" #spinner>
</cmf-core-controls-spinner>
<div class="dropdown-spinner-buttons">
<button class="cmf-btn" (click)="onDropdownSpinnerClickCancel()" i18n="@@cmf-core-controls/main#actions.CANCEL">Cancel</button>
<button class="cmf-btn cmf-btn-primary" (click)="onDropdownSpinnerClickOk(i)" i18n="@@cmf-core-controls/main#actions.OK">OK</button>
</div>
</div>
</ng-template>
</cmf-core-controls-dropdown>
</div>
</div>
<ng-template [ngIf]="showHeaderCustomActionsByColumn &&
(Array.isArray(showHeaderCustomActionsByColumn) ?
(showHeaderCustomActionsByColumn[i] ?
(showHeaderCustomActionsByColumn[i].onlyOnLastVisible ? isLastVisibleColumn(i) :
(showHeaderCustomActionsByColumn[i].onlyOnActive ? selectedColumnIndex === i :
(showHeaderCustomActionsByColumn[i].columnIndex != null ? showHeaderCustomActionsByColumn[i].columnIndex === i : true))) : false) :
(showHeaderCustomActionsByColumn.onlyOnLastVisible ? isLastVisibleColumn(i) :
(showHeaderCustomActionsByColumn.onlyOnActive ? selectedColumnIndex === i :
(showHeaderCustomActionsByColumn.columnIndex != null ? showHeaderCustomActionsByColumn.columnIndex === i : true))))">
<ng-container *ngTemplateOutlet="$any(showHeaderCustomActionsByColumn).template"></ng-container>
</ng-template>
</div>
<div class="header-right">
<ng-content></ng-content>
</div>
</column-header>
<ng-template [ngIf]="showHeaderByColumn != null">
<column-header *ngFor="let emptyColumn of emptyColumns" class="cmf-core-controls-columnView-body-emptyColumn"></column-header>
</ng-template>
</div>
<div class="leaf-title-container" [style.flex]="getFlexWeight(enumColumnViewPart.Leaf)" *ngIf="hasLeafContent && (largeMode || isEditingLeaf)">
<span class="leaf-title" [innerHTML]="leafTitle" [attr.title]="leafTitle"></span>
<ng-content select="leaf-title"></ng-content>
</div>
</div>
<div class="columnView-body-container"
cmf-core-controls-element-query
[cmfCoreControlsBarcodeElement]="barcodeElementData"
[class.display-small-mode]="!(largeMode) && hasLeafContent"
[class.small-mode]="!(largeMode || !isEditingLeaf) && hasLeafContent"
(barcodeScan)="onBarcodeScan($event)">
<!-- column view -->
<div class="column-container" [style.margin-right]="hasLeafContent && largeMode ? '32px' : '0px'" [style.flex]="getFlexWeight(enumColumnViewPart.ColumnView)" >
<div class="cmf-core-controls-columnView-body" #content>
<cmf-core-controls-columnViewColumn
*ngFor="let column of columns; let i = index"
cmf-core-controls-progressIndicator
[ngClass]="{'cmf-core-controls-columnView-hidden': columns.length <= visibleColumns ? false : (i < (columns.length - visibleColumns)), 'selected': selectedColumnIndex === i, 'first-visible': i === (columns.length - visibleColumns)}"
[model]="column"
[showHeader]="showColumnsHeader"
[isOrderable]="!useVirtualScroll() && (isOrderable || isOrderableOnColumnActive(i))"
[multiSelection]="multiSelection"
[showMultiSelectionToggleAll]="showMultiSelectionToggleAll"
[alwaysCollapsedMode]="alwaysCollapsedMode"
[useVirtualScroll]="useVirtualScroll()"
(selected)="onRowSelected($event, column, i)"
(action)="onAction($event, column, i)"
(remove)="onRemove($event, column, i)"
(order)="onOrder($event)"
(onReceiveDropInRow)="onDropInRow($event, i)"
(multiSelectedToggle)="onMultiSelectedToggle($event, i)">
</cmf-core-controls-columnViewColumn>
<div *ngFor="let emptyColumn of emptyColumns" class="cmf-core-controls-columnView-body-emptyColumn"></div>
</div>
</div>
<!-- leaf -->
<div *ngIf="largeMode || isEditingLeaf" class="leaf-div leaf-container" [ngClass]="{'leaf': hasLeafContent }" [style.flex]="getFlexWeight(enumColumnViewPart.Leaf)">
<!-- title and back arrow -->
<div *ngIf="!largeMode && hasLeafContent" class="leaf-header">
<div class="previous" data-action="previous" (click)="endLeafEdition($event)">
<span class="icon-core-st-sm-previous"></span>
<span [class.link]="columns.length === 1" [innerHTML]="leafHeaderInnerHTML"></span>
</div>
<ng-content select="leaf-header"></ng-content>
<div *ngIf="_selectedRows && _selectedRows[selectedColumnIndex]?.selectedRowArgs?.selectedRow?.rootNode.canRemove
&& !_selectedRows[selectedColumnIndex]?.selectedRowArgs?.selectedRow?.rootNode.skipRemoveOnRowLevel"
class="delete" data-action="delete"
[class.disabled]="model.rootNode?.children.length < 1"
(click)="onHeaderRemove($event, (!_selectedRows[selectedColumnIndex].selectedRowArgs?.selectedRow?.rootNode?.canRemoveDisabled && model.rootNode?.children.length > 0), selectedColumnIndex)">
<span class="icon-core-st-sm-delete"></span>
</div>
</div>
<div class="leaf-content" #leafContent>
<ng-content select="leaf-content"></ng-content>
</div>
</div>
</div>
<!-- footer -->
<div *ngIf="(largeMode || (!largeMode && !isEditingLeaf)) && showOverallFooter" class="colummview-footer">
<div [style.flex]="getFlexWeight(enumColumnViewPart.ColumnView)" [style.margin-right]="largeMode ? '32px' : '0px'">
<ng-content select="columnView-footer"></ng-content>
</div>
<!-- only put space in right of columnView if in largeMode -->
<div *ngIf="largeMode" [style.flex]="getFlexWeight(enumColumnViewPart.Leaf)">
</div>
</div>
</ng-container>
./column-view.component.less
@import (reference) "../../../../cmf-core/assets/style/common/variables.less";
:host {
position:relative;
display:flex;
flex-direction:column;
width: 100%;
}
:host ::ng-deep leaf-content {
flex: 1;
display: flex;
width: 100%;
height: 100%;
>* {
height: auto !important;
width: 100%;
}
}
:host.full-height {
height: 100%;
}
.columnView-header-container{
display:flex;
margin-bottom: 8px;
div.cmf-core-controls-columnView-header {
width: 100%;
display: flex;
flex-direction: row;
column-header {
flex: 1;
display: flex;
justify-content: flex-end;
flex-wrap: wrap-reverse;
width: 100%;
div.header-left {
width: 100%;
flex: 1;
display: flex;
div.cmf-core-controls-columnView-header-back{
display: flex;
span.icon-core-st-sm-previous{
display: flex;
align-items: center;
}
div.columnView-header-title{
display: flex;
align-items: center;
align-self: center;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
div.columnView-header-title{
display: flex;
align-items: center;
align-self: center;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
div.header-actions {
font-size: calc(var(--nano-base-em) + 1.2em)!important;
height: 100%;
float: right;
display: flex;
flex-direction: row-reverse;
margin-left: 5px;
> div.action {
width: calc(var(--font-size-normal-base) + 32px);
text-align: center;
> span {
&:hover {
cursor: pointer;
}
}
&.disabled {
> span {
&:hover {
cursor: default;
}
}
}
}
> div.action-multiple-options {
text-align: center;
&.disabled {
::ng-deep div.icon {
&:hover {
cursor: default;
}
}
}
}
div.action[data-action="addSeveral"] {
width: calc(var(--font-size-big-base) + 36px);
}
}
}
}
div {
overflow: hidden;
text-overflow: ellipsis;
.leaf-title {
white-space: nowrap;
text-overflow: ellipsis;
line-height: 32px;
}
}
}
.wrapper-dropdown-spinner{
display: flex;
flex-direction: column;
.dropdown-spinner-buttons{
padding-top: 15px;
button {
height: 100%;
}
button:first-of-type {
margin-right: 10px;
}
}
}
::ng-deep [cmf-dropdown-class="cmf-core-columnView-addseveral-dropdown"] {
cmf-core-controls-dropdown {
.dropdown-menu{
max-width: 350px !important;
}
.dropdown-items > li {
height: 150px !important;
&:hover {
cursor: initial !important;
}
&:not(.clear-selected-items) {
&:hover,
&.selected,
&>.selected {
background: transparent;
}
}
}
li.k-tick{
background-color: initial !important;
&:hover{
background-color: initial !important;
}
}
.item-checkbox{
display: none !important;
}
}
}
.columnView-body-container{
flex: 1;
display: flex;
height: inherit;
width: 100%;
min-height: 0px;
&:not(.small-mode){
>div {
display: flex;
}
}
&.small-mode {
>div:first-child {
display: none;
height: auto;
}
}
.column-container {
height: 100%;
width: 100%;
overflow: hidden;
}
div.cmf-core-controls-columnView-body {
width: 100%;
display: flex;
flex: 1;
cmf-core-controls-columnviewcolumn{
transition: all 0.2s linear;
vertical-align: top;
border: solid;
border-width: 1px;
border-left-width: 0;
flex: 1;
display: flex;
width: 100%;
overflow: hidden;
position: relative;
&.first-visible{
border-left-width: 1px;
}
&:first-child{
border-left-width: 1px;
}
&.cmf-core-controls-columnView-hidden{
visibility: collapse;
display: none;
overflow: hidden;
flex: 0;
}
}
div.cmf-core-controls-columnView-body-emptyColumn{
flex: 1;
}
}
.leaf-container:not(.leaf){
display: none;
}
.leaf{
flex: 1;
display: flex;
flex-direction: column;
overflow-x: hidden;
.leaf-content{
flex: 1;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
height: 100%;
}
.leaf-header{
cursor: pointer;
line-height: 32px;
display:flex;
align-items: center;
.previous {
margin-right: auto;
align-items: center;
display: flex;
}
.delete.disabled {
> span {
opacity: 0.5;
&:hover {
cursor: default;
}
}
}
}
.icon-core-st-sm-previous:before{
padding-top: 3px;
}
.icon-core-st-sm-delete {
width: 32px;
font-size: calc(var(--font-size-normal-base) + 18px);
line-height: calc(var(--font-size-normal-base) + 32px);
}
}
}
.colummview-footer{
display:flex;
margin-top: 10px;
margin-bottom: 10px;
}