Aam-Digital/ndb-core

<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"
        (ngModelChange)="reportChange()"
      >
        <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"
          (ngModelChange)="dateChange()"
          matStartDate
          i18n-placeholder="Date selection for the reporting"
          placeholder="Start date"
        />
        <input
          [(ngModel)]="toDate"
          (ngModelChange)="dateChange()"
          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>