agmission/Development/client/src/app/invoices/invoices-list/invoices-list.component.html

<div class="ui-g">
  <div class="ui-g-12">
    <div class="card clearfix">
      <p-accordion styleClass="agm-accordion" [style]="{'display':'block', 'margin-bottom':'0.75rem'}">
        <p-accordionTab i18n-header="@@searchInvoices" header="Search Invoices" [transitionOptions]="'250ms'" [selected]="searchAccordionOpen"
          (selectedChange)="searchAccordionOpen = $event; onAccordionToggle($event)">
          <agm-dynamic-filter [filterDefinitions]="invoiceFilterDefinitions" [locale]="locale" stateKey="invoices-list-filters" (filtersSubmit)="onFiltersSubmit($event)"></agm-dynamic-filter>
        </p-accordionTab>
      </p-accordion>
      <p-table #il [value]="invoices" [columns]="cols" (firstChange)="restoreTableFirst()" (onPage)="onPageChange($event)" (onFilter)="restoreTableFirst()" selectionMode="multiple" (onRowSelect)="onSelectInvoice($event)" (onRowUnselect)="onUnselectInvoice($event)" [paginator]="true" [rows]="rows1Page[0]" [pageLinks]="5" [rowsPerPageOptions]="rows1Page" [alwaysShowPaginator]="true" stateStorage="session" stateKey="inv-ops" dataKey="_id" mutable="false" [responsive]="true" [resetPageOnSort]="false" [(selection)]="selectedInvoice">
        <ng-template pTemplate="caption">
          <div class="ui-g ui-g-nopad cache-ttl-caption">
            <div class="ui-g-6 ui-sm-12 cache-ttl-caption-title">
              <span class="table-caption-1" style="display:block; text-align:left;" i18n="@@invoiceList">Invoice List</span>
            </div>
            <div class="ui-g-6 ui-sm-12 cache-ttl-caption-controls">
              <input pInputText type="number" min="0" step="1" placeholder="Cache TTL" [(ngModel)]="cacheTtlSeconds"
                (blur)="updateCacheTtl()" style="width: 3.5rem;">
              <span class="cache-ttl-help" tabindex="0">
                <span class="cache-ttl-help-icon">?</span>
                <span class="cache-ttl-help-text">Controls how long results stay cached after you return to this page. Value is in seconds.</span>
              </span>
            </div>
          </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field" [width]="col.width">{{col.header}}<p-sortIcon *ngIf="col.field != 'action'" [field]="col.field"></p-sortIcon></th>
          </tr>
          <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.filtered" class="ui-fluid">
              <div class="input-with-icon" *ngSwitchCase="true">
                <i class="ui-icon-search"></i>
                <input pInputText type="text" (input)="onTextFilter($event, col.field, col.filterMatchMode)" [value]="il.filters[col.field]?.value">
              </div>
              <p-calendar #odf *ngIf="col.field == 'openDate'" selectionMode="range" [(ngModel)]="openDateRange" [locale]="locale" placeholder=" " [readonlyInput]="true" [showButtonBar]="true" [showIcon]="true" [dateFormat]="locale.dateFormat" (onSelect)="handleCalDateRange(openDateRange, col.field, openDateFilter)" (onClearClick)="il.filter('', col.field, 'equals')" (onClose)="closeCal(openDateRange, col.field, openDateFilter)"></p-calendar>
              <p-calendar #ddf *ngIf="col.field == 'dueDate'" selectionMode="range" [(ngModel)]="dueDateRange" [locale]="locale" placeholder=" " [readonlyInput]="true" [showButtonBar]="true" [showIcon]="true" [dateFormat]="locale.dateFormat" (onSelect)="handleCalDateRange(dueDateRange, col.field, dueDateFilter)" (onClearClick)="il.filter('', col.field, 'equals')" (onClose)="closeCal(dueDateRange, col.field, dueDateFilter)"></p-calendar>
              <p-multiSelect *ngIf="col.field === 'status'" [options]="status" [(ngModel)]="statusFilter" i18n-defaultLabel="@@all" defaultLabel="All" (onChange)="onStatusFilter($event)"></p-multiSelect>
              <span *ngSwitchDefault></span>
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-invoice let-rowIndex>
          <tr [pSelectableRow]="invoice" [pSelectableRowIndex]="rowIndex">
            <td class="table-col-center"><span class="ui-column-title">{{cols[0].header}}</span>{{invoice.totalAmount | currency: invoice.currency : 'symbol-narrow' : '1.0-2'}}</td>
            <td class="table-col-center"><span class="ui-column-title">{{cols[1].header}}</span>{{invoice.code}}</td>
            <td class="table-col-center"><span class="ui-column-title">{{cols[2].header}}</span>{{invoice.clientsDisplay}}</td>
            <td class="table-col-center"><span class="ui-column-title">{{cols[3].header}}</span>{{invoice.openDate | date:'shortDate'}}</td>
            <td class="table-col-center"><span class="ui-column-title">{{cols[4].header}}</span>{{invoice.dueDate | date:'shortDate'}}</td>
            <td class="table-col-center"><span class="ui-column-title">{{cols[5].header}}</span>{{ (invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)) | invoiceStatus }}</td>
            <td class="ui-g justify-center" style="gap: 4px;">
              <span class="ui-column-title">{{cols[6].header}}</span>
              <div i18n-pTooltip="@@edit" pTooltip="Edit" class="button-ttip" tooltipPosition="bottom" *ngIf="canEdit">
                <button type="button" pButton icon="ui-icon-edit" (click)="editInvoice(invoice)" [disabled]="! (invoice.status == invoiceStatus.DRAFT || invoice.status == invoiceStatus.OPEN || invoice.status == invoiceStatus.UNCOLLECTIBLE)"></button>
              </div>
              <div i18n-pTooltip="@@viewInvoiceDetail" pTooltip="View Invoice Detail" class="button-ttip" tooltipPosition="bottom">
                <button type="button" pButton icon="ui-icon-document" (click)="viewInvoice(invoice)"></button>
              </div>
            </td>
          </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage">
          <tr>
            <td [attr.colspan]="7">
              <div class="ui-messages-error">
                <ng-container i18n="@@noInvoiceErr">No invoice data.</ng-container>
              </div>
            </td>
          </tr>
        </ng-template>
        <ng-template pTemplate="paginatorleft" let-state>{{ state.totalRecords | i18nPlural: totalInvoices }}</ng-template>
      </p-table>
      <div class="ui-widget-header ui-helper-clearfix toolbar">
        <button type="button" *ngIf="canEdit" [disabled]="selectedInvoice.length == 0" pButton icon="ui-icon-trash" (click)="deleteInvoice()" i18n-label="@@delete" label="Delete"></button>
        <button type="button" [disabled]="selectedInvoice.length == 0" pButton icon="ui-icon-file-download" (click)="exportInvoice()" i18n-label="@@export" label="Export"></button>
      </div>
    </div>
  </div>
</div>

<p-dialog showEffect="fade" [(visible)]="exportDlg" i18n-header="@@export" header="Export" [resizable]="false" [modal]="true" [contentStyle]="{'overflow':'auto'}" [style]="{ width: '500px'}">
  <div class="flex w-full" style="gap: 8px;">
    <div class="ui-g ui-6 export-item" (click)="downloadIIF()">
      <div class="ui-g-12 text-bold" style="font-size: 16px;" i18n="@@exportAsIIF">Export as IIF</div>
      <div class="ui-g-12" i18n="@@forQuickbookDesktop">For QuickBooks Desktop</div>
    </div>
    <div class="ui-g ui-6 export-item" (click)="downloadCSV()">
      <div class="ui-g-12 text-bold" style="font-size: 16px;" i18n="@@exportAsCSV">Export as CSV</div>
      <div class="ui-g-12" i18n="@@forQuickbookOnline">For QuickBooks Online</div>
    </div>
  </div>
  <p-footer>
    <div class="ui-helper-clearfix">
      <button type="submit" style="width: auto;" pButton (click)="cancelExport()" i18n-label="@@cancel" label="Cancel"></button>
    </div>
  </p-footer>
</p-dialog>