Tauro Components

This is an Angular library composed of several useful components developed by the team of developers of 3Tecnos Tecnologia.

Three components are available: DataTable, Dialog Confirmation, Dialog Warning, Date Period, Year-Month and UF Selection.

Installation

Run npm install tauro-components --save

Usage

DataTable

Datatable component is based on Angular Material Table and easily configurable. Various features such as expanded row and table export have been made available for: PDF, EXCEL, CSV, XML and PRINT. It was also included pipes to the columns.

Example:

<ta-datatable *ngIf="values.length > 0"
        [apiUrl]="apiUrl"
        [showPaginator]="true"
        [showSearch]="true"
        [showExportButtons]="true"
        emptyDataMessage="Não houve movimentações no período"
        [showCheckbox]="false"
        [disabledToolTipIcons]="true"
        (selectedRows)="selectChange($event)">
        <ta-datacolumns>
            <ta-datacolumn dataPropertyName="NmOrgao" headerText="Órgão"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="NmCargo" headerText="Cargo"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="NmFavorecido" headerText="Favorecido"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="DtSaida" headerText="Saída" pipe="date"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="DtChegada" headerText="Chegada" pipe="date"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="NmDestino" headerText="Destino"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="QtDiaria" headerText="Quantidade"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="VlDiaria" headerText="Diária" pipe="currency"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="VlTotal" headerText="Total" pipe="currency"></ta-datacolumn>
            <ta-datacolumn dataPropertyName="DtPagamento" headerText="Pagamento" pipe="date"></ta-datacolumn>
        </ta-datacolumns>
        <ta-dataexpanded headerText="Histórico" dataPropertyName="DsMotivo" [expanded]="true" [enableExpandedDetail]="true">
        </ta-dataexpanded>
    </ta-datatable>

Parameters

ta-datatable

Input | Type | Default | Description --- | --- | --- | --- apiUrl | string | - | Path of the WebAPI method to get the data that will be displayed in the table [showPaginator] | boolean | false | Displays the table pager [showSearch] | boolean | false | Displays the search field [showExportButtons] | boolean | false | Displays export buttons [showCheckbox] | boolean | false | Displays the checkboxes, allowing you to select the rows [disabledToolTipIcons] | boolean | false | Disables the ToolTip of export buttons emptyDataMessage | string | Não há dados a serem exibidos | Sets the message to be displayed when there is no data (selectedRows) | Array<any> | - | Event that returns selected rows (changeValues) | Array<any> | - | Event that returns all data. Triggered whenever there is a change in the displayed data

ta-datacolumn

Input | Type | Default | Description --- | --- | --- | --- headerText | string | - | Text that will be displayed in the column header dataPropertyName | string | - | Property name of the object to be displayed [disabledSort] | boolean | false | Disables sorting width | string | - | Sets column widtht align | string | - | Sets column alignment pipe | string | - | Sets the pipe that will be used in the column, with the following options: currency and date

ta-dataexpanded

Input | Type | Default | Description --- | --- | --- | --- headerText | string | - | Text that will be displayed in the expanded row header dataPropertyName | string | - | Property name of the object to be displayed lineHeight | string | - | Sets the height of table rows [enableExpandedDetail] | boolean | false | Enables expanded line [expanded] | boolean | false | All expanded lines will be displayed width | string | - | Sets row widtht align | string | - | Sets row alignment pipe | string | - | Sets the pipe that will be used in the expanded row, with the following options: currency and date

ta-datacolumnexpanded

Input | Type | Default | Description --- | --- | --- | --- headerText | string | - | Text that will be displayed in the column header of the expanded table dataPropertyName | string | - | Property name of the object to be displayed width | string | - | Sets row widtht pipe | string | - | Sets the pipe that will be used in the expanded table, with the following options: currency and date

DatePeriod

Component based on the Datepicker of the Angular Material, which provides the start and end date of a given period.

Example:

<ta-date-period widthBetweenDates="10px" (dtStart)="changeDtInicio($event)" (dtEnd)="changeDtFim($event)" ></ta-date-period>

Parameters

Input | Type | Default | Description --- | --- | --- | --- [placeholderStart] | string | Data Início | Set the placeholder of DateStart [placeholderEnd] | string | Data Fim | Set the placeholder of DateEnd [disabled] | boolean | false | Disable dates [widthBetweenDates] | string | 30px | Sets the width between the dates (dtStart) | string | - | Event that returns the start date (dtEnd) | string | - | Event that returns the end date

Year-Month

Component based on the Datepicker of the Angular Material, which provides only the month and year of a date.

Example:

<ta-year-month (value)="changeAnoMes($event)"></ta-year-month>

Parameters

Input | Type | Default | Description --- | --- | --- | --- [placeholder] | string | Mês e Ano | Set the placeholder (value) | any | - | Event that returns the selected month and year