Dangl.AngularAva

@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. Additionally, it has components for displaying invoice views for e.g. the XRechnung standard for electronic invoices.

AVACloud by DanglIT GmbH is one way of creating such data structures.

Usage

Import the Component

import { AvaTreeComponent } from "@dangl/angular-ava";

@Component({
  imports: [AvaTreeComponent],
})
export class AppComponent {}

Use the Component

<ava-tree [project]="projectData" [config]="config"> </ava-tree>

projectData must be of type ProjectDto.

Configuration

export interface IConfigurationTree {
  /**
   * 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%.
   */
  indent?: string;

  /**
   * 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.
   */
  selectedColor?: string;

  /**
   * 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.
   */
  allowDblClick?: boolean;

  /**
   * 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.
   */
  isSelectionMode?: boolean;

  /**
   * You can optionally supply a list of elements that should be selected initially. This is only used if isSelectionMode is true.
   */
  initiallySelectedElements?: SelectedElement[];

  /**
   * 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. You may optionally just submit the string values 'en' or 'de' to use the default text words for English or German.
   */
  textWords?: ITextWords | "en" | "de";

  /**
   * 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.
   */
  mouseAwareKeyboardControl?: boolean;

  /**
   * 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
   */
  customKeyboardOperationConfig?: IKeyboardOperationConfig | null;

  /**
   * 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.
   */
  listFilterFunc?: FilterFunction[];

  /**
   * 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'
   * }
   */
  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 needed
   *     func: (element: any, result?: any) => boolean,  // this filter function calculates conditions to change the 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
   *     }
   *   }
   */
  functionView?: IFunctionViewLine[];
}

You can also supply the following input parameters

  /**
   * 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.
   */
  readonly expansionstate = input<IExpansionState | null, IExpansionState>(null, {
    transform: this.transformFn<IExpansionState>
  });

  /**
   * Optionally, you can supply the id of the node that should be selected in the tree initially.
   */
  readonly selectednodeid = input<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.
   */
  readonly modeview = input<ModeViewType>(ModeViewType.Tree);

Output Parameters

/**
* 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[]>();

Invoice Module

There is also an InvoiceDisplayComponent available that can be used to show invoice objects.

Usage

Import the Component

import { InvoiceDisplayComponent } from "@dangl/angular-ava";

@Component({
  imports: [InvoiceDisplayComponent],
})
export class AppComponent {}

Use the Component

<ava-invoice-display
  [invoice]="INVOICE"
  [config]="config"
></ava-invoice-display>

INVOICE must be of type Invoice.

Configuration

export interface IConfigurationInvoice {
  //** If specified, the invoice viewer will use the given textWords for the text in the UI. */
  textWords?: ITextWordInvoice | null;

  //** If specified, the invoice viewer will use non-interactive display features, . */
  pdfViewEnabled?: boolean;

  //** If specified, the invoice viewer will use the given language for the text in the UI. */
  language?: LanguageType; // type LanguageType = 'en' | 'de';

  //** This controls how many digits are displayed for quantities. It defaults to '1.3-3', meaning it will always show three decimal palces. */
  quantityDecimalPlaces?: string;

  //** If specified, the invoice color settings will be used for the invoice viewer.*/
  colorSettings?: IColorSettings | null;
}