391 lines
12 KiB
HTML
391 lines
12 KiB
HTML
<mat-card class="example-card mat-elevation-z">
|
|
<mat-card-header>
|
|
<mat-card-title>
|
|
<span>{{ userInfo.name }}</span>
|
|
<span>{{ userInfo.grade }}</span>
|
|
</mat-card-title>
|
|
<mat-card-subtitle>{{ userInfo.deptName }}</mat-card-subtitle>
|
|
</mat-card-header>
|
|
|
|
<mat-card-content>
|
|
<div class="profile-img">
|
|
<img
|
|
ucapImage
|
|
[base]="profileImageRoot"
|
|
[path]="userInfo.profileImageFile"
|
|
[default]="'assets/images/img_nophoto_50.png'"
|
|
/>
|
|
|
|
<mat-spinner
|
|
*ngIf="
|
|
profileImageFileUploadItem &&
|
|
profileImageFileUploadItem.uploadingProgress$
|
|
"
|
|
mode="determinate"
|
|
strokeWidth="5"
|
|
diameter="84"
|
|
[value]="profileImageFileUploadItem.uploadingProgress$ | async"
|
|
class="upload-profile-image-spinner"
|
|
></mat-spinner>
|
|
|
|
<button
|
|
mat-mini-fab
|
|
class="mat-elevation-z6 upload-profile-image-btn"
|
|
*ngIf="isMe"
|
|
matTooltip="프로필 이미지 변경"
|
|
matTooltipPosition="above"
|
|
[disabled]="
|
|
profileImageFileUploadItem &&
|
|
profileImageFileUploadItem.uploadingProgress$
|
|
"
|
|
(click)="profileImageFileInput.click()"
|
|
>
|
|
<span class="mdi mdi-upload mdi-18px"></span>
|
|
</button>
|
|
<input
|
|
type="file"
|
|
#profileImageFileInput
|
|
style="display: none"
|
|
(change)="onChangeFileInput()"
|
|
/>
|
|
</div>
|
|
|
|
<div *ngIf="!isMe" class="profile-option">
|
|
<span *ngIf="isBuddy" class="btn-favorite" (click)="onToggleFavorit()">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
[ngClass]="[isFavorit ? 'on' : '']"
|
|
>
|
|
<polygon
|
|
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
|
></polygon>
|
|
</svg>
|
|
</span>
|
|
<span class="btn-groupadd">
|
|
<ng-container [ngSwitch]="isBuddy">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
class="on"
|
|
*ngSwitchCase="false"
|
|
(click)="onClickAddBuddy()"
|
|
>
|
|
<!-- not buddy -->
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="8.5" cy="7" r="4"></circle>
|
|
<line x1="20" y1="8" x2="20" y2="14"></line>
|
|
<line x1="23" y1="11" x2="17" y2="11"></line>
|
|
</svg>
|
|
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
class="on"
|
|
*ngSwitchCase="true"
|
|
(click)="onClickDelBuddy()"
|
|
>
|
|
<!-- is buddy -->
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="8.5" cy="7" r="4"></circle>
|
|
<line x1="23" y1="11" x2="17" y2="11"></line>
|
|
</svg>
|
|
</ng-container>
|
|
</span>
|
|
</div>
|
|
|
|
<ul style="padding-top: 20px;">
|
|
<li>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
|
></path>
|
|
</svg>
|
|
<!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
|
|
<input matInput [formControl]="userIntroFormControl" />
|
|
</mat-form-field> -->
|
|
<!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
|
|
{{ userInfo.workplace }}
|
|
</li>
|
|
<li>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
|
></path>
|
|
</svg>
|
|
<!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
|
|
<input matInput [formControl]="userIntroFormControl" />
|
|
</mat-form-field> -->
|
|
<!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
|
|
{{ userInfo.intro }}
|
|
</li>
|
|
<li>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
|
|
></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg>
|
|
{{ userInfo.email }}
|
|
</li>
|
|
<li>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
|
|
></path>
|
|
</svg>
|
|
{{ userInfo.lineNumber }}
|
|
</li>
|
|
<li>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
|
|
<line x1="12" y1="18" x2="12" y2="18"></line>
|
|
</svg>
|
|
{{ userInfo.hpNumber }}
|
|
</li>
|
|
<li>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
|
></path>
|
|
</svg>
|
|
<!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
|
|
<input matInput [formControl]="userIntroFormControl" />
|
|
</mat-form-field> -->
|
|
<!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
|
|
{{ userInfo.responsibilities }}
|
|
</li>
|
|
<li>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
|
></path>
|
|
</svg>
|
|
<!-- <mat-form-field ucapInlineEditInput style="width: 100%;">
|
|
<input matInput [formControl]="userIntroFormControl" />
|
|
</mat-form-field> -->
|
|
<!-- <ucap-inline-edit ([value])="(userInfo.intro)"></ucap-inline-edit> -->
|
|
{{ getWorkstatus(userInfo) }}
|
|
</li>
|
|
</ul>
|
|
</mat-card-content>
|
|
|
|
<mat-card-actions>
|
|
<div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
|
|
<button
|
|
mat-mini-fab
|
|
class="mat-elevation-z"
|
|
[matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
|
|
matTooltipPosition="above"
|
|
(click)="onClickOpenChat()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
mat-mini-fab
|
|
class="mat-elevation-z"
|
|
*ngIf="!isMe"
|
|
matTooltip="전화"
|
|
matTooltipPosition="above"
|
|
[disabled]="getDisabledBtn('LINE')"
|
|
(click)="onClickCall('LINE')"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
mat-mini-fab
|
|
class="mat-elevation-z"
|
|
*ngIf="!isMe"
|
|
matTooltip="모바일"
|
|
matTooltipPosition="above"
|
|
[disabled]="getDisabledBtn('MOBILE')"
|
|
(click)="onClickCall('MOBILE')"
|
|
>
|
|
<span class="mdi mdi-cellphone-android mdi-24px"></span>
|
|
</button>
|
|
|
|
<button
|
|
mat-mini-fab
|
|
class="mat-elevation-z"
|
|
*ngIf="!isMe"
|
|
matTooltip="SMS"
|
|
matTooltipPosition="above"
|
|
[disabled]="getDisabledBtn('SMS')"
|
|
(click)="onClickSMS()"
|
|
>
|
|
<span class="mdi mdi-email-outline mdi-24px"></span>
|
|
</button>
|
|
|
|
<button
|
|
mat-mini-fab
|
|
class="mat-elevation-z"
|
|
*ngIf="!isMe"
|
|
matTooltip="화상회의"
|
|
matTooltipPosition="above"
|
|
(click)="onClickVideoConference()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M15.6 11.6L22 7v10l-6.4-4.5v-1zM4 5h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
mat-mini-fab
|
|
class="mat-elevation-z"
|
|
*ngIf="!isMe"
|
|
matTooltip="쪽지"
|
|
matTooltipPosition="above"
|
|
(click)="onClickMessage()"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="butt"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line class="st0" x1="18" y1="2" x2="9.2" y2="10.8" />
|
|
<polygon class="st0" points="18,2 12.4,18 9.2,10.8 2,7.6 " />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</mat-card-actions>
|
|
</mat-card>
|