Takumon/mean-blog

<div class="wrapper">
  <div class="message-area" *ngIf="!showPrograssBar && (articles$ | async)?.length === 0 && hasNoSearchCondition()">
    <div class="message-area__main">
      <div class="message-area__main__icon">
        <i class="fa fa-fw fa-2x fa-exclamation-triangle"></i>
      </div>
      <div class="message-area__main__message">
        記事がまだ登録されていません。
      </div>
    </div>
    <div class="message-area__operation">
      <div class="message-area__operation__spacer"></div>
      <button
        mat-raised-button
        color="primary"
        routerLink="/drafts/new">
          <i class="fa fa-fw fa-pencil fa-2x"></i> 記事を投稿する
      </button>
    </div>
  </div>

  <div class="message-area" *ngIf="!showPrograssBar && (articles$ | async)?.length === 0 && !hasNoSearchCondition()">
    <div class="message-area__main">
      <div class="message-area__main__icon">
        <i class="fa fa-fw fa-2x fa-exclamation-triangle"></i>
      </div>
      <div class="message-area__main__message">
        検索結果に一致する記事は見つかりませんでした。
      </div>
    </div>
  </div>


  <div class="prograss-bar" *ngIf="showPrograssBar" >
    <mat-spinner></mat-spinner>
  </div>


  <ng-container *ngIf="!showPrograssBar && (articles$ | async)?.length > 0">
    <div class="article-list">
      <div class="article-list__operation article-list__operation_top">
        <div class="article-list__operation__sort-item">
          <ng-container *ngFor="let key of sortFactorKeys">
            <button
              mat-button
              class="sort_{{sortFactors[key].value}}"
              [class.checked]="sortFactors[key].direction !== direction.NONE"
              (click)="sortAndRefresh(key)">
                {{sortFactors[key].label}}
                <i *ngIf="sortFactors[key].direction === direction.ASC" class="fa fa-fw fa-long-arrow-up"></i>
                <i *ngIf="sortFactors[key].direction === direction.DESC" class="fa fa-fw fa-long-arrow-down"></i>
            </button>
          </ng-container>
        </div>
        <div class="article-list__operation__spacer"></div>
        <mat-paginator
          class="article-list__operation__paginator"
          (page)="refreshPage($event)"
          [length]="(count$ | async)"
          [pageIndex]="pageIndex"
          [pageSize]="pageSize"
          [pageSizeOptions]="Constant.DEFAILT_PER_PAGES">
        </mat-paginator>
      </div>

      <div
        class="article-list__item"
        *ngFor="let item of (articles$ | async)">
        <app-article [item]="item">
        </app-article>
      </div>


      <div class="article-list__operation article-list__operation_bottom">
        <div class="article-list__operation__sort-item">
          <ng-container *ngFor="let key of sortFactorKeys">
            <button
              mat-button
              [class.checked]="sortFactors[key].direction !== direction.NONE"
              (click)="sortAndRefresh(key)">
                {{sortFactors[key].label}}
                <i *ngIf="sortFactors[key].direction === direction.ASC" class="fa fa-fw fa-long-arrow-up"></i>
                <i *ngIf="sortFactors[key].direction === direction.DESC" class="fa fa-fw fa-long-arrow-down"></i>
              </button>
          </ng-container>
        </div>
        <div class="article-list__operation__spacer"></div>
        <mat-paginator
          class="article-list__operation__paginator"
          (page)="refreshPage($event)"
          [length]="(count$ | async)"
          [pageIndex]="pageIndex"
          [pageSize]="pageSize"
          [pageSizeOptions]="Constant.DEFAILT_PER_PAGES">
        </mat-paginator>
      </div>
    </div>
  </ng-container>

  <div *ngIf="auth.isLogin() && isFavoriteMode()" class="search-condition">
    <app-search-condition
      *ngIf="auth.isLogin() && isFavoriteMode()"
      (changeSeaerchCondition)="onChangeSearchCondition($event)"
      ></app-search-condition>
  </div>

</div>