프로필 1차 수정본.

This commit is contained in:
leejinho 2019-12-24 14:58:43 +09:00
parent 1d28f842a0
commit b68bb1d83a
6 changed files with 280 additions and 75 deletions

View File

@ -67,7 +67,8 @@ export const decodeDataUser: ProtocolDecoder<DataUserResponse> = (
employeeType: info[28] as EmployeeType, employeeType: info[28] as EmployeeType,
workplace: info[29], workplace: info[29],
responsibilities: info[30], responsibilities: info[30],
workstatus: info[31] workstatus: info[31],
customerInfo: info[32]
}; };
} }
return decodeProtocolMessage(message, { return decodeProtocolMessage(message, {

View File

@ -64,8 +64,10 @@ export interface UserInfoSS {
/** 사업장 */ /** 사업장 */
workplace?: string; workplace?: string;
/** 담당업무 */ /** 담당업무(SC직무) */
responsibilities?: string; responsibilities?: string;
/** 업무 상태 */ /** 업무 상태 */
workstatus?: string; workstatus?: string;
/** 거래처 정보 */
customerInfo?: string;
} }

View File

@ -1,7 +1,7 @@
<div class="bubble-main"> <div class="bubble-main">
<span class="content" [innerHTML]="content | linefeedtohtml | linky"></span> <span class="content" [innerHTML]="content | linefeedtohtml | linky"></span>
<span> <span>
{{ moment(message.sendDate).toDate() | date: 'short' }} {{ message.sendDate | ucapDate: 'YYYY.MM.DD a hh:mm' }}
</span> </span>
</div> </div>
<div *ngIf="detailButteonShow" class="btn-box"> <div *ngIf="detailButteonShow" class="btn-box">

View File

@ -2,56 +2,107 @@
<mat-card-header> <mat-card-header>
<div class="profile-img"> <div class="profile-img">
<div class="profile-img-mask"> <div class="profile-img-mask">
<img ucapImage [base]="profileImageRoot" [path]="userInfo.profileImageFile" <img
[default]="'assets/images/img_nophoto_50.png'" /> ucapImage
[base]="profileImageRoot"
[path]="userInfo.profileImageFile"
[default]="'assets/images/img_nophoto_50.png'"
/>
</div> </div>
<button mat-mini-fab class="mat-elevation-z6 btn-upload-profile-image" *ngIf="isMe && editableProfileImage" <button
matTooltip="프로필 이미지 변경" matTooltipPosition="above" [disabled]=" mat-mini-fab
class="mat-elevation-z6 btn-upload-profile-image"
*ngIf="isMe && editableProfileImage"
matTooltip="프로필 이미지 변경"
matTooltipPosition="above"
[disabled]="
profileImageFileUploadItem && profileImageFileUploadItem &&
profileImageFileUploadItem.uploadingProgress$ profileImageFileUploadItem.uploadingProgress$
" (click)="profileImageFileInput.click()"> "
(click)="profileImageFileInput.click()"
>
<span class="mdi mdi-upload mdi-18px"></span> <span class="mdi mdi-upload mdi-18px"></span>
</button> </button>
<span class="work-status text-accent-darkest"> <span
{{ getWorkstatus(userInfo) }} 휴가중 *ngIf="getWorkstatus(userInfo).length > 0"
class="work-status text-accent-darkest"
>
{{ getWorkstatus(userInfo) }}
</span> </span>
<mat-spinner *ngIf=" <mat-spinner
*ngIf="
profileImageFileUploadItem && profileImageFileUploadItem &&
profileImageFileUploadItem.uploadingProgress$ profileImageFileUploadItem.uploadingProgress$
" mode="determinate" strokeWidth="5" diameter="84" "
[value]="profileImageFileUploadItem.uploadingProgress$ | async" class="upload-profile-image-spinner"></mat-spinner> mode="determinate"
strokeWidth="5"
<input type="file" #profileImageFileInput style="display: none" (change)="onChangeFileInput()" /> diameter="84"
[value]="profileImageFileUploadItem.uploadingProgress$ | async"
class="upload-profile-image-spinner"
></mat-spinner>
<input
type="file"
#profileImageFileInput
style="display: none"
(change)="onChangeFileInput()"
/>
</div> </div>
<mat-card-title> <mat-card-title>
<span class="name">{{ userInfo | ucapTranslate: 'name' }}</span> <span class="name">{{ userInfo | ucapTranslate: 'name' }}</span>
<span class="number">(A123456)</span> <span class="number">{{ userInfo.employeeNum }}</span>
</mat-card-title> </mat-card-title>
<mat-card-subtitle> <mat-card-subtitle>
<span class="deptName">{{ userInfo | ucapTranslate: 'deptName' }}</span> <span class="deptName">{{ userInfo | ucapTranslate: 'deptName' }}</span>
<span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span> <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
</mat-card-subtitle> </mat-card-subtitle>
<div class="intro">{{ userInfo.intro }}가나다라라라마마마바사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하가나다라마사아자차카타파하</div> <div class="intro">
{{ userInfo.intro }}
</div>
<div *ngIf="!isMe" class="profile-option"> <div *ngIf="!isMe" class="profile-option">
<span *ngIf="isBuddy" class="btn-favorite" (click)="onToggleFavorit()"> <span *ngIf="isBuddy" class="btn-favorite">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" [ngClass]="[isFavorit ? 'on' : '']"> xmlns="http://www.w3.org/2000/svg"
<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"> width="20"
</polygon> height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="butt"
stroke-linejoin="round"
[ngClass]="[isFavorit ? 'on' : '']"
(click)="onToggleFavorit()"
matTooltip="즐겨찾기"
>
<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> </svg>
</span> </span>
<span class="btn-groupadd"> <span class="btn-groupadd">
<ng-container [ngSwitch]="isBuddy"> <ng-container [ngSwitch]="isBuddy">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" <svg
stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="on" xmlns="http://www.w3.org/2000/svg"
*ngSwitchCase="false" (click)="onClickAddBuddy()"> 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()"
matTooltip="동료추가"
>
<!-- not buddy --> <!-- not buddy -->
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <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> <circle cx="8.5" cy="7" r="4"></circle>
@ -59,9 +110,21 @@
<line x1="23" y1="11" x2="17" y2="11"></line> <line x1="23" y1="11" x2="17" y2="11"></line>
</svg> </svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" <svg
stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="on" xmlns="http://www.w3.org/2000/svg"
*ngSwitchCase="true" (click)="onClickDelBuddy()"> 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()"
matTooltip="동료삭제"
>
<!-- is buddy --> <!-- is buddy -->
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <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> <circle cx="8.5" cy="7" r="4"></circle>
@ -70,21 +133,23 @@
</ng-container> </ng-container>
</span> </span>
</div> </div>
<div *ngIf="isMe" class="profile-edit"> <!-- <div *ngIf="isMe" class="profile-edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" matTooltip="인트로 수정">
<path d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z" /></svg> <path
</div> d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
/>
</svg>
</div> -->
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<ul class="userInfo-list"> <ul class="userInfo-list">
<li>
<dt class="division">사업장</dt>
<dd>{{ userInfo.workplace }}</dd>
</li>
<li> <li>
<dt class="division">담당업무/근무지</dt> <dt class="division">담당업무/근무지</dt>
<dd>{{ userInfo.responsibilities }}</dd> <dd>
{{ userInfo.responsibilities | ucapStringEmptycheck }} /
{{ userInfo.workplace | ucapStringEmptycheck }}
</dd>
</li> </li>
<li> <li>
<dt class="division">사원직무/거래처</dt> <dt class="division">사원직무/거래처</dt>
@ -92,34 +157,66 @@
</li> </li>
<li> <li>
<dt class="division">이메일</dt> <dt class="division">이메일</dt>
<dd>{{ userInfo.email }}</dd> <dd>{{ userInfo.email | ucapStringEmptycheck }}</dd>
</li>
<li> <li>
<dt class="division">사무실</dt> <dt class="division">사무실</dt>
<dd>{{ userInfo.lineNumber }}1234567890123456789012345678901234567890</dd> <dd>
<button mat-mini-fab class="mat-elevation-z userInfo-call" *ngIf="!isMe" matTooltip="전화" matTooltipPosition="above" {{ userInfo.lineNumber | ucapStringFormatterPhone | ucapStringEmptycheck }}
[disabled]="getDisabledBtn('LINE')" (click)="onClickCall('LINE')"> </dd>
<svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <button
<path d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04 mat-mini-fab
class="mat-elevation-z userInfo-call"
*ngIf="!isMe"
matTooltip="내선전화"
matTooltipPosition="above"
[disabled]="getDisabledBtn('LINE')"
(click)="onClickCall('LINE')"
>
<svg
id="레이어_1"
data-name="레이어 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0 C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06 c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06
c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35 c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35
c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57 c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57
c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z" /> c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z"
/>
</svg> </svg>
</button> </button>
</li> </li>
<li> <li>
<dt class="division">핸드폰</dt> <dt class="division">핸드폰</dt>
<dd>{{ userInfo.hpNumber }}</dd> <dd>{{ userInfo.hpNumber | ucapStringFormatterPhone | ucapStringEmptycheck }}</dd>
<button mat-mini-fab class="mat-elevation-z userInfo-call" *ngIf="!isMe" matTooltip="모바일" matTooltipPosition="above" <button
[disabled]="getDisabledBtn('MOBILE')" (click)="onClickCall('MOBILE')"> mat-mini-fab
<svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> class="mat-elevation-z userInfo-call"
<path d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04 *ngIf="!isMe"
matTooltip="모바일"
matTooltipPosition="above"
[disabled]="getDisabledBtn('MOBILE')"
(click)="onClickCall('MOBILE')"
>
<svg
id="레이어_1"
data-name="레이어 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0 C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06 c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06
c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35 c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35
c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57 c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57
c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z" /> c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z"
/>
</svg> </svg>
</button> </button>
</li> </li>
@ -128,13 +225,44 @@
<mat-card-actions> <mat-card-actions>
<div fxFlex fxLayout="row" fxLayoutAlign="space-around center"> <div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
<div class="button-text-item"> <div class="button-text-item">
<button mat-mini-fab class="mat-elevation-z bg-accent-darkest" [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'" matTooltipPosition="above" <button
(click)="onClickOpenChat()"> mat-mini-fab
<svg id="레이어_1" data-name="레이어 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> class="mat-elevation-z bg-accent-darkest"
<path d="M26.57,14a9.05,9.05,0,0,0-12.82,0,9.07,9.07,0,0,0-.57,12.2,3.57,3.57,0,0,1-1.46,1.61.84.84,0,0,0-.46.89.86.86,0,0,0,.71.71,4.34,4.34,0,0,0,.71.05,5.32,5.32,0,0,0,3.19-1.06A9.07,9.07,0,0,0,26.57,14Z" transform="translate(-11.09 -11.32)"/> [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
<path d="M20.16,20.53a.14.14,0,0,1-.14-.14.14.14,0,0,1,.14-.14.14.14,0,0,1,.13.14A.13.13,0,0,1,20.16,20.53Z" transform="translate(-11.09 -11.32)"/><path class="cls-1" d="M20.16,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z" transform="translate(-11.09 -11.32)"/> matTooltipPosition="above"
<circle cx="12.35" cy="9.07" r="0.14"/><path class="cls-1" d="M23.44,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z" transform="translate(-11.09 -11.32)"/> (click)="onClickOpenChat()"
<circle cx="5.78" cy="9.07" r="0.14"/><path class="cls-1" d="M16.88,19.75a.64.64,0,1,0,.63.64.64.64,0,0,0-.63-.64Z" transform="translate(-11.09 -11.32)"/> >
<svg
id="레이어_1"
data-name="레이어 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M26.57,14a9.05,9.05,0,0,0-12.82,0,9.07,9.07,0,0,0-.57,12.2,3.57,3.57,0,0,1-1.46,1.61.84.84,0,0,0-.46.89.86.86,0,0,0,.71.71,4.34,4.34,0,0,0,.71.05,5.32,5.32,0,0,0,3.19-1.06A9.07,9.07,0,0,0,26.57,14Z"
transform="translate(-11.09 -11.32)"
/>
<path
d="M20.16,20.53a.14.14,0,0,1-.14-.14.14.14,0,0,1,.14-.14.14.14,0,0,1,.13.14A.13.13,0,0,1,20.16,20.53Z"
transform="translate(-11.09 -11.32)"
/>
<path
class="cls-1"
d="M20.16,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z"
transform="translate(-11.09 -11.32)"
/>
<circle cx="12.35" cy="9.07" r="0.14" />
<path
class="cls-1"
d="M23.44,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z"
transform="translate(-11.09 -11.32)"
/>
<circle cx="5.78" cy="9.07" r="0.14" />
<path
class="cls-1"
d="M16.88,19.75a.64.64,0,1,0,.63.64.64.64,0,0,0-.63-.64Z"
transform="translate(-11.09 -11.32)"
/>
</svg> </svg>
</button> </button>
<span *ngIf="!isMe" class="button-text">대화</span> <span *ngIf="!isMe" class="button-text">대화</span>
@ -142,30 +270,54 @@
</div> </div>
<div class="button-text-item" *ngIf="!isMe"> <div class="button-text-item" *ngIf="!isMe">
<button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="SMS" matTooltipPosition="above" <button
[disabled]="getDisabledBtn('SMS')" (click)="onClickSMS()"> mat-mini-fab
class="mat-elevation-z"
*ngIf="!isMe"
matTooltip="SMS"
matTooltipPosition="above"
[disabled]="getDisabledBtn('SMS')"
(click)="onClickSMS()"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path <path
d="M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2 0v14h12V2H4zm6 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" /> d="M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2 0v14h12V2H4zm6 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
/>
</svg> </svg>
</button> </button>
<span class="button-text">SMS</span> <span class="button-text">SMS</span>
</div> </div>
<div class="button-text-item" *ngIf="!isMe"> <div class="button-text-item" *ngIf="!isMe">
<button mat-mini-fab class="mat-elevation-z bg-accent-darkest" *ngIf="!isMe" matTooltip="화상회의" matTooltipPosition="above" <button
(click)="onClickVideoConference()"> mat-mini-fab
class="mat-elevation-z bg-accent-darkest"
*ngIf="!isMe"
matTooltip="화상회의"
matTooltipPosition="above"
(click)="onClickVideoConference()"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M16 7l4-4v14l-4-4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3zm-8 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg> <path
d="M16 7l4-4v14l-4-4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3zm-8 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
/>
</svg>
</button> </button>
<span class="button-text">화상</span> <span class="button-text">화상</span>
</div> </div>
<div class="button-text-item" *ngIf="!isMe"> <div class="button-text-item" *ngIf="!isMe">
<button mat-mini-fab class="mat-elevation-z bg-accent-darkest" *ngIf="!isMe" matTooltip="쪽지" matTooltipPosition="above" <button
(click)="onClickMessage()"> mat-mini-fab
class="mat-elevation-z bg-accent-darkest"
*ngIf="!isMe"
matTooltip="쪽지"
matTooltipPosition="above"
(click)="onClickMessage()"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M0 0l20 10L0 20V0zm0 8v4l10-2L0 8z" /></svg> <path d="M0 0l20 10L0 20V0zm0 8v4l10-2L0 8z" />
</svg>
</button> </button>
<span class="button-text">쪽지</span> <span class="button-text">쪽지</span>
</div> </div>

View File

@ -0,0 +1,44 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'ucapStringEmptycheck' })
export class StringEmptyCheckPipe implements PipeTransform {
transform(value: string): string {
return value.trim().length > 0 ? value.trim() : '-';
}
}
@Pipe({ name: 'ucapStringFormatterPhone' })
export class StringFormatterPhonePipe implements PipeTransform {
transform(value: string, hidden?: boolean): string {
const num = value.trim().replace(/[-, ]/g, '');
let formatNum = '';
if (num.length === 0) {
return num;
}
if (num.length === 11) {
if (!!hidden && hidden) {
formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-****-$3');
} else {
formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
}
} else if (num.length === 8) {
formatNum = num.replace(/(\d{4})(\d{4})/, '$1-$2');
} else {
if (num.indexOf('02') === 0) {
if (!!hidden && hidden) {
formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-****-$3');
} else {
formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');
}
} else {
if (!!hidden && hidden) {
formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-***-$3');
} else {
formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
}
}
}
return formatNum;
}
}

View File

@ -67,6 +67,10 @@ import { TranslatePipe } from './pipes/translate.pipe';
import { DatePipe } from './pipes/date.pipe'; import { DatePipe } from './pipes/date.pipe';
import { MatTabsModule } from '@angular/material'; import { MatTabsModule } from '@angular/material';
import {
StringEmptyCheckPipe,
StringFormatterPhonePipe
} from './pipes/ucapString.pipe';
const COMPONENTS = [ const COMPONENTS = [
FileUploadQueueComponent, FileUploadQueueComponent,
@ -102,7 +106,9 @@ const PIPES = [
SecondsToMinutesPipe, SecondsToMinutesPipe,
LinkyPipe, LinkyPipe,
TranslatePipe, TranslatePipe,
DatePipe DatePipe,
StringEmptyCheckPipe,
StringFormatterPhonePipe
]; ];
const SERVICES = [ const SERVICES = [
BottomSheetService, BottomSheetService,