src/app/users/user.component.html
<ng-container *ngIf="user">
<div class="blog-title" >
<ng-container *ngIf="!editMode">
<img
*ngIf="user"
class="blog-title__background"
src="/api/images/profileBackground/{{user._id}}"
>
<h1>{{user.blogTitle ? user.blogTitle : user.userId + " のブログ"}}</h1>
</ng-container>
<ng-container *ngIf="editMode">
<div class="background-editor">
<div
class="background-editor__overlay"
mat-ripple
matRippleColor="rgba(186, 191, 206, 0.37)"
(click)="backgroundFileInput.click()">
<i class="background-editor__overlay__image fa fa-fw fa-image"></i>
<div class="background-editor__overlay__discription">タイトル背景を変更</div>
</div>
<input
hidden
#backgroundFileInput
type="file"
accept="image/*"
(change)="onChangeBackgroundFile($event)"
>
<img
*ngIf="profileBackgroundForPreview"
class="background-editor__icon"
[src]="profileBackgroundForPreview"
>
<img
*ngIf="!profileBackgroundForPreview"
class="background-editor__icon"
src="/api/images/profileBackground/{{user._id}}"
>
</div>
</ng-container>
</div>
<nav class="sub-nav-bar" [class.sub-nav-bar_edit]="editMode" mat-tab-nav-bar class="sub-nav-bar ink-bar-pink">
<a mat-tab-link
class="sub-nav-bar__link first-link"
[routerLink]="['/users', user.userId, 'articles']"
routerLinkActive #rla1="routerLinkActive"
[active]="rla1.isActive"
[routerLinkActiveOptions]="routerOptions"
>記事</a>
<a mat-tab-link
class="sub-nav-bar__link"
[routerLink]="['/users', user.userId, 'comments']"
routerLinkActive #rla2="routerLinkActive"
[active]="rla2.isActive"
[routerLinkActiveOptions]="routerOptions"
>コメント</a>
<a mat-tab-link
class="sub-nav-bar__link last-link"
[routerLink]="['/users', user.userId, 'votes']"
routerLinkActive #rla3="routerLinkActive"
[active]="rla3.isActive"
[routerLinkActiveOptions]="routerOptions"
>いいねした記事</a>
</nav>
<div class="content" [class.content_edit]="editMode">
<div class="content_profile">
<div class="profile" [class.profile_edit]="editMode">
<ng-container *ngIf="editMode">
<form
*ngIf="form"
(ngSubmit)="onSubmit()"
[formGroup]="form"
>
<div class="icon-editor">
<div
class="icon-editor__overlay"
mat-ripple
matRippleColor="rgba(186, 191, 206, 0.37)"
(click)="iconFileInput.click()">
<i class="icon-editor__overlay__image fa fa-fw fa-image"></i>
<div class="icon-editor__overlay__discription">プロフィール画像を変更</div>
</div>
<input
hidden
type="file"
#iconFileInput
accept="image/*"
(change)="onChangeAvatorFile($event)"
>
<img
*ngIf="avatorForPreview"
class="icon-editor__icon"
[src]="avatorForPreview">
<!-- 最初に表示 -->
<img
*ngIf="!avatorForPreview"
class="icon-editor__icon"
lazyLoad="/api/images/avator/{{user._id}}"
[offset]="this.Constant.LAZY_LOAD_OFFSET">
</div>
<div *ngIf="isMine" class="profile__operation">
<button
mat-button
(click)="cancelEdit()"
><i class="fa fa-fw fa-times"></i> キャンセル</button>
<button
mat-button
color="primary"
[disabled]="form.invalid"
><i class="fa fa-fw fa-pencil"></i> 更新する</button>
</div>
<div class="data">
<mat-form-field class="data__input">
<input
matInput
type="text"
id="userId"
name="userId"
formControlName="userId"
placeholder="ユーザID"
>
</mat-form-field>
</div>
<div class="data">
<mat-form-field class="data__input">
<input
matInput
type="text"
id="userName"
name="userName"
formControlName="userName"
placeholder="ユーザ名"
>
<mat-error *ngIf="messageService.hasError(userName, 'maxlength')">
{{ messageService.get('maxlength',['ユーザ名' , userName.getError('maxlength').requiredLength ]) }}
</mat-error>
<mat-error *ngIf="messageService.hasErrorWithoutDirty(userName, 'remote')">
<ng-container *ngFor="let msg of userName.getError('remote')">
{{msg}}<br>
</ng-container>
</mat-error>
</mat-form-field>
</div>
<div class="data">
<mat-form-field class="data__input">
<input
matInput
type="text"
id="email"
name="email"
formControlName="email"
placeholder="メール"
>
<mat-error *ngIf="messageService.hasError(email, 'maxlength')">
{{ messageService.get('maxlength',['メール' , email.getError('maxlength').requiredLength ]) }}
</mat-error>
<mat-error *ngIf="messageService.hasError(email, 'pattern')">
{{ messageService.get('pattern_email',['メール']) }}
</mat-error>
<mat-error *ngIf="messageService.hasErrorWithoutDirty(email, 'remote')">
<ng-container *ngFor="let msg of email.getError('remote')">
{{msg}}<br>
</ng-container>
</mat-error>
</mat-form-field>
</div>
<div class="data">
<mat-form-field class="data__input">
<input
matInput
type="text"
id="blogTitle"
name="blogTitle"
formControlName="blogTitle"
placeholder="ブログタイトル"
>
<mat-error *ngIf="messageService.hasError(blogTitle, 'maxlength')">
{{ messageService.get('maxlength',['ブログタイトル', blogTitle.getError('maxlength').requiredLength ]) }}
</mat-error>
<mat-error *ngIf="messageService.hasErrorWithoutDirty(blogTitle, 'remote')">
<ng-container *ngFor="let msg of blogTitle.getError('remote')">
{{msg}}<br>
</ng-container>
</mat-error>
</mat-form-field>
</div>
<div class="data">
<mat-form-field class="data__input">
<textarea
matInput
type="text"
id="userDescription"
class="data__input__textarea"
name="userDescription"
formControlName="userDescription"
placeholder="自己紹介"
></textarea>
<mat-error *ngIf="messageService.hasError(userDescription, 'maxlength')">
{{ messageService.get('maxlength',['自己紹介' , userDescription.getError('maxlength').requiredLength ]) }}
</mat-error>
<mat-error *ngIf="messageService.hasErrorWithoutDirty(userDescription, 'remote')">
<ng-container *ngFor="let msg of userDescription.getError('remote')">
{{msg}}<br>
</ng-container>
</mat-error>
</mat-form-field>
</div>
</form>
</ng-container>
<ng-container *ngIf="!editMode">
<img
class="profile__icon"
lazyLoad="/api/images/avator/{{user._id}}"
[offset]="this.Constant.LAZY_LOAD_OFFSET"
>
<div *ngIf="isMine() || auth.isAdmin()" class="profile__operation">
<button
mat-button
color="primary"
(click)="editUser()"
><i class="fa fa-fw fa-pencil"></i> 編集する</button>
</div>
<div class="data">
<div class="data__output">
<div class="data__output__label">ユーザID</div>
<div class="data__output__value">{{user.userId}}</div>
</div>
</div>
<div class="data">
<div class="data__output">
<div class="data__output__label">ユーザ名</div>
<div class="data__output__value">{{user.userName}}</div>
</div>
</div>
<div class="data">
<div class="data__output">
<div class="data__output__label">Mail</div>
<div class="data__output__value">{{user.email}}</div>
</div>
</div>
<div class="data">
<div class="data__output">
<div class="data__output__label">自己紹介</div>
<pre class="data__output__value_textarea">{{user.userDescription}}</pre>
</div>
</div>
</ng-container>
</div>
</div>
<div class="content__main" [class.content__main_edit]="editMode">
<router-outlet></router-outlet>
</div>
</div>
</ng-container>