471 lines
14 KiB
HTML
471 lines
14 KiB
HTML
|
<div fxFlexFill class="profile-container">
|
||
|
|
<!-- <ucap-organization-profile-01
|
||
|
|
[authRes]="authRes"
|
||
|
|
[userInfo]="userInfo"
|
||
|
|
[profileImageRoot]="versionInfo2Res?.profileRoot"
|
||
|
|
[isMe]="
|
||
|
|
!!userInfo &&
|
||
|
|
!!loginRes &&
|
||
|
|
userInfo.seq === String(loginRes.userInfo?.seq)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
</ucap-organization-profile-01> -->
|
||
|
|
<div class="ucap-organization-profile-01-container">
|
||
|
|
<!--Profile -->
|
||
|
|
<div class="profile-card-box">
|
||
|
|
<ng-container
|
||
|
|
*ngIf="
|
||
|
|
!!userInfo &&
|
||
|
|
!!loginRes &&
|
||
|
|
userInfo.seq === String(loginRes.userInfo?.seq);
|
||
|
|
then mineProfile;
|
||
|
|
else otherProfile
|
||
|
|
"
|
||
|
|
></ng-container>
|
||
|
|
|
||
|
|
<ng-template #otherProfile>
|
||
|
|
<div class="user-profile-info">
|
||
|
|
<div class="user-profile-thumb">
|
||
|
|
<span
|
||
|
|
class="presence"
|
||
|
|
[ngClass]="getPresence(PresenceType.PC)"
|
||
|
|
[matTooltip]="getPresenceMsg()"
|
||
|
|
matTooltipPosition="after"
|
||
|
|
></span>
|
||
|
|
<div class="profileImage">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/img_nophoto.svg"
|
||
|
|
style="width: 122px; height: 122px;"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="userInfo">
|
||
|
|
<div class="user-n-g">
|
||
|
|
<div class="name">{{ userInfo?.name }}</div>
|
||
|
|
<div class="grade">{{ userInfo?.grade }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="deptName">({{ userInfo?.nameEn }})</div>
|
||
|
|
|
||
|
|
<div class="nickName">
|
||
|
|
<div class="nickName-info">
|
||
|
|
<mat-form-field
|
||
|
|
class="example-full-width my-in-input"
|
||
|
|
appearance="none"
|
||
|
|
>
|
||
|
|
<mat-label></mat-label>
|
||
|
|
<input
|
||
|
|
#nicknameInput
|
||
|
|
matInput
|
||
|
|
placeholder="닉네임 미설정"
|
||
|
|
value=""
|
||
|
|
/>
|
||
|
|
</mat-form-field>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
aria-label="icon create"
|
||
|
|
class="color-white"
|
||
|
|
(click)="onProfileIntro(nicknameInput.value)"
|
||
|
|
>
|
||
|
|
<mat-icon>create</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="address-txt">
|
||
|
|
{{ userInfo?.intro }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-profile-add">
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="btn-star-add"
|
||
|
|
[ngClass]="[isFavorite ? 'on' : '']"
|
||
|
|
aria-label="Example icon-button with a heart icon"
|
||
|
|
*ngIf="!isFavorite"
|
||
|
|
(click)="onToggleFavorit()"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_favorite_w24_s.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="btn-star-add"
|
||
|
|
aria-label="Example icon-button with a heart icon"
|
||
|
|
*ngIf="!isBuddy"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_group_add_w24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-partner-set">
|
||
|
|
<button mat-icon-button aria-label="chat">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_lise_chat_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button mat-icon-button aria-label="message">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_list_message_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button mat-icon-button aria-label="mobile">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_list_mobile_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button mat-icon-button aria-label="call">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_list_call_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button mat-icon-button aria-label="vc">
|
||
|
|
<img src="../../../assets/images/ico/btn_list_vc-a24.<div fxFlexFill class="profile-container">
|
||
|
|
<div class="ucap-organization-profile-01-container">
|
||
|
|
<!--Profile -->
|
||
|
|
<div class="profile-card-box">
|
||
|
|
<div class="user-profile-info">
|
||
|
|
<!--[[ 대화상대 프로필-->
|
||
|
|
<!-- 모바일이 온라인일 경우 + mobile-ing -->
|
||
|
|
<div class="user-profile-thumb">
|
||
|
|
<span
|
||
|
|
class="presence"
|
||
|
|
[ngClass]="getPresence(PresenceType.PC)"
|
||
|
|
[matTooltip]="getPresenceMsg()"
|
||
|
|
matTooltipPosition="after"
|
||
|
|
></span>
|
||
|
|
<div class="profileImage" (click)="onProfileImageView()">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/img_nophoto.svg"
|
||
|
|
style="width: 122px; height: 122px;"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<!--[[ 내프로필-->
|
||
|
|
<div
|
||
|
|
*ngIf="
|
||
|
|
!!userInfo &&
|
||
|
|
!!loginRes &&
|
||
|
|
userInfo.seq === String(loginRes.userInfo?.seq)
|
||
|
|
"
|
||
|
|
class="btn-profile-ctrl"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
mat-mini-fab
|
||
|
|
color="primary"
|
||
|
|
class="mat-mini36-fab"
|
||
|
|
(click)="profileImageFileInput.click()"
|
||
|
|
>
|
||
|
|
<mat-icon class="material-icons-outlined">camera_alt</mat-icon>
|
||
|
|
</button>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
#profileImageFileInput
|
||
|
|
style="display: none;"
|
||
|
|
(change)="onChangeFileInput()"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<!--]]-->
|
||
|
|
</div>
|
||
|
|
<!--]]-->
|
||
|
|
<div class="userInfo">
|
||
|
|
<div class="user-n-g">
|
||
|
|
<div class="name">{{ userInfo?.name }}</div>
|
||
|
|
<div class="grade">{{ userInfo?.grade }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="deptName">({{ userInfo?.nameEn }})</div>
|
||
|
|
|
||
|
|
<ng-container
|
||
|
|
*ngIf="
|
||
|
|
!!userInfo &&
|
||
|
|
!!loginRes &&
|
||
|
|
userInfo.seq !== String(loginRes.userInfo?.seq)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<!-- + 대화상대 프로필 추가 -->
|
||
|
|
<div class="nickName">
|
||
|
|
<div class="nickName-info">
|
||
|
|
<mat-form-field
|
||
|
|
class="example-full-width my-in-input"
|
||
|
|
appearance="none"
|
||
|
|
>
|
||
|
|
<mat-label></mat-label>
|
||
|
|
<input
|
||
|
|
#nicknameInput
|
||
|
|
matInput
|
||
|
|
placeholder="닉네임 미설정"
|
||
|
|
value=""
|
||
|
|
/>
|
||
|
|
</mat-form-field>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
aria-label="icon create"
|
||
|
|
class="color-white"
|
||
|
|
(click)="onChangeNickname(nicknameInput.value)"
|
||
|
|
>
|
||
|
|
<mat-icon>create</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!--]]-->
|
||
|
|
</ng-container>
|
||
|
|
<ng-container
|
||
|
|
*ngIf="
|
||
|
|
!!userInfo &&
|
||
|
|
!!loginRes &&
|
||
|
|
userInfo.seq === String(loginRes.userInfo?.seq);
|
||
|
|
then mineProfileIntro;
|
||
|
|
else otherProfileIntro
|
||
|
|
"
|
||
|
|
>
|
||
|
|
</ng-container>
|
||
|
|
<ng-template #otherProfileIntro>
|
||
|
|
<div class="address-txt">
|
||
|
|
{{ userInfo?.intro }}
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
<ng-template #mineProfileIntro>
|
||
|
|
<div class="my-input inputtype">
|
||
|
|
<mat-form-field
|
||
|
|
class="example-full-width my-in-input"
|
||
|
|
appearance="none"
|
||
|
|
>
|
||
|
|
<mat-label></mat-label>
|
||
|
|
<input
|
||
|
|
#myProfileIntro
|
||
|
|
matInput
|
||
|
|
placeholder=""
|
||
|
|
value="{{ userInfo?.intro }}"
|
||
|
|
/>
|
||
|
|
</mat-form-field>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
aria-label="icon create"
|
||
|
|
class="color-white"
|
||
|
|
(click)="onChangeIntro(myProfileIntro.value)"
|
||
|
|
>
|
||
|
|
<mat-icon>create</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
*ngIf="
|
||
|
|
!!userInfo &&
|
||
|
|
!!loginRes &&
|
||
|
|
userInfo.seq !== String(loginRes.userInfo?.seq)
|
||
|
|
"
|
||
|
|
class="btn-profile-add"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="btn-star-add"
|
||
|
|
aria-label="Example icon-button with a heart icon"
|
||
|
|
*ngIf="isBuddy"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_favorite_w24_s.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="btn-star-add"
|
||
|
|
aria-label="Example icon-button with a heart icon"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_group_add_w24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
class="btn-star-add"
|
||
|
|
aria-label="Example icon-button with a heart icon"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_group_add_w24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
*ngIf="
|
||
|
|
!!userInfo &&
|
||
|
|
!!loginRes &&
|
||
|
|
userInfo.seq !== String(loginRes.userInfo?.seq)
|
||
|
|
"
|
||
|
|
class="btn-partner-set"
|
||
|
|
>
|
||
|
|
<button mat-icon-button aria-label="chat">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_lise_chat_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button mat-icon-button aria-label="message">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_list_message_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
aria-label="mobile"
|
||
|
|
(click)="onSendCall('MOBILE')"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_list_mobile_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
aria-label="call"
|
||
|
|
(click)="onSendCall('LINE')"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/btn_list_call_a24.svg"
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
<button mat-icon-button aria-label="vc">
|
||
|
|
<img src="../../../assets/images/ico/btn_list_vc-a24.svg" alt="" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="user-profile-info-list">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.company' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.companyName }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.department' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.deptName }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.email' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.email }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.linePhoneNumber' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.lineNumber }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.mobilePhoneNumber' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.hpNumber }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- //Profile-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
svg" alt="" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
<ng-template #mineProfile>
|
||
|
|
<div class="user-profile-info">
|
||
|
|
<div class="user-profile-thumb">
|
||
|
|
<span
|
||
|
|
class="presence"
|
||
|
|
[ngClass]="getPresence(PresenceType.PC)"
|
||
|
|
[matTooltip]="getPresenceMsg()"
|
||
|
|
matTooltipPosition="after"
|
||
|
|
>온라인</span
|
||
|
|
>
|
||
|
|
<div class="profileImage">
|
||
|
|
<img
|
||
|
|
src="../../../assets/images/ico/img_nophoto.svg"
|
||
|
|
style="width: 122px; height: 122px;"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="btn-profile-ctrl">
|
||
|
|
<button
|
||
|
|
mat-mini-fab
|
||
|
|
color="primary"
|
||
|
|
class="mat-mini36-fab"
|
||
|
|
(click)="profileImageFileInput.click()"
|
||
|
|
>
|
||
|
|
<mat-icon class="material-icons-outlined">camera_alt</mat-icon>
|
||
|
|
</button>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
#profileImageFileInput
|
||
|
|
style="display: none;"
|
||
|
|
(change)="onChangeFileInput()"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="userInfo">
|
||
|
|
<div class="user-n-g">
|
||
|
|
<div class="name">{{ userInfo?.name }}</div>
|
||
|
|
<div class="grade">{{ userInfo?.grade }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="deptName">({{ userInfo?.nameEn }})</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="my-input inputtype">
|
||
|
|
<mat-form-field
|
||
|
|
class="example-full-width my-in-input"
|
||
|
|
appearance="none"
|
||
|
|
>
|
||
|
|
<mat-label></mat-label>
|
||
|
|
<input
|
||
|
|
#myProfileIntro
|
||
|
|
matInput
|
||
|
|
placeholder=""
|
||
|
|
value="마곡 사이언스 파크 E14동 9층"
|
||
|
|
/>
|
||
|
|
</mat-form-field>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
aria-label="icon create"
|
||
|
|
class="color-white"
|
||
|
|
(click)="onProfileIntro(myProfileIntro.value)"
|
||
|
|
>
|
||
|
|
<mat-icon>create</mat-icon>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
|
||
|
|
<div class="user-profile-info-list">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.company' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.companyName }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.department' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.deptName }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.email' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.email }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.linePhoneNumber' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.lineNumber }}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span>{{ 'profile.labels.mobilePhoneNumber' | ucapI18n }}</span>
|
||
|
|
{{ userInfo?.hpNumber }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- //Profile-->
|
||
|
|
</div>
|
||
|
|
</div>
|