activities.component.html

<div style="margin-left: 150px">

  <div id="activities-breadcrumb-bar">
    <app-breadcrumbs>
      <li app-breadcrumb label="Activities" icon="cog" class="active"></li>
    </app-breadcrumbs>
  </div>

  <app-page-error [error]="pageError" *ngIf="pageError"></app-page-error>

  <div class="container-fluid activity-list-activities" *ngIf="!pageError">
    <div class="row">
      <h2 i18n="@@activities.Activities" >Activities</h2>
    </div>
    <div class="row toolbar-pf">
      <div class="col-sm-12">
        <form class="toolbar-pf-actions" (submit)="filterActivities()" #filterForm="ngForm">
          <div class="form-group toolbar-pf-filter">
            <label i18n="@@activity.Name" class="sr-only" for="filter">Name</label>
            <div class="input-group" style="width: 100%">
              <input name="name-filter" [(ngModel)]="nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
            </div>
          </div>
          <div class="form-group">
            <button class="btn btn-link" type="button" (click)="toggleSortDirection()">
              <span *ngIf="isSortAscending" class="fa fa-sort-alpha-asc"></span>
              <span *ngIf="isSortDescending" class="fa fa-sort-alpha-desc"></span>
            </button>
          </div>
          <div class="form-group">
            <a i18n="@@activities.addActivity" class="btn btn-primary" [routerLink]="[ addActivityLink ]">Add Activity</a>
          </div>
          <div class="form-group toolbar-pf-view-selector">
            <ul class="list-inline">
              <li *ngIf="isListLayout"><a (click)="setCardLayout()"><i class="fa fa-th"></i></a></li>
              <li *ngIf="isCardLayout"><a (click)="setListLayout()"><i class="fa fa-th-list"></i></a></li>
            </ul>
          </div>
        </form>
        <div class="row toolbar-pf-results">
          <div class="col-sm-12">
            <h5>{{ filteredActivities.length }} Activities found
              <a *ngIf="allActivities.length != filteredActivities.length"
                 class="clear-filters" (click)="clearFilters()">(out
              of {{ allActivities.length }} total)</a></h5>
          </div>
        </div>
      </div>
    </div>
    <!-- List of Activities -->
    <div class="row activity-list-items">
      <div class="col-md-12 empty-state" *ngIf="isLoaded('activities') && allActivities.length === 0">
        <div class="blank-slate-pf">
          <div class="blank-slate-pf-icon">
            <span class="pficon pficon pficon-add-circle-o"></span>
          </div>
          <h1 i18n="@@activities.noActivitiesFound" >No Activities Found</h1>
          <p i18n="@@activities.noActivitiesFoundPleaseClick" >
            No Activities were found - please click below to create a new Activity!
          </p>
          <div class="blank-slate-pf-main-action">
            <div class="btn-group">
              <a class="btn btn-primary btn-lg" [routerLink]="[ addActivityLink ]">Add Activity</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8 none-matched-state" *ngIf="filteredActivities.length === 0 && isFiltered()">
        <div class="alert alert-info">
          <span class="pficon pficon-info"></span>
          <strong i18n="@@activities.noActivitiesMatcheFilter">No Activities matched the filter! &nbsp;Please try changing your filter criteria..</strong>&nbsp;.
        </div>
      </div>

      <!-- The 'loading Activities' card -->
      <div class="col-md-12" *ngIf="!isLoaded('activities')">
        <div class="container-fluid container-cards-pf">
          <div class="row row-cards-pf">
            <div class="card-pf card-pf-accented">
              <div class="card-pf-heading">
                <h1  class="card-pf-title">
                  <span i18n="@@activities.loadingActivities" class="spinner spinner-xs spinner-inline">Loading Activities...</span>
                </h1>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- The list or card view -->
      <div class="col-md-12" *ngIf="isLoaded('activities')">
        <app-activities-list *ngIf="isListLayout" [activities]="filteredActivities" [selectedActivities]="selectedActivities"
                             (editActivity)="onEdit($event)" (startActivity)="onStart($event)" (deleteActivity)="onDelete($event)"
                             (activitySelected)="onSelected($event)" (activityDeselected)="onDeselected($event)"></app-activities-list>
        <app-activities-cards *ngIf="isCardLayout" [activities]="filteredActivities" [selectedActivities]="selectedActivities"
                              (editActivity)="onEdit($event)" (startActivity)="onStart($event)" (deleteActivity)="onDelete($event)"
                              (activitySelected)="onSelected($event)" (activityDeselected)="onDeselected($event)"></app-activities-cards>
      </div>

    </div>

  </div>

</div>
<app-confirm-delete #confirmDeleteDialog (deleteSelected)="onDeleteActivity()">
  <p i18n="@@activities.doYouReallyWantToDelete" >Do you really want to delete the selected Activity?</p>
</app-confirm-delete>