src/app/features/reporting/reporting/select-report/select-report.component.html
<div *ngIf="!reports || reports.length === 0">
<p i18n>Reports have not been configured for you yet.</p>
<a
mat-stroked-button
href="mailto:info@aam-digital.com?subject=Set up reports"
i18n="Button if no reports are configured yet"
>
Ask for a setup call
</a>
</div>
<div *ngIf="reports?.length > 0" class="work-panel">
<div class="flex-row flex-wrap gap-regular">
<mat-form-field>
<mat-label i18n>Select Report</mat-label>
<mat-select [(ngModel)]="selectedReport" [disabled]="loading">
<mat-option *ngFor="let report of reports" [value]="report">
{{ report.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label i18n>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker" [disabled]="loading">
<input
[(ngModel)]="fromDate"
matStartDate
i18n-placeholder="Date selection for the reporting"
placeholder="Start date"
/>
<input
[(ngModel)]="toDate"
matEndDate
i18n-placeholder="Date selection for the reporting"
placeholder="End date"
/>
</mat-date-range-input>
<mat-datepicker-toggle
matIconSuffix
[for]="picker"
></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</div>
<div>
<button
#calculateButton
mat-stroked-button
color="accent"
class="primary-button"
[disabled]="!selectedReport || (!fromDate && !toDate) || loading"
(click)="
calculateClick.emit({
report: selectedReport,
from: fromDate,
to: toDate,
})
"
i18n="Calculate the results for a report"
angulartics2On="click"
angularticsCategory="Reporting"
angularticsAction="calculate"
[angularticsLabel]="selectedReport?.title"
matTooltip="Please select a report and a date range"
i18n-matTooltip
[matTooltipDisabled]="!calculateButton.disabled"
style="pointer-events: all"
>
Calculate
</button>
<button
mat-stroked-button
color="accent"
class="primary-button"
[appExportData]="exportableData"
[disabled]="!exportableData"
format="csv"
filename="report"
style="float: right"
angulartics2On="click"
angularticsCategory="Reporting"
angularticsAction="export"
[angularticsLabel]="selectedReport?.title"
>
<fa-icon
icon="download"
class="standard-icon-with-text"
aria-label="download csv"
></fa-icon>
<ng-container i18n="Button to download data"> Download </ng-container>
</button>
</div>
<div style="clear: both; padding-bottom: 5px"></div>
<mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
</div>