@dangl/angular-ava
is an UI library for Angular applications. It's used to render trees of AVA Projects. AVA in German stands for Ausschreibung, Vergabe & Abrechnung (Tendering, awarding & billing), they represent services and elements of construction projects.
AVACloud by DanglIT GmbH is one way of creating such data structures.
import { AngularAvaModule } from '../../projects/angular-ava/src/lib/angular-ava.module';
@NgModule({
declarations: [AppComponent],
imports: [AngularAvaModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
<ava-tree [project]="projectData" (selectClick)="selected($event, 0)">
</ava-tree>
projectData
must be of type ProjectDto
.
/**
* This is the main data element for the tree structure. You should supply a ProjectDto with
* exactly one service specification in it.
*/
@Input() project: ProjectDto | null = null;
/**
* Optionally, you can supply a map of expansion states for the tree. The keys should be the
* id properties of the elements in the tree, and the values should be true if the element is
* expanded, and false if it is collapsed.
*/
@Input() expansionState: { [id: string]: boolean } = {};
/**
* Optionally, you can supply the id of the node that should be selected in the tree initially.
*/
@Input() selectedNodeId: string | null = null;
/**
* Optional, defaults to 20px. If this is set, then the tree will be indented by the given value each level.
* This can be any valid CSS value for the padding-left property, such as 20px, 1em, or 5%.
*
*/
@Input() indent = '20px';
/**
* Optional, you can supply a color to be used as the background color for the selected line. Defaults to the primary
* color from the Material theme, which is #00acc1.
*/
@Input() selectedColor: string | null = null;
/**
* You can specify which view type to use for the tree. The default is ModeViewType.Tree, but you can also use
* ModeViewType.List or ModeViewType.Table.
*/
@Input() modeView: ModeViewType = ModeViewType.Tree;
/** Optional, defaults to true. If this is disabled, then the double click event for elements is not raised,
* and clicking on an elemt sends an immediate result since the component has not to wait and check if a double click event
* is fired.
*/
@Input() allowDblClick = true;
/**
* If this is set to true, then the tree will be in selection mode, and the user can select elements
* by clicking on them. The selected elements will be emitted in the selectedElementsChanged event.
*/
@Input() isSelectionMode = false;
/**
* You can optionally supply a list of elements that should be selected initially. This is only used if
* isSelectionMode is true.
*/
@Input() initiallySelectedElements: SelectedElement[] | null = null;
/**
* You can supply a map of strings to be used for the text in the tree. This allows you to translate
* the text in the tree to other languages. There are also 'DEFAULT_TEXT_WORDS' and 'germanTextsAva'
* supplied with the package.
* {
* textSearch: string,
* textNothing: string,
* textNothingFiltered: string,
* textAll: string,
* tooltipAllOpen: string,
* tooltipAllClose: string,
* tooltipAllAdd:string,
* tooltipAllRemove: string,
* }
*/
@Input() set textWords(words: ITextWords | null)
/**
* Defaults to true. If this is enabled, then navigating in the tree with the keyboard only works
* if the mouse is over the tree area. This limitation is useful if you have multiple trees or other components
* that might be using keyboard input.
*/
@Input() mouseAwareKeyboardControl = true;
/**
* With this parameter, you can configure which keys will be listenend to to switch the tree elements,
* and also to disable the functionality of the keys */
@Input() set customKeyboardOperationConfig(config: IKeyboardOperationConfig) {
this.keyboardOperationService.mergeConfigOperation(config);
}
/**
* You can supply custom filters that are processed when the filter input is changed. Default filters are used
* that check for short text and item number matches, and you can either add custom filters or replace the default ones.
*/
@Input() listFilterFunc = DEFAULT_FILTERS;
/**
* Optional. For table views, this allows you to add custom columns to the table.
* addTableColumns: Array of objects
* {
* name: string, // name of column
* title: string, // showed title of column
* align?: string, // optional alight: left(default) / center / right
* numberFormat?: string // optional format of number value, example: '1.2-2'
* }
*/
@Input() addTableColumns: TableColumnType[] = [];
/**
* This allows you to supply a list of functions that can be used to change the appearance of elements.
* They objects contain a predicate function that is evaluated, along with an option to configure the
* appearance of the element.
* functionView: Array of objects
* {
* name: string, // name of view part: you can add/remove it when it need
* func: (element: any, result?: any) => boolean, // this filter function calculate condition to change view
* view: {
* iconName?: string, // changed name of icon
* iconColor?: string, // changed color of icon
* textBold?: string, // changed weight of text
* textColor?: string // changed color of text
* }
* }
*/
@Input() functionView: IFunctionViewLine[] | null = null;
/**
* This is emitted when an element is selected by clicking on it. The selected element is emitted as the event value.
*/
@Output() selectClick = new EventEmitter<IElementDto | null>();
/**
* This is emitted when an element is selected by double clicking on it. The selected element is emitted as the event value.
*/
@Output() selectDblClick = new EventEmitter<IElementDto>();
/**
* This is emitted when an element is selected by right clicking on it. The selected element is emitted as the event value.
*/
@Output() contextMenuEvent = new EventEmitter<ContextMenuDataType>();
/**
* This is emitted when the selected elements in the tree are changed. The selected elements are emitted as the event value.
* Selected elements are elements whose checkboxes are checked, and are different than elements that are in an active selection state.
* Typcial use cases for this include e.g. selecting multiple elements within a service specification without
* actually focussing them, e.g. for further processing.
*/
@Output() selectedElementsChanged = new EventEmitter<SelectedElement[]>();
There is also an InvoiceDisplayComponent
available that can be used to show invoice objects. It can be configured to use DEFAULT_TEXT_WORD_INVOICE
or germanTextsInvoice
or any custom implementation of ITextWordInvoice
in it's textWords
input property.