212 lines
7.6 KiB
HTML
212 lines
7.6 KiB
HTML
<mat-card class="confirm-card mat-elevation-z">
|
|
<mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
|
|
<mat-card-title>{{ data.title }}</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div *ngIf="data.type === UserSelectDialogType.NewGroup">
|
|
<form name="inputForm" [formGroup]="inputForm" novalidate>
|
|
<mat-form-field
|
|
hintLabel="특수문자는 '-,_'만 사용할 수 있습니다."
|
|
style="display:block;margin-bottom:10px;"
|
|
>
|
|
<input
|
|
matInput
|
|
#input
|
|
maxlength="20"
|
|
placeholder="그룹이름"
|
|
formControlName="groupName"
|
|
/>
|
|
<mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
|
|
</mat-form-field>
|
|
</form>
|
|
</div>
|
|
<div
|
|
fxLayout="column"
|
|
fxLayout.xs="column"
|
|
fxLayoutAlign="center"
|
|
fxLayoutGap="10px"
|
|
fxLayoutGap.xs="0"
|
|
>
|
|
<div fxFlex class="container">
|
|
<mat-tab-group
|
|
mat-stretch-tabs
|
|
(selectedTabChange)="onSelectedTabChange($event)"
|
|
>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<!--<mat-icon>group</mat-icon>-->
|
|
<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"
|
|
matTooltip="그룹"
|
|
matTooltipPosition="after"
|
|
>
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
</ng-template>
|
|
<div class="mat-tab-frame">
|
|
<div>
|
|
<ucap-organization-tenant-search
|
|
[companyList]="companyList$ | async"
|
|
[companyCode]="companyCode"
|
|
(keyDownEnter)="
|
|
onKeyDownEnterOrganizationTenantSearch($event)
|
|
"
|
|
(cancel)="onClickCancel()"
|
|
></ucap-organization-tenant-search>
|
|
</div>
|
|
<div
|
|
[style.display]="isShowSearch ? 'none' : 'block'"
|
|
class="list-panel"
|
|
>
|
|
<ucap-group-expansion-panel
|
|
#groupExpansionPanel
|
|
[groupBuddyList]="groupBuddyList$ | async"
|
|
[selectedUserList]="selectedUserList"
|
|
[ignoreUserList]="data.curRoomUser"
|
|
[checkable]="true"
|
|
(checkGroup)="onCheckGroup($event)"
|
|
class="group-expansion"
|
|
>
|
|
<ucap-profile-user-list-item
|
|
*ucapGroupExpansionPanelItem="let userInfo"
|
|
[userInfo]="userInfo"
|
|
[sessionVerinfo]="sessionVerinfo"
|
|
[selectedUserList]="selectedUserList"
|
|
[isChecked]="getCheckedUser(userInfo)"
|
|
[checkable]="true"
|
|
[checkDisabled]="!getCheckableUser(userInfo)"
|
|
(checkUser)="onCheckUser($event)"
|
|
(click)="onToggleUser(userInfo)"
|
|
class="list-item-frame"
|
|
>
|
|
</ucap-profile-user-list-item>
|
|
</ucap-group-expansion-panel>
|
|
</div>
|
|
<div
|
|
[style.display]="isShowSearch ? 'block' : 'none'"
|
|
class="search-result"
|
|
>
|
|
<div style="position: relative;">
|
|
<div
|
|
*ngIf="searchProcessing"
|
|
style="position: absolute; width: 100%;"
|
|
>
|
|
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-num">
|
|
검색결과
|
|
<span class="text-accent-color"
|
|
>({{ searchUserInfos.length }}명)</span
|
|
>
|
|
</div>
|
|
<ucap-profile-user-list-item
|
|
*ngFor="let userInfo of searchUserInfos"
|
|
[userInfo]="userInfo"
|
|
[sessionVerinfo]="sessionVerinfo"
|
|
[selectedUserList]="selectedUserList"
|
|
[isChecked]="getCheckedUser(userInfo)"
|
|
[checkable]="true"
|
|
[checkDisabled]="!getCheckableUser(userInfo)"
|
|
(checkUser)="onCheckUser($event)"
|
|
(click)="onToggleUser(userInfo)"
|
|
>
|
|
</ucap-profile-user-list-item>
|
|
</div>
|
|
</div>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon matTooltip="조직도" matTooltipPosition="after"
|
|
>device_hub</mat-icon
|
|
>
|
|
</ng-template>
|
|
<div>
|
|
<app-layout-chat-left-sidenav-organization
|
|
[showTitle]="false"
|
|
[selectedUserList]="selectedUserList"
|
|
[ignoreUserList]="data.curRoomUser"
|
|
[isUserSelect]="true"
|
|
[isVisible]="currentTabIndex === 1"
|
|
(checkAllUser)="onCheckAllUser($event)"
|
|
(checkUser)="onCheckUser($event)"
|
|
(toggleUser)="onToggleUser($event)"
|
|
class="dialog-org"
|
|
>
|
|
</app-layout-chat-left-sidenav-organization>
|
|
</div>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="data.type === UserSelectDialogType.MessageForward">
|
|
<ng-template mat-tab-label>
|
|
<mat-icon matTooltip="대화방" matTooltipPosition="before"
|
|
>chat</mat-icon
|
|
>
|
|
</ng-template>
|
|
<div>
|
|
<ucap-room-list-item
|
|
*ngFor="let room of roomList"
|
|
[loginRes]="loginRes"
|
|
[roomInfo]="room"
|
|
[roomUserInfo]="getRoomUserList(room)"
|
|
[sessionVerinfo]="sessionVerinfo"
|
|
[checkable]="getCheckableRoom(room)"
|
|
[isChecked]="getCheckedRoom(room)"
|
|
[multiCheckable]="false"
|
|
(checkRoom)="onCheckRoom($event)"
|
|
(click)="onToggleRoom(room)"
|
|
>
|
|
</ucap-room-list-item>
|
|
</div>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
<div *ngIf="isShowSelectedUserList" class="list-chip">
|
|
<mat-chip-list aria-label="User selection">
|
|
<mat-chip
|
|
*ngFor="let userInfo of selectedUserList"
|
|
[selected]="getChipsRemoveYn(userInfo)"
|
|
(removed)="onClickDeleteUser(userInfo)"
|
|
>
|
|
{{ userInfo.name }}
|
|
<mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)"
|
|
>clear</mat-icon
|
|
>
|
|
</mat-chip>
|
|
</mat-chip-list>
|
|
</div>
|
|
<span *ngIf="isShowSelectedUserList"
|
|
>{{ selectedUserList.length }}명</span
|
|
>
|
|
</div>
|
|
</mat-card-content>
|
|
<mat-card-actions class="button-farm flex-row">
|
|
<button
|
|
mat-stroked-button
|
|
(click)="onClickChoice(false)"
|
|
class="mat-primary"
|
|
>
|
|
No
|
|
</button>
|
|
<button
|
|
mat-flat-button
|
|
[disabled]="getBtnValid()"
|
|
(click)="onClickChoice(true)"
|
|
class="mat-primary"
|
|
>
|
|
Yes
|
|
</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|