Takumon/mean-blog

<ng-container *ngIf="!comments">
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</ng-container>
<ng-container *ngIf="comments">
  <div class="comment-list-header">
    <div class="comment-list-header__count" >コメント{{commentService.count(comments)}}件</div>
    <div class="comment-list-header__spacer"></div>
  </div>
  <div class="comment-list__contents">

    <div
      *ngFor="let comment of (comments | excludeDeletedComment)"
      class="comment-list-content">

      <div *ngIf="auth.isLogin() && comment.isEditable;  then editComment else displayComment"></div>
      <div *ngIf="comment.replies?.length > 0" class="reply-list-content">
        <ng-container *ngFor="let reply of comment.replies">
          <div *ngIf="auth.isLogin() && reply.isEditable;  then editReply else displayReply"></div>
          <!-- リプライ更新 -->
          <ng-template #editReply>
            <app-reply-form
              [model]="replyOfForm(comment, false, reply)"
              [hasCancelBtn]="true"
              [isAuthfocuse]="true"
              (complete)="refreshComments()"
              (cancel)="reply.isEditable = false;"
              ></app-reply-form>
          </ng-template>

          <ng-template #displayReply>
            <div class="comment">
              <img
                class="comment__author-icon"
                [routerLink]="['/users', reply.user.userId, 'articles']"
                lazyLoad="/api/images/avator/{{ reply.user._id }}"
                [offset]="this.Constant.LAZY_LOAD_OFFSET"
                >
              <div class="comment__main">
                <div class="comment__metadata">
                  <div
                    class="comment__author"
                    [routerLink]="['/users', reply.user.userId, 'articles']"
                    >{{reply.user.userId}}</div>
                  <div class="comment__created">{{reply.updated | date: 'yyyy/MM/dd HH:mm' }}<span> に{{reply.created == reply.updated ? "投稿" : "更新" }}</span></div>
                </div>
                <pre [innerHTML]="reply.text" class="comment__text"></pre>

                <div class="comment__operation">
                  <ng-container *ngIf="auth.isLogin()">
                    <button
                      mat-button
                      (click)="reply.addReply = true; reply.isEditable = false;">
                      <i class="fa fa-fw fa-reply"></i><span>  返信</span>
                    </button>
                    <button
                      mat-button
                      *ngIf="auth.loginUser._id === reply.user._id"
                      (click)="reply.isEditable = true; reply.addReply = false">
                      <i class="fa fa-fw fa-pencil-square"></i><span>  編集</span>
                    </button>
                    <button
                      mat-button
                      *ngIf="auth.loginUser._id === reply.user._id"
                      (click)="deleteReply(reply._id)">
                      <i class="fa fa-fw fa-trash-o"></i><span>  削除</span>
                    </button>
                  </ng-container>
                </div>
              </div>
            </div>
            <!-- リプライに対するリプライ（実質コメントに対するリプライ）登録  -->
            <div *ngIf="auth.isLogin() && reply.addReply" class="reply">
              <app-reply-form
                [model]="replyOfForm(comment, true)"
                [hasCancelBtn]="true"
                [isAuthfocuse]="true"
                (complete)="refreshComments()"
                (cancel)="reply.addReply = false;"
                ></app-reply-form>
            </div>
          </ng-template>

        </ng-container>
      </div>

      <!-- コメント更新 -->
      <ng-template #editComment>
        <app-comment-form
          [model]="commentOfForm(comment)"
          [hasCancelBtn]="true"
          [isAuthfocuse]="true"
          (complete)="refreshComments()"
          (cancel)="comment.isEditable = false;"
          ></app-comment-form>
      </ng-template>

      <ng-template #displayComment>
        <div class="comment">
          <img
            class="comment__author-icon"
            [routerLink]="['/users', comment.user.userId, 'articles']"
            lazyLoad="/api/images/avator/{{ comment.user._id }}"
            [offset]="this.Constant.LAZY_LOAD_OFFSET"
            >
          <div class="comment__main">
            <div class="comment__metadata">
              <div
                class="comment__author"
                [routerLink]="['/users', comment.user.userId, 'articles']"
                >{{comment.user.userId}}</div>
              <div class="comment__created">{{comment.updated | date: 'yyyy/MM/dd HH:mm' }}<span> に{{comment.created == comment.updated ? "投稿" : "更新" }}</span></div>
            </div>
            <pre [innerHTML]="comment.text" class="comment__text"></pre>
            <div class="comment__operation">
              <ng-container *ngIf="auth.isLogin()">
                <button
                  mat-button
                  (click)="comment.addReply = true; comment.isEditable = false;">
                  <i class="fa fa-fw fa-reply"></i><span>  返信</span>
                </button>
                <button
                  mat-button
                  *ngIf="auth.loginUser._id === comment.user._id"
                  (click)="comment.isEditable = true; comment.addReply = false">
                  <i class="fa fa-fw fa-pencil-square"></i><span>  編集</span>
                </button>
                <button
                  mat-button
                  *ngIf="auth.loginUser._id === comment.user._id"
                  (click)="deleteComment(comment._id)">
                  <i class="fa fa-fw fa-trash-o"></i><span>  削除</span>
                </button>
              </ng-container>
            </div>
          </div>
        </div>
        <!-- リプライ登録 -->
        <div *ngIf="auth.isLogin() && comment.addReply" class="reply">
          <app-reply-form
            [model]="replyOfForm(comment, false)"
            [hasCancelBtn]="true"
            [isAuthfocuse]="true"
            (complete)="refreshComments()"
            (cancel)="comment.addReply = false;"
            ></app-reply-form>
        </div>
      </ng-template>
    </div>
  </div>

  <!-- コメント登録 -->
  <div *ngIf="auth.isLogin()" class="new-comment">
      <app-comment-form
        [model]="commentOfForm()"
        [hasCancelBtn]="false"
        [isAuthfocuse]="false"
        (complete)="refreshComments()"></app-comment-form>
  </div>
</ng-container>