search.component.html

<div class="p-grid table-demo search-container" style="padding-right: 0">
  <div class="p-col-12" style="padding-right: 0">
    <div class="card">
      <div class="p-grid table-demo grid-container">
        <div class="p-col-3">
          <form [formGroup]='searchForm'>
            <p-table dataKey="id" styleClass="p-datatable-customers" [filterDelay]="0" [rows]="10"
              selectionMode="single">
              <ng-template pTemplate="caption">
                <div class="p-d-flex p-flex-column p-flex-md-row p-jc-md-between table-header"
                  style="font-size: 1.5rem">
                  {{ 'Search filters' | translate }}
                </div>
              </ng-template>
            </p-table>
            <div class="filter-container">
              <span class="p-input-icon-right p-float-label">
                <i class="pi pi-search"></i>
                <input id="float-input" pInputText type="text" [formControl]="SearchInputControl" />
                <label for="float-input">{{ 'Search in title of procedures and documents contents' | translate }}</label>
              </span>
            </div>

            <p-accordion class="accordion">
              <p-accordionTab header="Ulteriori filtri di ricerca" class="accordion" [selected]="true">

                <div class="filter-container first">
                  <span class="p-input-icon-right p-float-label">
                    <p-autoComplete id="float-input-instance" [formControl]="InstanceTypeControl"
                      [suggestions]="filteredInstanceTypes" (completeMethod)="filterInstanceType($event)"
                      [dropdown]="true" field="name" [style]="instanceTypeStyle" [forceSelection]="true">
                      <ng-template let-instance pTemplate="item">
                        <div>{{ instance.name }}</div>
                      </ng-template>
                    </p-autoComplete>
                    <label for="float-input-instance">{{ 'Instance type' | translate }}</label>
                  </span>
                </div>

                <div class="filter-container">
                  <span class="p-input-icon-right p-float-label">
                    <i class="pi pi-search"></i>
                    <input id="float-input-protocolnumber" pInputText type="text"
                      [formControl]="ProtocolNumberControl" />
                    <label for="float-input-protocolnumber">{{ 'Protocol number' | translate }}</label>
                  </span>
                </div>

                <div class="filter-container">
                  <span class="p-input-icon-right p-float-label">
                    <p-autoComplete id="float-input-status" [formControl]="SelectedStatusControl"
                      [suggestions]="filteredProcedureStatusTypes" (completeMethod)="filterProcedureStatusType($event)"
                      [dropdown]="true" field="label" [style]="instanceTypeStyle" [forceSelection]="true">
                      <ng-template let-procedureStatus pTemplate="item">
                        <div>{{ procedureStatus.label | translate }}</div>
                      </ng-template>
                    </p-autoComplete>
                    <label for="float-input-status">{{ 'Procedure statuses' | translate }}</label>
                  </span>
                </div>

                <div class="filter-container">
                  <span class="p-input-icon-right p-float-label">
                    <i class="pi pi-search"></i>
                    <input id="float-input-taxcode" pInputText type="text" [formControl]="TaxCodeControl" />
                    <label for="float-input-taxcode">{{ 'Requester tax Code or of one of his delegates' | translate }}</label>
                  </span>
                </div>

                <div class="filter-container">
                  <span class="p-input-icon-right p-float-label">
                    <i class="pi pi-search"></i>
                    <input id="float-input-firstName" pInputText type="text"
                      [formControl]="RequesterFirstNameControl" />
                    <label for="float-input-firstName">{{ 'Requester first name or of one of his delegates' | translate }}</label>
                  </span>
                </div>

                <div class="filter-container">
                  <span class="p-input-icon-right p-float-label">
                    <i class="pi pi-search"></i>
                    <input id="float-input-lastName" pInputText type="text" [formControl]="RequesterLastNameControl" />
                    <label for="float-input-lastName">{{ 'Requester last name or of one of his delegates' | translate }}</label>
                  </span>
                </div>

                <div class="filter-container p-d-flex">
                  <span class="p-float-label calendar-container">
                    <p-calendar showButtonBar="true" [formControl]="StartDateControl" [showIcon]="true"
                      inputId="startdate-icon" class="my-p-calendar" dateFormat="dd-mm-yy" [readonlyInput]="true">
                    </p-calendar>
                    <label for="startdate-icon">{{ 'Starting date' | translate }}</label>
                  </span>
                </div>

                <div class="filter-container p-d-flex">
                  <span class="p-float-label calendar-container">
                    <p-calendar showButtonBar="true" [formControl]="EndDateControl" [showIcon]="true"
                      inputId="enddate-icon" class="my-p-calendar" dateFormat="dd-mm-yy" [readonlyInput]="true">
                    </p-calendar>
                    <label for="enddate-icon">{{ 'Ending date' | translate }}</label>
                  </span>
                </div>

              </p-accordionTab>
            </p-accordion>

            <div class="buttons-container">
              <p-button (onClick)="search(0, 10)"
                [disabled]='!searchForm.get("searchInput").value && !searchForm.get("instanceType").value && !searchForm.get("protocolNumber").value && !searchForm.get("selectedStatus").value && !searchForm.get("taxCode").value && !searchForm.get("requesterFirstName").value && !searchForm.get("requesterLastName").value && !searchForm.get("startDate").value && !searchForm.get("endDate").value'>
                {{ 'Research' | translate }}</p-button>
              <p-button class="clear-button" (onClick)="clear()"
                [disabled]='!searchForm.get("searchInput").value && !searchForm.get("instanceType").value && !searchForm.get("protocolNumber").value && !searchForm.get("selectedStatus").value && !searchForm.get("taxCode").value && !searchForm.get("requesterFirstName").value && !searchForm.get("requesterLastName").value && !searchForm.get("startDate").value && !searchForm.get("endDate").value'>
                {{ 'Clear' | translate }}</p-button>
            </div>
          </form>
        </div>
        <div *ngIf="!showTabs && !isLoading && !hasError" class="p-col-9 message-container">
          <p>{{ 'Please search something.' | translate }}</p>
        </div>

        <div *ngIf="isLoading" class="p-col-9 message-container">
          <p-progressSpinner></p-progressSpinner>
        </div>
        <div *ngIf="hasError && !isLoading" class="error-message-container p-col-9">
          <p>{{ 'Data Loading Error' | translate }}</p>
        </div>

        <p-tabView *ngIf="showTabs" [hidden]="isLoading || hasError" class="p-col-9" styleClass="tabview-custom">
          <p-tabPanel>
            <ng-template pTemplate="header">
              <span class="tab-header">{{ 'Instances results' | translate }}</span>
              <p-badge [value]="totalProceduresRecords" styleClass="p-mr-2"></p-badge>
            </ng-template>
            <p-table #dt [value]="proceduresResults" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
              [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadProcedures($event)"
              [totalRecords]="totalProceduresRecords" [(first)]="proceduresFirstPage">
              <ng-template pTemplate="header">
                <tr>
                  <th style="width: 22%">{{ 'Protocol number' | translate }}</th>
                  <th style="width: 22%">{{ 'Fiscal code' | translate }}</th>
                  <th style="width: 22%">{{ 'Requester' | translate }}</th>
                  <th style="width: 22%">{{ 'Name' | translate }}</th>
                  <th style="width: 22%">{{ 'Creation date' | translate }}</th>
                  <th style="width: 22%">{{ 'Update date' | translate }}</th>
                  <th style="width: 22%">{{ 'State' | translate }}</th>
                  <th style="width: 12%"></th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-procedure>
                <tr class="p-selectable-row">
                  <td>{{ procedure.protocolNumber || '-' }}</td>
                  <td>{{ procedure.requester.identifier === procedure.requester.firstName ? '-' :
                    procedure.requester.identifier }}</td>
                  <td>{{ procedure.requester.firstName === procedure.requester.lastName ? procedure.requester.firstName
                    :
                    procedure.requester.firstName + ' ' + procedure.requester.lastName }}</td>
                  <td><span class="image-text" style="vertical-align: middle">{{ procedure.name }}</span></td>
                  <td>{{ procedure.createdAt | date: 'medium' }}</td>
                  <td>{{ procedure.updatedAt | date: 'medium' }}</td>
                  <td>{{ getProcedureInstanceStatusLabel(procedure.status) | translate }}</td>
                  <td style="text-align: center">
                    <button pButton type="button" class="p-button-rounded p-button-success p-mr-2"
                      icon="pi pi-search-plus" style="margin-right: 3px"
                      (click)="router.navigate(['instances', procedure.id])"
                      pTooltip="{{ 'Open procedure instance detail' | translate }}" tooltipPosition="top"></button>
                  </td>
                </tr>
              </ng-template>
              <ng-template pTemplate="emptymessage">
                <tr>
                  <td colspan="8">{{ 'No instances were found' | translate }}</td>
                </tr>
              </ng-template>
            </p-table>

          </p-tabPanel>

          <p-tabPanel *ngIf="isTaskProcessingPermissionEnabled()">
            <ng-template pTemplate="header">
              <span class="tab-header">{{ 'Tasks results' | translate }}</span>
              <p-badge [value]="totalTasksRecords" styleClass="p-mr-2"></p-badge>
            </ng-template>
            <p-table #dt [value]="tasksResults" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
              [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadTasks($event)"
              [totalRecords]="totalTasksRecords" [(first)]="tasksFirstPage">
              <ng-template pTemplate="header">
                <tr>
                  <th style="width: 13,6%">{{ 'Protocol number' | translate }}</th>
                  <th style="width: 13,6%">{{ 'Instance' | translate }}</th>
                  <th style="width: 13,6%">{{ 'Fiscal code' | translate }}</th>
                  <th style="width: 13,6%">{{ 'Requester' | translate }}</th>
                  <th style="width: 13,6%">{{ 'Name' | translate }}</th>
                  <th style="width: 13,6%">{{ 'Creation date' | translate }}</th>
                  <th style="width: 9%">{{ 'In charge' | translate }}</th>
                  <th style="width: 9%"></th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-task>
                <tr class="p-selectable-row">
                  <td>{{ task.protocolNumber || '-' }}</td>
                  <td>{{ task.procedureInstanceName || '-' }}</td>
                  <td>{{ !task.requesterIdentifier || task.requesterIdentifier === task.requesterFirstName ? '-' :
                    task.requesterIdentifier }}</td>
                  <td>{{ task.requesterFirstName === task.requesterLastName ? task.requesterFirstName :
                    task.requesterFirstName + ' ' + task.requesterLastName }}</td>
                  <td><span class="image-text" style="vertical-align: middle">{{ task.name || '(Nessun nome)' }}</span>
                  </td>
                  <td>{{ task.createdAt | date: 'medium' }}</td>
                  <td>
                    <i style="margin-left: 3px" class="pi" [ngClass]="getIconClass(task.assignee)">
                      <span class="assignee">{{ task.assignee === 'USER' ? 'Sì' : 'No' }}</span>
                    </i>
                  </td>
                  <td style="text-align: center">
                    <button pButton type="button" class="p-button-rounded p-button-success p-mr-2"
                      icon="pi pi-search-plus" style="margin-right: 3px"
                      (click)="router.navigate(['tasks', task.id])" pTooltip="{{ 'Open task detail' | translate }}" tooltipPosition="top"></button>
                  </td>
                </tr>
              </ng-template>
              <ng-template pTemplate="emptymessage">
                <tr>
                  <td colspan="8">{{ 'No tasks were found' | translate }}</td>
                </tr>
              </ng-template>
            </p-table>

          </p-tabPanel>

          <p-tabPanel>
            <ng-template pTemplate="header">
              <span class="tab-header">{{ 'Documents results' | translate }}</span>
              <p-badge [value]="totalDocumentsRecords" styleClass="p-mr-2"></p-badge>
            </ng-template>
            <p-table #dt [value]="documentsResults" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
              [filterDelay]="0" [rows]="10" [paginator]="true" [lazy]="true" (onLazyLoad)="loadDocuments($event)"
              [totalRecords]="totalDocumentsRecords" [(first)]="documentsFirstPage">
              <ng-template pTemplate="header">
                <tr>
                  <th style="width: 22%">{{ 'First name' | translate }}</th>
                  <th style="width: 22%">{{ 'Size (MB)' | translate }}</th>
                  <th style="width: 22%">{{ 'Upload date' | translate }}</th>
                  <th style="width: 22%">{{ 'Version' | translate }}</th>
                  <th style="width: 12%"></th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-document>
                <tr class="p-selectable-row">
                  <td>
                    {{ document.name }}
                  </td>
                  <td>
                    {{ document.size > 10000 ?(document.size/1000000).toFixed(2) : '< 0.01' }} </td>
                  <td>
                    {{ document.createdAt | date: 'medium' }}
                  </td>
                  <td>
                    {{ document.version }}
                  </td>
                  <td style="text-align: center">
                    <button pButton type="button" class="p-button-rounded p-button-success" icon="pi pi-download"
                      style="margin-right: 3px" (click)="downloadDocument(document.id, document.name)"
                      pTooltip="{{ 'Download document' | translate }}" tooltipPosition="top"></button>
                    <button pButton type="button" class="p-button-rounded p-button-warning p-mr-2"
                      icon="pi pi-search-plus" style="margin-right: 3px"
                      (click)="onDocumentClick(document.id)" pTooltip="{{ 'Open procedure instance detail' | translate }}" tooltipPosition="top"></button>
                  </td>
                </tr>
              </ng-template>
              <ng-template pTemplate="emptymessage">
                <tr>
                  <td colspan="5">Non sono stati trovati documenti.</td>
                </tr>
              </ng-template>
            </p-table>


          </p-tabPanel>
        </p-tabView>

      </div>
    </div>
  </div>
</div>